Added tag support

content/posts/markdown-test-file.md

@@ -1,6 +1,7 @@
 ---
 title: Markdown test files
 date: 2019-02-06
+tags: ['Markdown']
 excerpt: "Markdown is intended to be as easy-to-read and easy-to-write as is feasible. Readability, however, is emphasized above all else. A Markdown-formatted document should be publishable as-is, as plain text, without looking like it's been marked up with tags or formatting instructions."
 ---
 

content/posts/say-hello-to-gridsome.md

@@ -1,6 +1,7 @@
 ---
 title: Say hello to Gridsome 🎉
 date: 2019-02-07
+tags: ['Markdown', 'Releases']
 excerpt: "A new static site generator baby is born. It's highly inspired by Gatsby.js (React based) but built on top of Vue.js. We have been working on it for a year and will have a beta ready soon. You can expect this baby to grow up fast!"
 ---
 

gridsome.config.js

@@ -24,7 +24,15 @@ module.exports = {
       options: {
         path: 'content/posts/*.md',
         typeName: 'Post',
-        route: '/:slug'
+        route: '/:slug',
+        refs: {
+          // Creates tags from 'tags' in Markdown files
+          tags: {
+            typeName: 'Tag',
+            route: '/tag/:id',
+            create: true
+          }
+        }
       }
     }
   ]

src/assets/style/_typography.scss

@@ -19,10 +19,6 @@ h1, h2, h3, h4, h5 {
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   line-height: 1.15;
-
-  &:first-child {
-  	margin-top: 0;
-  }
 }
 
 h1 {

src/assets/style/_utils.scss

@@ -0,0 +1,7 @@
+.text-center {
+	text-align: center;
+}
+
+.space-bottom {
+	margin-bottom: var(--space);
+}

src/assets/style/index.scss

@@ -4,3 +4,4 @@
 @import 'base';
 @import 'code';
 @import 'content-box';
+@import 'utils';

src/components/PostCard.vue

@@ -1,8 +1,11 @@
 <template>
 	<div class="post-card content-box">
-		<h2 v-html="post.title" />
-		<p v-html="post.excerpt" />
-    <PostMeta :post="post" />
+    <div class="post-card__header">
+      <!-- Add anything here. Like a featured image -->
+    </div>
+		<h2 class="post-card__title" v-html="post.title" />
+		<p class="post-card__excerpt" v-html="post.excerpt" />
+    <PostMeta class="post-card__meta" :post="post" />
 		<g-link class="post-card__link" :to="post.path">Link</g-link>
 	</div>
 </template>
@@ -22,6 +25,21 @@ export default {
   margin-bottom: var(--space);
   position: relative;
 
+  &__header {
+    width: calc(100% + var(--space) * 2);
+    margin-left: calc(var(--space) * -1);
+    margin-top: calc(var(--space) * -1);
+    margin-bottom: calc(var(--space) / 2);
+    
+    &:empty {
+      display: none;
+    }
+  }
+
+  &__title {
+    margin-top: 0;
+  }
+
   &:hover {
   	transform: translateY(-5px);
   	box-shadow: 1px 10px 30px 0 rgba(0,0,0,.1);

src/layouts/Default.vue

@@ -3,7 +3,8 @@
 
     <header class="header">
       <div class="header__left">
-        <g-link v-if="$route.params.slug" class="logo" to="/">
+
+        <g-link v-if="showLogo" class="logo" to="/">
           <span class="logo__text">
             {{ $static.metaData.siteName }}
           </span>
@@ -38,6 +39,9 @@ query {
 import ToggleTheme from '~/components/ToggleTheme.vue'
 
 export default {
+  props: {
+    showLogo: { default: true }
+  },
   components: {
     ToggleTheme
   }

src/pages/Index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Layout>
+  <Layout :show-logo="false">
     
     <Author :site-title="$static.metaData.siteName" />
     

src/templates/Tag.vue

@@ -0,0 +1,55 @@
+<template>
+  <Layout>
+    
+    <!-- This template shows a template archive -->
+
+    <h1 class="tag-title text-center space-bottom">Tag: {{ $page.tag.title }}</h1>
+
+    <div class="posts">
+      <PostCard v-for="edge in $page.tag.belongsTo.edges" :key="edge.node.id" :post="edge.node"/>
+    </div>
+
+  </Layout>
+</template>
+
+<page-query>
+query Tag ($id: String!) {
+  tag (id: $id) {
+    title
+    belongsTo {
+      edges {
+        node {
+          ...on Post {
+            title
+            path
+            date (format: "D. MMMM YYYY")
+            timeToRead
+            excerpt
+            content
+          }
+        }
+      }
+    }
+  }
+}
+</page-query>
+
+<script>
+import Author from '~/components/Author.vue'
+import PostCard from '~/components/PostCard.vue'
+
+export default {
+  components: {
+    Author,
+    PostCard
+  },
+  metaInfo: {
+    title: 'Hello, world!'
+  }
+}
+</script>
+
+<style lang="scss">
+
+</style>
+