feat: generate content title from frontmatter (#51)

BREAKING CHANGE: Require title in front matter

Author: billyyyyy3320

components/Toc.vue

@@ -142,7 +142,7 @@ export default {
   max-height 100vh
   max-width 220px
   overflow-y auto
-  padding-top $navbarHeight
+  padding-top 5rem
   top 0
   right 10px
   box-sizing border-box

docs/README.md

@@ -133,16 +133,15 @@ From now on, you can run `yarn dev` or `npm run dev` and head `localhost:8080` t
 
 The `_posts` folder is where your blog posts live. You can simply write blog posts in Markdown.
 
-All blog post files can begin with front matter which is typically used to set a layout or other meta data:
+All blog post files can begin with front matter. Only `title` is required, but we recommend you define all frontmatter variables as below. They'll be used to set the corresponding layout. Check out [frontmatter](config/front-matter) for more details. Here's an example:
 ```md
 ---
+title: Hello World
 date: 2020-01-11
 author: Billyyyyy3320
 location: Taipei  
 ---
 
-# Hello World
-
 > This is official blog theme.
 
 My content.
@@ -161,8 +160,9 @@ It helps you organize and will be use as permalink by default. For example:
 By default, Navigate to `/tag/`, you'll see the tag entry page.
 You can set you own tags in front matter, and they'll automatically be classified:
 
-```yaml{3-5}
+```yaml{4-6}
 ---
+title: Hello World
 date: 2020-01-11
 tag: 
   - JavaScript

docs/config/front-matter.md

@@ -1,9 +1,26 @@
 # Front Matter
 
+## title
+
+- Type: `string`
+- Default: `undefined`
+- Required: `true`
+
+The title for the page and content.
+
+e.g.
+
+```markdown
+---
+title: Hello World
+---
+```
+
 ## tag/tags
 
 - Type: `string|string[]`
 - Default: `undefined`
+- Required: `false`
 
 The key to classifier pages.
 
@@ -18,7 +35,14 @@ tags:
 ```
 
 ## date
-Date for the post. This will be used for permalink and displayed in the layout:
+
+- Type: `YYYY-MM-DD`
+- Default: `undefined`
+- Required: `false`
+
+Our recommended format is `YYYY-MM-DD`, but it actually accepts multi formats. VuePress is using `js-yaml` which follows standard yaml types, so you can find all available formats [here](https://yaml.org/type/timestamp.html).
+
+Date for the post. This will be used for permalink, sorting and displayed in the layout:
 
 ![Date](../assets/date.png)
 
@@ -31,6 +55,10 @@ date: 2016-10-20
 
 ## author
 
+- Type: `string`
+- Default: `undefined`
+- Required: `false`
+
 Author for the post. This will be displayed in the layout:
 
 ![Author](../assets/author.png)
@@ -45,6 +73,10 @@ author: ULIVZ
 
 ## location
 
+- Type: `string`
+- Default: `undefined`
+- Required: `false`
+
 Location for the post. This will be displayed in the layout:
 
 ![Location](../assets/location.png)
@@ -59,6 +91,10 @@ location: Hangzhou
 
 ## summary
 
+- Type: `string`
+- Default: `undefined`
+- Required: `false`
+
 Summary for the post. This will be displayed in the layout:
 
 ![Summary](../assets/summary.png)

docs/config/palette.md

@@ -22,7 +22,6 @@ $footerColor = #828282
 $newsletterBgColor = #f8f8f8
 
 // layout
-$navbarHeight = 5rem
 $contentWidth = 740px
 
 // responsive breakpoints

example/.vuepress/styles/palette.styl

@@ -18,7 +18,6 @@
 // $newsletterBgColor = #f8f8f8
 
 // layout
-// $navbarHeight = 5rem
 // $contentWidth = 740px
 
 // responsive breakpoints

example/_posts/2018-11-7-frontmatter-in-vuepress-2.md

@@ -1,4 +1,5 @@
 ---
+title: frontmatter in vuepress 2
 date: 2018-11-7
 tag: 
   - frontmatter
@@ -7,8 +8,6 @@ author: ULIVZ
 location: Hangzhou  
 ---
 
-# Front Matter in VuePress
-
 Any markdown file that contains a YAML front matter block will be processed by [gray-matter](https://github.com/jonschlinkert/gray-matter). The front matter must be the first thing in the markdown file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:
 
 ```markdown

example/_posts/2018-11-7-frontmatter-in-vuepress-3.md

@@ -1,4 +1,5 @@
 ---
+title: frontmatter in vuepress 3
 date: 2018-11-7
 tag: 
   - frontmatter
@@ -7,8 +8,6 @@ author: ULIVZ
 location: Hangzhou  
 ---
 
-# Front Matter in VuePress
-
 Any markdown file that contains a YAML front matter block will be processed by [gray-matter](https://github.com/jonschlinkert/gray-matter). The front matter must be the first thing in the markdown file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:
 
 ```markdown

example/_posts/2018-11-7-frontmatter-in-vuepress.md

@@ -1,4 +1,5 @@
 ---
+title: frontmatter in vuepress 1
 date: 2018-11-7
 tag: 
   - frontmatter
@@ -7,8 +8,6 @@ author: ULIVZ
 location: Hangzhou  
 ---
 
-# Front Matter in VuePress
-
 Any markdown file that contains a YAML front matter block will be processed by [gray-matter](https://github.com/jonschlinkert/gray-matter). The front matter must be the first thing in the markdown file and must take the form of valid YAML set between triple-dashed lines. Here is a basic example:
 
 ```markdown

example/_posts/2019-2-26-markdown-slot-2.md

@@ -1,4 +1,5 @@
 ---
+title: Markdown Slot 2
 date: 2019-2-26
 tag: 
   - markdown
@@ -7,8 +8,6 @@ author: ULIVZ
 location: Hangzhou  
 ---
 
-# Markdown Slot
-
 VuePress implements a content distribution API for Markdown. With this feature, you can split your document into multiple fragments to facilitate flexible composition in the layout component.
 
 ## Why do I need Markdown Slot?

example/_posts/2019-2-26-markdown-slot-3.md

@@ -1,4 +1,5 @@
 ---
+title: Markdown Slot 3
 date: 2019-2-26
 tag: 
   - markdown
@@ -7,8 +8,6 @@ author: ULIVZ
 location: Hangzhou  
 ---
 
-# Markdown Slot
-
 VuePress implements a content distribution API for Markdown. With this feature, you can split your document into multiple fragments to facilitate flexible composition in the layout component.
 
 ## Why do I need Markdown Slot?