feat: generate content title from frontmatter (#51)

BREAKING CHANGE: Require title in front matter
vuepress · Jan 21, 2020 · 50abb08 · 50abb08
1 parent 0d0c00b
commit 50abb08
Show file tree

Hide file tree

Showing 19 changed files with 64 additions and 45 deletions.
diff --git a/components/Toc.vue b/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

diff --git a/docs/README.md b/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

diff --git a/docs/config/front-matter.md b/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)

diff --git a/docs/config/palette.md b/docs/config/palette.md
@@ -22,7 +22,6 @@ $footerColor = #828282
 $newsletterBgColor = #f8f8f8
 
 // layout
-$navbarHeight = 5rem
 $contentWidth = 740px
 
 // responsive breakpoints

diff --git a/example/.vuepress/styles/palette.styl b/example/.vuepress/styles/palette.styl
@@ -18,7 +18,6 @@
 // $newsletterBgColor = #f8f8f8
 
 // layout
-// $navbarHeight = 5rem
 // $contentWidth = 740px
 
 // responsive breakpoints

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,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

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,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

diff --git a/example/_posts/2018-11-7-frontmatter-in-vuepress.md b/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

diff --git a/example/_posts/2019-2-26-markdown-slot-2.md b/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?

diff --git a/example/_posts/2019-2-26-markdown-slot-3.md b/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?

diff --git a/example/_posts/2019-2-26-markdown-slot-4.md b/example/_posts/2019-2-26-markdown-slot-4.md
@@ -1,4 +1,5 @@
 ---
+title: Markdown Slot 4
 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?

diff --git a/example/_posts/2019-2-26-markdown-slot.md b/example/_posts/2019-2-26-markdown-slot.md
@@ -1,4 +1,5 @@
 ---
+title: Markdown Slot 1
 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?

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,4 +1,5 @@
 ---
+title: writing a vuepress theme 2
 date: 2019-5-6
 tag: 
   - theme
@@ -8,8 +9,6 @@ author: ULIVZ
 location: Shanghai  
 ---
 
-# Writing a VuePress theme
-
 To write a theme, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:
 
 ```

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,4 +1,5 @@
 ---
+title: writing a vuepress theme 3
 date: 2019-5-6
 tag: 
   - theme
@@ -8,8 +9,6 @@ author: ULIVZ
 location: Shanghai  
 ---
 
-# Writing a VuePress theme
-
 To write a theme, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:
 
 ```

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,4 +1,5 @@
 ---
+title: writing a vuepress theme 4
 date: 2019-5-6
 tag: 
   - theme
@@ -8,8 +9,6 @@ author: ULIVZ
 location: Shanghai  
 ---
 
-# Writing a VuePress theme
-
 To write a theme, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:
 
 ```

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,4 +1,5 @@
 ---
+title: Writing a vuepress theme 1
 date: 2019-5-6
 tag: 
   - theme
@@ -8,8 +9,6 @@ author: ULIVZ
 location: Shanghai  
 ---
 
-# Writing a VuePress theme
-
 To write a theme, create a `.vuepress/theme` directory in your docs root, and then create a `Layout.vue` file:
 
 ```

diff --git a/layouts/Post.vue b/layouts/Post.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="vuepress-theme-blog__post-layout">
     <div class="vuepress-blog-theme-content">
+      <h1 class="post-title">{{ $frontmatter.title }}</h1>
       <Content />
       <Newsletter v-if="$service.email.enabled" />
       <hr />
@@ -36,4 +37,14 @@ export default {
 
   @media (min-width: $MQNarrow)
     box-shadow 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.07)
+
+  .post-title
+    padding-top 0
+
+@media (max-width: $MQMobile)
+  .vuepress-blog-theme-content
+    padding-top 0
+
+  .post-title
+    margin-top 0
 </style>
diff --git a/styles/index.styl b/styles/index.styl
@@ -17,8 +17,6 @@ body
   background-color $bgColor
 
 {$contentClass}:not(.custom)
-  > *:first-child
-    margin-top $navbarHeight
 
   a:hover
     text-decoration underline
@@ -77,18 +75,6 @@ h1, h2, h3, h4, h5, h6
   line-height 1.25
   font-family PT Serif
 
-  {$contentClass}:not(.custom) > &
-    margin-top (0.5rem - $navbarHeight)
-    padding-top ($navbarHeight + 1rem)
-    margin-bottom 0
-
-    &:first-child
-      margin-top -4rem
-      margin-bottom 1rem
-
-      + p, + pre, + .custom-block
-        margin-top 2rem
-
   &:hover .header-anchor
     opacity: 1
 

diff --git a/styles/palette.styl b/styles/palette.styl
@@ -18,7 +18,6 @@ $footerColor = #828282
 $newsletterBgColor = #f8f8f8
 
 // layout
-$navbarHeight = 5rem
 // $contentWidth = 740px
 
 // responsive breakpoints