From fe18e105e099c9055c7e0b22c676ba32a1f0e794 Mon Sep 17 00:00:00 2001
From: Tommy Vedvik <tommyvedvik@gmail.com>
Date: Wed, 27 Feb 2019 14:05:53 +0100
Subject: [PATCH] Added tag support

---
 content/posts/markdown-test-file.md    |  1 +
 content/posts/say-hello-to-gridsome.md |  1 +
 gridsome.config.js                     | 10 ++++-
 src/assets/style/_typography.scss      |  4 --
 src/assets/style/_utils.scss           |  7 ++++
 src/assets/style/index.scss            |  1 +
 src/components/PostCard.vue            | 24 +++++++++--
 src/layouts/Default.vue                |  6 ++-
 src/pages/Index.vue                    |  2 +-
 src/templates/Tag.vue                  | 55 ++++++++++++++++++++++++++
 10 files changed, 101 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/style/_utils.scss
 create mode 100644 src/templates/Tag.vue

diff --git a/content/posts/markdown-test-file.md b/content/posts/markdown-test-file.md
index f9e7169..4821423 100644
--- a/content/posts/markdown-test-file.md
+++ b/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."
 ---
 
diff --git a/content/posts/say-hello-to-gridsome.md b/content/posts/say-hello-to-gridsome.md
index 8095c23..c50039c 100644
--- a/content/posts/say-hello-to-gridsome.md
+++ b/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!"
 ---
 
diff --git a/gridsome.config.js b/gridsome.config.js
index 796bd5d..794622a 100644
--- a/gridsome.config.js
+++ b/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
+          }
+        }
       }
     }
   ]
diff --git a/src/assets/style/_typography.scss b/src/assets/style/_typography.scss
index 8b73c6c..b29a8b4 100644
--- a/src/assets/style/_typography.scss
+++ b/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 {
diff --git a/src/assets/style/_utils.scss b/src/assets/style/_utils.scss
new file mode 100644
index 0000000..e06499e
--- /dev/null
+++ b/src/assets/style/_utils.scss
@@ -0,0 +1,7 @@
+.text-center {
+	text-align: center;
+}
+
+.space-bottom {
+	margin-bottom: var(--space);
+}
\ No newline at end of file
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
index b2d6961..60f7495 100644
--- a/src/assets/style/index.scss
+++ b/src/assets/style/index.scss
@@ -4,3 +4,4 @@
 @import 'base';
 @import 'code';
 @import 'content-box';
+@import 'utils';
\ No newline at end of file
diff --git a/src/components/PostCard.vue b/src/components/PostCard.vue
index bdd91ec..ad8eeb8 100644
--- a/src/components/PostCard.vue
+++ b/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);
diff --git a/src/layouts/Default.vue b/src/layouts/Default.vue
index 0b71283..436c6cb 100644
--- a/src/layouts/Default.vue
+++ b/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
   }
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 9077e83..3e96a8e 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <Layout>
+  <Layout :show-logo="false">
     
     <Author :site-title="$static.metaData.siteName" />
     
diff --git a/src/templates/Tag.vue b/src/templates/Tag.vue
new file mode 100644
index 0000000..6f23a1f
--- /dev/null
+++ b/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>
+