snipette-gridsome/src/templates/GhostTag.vue

98 lines
2.2 KiB
Vue

<template>
<Layout>
<header class="site-header outer no-image">
<div class="inner">
<Navbar :logo="true"/>
<div class="site-header-content">
<h1 class="site-title">{{ capitalize }}</h1>
<h2 class="site-description">A collection of {{ $page.tag.belongsTo.edges.length }} posts</h2>
</div>
</div>
</header>
<main id="site-main" class="site-main outer">
<div class="inner">
<div class="post-feed">
<Card v-for="{ node } in $page.tag.belongsTo.edges" :key="node.id" :cardData="node"/>
</div>
</div>
</main>
</Layout>
</template>
<script>
import Admin from "../../data/admin.yml";
import Navbar from "../components/Navbar";
import Card from "../components/Card";
import capitalizeFilter from "../filters/capitalize";
import capitalize from '../filters/capitalize';
import changeUrls from '../filters/changeUrls';
export default {
metaInfo() {
return {
title: this.capitalize,
bodyAttrs: {
class: `tag-template tag-${this.$page.tag.title}`
}
};
},
components: {
Navbar,
Card
},
filters: {
changeUrls: changeUrls
},
computed: {
Admin() {
return Admin;
},
postClass() {
let classes = ["post-full", "post"];
if (!this.$page.post.image) {
classes.push("no-image");
}
const postTagClass = "tag-" + this.$page.post.tags.title;
classes.push(postTagClass);
return classes;
},
capitalize() {
return capitalizeFilter(this.$page.tag.title.replace('-', ' '))
}
}
};
</script>
<page-query>
query Tags ($path: String!) {
tag: ghostTag (path: $path) {
title: name
belongsTo {
edges {
node {
...on GhostPost {
title
description: excerpt
date: published_at (format: "D. MMMM YYYY")
path
slug
id
coverImage: feature_image
authors {
name
url
slug
image: profile_image
}
tags {
name
}
}
}
}
}
}
}
</page-query>