Skip to content
This repository has been archived by the owner on May 13, 2024. It is now read-only.

Commit

Permalink
feat: display post meta (close #32)(#52)
Browse files Browse the repository at this point in the history
BREAKING CHANGE: Turn default frontmatter key to tags instead of tag/tags
  • Loading branch information
billyyyyy3320 committed Jan 21, 2020
1 parent 50abb08 commit a689ada
Show file tree
Hide file tree
Showing 28 changed files with 225 additions and 37 deletions.
75 changes: 75 additions & 0 deletions components/PostMeta.vue
Original file line number Diff line number Diff line change
@@ -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>
65 changes: 65 additions & 0 deletions components/PostTag.vue
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Binary file modified docs/assets/author.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/content-author.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/content-date.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/content-location.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/content-tags.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/assets/date.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docs/assets/location.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/assets/tags.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 14 additions & 8 deletions docs/config/front-matter.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand All @@ -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
Expand All @@ -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.

Expand All @@ -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.

Expand All @@ -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)

Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2018-11-7-frontmatter-in-vuepress-2.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: frontmatter in vuepress 2
date: 2018-11-7
tag:
tags:
- frontmatter
- vuepress
author: ULIVZ
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2018-11-7-frontmatter-in-vuepress-3.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: frontmatter in vuepress 3
date: 2018-11-7
tag:
tags:
- frontmatter
- vuepress
author: ULIVZ
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2018-11-7-frontmatter-in-vuepress.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: frontmatter in vuepress 1
date: 2018-11-7
tag:
tags:
- frontmatter
- vuepress
author: ULIVZ
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-2-26-markdown-slot-2.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Markdown Slot 2
date: 2019-2-26
tag:
tags:
- markdown
- vuepress
author: ULIVZ
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-2-26-markdown-slot-3.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Markdown Slot 3
date: 2019-2-26
tag:
tags:
- markdown
- vuepress
author: ULIVZ
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-2-26-markdown-slot-4.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Markdown Slot 4
date: 2019-2-26
tag:
tags:
- markdown
- vuepress
author: ULIVZ
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-2-26-markdown-slot.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Markdown Slot 1
date: 2019-2-26
tag:
tags:
- markdown
- vuepress
author: ULIVZ
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-5-6-writing-a-vuepress-theme-2.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: writing a vuepress theme 2
date: 2019-5-6
tag:
tags:
- theme
- blog
- vuepress
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-5-6-writing-a-vuepress-theme-3.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: writing a vuepress theme 3
date: 2019-5-6
tag:
tags:
- theme
- blog
- vuepress
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-5-6-writing-a-vuepress-theme-4.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: writing a vuepress theme 4
date: 2019-5-6
tag:
tags:
- theme
- blog
- vuepress
Expand Down
2 changes: 1 addition & 1 deletion example/_posts/2019-5-6-writing-a-vuepress-theme.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Writing a vuepress theme 1
date: 2019-5-6
tag:
tags:
- theme
- blog
- vuepress
Expand Down
Loading

0 comments on commit a689ada

Please sign in to comment.