Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(lib): support markdown excerpt #607

Merged
merged 1 commit into from
Nov 2, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 39 additions & 1 deletion docs/content/en/writing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -620,4 +658,4 @@ Will be transformed into:
"title": "Home",
"description": "Welcome!"
}
```
```
37 changes: 37 additions & 0 deletions docs/content/fr/writing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
37 changes: 37 additions & 0 deletions docs/content/ja/writing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`を各見出しに追加します。
Expand Down
37 changes: 37 additions & 0 deletions docs/content/ru/writing.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` к каждому заголовку.
Expand Down
17 changes: 17 additions & 0 deletions example/content/articles/2020/04/excerpt.md
Original file line number Diff line number Diff line change
@@ -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
7 changes: 7 additions & 0 deletions example/pages/articles/_year/_month/_slug.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,13 @@ export default {
return {
article
}
},
head () {
return {
meta: [
{ name: 'description', content: this.article.description }
]
}
}
}
</script>
22 changes: 20 additions & 2 deletions packages/content/parsers/markdown/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
Expand Down
8 changes: 8 additions & 0 deletions packages/content/test/component.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
9 changes: 9 additions & 0 deletions packages/content/test/fixture/content/excerpt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
title: hello world
---

this is the summary

<!--more-->

this is full content
7 changes: 7 additions & 0 deletions packages/content/test/fixture/pages/_slug.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,13 @@ export default {
id,
classes
}
},
head () {
return {
meta: [
{ name: 'description', content: this.page.description }
]
}
}
}
</script>