feat(lib): support markdown excerpt (#607)

docs/content/en/writing.md

@@ -51,6 +51,44 @@ description: Learn how to use @nuxt/content.
 
 These variables will be injected into the document:
 
+```json
+{
+  body: Object
+  excerpt: Object
+  title: "Introduction"
+  description: "Learn how to use @nuxt/content."
+  dir: "/"
+  extension: ".md"
+  path: "/index"
+  slug: "index"
+  toc: Array
+  createdAt: DateTime
+  updatedAt: DateTime
+}
+```
+
+### Excerpt
+
+Content excerpt or summary can be extracted from the content using `<!--more-->` as a divider. 
+
+```md
+---
+title: Introduction
+---
+
+Learn how to use @nuxt/content.
+<!--more-->
+Full amount of content beyond the more divider.
+```
+
+Description property will contain the excerpt content unless defined within the Front Matter props.
+
+
+<alert type="info">
+Be careful to enter <code>&lt;!--more--&gt;</code> exactly; i.e., all lowercase and with no whitespace.
+</alert>
+
+Example variables will be injected into the document:
 ```json
 {
   body: Object
@@ -620,4 +658,4 @@ Will be transformed into:
   "title": "Home",
   "description": "Welcome!"
 }
-```
+```

docs/content/fr/writing.md

@@ -64,6 +64,43 @@ Ces variables seront injectées au sein du document:
 }
 ```
 
+### Extrait
+
+L'extrait ou le résumé du contenu peut être extrait du contenu en utilisant `<!--more-->` comme diviseur.
+
+```md
+---
+title: Introduction
+---
+
+Apprenez comment utiliser @nuxt/content.
+<!--more-->
+Quantité totale de contenu au-delà du plus diviseur.
+```
+
+La propriété Description contiendra le contenu de l'extrait à moins qu'elle ne soit définie dans les accessoires Front Matter.
+
+
+<alert type="info">
+Veillez à saisir exactement <code>&lt;!--more--&gt;</code>; c'est-à-dire, tout en minuscules et sans espace.
+</alert>
+
+Des exemples de variables seront injectés dans le document:
+```json
+{
+  body: Object
+  title: "Introduction"
+  description: "Apprenez comment utiliser @nuxt/content."
+  dir: "/"
+  extension: ".md"
+  path: "/index"
+  slug: "index"
+  toc: Array
+  createdAt: DateTime
+  updatedAt: DateTime
+}
+```
+
 ### Titres
 
 Ce module associe automatiquement un `id` et un `lien` à chaque titre.

docs/content/ja/writing.md

@@ -64,6 +64,43 @@ description: Learn how to use @nuxt/content.
 }
 ```
 
+### 抜粋
+
+コンテンツの抜粋または要約は、`<!--more-->`を仕切りとして使用してコンテンツから抽出できます。
+
+```md
+---
+title: Introduction
+---
+
+@nuxt/contentの使用方法を学びます。
+<!--more-->
+より多くの仕切りを超えたコンテンツの全量。
+```
+
+Description プロパティには、フロントマター プロップ内で定義されていない限り、抜粋コンテンツが含まれます。
+
+
+<alert type="info">
+<code>&lt;!--more--&gt;</code> を正確に入力するように注意してください。 つまり、すべて小文字で、空白はありません。
+</alert>
+
+変数の例がドキュメントに挿入されます。
+```json
+{
+  body: Object
+  title: "Introduction"
+  description: "@nuxt/contentの使用方法を学びます。"
+  dir: "/"
+  extension: ".md"
+  path: "/index"
+  slug: "index"
+  toc: Array
+  createdAt: DateTime
+  updatedAt: DateTime
+}
+```
+
 ### 見出し
 
 このモジュールは自動的に`id`と`link`を各見出しに追加します。

docs/content/ru/writing.md

@@ -64,6 +64,43 @@ description: Изучите как использовать @nuxt/content.
 }
 ```
 
+### отрывок
+
+Отрывок или резюме содержания можно извлечь из содержания, используя `<!--more-->` в качестве разделителя.
+
+```md
+---
+title: Вступление
+---
+
+Изучите как использовать @nuxt/content.
+<!--more-->
+Полный объем содержимого за пределами разделителя more.
+```
+
+Свойство Description будет содержать содержимое отрывка, если оно не определено в свойствах Front Matter.
+
+
+<alert type="info">
+Будьте внимательны при вводе <code>&lt;!--more--&gt;</code> точно; т.е. все строчные и без пробелов.
+</alert>
+
+Пример переменных будет вставлен в документ:
+```json
+{
+  body: Object
+  title: "Вступление"
+  description: "Изучите как использовать @nuxt/content."
+  dir: "/"
+  extension: ".md"
+  path: "/index"
+  slug: "index"
+  toc: Array
+  createdAt: DateTime
+  updatedAt: DateTime
+}
+```
+
 ### Заголовки
 
 Этот модуль автоматически добавит `id` и `link` к каждому заголовку.

example/content/articles/2020/04/excerpt.md

@@ -0,0 +1,17 @@
+---
+title: "Excerpt example hello world"
+date: 2020-10-28
+# description: "hello world, description"
+---
+
+
+### aheraasdf lasdf
+
+
+as
+this is the summary
+
+<!--more-->
+
+
+this is full content

example/pages/articles/_year/_month/_slug.vue

@@ -22,6 +22,13 @@ export default {
     return {
       article
     }
+  },
+  head () {
+    return {
+      meta: [
+        { name: 'description', content: this.article.description }
+      ]
+    }
   }
 }
 </script>

packages/content/parsers/markdown/index.js

@@ -87,24 +87,42 @@ class Markdown {
     })
   }
 
+  /**
+   * Generate text excerpt summary
+   * @param {string} excerptContent - JSON AST generated from excerpt markdown.
+   * @returns {string} concatinated excerpt
+   */
+  generateDescription (excerptContent) {
+    return this.flattenNodeText(excerptContent)
+  }
+
   /**
    * Converts markdown document to it's JSON structure.
    * @param {string} file - Markdown file
    * @return {Object}
    */
   async toJSON (file) {
-    const { data, content } = matter(file)
+    const { data, content, ...rest } = matter(file, { excerpt: true, excerpt_separator: '<!--more-->' })
 
     // Compile markdown from file content to JSON
     const body = await this.generateBody(content)
     // Generate toc from body
     const toc = this.generateToc(body)
 
+    let excerpt
+    let description
+    if (rest.excerpt) {
+      excerpt = await this.generateBody(rest.excerpt)
+      description = this.generateDescription(excerpt)
+    }
+
     return {
+      description,
       ...data,
       toc,
       body,
-      text: content
+      text: content,
+      excerpt
     }
   }
 }

packages/content/test/component.test.js

@@ -54,6 +54,14 @@ describe('component', () => {
         new RegExp(/<div>\s*<h1><\/h1>\s*<div class="nuxt-content">\s*<h2 id="header">\s*<a aria-hidden="true" href="#header" tabindex="-1">\s*<span class="icon icon-link">\s*<\/span>\s*<\/a>Header<\/h2>\s*<p>\s*<video autoplay="autoplay" loop="loop" playsinline="true" controls="controls"><\/video><\/p>\s*<\/div><\/div>/)
       )
     })
+
+    test('has renders html with excerpt', async () => {
+      page = await browser.page(url('/excerpt'))
+      const html = await page.getHtml()
+      expect(html).toContain('<meta data-n-head="ssr" name="description" content="this is the summary">')
+      expect(html).toContain('this is the summary')
+      expect(html).toContain('this is full content')
+    })
   })
 
   describe('in dev mode', () => {

packages/content/test/fixture/content/excerpt.md

@@ -0,0 +1,9 @@
+---
+title: hello world
+---
+
+this is the summary
+
+<!--more-->
+
+this is full content

packages/content/test/fixture/pages/_slug.vue

@@ -30,6 +30,13 @@ export default {
       id,
       classes
     }
+  },
+  head () {
+    return {
+      meta: [
+        { name: 'description', content: this.page.description }
+      ]
+    }
   }
 }
 </script>