<template> <div> <div class="block" v-if="page"> <article class="container container--slim"> <h1>{{ page.title }}</h1> <div v-html="renderContent(page.content)" class="post-styles"></div> </article> <Newsletter /> </div> <div v-if="!page" class="not-found"> <h2>Stránka nebyla nalezena.</h2><br> <Button link="/" arrow="left">Zpět na články</Button> </div> </div> </template> <script> import Newsletter from '@/components/newsletter/Newsletter.vue'; export default { async fetch({ store, params, redirect }) { await store.dispatch('loadPosts'); await store.dispatch('loadTags'); await store.dispatch('loadPages'); }, components: { Newsletter, }, head () { const title = this.page ? this.page.title : 'Stránka nebyla nalezena'; return { title: title, meta: [ { hid: 'og:title', name: 'og:title', content: title }, ], }; }, computed: { page() { return this.$store.getters.getPageBySlug(this.$route.params.slug); }, }, methods: { renderContent(content) { content = content.replace('.jpg"', '@2x.jpg"'); content = content.replace('http://admin.piratipracuji.cz/uploads/', 'https://res.cloudinary.com/pirati/image/fetch/w_1600,q_auto,f_auto/https://admin.piratipracuji.cz/uploads/'); return content; }, } }; </script> <style lang="scss" scoped> .block { padding-top: 6.4%; @media (max-width: 550px) { padding-top: 12.4%; padding-bottom: 13.8%; } article { width: 100%; } } </style> <style lang="scss"> @import '@/assets/scss/post-styles.scss'; </style>