feat: display post meta (close #32)(#52)

BREAKING CHANGE: Turn default frontmatter key to tags instead of tag/tags
vuepress · Jan 21, 2020 · a689ada · a689ada
1 parent 50abb08
commit a689ada
Show file tree

Hide file tree

Showing 28 changed files with 225 additions and 37 deletions.
diff --git a/components/PostMeta.vue b/components/PostMeta.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="post-meta">
+    <div v-if="author" class="post-meta-author">
+      <NavigationIcon /> {{ author }}
+      <span v-if="location"> &nbsp; in {{ location }}</span>
+    </div>
+    <div v-if="date" class="post-meta-date">
+      <ClockIcon /> {{ resolvedDate }}
+    </div>
+    <ul v-if="tags" class="post-meta-tags">
+      <PostTag v-for="tag in resolvedTags" :key="tag" :tag="tag" />
+    </ul>
+  </div>
+</template>
+
+<script>
+import dayjs from 'dayjs'
+import { NavigationIcon, ClockIcon } from 'vue-feather-icons'
+import PostTag from './PostTag.vue'
+
+export default {
+  name: 'PostMeta',
+  components: { NavigationIcon, ClockIcon, PostTag },
+  props: {
+    tags: {
+      type: [Array, String],
+    },
+    author: {
+      type: String,
+    },
+    date: {
+      type: String,
+    },
+    location: {
+      type: String,
+    },
+  },
+  computed: {
+    resolvedDate() {
+      return dayjs(this.date).format(
+        this.$themeConfig.dateFormat || 'ddd MMM DD YYYY'
+      )
+    },
+    resolvedTags() {
+      if (!this.tags || Array.isArray(this.tags)) return this.tags
+      return [this.tags]
+    },
+  },
+}
+</script>
+
+<style lang="stylus">
+.post-meta
+  &-tags
+    display flex
+    flex-wrap wrap
+    list-style none
+    overflow hidden
+    padding 0
+    margin 20px 0
+
+    > li
+      margin-bottom 10px
+
+  > div
+    display inline-flex
+    line-height 12px
+    font-size 12px
+    margin-right 20px
+
+  svg
+    margin-right 5px
+    width 14px
+    height 14px
+</style>
diff --git a/components/PostTag.vue b/components/PostTag.vue
@@ -0,0 +1,65 @@
+<template>
+  <li class="post-tag">
+    <router-link :to="'/tag/' + tag"> {{ tag }} </router-link>
+  </li>
+</template>
+
+<script>
+export default {
+  name: 'PostTag',
+  props: {
+    tag: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style scoped lang="stylus">
+.post-tag
+  background-color $postTagBgColor
+  border-radius 3px 0 0 3px
+  height 26px
+  padding 0 20px 0 23px
+  position relative
+  cursor pointer
+
+  &:not(:last-child)
+    margin-right 10px
+
+  a
+    color $postTagColor
+    text-decoration none
+    transition color 0.2s
+
+  &:before
+    position absolute
+    left 10px
+    top 10px
+    background #fff
+    border-radius 50%
+    box-shadow inset 0 1px rgba(0, 0, 0, 0.25)
+    content ''
+    height 6px
+    width 6px
+
+  &:after
+    position absolute
+    right 0
+    top 0
+    background $bgColor
+    border-bottom 13px solid transparent
+    border-left 10px solid $postTagBgColor
+    border-top 13px solid transparent
+    content ''
+
+  &:hover
+    background-color $accentColor
+
+    &:after
+      border-left-color $accentColor
+
+    a
+      color #fff
+</style>
diff --git a/docs/README.md b/docs/README.md
@@ -164,7 +164,7 @@ You can set you own tags in front matter, and they'll automatically be classifie
 ---
 title: Hello World
 date: 2020-01-11
-tag: 
+tags: 
   - JavaScript
   - Vue
 author: Billyyyyy3320

diff --git a/docs/assets/author.png b/docs/assets/author.png
diff --git a/docs/assets/content-author.png b/docs/assets/content-author.png
diff --git a/docs/assets/content-date.png b/docs/assets/content-date.png
diff --git a/docs/assets/content-location.png b/docs/assets/content-location.png
diff --git a/docs/assets/content-tags.png b/docs/assets/content-tags.png
diff --git a/docs/assets/date.png b/docs/assets/date.png
diff --git a/docs/assets/location.png b/docs/assets/location.png
diff --git a/docs/assets/tags.png b/docs/assets/tags.png
diff --git a/docs/config/front-matter.md b/docs/config/front-matter.md
@@ -16,13 +16,16 @@ title: Hello World
 ---
 ```
 
-## tag/tags
+## tags
 
 - Type: `string|string[]`
 - Default: `undefined`
 - Required: `false`
 
-The key to classifier pages.
+The key to classifier pages and will also be displayed in the post:
+
+<img src="../assets/tags.png" width="350px"/>
+<img src="../assets/content-tags.png" width="350px"/>
 
 e.g.
 
@@ -44,7 +47,8 @@ Our recommended format is `YYYY-MM-DD`, but it actually accepts multi formats. V
 
 Date for the post. This will be used for permalink, sorting and displayed in the layout:
 
-![Date](../assets/date.png)
+<img src="../assets/date.png" width="350px"/>
+<img src="../assets/content-date.png" width="350px"/>
 
 e.g.
 ```markdown
@@ -59,9 +63,10 @@ date: 2016-10-20
 - Default: `undefined`
 - Required: `false`
 
-Author for the post. This will be displayed in the layout:
+Author for the post. This will be displayed in the post:
 
-![Author](../assets/author.png)
+<img src="../assets/author.png" width="350px"/>
+<img src="../assets/content-author.png" width="350px"/>
 
 e.g.
 
@@ -77,9 +82,10 @@ author: ULIVZ
 - Default: `undefined`
 - Required: `false`
 
-Location for the post. This will be displayed in the layout:
+Location for the post. This will be displayed in the post:
 
-![Location](../assets/location.png)
+<img src="../assets/location.png" width="350px"/>
+<img src="../assets/content-location.png" width="350px"/>
 
 e.g.
 
@@ -95,7 +101,7 @@ location: Hangzhou
 - Default: `undefined`
 - Required: `false`
 
-Summary for the post. This will be displayed in the layout:
+Summary for the post. This will be displayed in the post:
 
 ![Summary](../assets/summary.png)
 

diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress-2.md b/example/_posts/2018-11-7-frontmatter-in-vuepress-2.md
@@ -1,7 +1,7 @@
 ---
 title: frontmatter in vuepress 2
 date: 2018-11-7
-tag: 
+tags: 
   - frontmatter
   - vuepress
 author: ULIVZ

diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress-3.md b/example/_posts/2018-11-7-frontmatter-in-vuepress-3.md
@@ -1,7 +1,7 @@
 ---
 title: frontmatter in vuepress 3
 date: 2018-11-7
-tag: 
+tags: 
   - frontmatter
   - vuepress
 author: ULIVZ

diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress.md b/example/_posts/2018-11-7-frontmatter-in-vuepress.md
@@ -1,7 +1,7 @@
 ---
 title: frontmatter in vuepress 1
 date: 2018-11-7
-tag: 
+tags: 
   - frontmatter
   - vuepress
 author: ULIVZ

diff --git a/example/_posts/2019-2-26-markdown-slot-2.md b/example/_posts/2019-2-26-markdown-slot-2.md
@@ -1,7 +1,7 @@
 ---
 title: Markdown Slot 2
 date: 2019-2-26
-tag: 
+tags: 
   - markdown
   - vuepress
 author: ULIVZ

diff --git a/example/_posts/2019-2-26-markdown-slot-3.md b/example/_posts/2019-2-26-markdown-slot-3.md
@@ -1,7 +1,7 @@
 ---
 title: Markdown Slot 3
 date: 2019-2-26
-tag: 
+tags: 
   - markdown
   - vuepress
 author: ULIVZ

diff --git a/example/_posts/2019-2-26-markdown-slot-4.md b/example/_posts/2019-2-26-markdown-slot-4.md
@@ -1,7 +1,7 @@
 ---
 title: Markdown Slot 4
 date: 2019-2-26
-tag: 
+tags: 
   - markdown
   - vuepress
 author: ULIVZ

diff --git a/example/_posts/2019-2-26-markdown-slot.md b/example/_posts/2019-2-26-markdown-slot.md
@@ -1,7 +1,7 @@
 ---
 title: Markdown Slot 1
 date: 2019-2-26
-tag: 
+tags: 
   - markdown
   - vuepress
 author: ULIVZ

diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme-2.md b/example/_posts/2019-5-6-writing-a-vuepress-theme-2.md
@@ -1,7 +1,7 @@
 ---
 title: writing a vuepress theme 2
 date: 2019-5-6
-tag: 
+tags: 
   - theme
   - blog
   - vuepress

diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme-3.md b/example/_posts/2019-5-6-writing-a-vuepress-theme-3.md
@@ -1,7 +1,7 @@
 ---
 title: writing a vuepress theme 3
 date: 2019-5-6
-tag: 
+tags: 
   - theme
   - blog
   - vuepress

diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme-4.md b/example/_posts/2019-5-6-writing-a-vuepress-theme-4.md
@@ -1,7 +1,7 @@
 ---
 title: writing a vuepress theme 4
 date: 2019-5-6
-tag: 
+tags: 
   - theme
   - blog
   - vuepress

diff --git a/example/_posts/2019-5-6-writing-a-vuepress-theme.md b/example/_posts/2019-5-6-writing-a-vuepress-theme.md
@@ -1,7 +1,7 @@
 ---
 title: Writing a vuepress theme 1
 date: 2019-5-6
-tag: 
+tags: 
   - theme
   - blog
   - vuepress