feat: Tags(#9) (#10)

- blog post tags in frontmatter
- filter PostList by tag prop
- tags in themeConfig
- global TagList and DateTime components
- default tag list shows all configured tag links
- handle tag casing inconsistency

Author: petedavisdev

example/.vuepress/themeConfig.js

@@ -8,6 +8,11 @@ module.exports = {
       link: 'https://github.com/petedavisdev/vuepress-theme-base/',
     },
   ],
+  tags: [
+    { text: 'A tag', link: '/tag/a-tag/' },
+    { text: 'Another tag', link: '/tag/another-tag/' },
+    { text: 'Taggy McTagface', link: '/tag/taggy-mctagface/' },
+  ],
   collections: [
     {
       directory: 'blog',

example/blog.md

@@ -1,3 +1,5 @@
 # Blog
 
+Tags:
+<TagList />
 <PostList directory="blog" />

example/blog/a-newer-blog-post.md

@@ -3,6 +3,10 @@ title: A newer blog post
 date: 2020-06-17 19:57:13 UTC
 image: https://picsum.photos/400/400
 summary: This is my latest blog post about stuff
+tags:
+  - A tag
+  - Another tag
+  - An unlinked tag
 ---
 
 Lorem ipsum

example/blog/first-blog-post.md

@@ -3,6 +3,8 @@ title: First blog post
 date: 2020-04-15 17:57:13 UTC
 image: https://picsum.photos/450/450
 summary: This is my first blog post about stuff
+tags:
+  - A tag
 ---
 
 Lorem ipsum

example/tag/a-tag.md

@@ -0,0 +1,3 @@
+# Blog posts tagged with "A tag"
+
+<PostList directory="blog" tag="A tag" />

example/tag/another-tag.md

@@ -0,0 +1,3 @@
+# Blog posts tagged with "another tag"
+
+<PostList directory="blog" tag="another tag" />

example/tag/taggy-mctagface.md

@@ -0,0 +1,3 @@
+# Blog posts tagged with "taggy mctagface"
+
+<PostList directory="blog" tag="taggy mctagface" />

theme/components/PostListItem.vue

@@ -1,16 +1,15 @@
 <template>
   <article class="PostListItem">
     <h2 class="PostListItem-heading">
-      <RouterLink class="PostListItem-link" :to="post.path">
-        {{ post.title }}
-      </RouterLink>
+      <RouterLink class="PostListItem-link" :to="post.path">{{
+        post.title
+      }}</RouterLink>
     </h2>
     <p v-if="post.frontmatter.summary" class="PostListItem-summary">
       {{ post.frontmatter.summary }}
     </p>
-    <time class="PostListItem-date" :datetime="post.frontmatter.date">
-      {{ formattedDate }}
-    </time>
+    <DateTime :date="post.frontmatter.date" />
+    <TagList :tags="post.frontmatter.tags || null" />
     <img
       v-if="post.frontmatter.image"
       class="PostListItem-image"
@@ -38,5 +37,15 @@ export default {
       })
     },
   },
+  methods: {
+    getTagLink(tag) {
+      if (this.$site.themeConfig.tags) {
+        const { link } =
+          this.$site.themeConfig.tags.find(({ text }) => text === tag) || {}
+
+        return link
+      }
+    },
+  },
 }
 </script>

theme/global-components/DateTime.vue

@@ -0,0 +1,33 @@
+<template>
+  <time class="DateTime" :datetime="datetime">{{ formattedDate }}</time>
+</template>
+
+<script>
+export default {
+  props: {
+    date: String,
+  },
+  computed: {
+    datetime() {
+      return new Date(this.date)
+    },
+    formattedDate() {
+      return this.datetime.toLocaleString('en-GB', {
+        month: 'long',
+        year: 'numeric',
+        day: 'numeric',
+      })
+    },
+  },
+  methods: {
+    getTagLink(tag) {
+      if (this.$site.themeConfig.tags) {
+        const { link } =
+          this.$site.themeConfig.tags.find(({ text }) => text === tag) || {}
+
+        return link
+      }
+    },
+  },
+}
+</script>

theme/global-components/PostList.vue

@@ -1,6 +1,7 @@
 <template>
   <section class="PostList">
     <PostListItem v-for="post in posts" :key="post.id" :post="post" />
+    <p v-if="!posts.length">No posts found</p>
   </section>
 </template>
 
@@ -13,11 +14,13 @@ export default {
   },
   props: {
     directory: String,
+    tag: String,
   },
   computed: {
     posts() {
-      const filteredPosts = this.filterByDirectory(this.$site.pages)
-      const sortedPosts = this.sortByDate(filteredPosts)
+      const directoryPosts = this.filterByDirectory(this.$site.pages)
+      const tagPosts = this.filterByTag(directoryPosts)
+      const sortedPosts = this.sortByDateDesc(tagPosts)
       return sortedPosts
     },
   },
@@ -37,15 +40,32 @@ export default {
 
       return posts
     },
-    sortByDate(posts) {
-      return posts.reverse((a, b) => {
+    filterByTag(posts) {
+      const tag = this.tag && this.tag.toLowerCase()
+
+      if (tag) {
+        return posts.filter((post) => {
+          const postTags =
+            post.frontmatter.tags &&
+            post.frontmatter.tags.map((tag) => tag.toLowerCase())
+
+          if (postTags && postTags.includes(tag)) {
+            return posts
+          }
+        })
+      }
+
+      return posts
+    },
+    sortByDateDesc(posts) {
+      return posts.sort((a, b) => {
         const x = a.frontmatter.date.toLowerCase()
         const y = b.frontmatter.date.toLowerCase()
         if (x < y) {
-          return -1
+          return 1
         }
         if (x > y) {
-          return 1
+          return -1
         }
         return 0
       })