snipette-gridsome/src/templates/GhostPost.vue

<template>
  <Layout>
    <header class="site-header outer">
      <div class="inner">
        <Navbar :logo="true"/>
      </div>
    </header>

    <!-- <FloatingHeader/> -->

    <main id="site-main" class="site-main outer">
      <div class="inner">
        <article :class="postClass">
          <header class="post-full-header">
            <section class="post-full-meta">
              <time class="post-full-meta-date" :datetime="$page.post.date | moment('d, MMMM YYYY')">{{ $page.post.date | moment("d, MMMM YYYY") }}</time>
              <span class="date-divider">/</span>
              <a
                :href="$page.post.tags[0].path"
              >{{ $page.post.tags[0].title.replace('-', ' ') }}</a>
            </section>
            <h1 class="post-full-title">{{ $page.post.title }}</h1>
          </header>

          <figure v-if="$page.post.image" class="post-full-image">
            <g-image :src="$page.post.image|changeUrls" :alt="$page.post.title"/>
          </figure>

          <section class="post-full-content">
            <div class="post-content" v-html="fullPost"></div>
          </section>

          <!-- Email subscribe form at the bottom of the page -->
          <section v-if="Admin.site.subscribers" class="subscribe-form">
            <h3 class="subscribe-form-title">Subscribe to {{ Admin.site.title }}</h3>
            <p>Get the latest posts delivered right to your inbox</p>
            <subscribeForm placeholder="youremail@example.com"/>
          </section>

          <bylineMultiple :author="$page.post.authors" v-if="$page.post.authors.length > 1"/>
          <bylineSingle :author="$page.post.authors" v-else/>

          <!-- NOTE Comment section -->
          <!-- <section class="post-full-comments">
            If you want to embed comments, this is a good place to do it!
          </section>-->
        </article>
      </div>
    </main>

    <PreviousNext :id="$page.post.id" :tag="$page.post.tags[0]" :posts="$page.post.tags[0].belongsTo.edges"/>
  </Layout>
</template>

<script>
import Admin from "../../data/admin.yml";
import Navbar from "../components/Navbar";
import FloatingHeader from "../components/FloatingHeader";
import subscribeForm from "../components/subscribeForm";
import bylineMultiple from "../components/bylineMultiple";
import bylineSingle from "../components/bylineSingle";
import PreviousNext from "../components/PreviousNext";
import changeUrls from '../filters/changeUrls';

export default {
  metaInfo() {
    return {
      title: this.$page.post.title,
      bodyAttrs: {
        class: `post-template tag-${this.$page.post.tags[0].title}`
      }
    };
  },
  components: {
    Navbar,
    FloatingHeader,
    subscribeForm,
    bylineMultiple,
    bylineSingle,
    PreviousNext
  },
  filters: {
    changeUrls: changeUrls
  },
  computed: {
    Admin() {
      return Admin;
    },
    fullPost() {
      return changeUrls(this.$page.post.content);
    },
    postClass() {
      let classes = ["post-full", "post"];
      if (!this.$page.post.image) {
        classes.push("no-image");
      }
      const postTagClass = "tag-" + this.$page.post.tags[0].title;
      classes.push(postTagClass);
      return classes;
    }
  }
};
</script>
<page-query>
  query Post ($path: String!) {
    post: ghostPost (path: $path) {
      id
      title
      path
      date: published_at (format: "D. MMMM YYYY")
      tags {
        id
        slug
        path
        title: name
        belongsTo {
          edges {
            node {
              ... on GhostPost {
                id
                title
                path
              }
            }
          }
        }
      }
      authors {
        name
        id
        slug
        image: profile_image
      }
      description: excerpt
      content: html
      image: feature_image
    }
  }
</page-query>