Add tags links

Author: tomtev

content/posts/a-post-with-a-cover.md

@@ -2,7 +2,7 @@
 title: A post with a cover image
 date: 2019-01-07
 published: true
-tags: ['Markdown']
+tags: ['Markdown', 'Cover Image']
 series: false
 cover_image: ./images/alexandr-podvalny-220262-unsplash.jpg
 canonical_url: false

content/posts/markdown-test-file.md

@@ -2,7 +2,7 @@
 title: Markdown test files
 date: 2019-02-06
 published: true
-tags: ['Markdown']
+tags: ['Markdown','Test files']
 canonical_url: false
 description: "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."
 ---

src/components/PostCard.vue

@@ -6,17 +6,23 @@
     <div class="post-card__content">
       <h2 class="post-card__title" v-html="post.title" />
       <p class="post-card__description" v-html="post.description" />
+      
       <PostMeta class="post-card__meta" :post="post" />
+      <PostTags class="post-card__tags" :post="post" />
+
       <g-link class="post-card__link" :to="post.path">Link</g-link>
     </div>
   </div>
 </template>
 
 <script>
 import PostMeta from '~/components/PostMeta'
+import PostTags from '~/components/PostTags'
+
 export default {
   components: {
-    PostMeta
+    PostMeta,
+    PostTags
   },
   props: ['post'],
 }
@@ -53,6 +59,11 @@ export default {
     box-shadow: 1px 10px 30px 0 rgba(0,0,0,.1);
   }
 
+  &__tags {
+    z-index: 1;
+    position: relative;
+  }
+
   &__link {
     position: absolute;
     top: 0;

src/components/PostTags.vue

@@ -0,0 +1,29 @@
+<template>
+   <div class="post-tags">
+   		<g-link class="post-tags__link" v-for="tag in post.tags" :key="tag.id" :to="tag.path">
+   			<span>#</span> {{ tag.title }}
+   		</g-link>
+    </div>
+</template>
+
+<script>
+export default {
+  props: ['post']
+}
+</script>
+
+<style lang="scss">
+.post-tags {
+  margin: 1em 0 0;
+
+  &__link {
+  	margin-right: 1em;
+  	font-size: .8rem;
+  	color: currentColor;
+  	text-decoration: none;
+  	background-color: var(--bg-color);
+  	padding: .5em;
+  	border-radius: var(--radius);
+  }
+}
+</style>

src/pages/Index.vue

@@ -27,10 +27,20 @@ query {
         id
         title
         path
+        tags {
+          id
+          title
+          path
+        }
         date (format: "D. MMMM YYYY")
         timeToRead
         description
         coverImage (width: 770, height: 380, blur: 10)
+        ...on Post {
+            id
+            title
+            path
+        }
       }
     }
   }

src/templates/Post.vue

@@ -6,15 +6,18 @@
       </h1>
 
       <PostMeta :post="$page.post" />
+
     </div>
 
     <div class="post content-box">
       <div class="post__header">
         <g-image v-if="$page.post.coverImage" :src="$page.post.coverImage" />
       </div>
+
       <div class="post__content" v-html="$page.post.content" />
+
       <div class="post__footer">
-        <!-- Add anything here -->
+        <PostTags :post="$page.post" />
       </div>
     </div>
 
@@ -28,12 +31,14 @@
 
 <script>
 import PostMeta from '~/components/PostMeta'
+import PostTags from '~/components/PostTags'
 import Author from '~/components/Author.vue'
 
 export default {
   components: {
     Author,
-    PostMeta
+    PostMeta,
+    PostTags
   }
 }
 </script>
@@ -45,6 +50,11 @@ query Post ($path: String!) {
     path
     date (format: "D. MMMM YYYY")
     timeToRead
+    tags {
+      id
+      title
+      path
+    }
     description
     content
     coverImage (width: 860, blur: 10)