_slug.vue

<template>
  <div>
    <div class="block" v-if="post">
      <div class="block__header">
        <div class="block__header-date">
          {{ post.publishedAt | date('mlong Y')}}
        </div>
        <div class="block__header-tags">
          <span v-for="tag in post.tags.map((tag) => tag.title)" :key="tag">
            #{{ tag }}
          </span>
        </div>
      </div>
      <div class="block__detail" data-sticky-container>
        <div class="block__detail-aside">
          <div class="info" data-sticky data-sticky-for="1110">
            <div class="info__header">
                <Button arrow="left" link="/">Zpět</Button>
                <div class="like-h4">Sdílej článek</div>
            </div>
            <ShareButtons :title="post.title" />
          </div>
        </div>
        <article class="block__detail-content container container--slim">
          
          <div v-if="!post.description" v-html="post.content" class="post-styles post-styles--with-aside"></div>

          <div v-if="post.description" class="post-styles post-styles--with-aside">
            <h1>{{ post.title }}</h1>
            <Picture v-if="post.thumbnail" :src="`${post.thumbnail}`" :alt="post.title" />
            <div class='postcontent' v-html="post.content"></div>
          </div>
          
        </article>
        <QuickBrowser :post="post" />
      </div>
    </div>
    <div v-if="!post" class="not-found">
      <h2>Článek nebyl nalezen.</h2><br>
      <Button link="/" arrow="left">Zpět na články</Button>
    </div>
  </div>
</template>

<script>
import QuickBrowser from '@/components/quickbrowser/Quickbrowser.vue';
import ShareButtons from '@/components/sharebuttons/Sharebuttons.vue';
import Sticky from 'sticky-js';

export default {
  components: {
    QuickBrowser,
    ShareButtons,
  },
  head () {
    const ogImage = (this.post && this.post.thumbnail) ? { hid: 'og:image', property: 'og:image', content: `${this.post.thumbnail}` } : {};
    const title = this.post ? this.post.title : 'Článek nebyl nalezen';
    return {
      title: title,
      meta: [
        { hid: 'description', property: 'description', content: this.post ? this.post.description : '' },
        { hid: 'og:description', property: 'og:description', content: this.post ? this.post.description : '' },
        { hid: 'og:title', property: 'og:title', content: title },
        { hid: 'og:url', property: 'og:url', content: 'https://www.piratipracuji.cz'+this.$nuxt.$route.path },
        ogImage,
      ],
    };
  },
  data() {
    return {
      sticky: null
    };
  },
  async fetch({ store, params }) {
    await store.dispatch('loadPosts');
    await store.dispatch('loadTags');
    await store.dispatch('loadPages');
  },
  computed: {
    post() {
      const post = this.$store.getters.getPostBySlug(this.$route.params.slug);

      return post;
    },
  },
  created() {
    this.sticky = process.browser && window.outerWidth > 1100 ? new Sticky('[data-sticky]') : null;
  },
  destroyed() {
    if (this.sticky) {
      this.sticky.destroy();
    }
  },
  methods: {
    /*replaceImages(body) {
      const cloudinaryUrl = 'https://res.cloudinary.com/davidvesely/image/fetch/w_800,q_auto/https://pirati-kronika.netlify.com';
      return body.replace('/images/uploads/', `${cloudinaryUrl}/images/uploads/`);;
    },*/
  },
};
</script>

<style lang="scss" scoped>
  .block {
    width: 100%;

    &__header {
      width: 100%;
      height: 60px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      font-size: 16px;

      border-bottom: 1px solid $color-black;

      @media (max-width: 550px) {
          height: 50px;
      }

      &-date {
        text-transform: capitalize;
      }

      &-tags {
        span {
          margin-right: 10px;

          &:last-of-type {
            margin-right: 0;
          }
        }
      }
    }

    &__detail {
      position: relative;

      padding-top: 6.4%;
      padding-bottom: 7.8%;

      @media (max-width: 1110px) {
        display: flex;

        flex-direction: column;
      }

      @media (max-width: 550px) {
        padding-top: 12.4%;
        padding-bottom: 13.8%;
      }

      &-aside {
        min-width: 115px;
        height: 100%;

        position: absolute;
        left: 0;
        right: 0;

        @media (max-width: 1110px) {
          min-width: 0;
          width: 95%;
          max-width: 700px;

          position: static;

          margin: 0 auto;
        }

        @media (max-width: 700px) {
          width: 100%;
        }

        .info {
          display: inline-flex;
          flex-direction: column;

          padding-top: 10px;

          @media (max-width: 1110px) {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;

            padding-top: 0;
            margin-bottom: 40px;
          }

          @media (max-width: 630px) {
            flex-direction: column;
            justify-content: center;

            margin-bottom: 0px;
          }

          &__header {
            @media (max-width: 1110px) {
              width: 37%;

              display: flex;
              align-items: center;
            }

            @media (max-width: 630px) {
              width: 100%;
              justify-content: center;
            }

            .like-h4 {
              margin-top: 45px;

              @media (max-width: 1110px) {
                margin-top: 0;
                margin-left: 20px;
              }

              @media (max-width: 630px) {
                margin-left: 50px;
              }

              @media (max-width: 440px) {
                margin-left: 30px;
              }
            }
          }

          .sharebuttons {
            @media (max-width: 1110px) {
              width: 63%;

              display: flex;
              align-items: center;
              justify-content: space-between;
            }

            @media (max-width: 630px) {
              width: 100%;

              justify-content: center;

              margin-top: 20px;
            }

            @media (max-width: 440px) {
              max-width: 280px;

              flex-wrap: wrap;
              justify-content: space-between;

              padding-left: 40px;
            }
          }
        }
      }

      &-content {
        @media (max-width: 630px) {
            width: 100%;
            max-width: 100%;
            margin-top: 40px;
        }

        @media (max-width: 440px) {
            margin-top: 15px;
        }

      }
    }
  }
</style>

<style lang="scss">
@import '@/assets/scss/post-styles.scss';
</style>