Content excerpt support

[nahokoxxx]

Describe the solution you'd like

Please provide a way to fetch plain content body texts (not the body object of the current fetching result), in order to display excerpt on pages such as content list view.
Feature like Content Excerpt of VuePress would be awesome.

Describe alternatives you've considered

Having <nuxt-content> prop for displaying excerpt and other selected content properties would be useful too.

[benjamincanac]

@nahokomatsui Have you tried to use remark-excerpt?

You can extend plugins in @nuxt/content: https://content.nuxtjs.org/configuration#markdownplugins

[atinux]

We could support it I guess @benjamincanac if <!— more —> is in the content.

Then we would need to have <nuxt-content :document=“doc” excerpt> to display doc.excerpt

[nahokoxxx]

Thank you for your considerations.

For your information, I tried registering remark-excerpt plugin following @benjamincanac's advice on my example repo: https://github.com/nahokomatsui/nuxt-content-excerpt

Just adding the plugin to configuration causes omitting not-excerpt contents from all fetched contents.
In my example case I want it to show the entire contents on article detail pages (/articles/_slug.vue) but it is not possible.

I also tried parsing contents with remark-excerpt inside content:file:beforeInsert hook but it didn't work well either.
The plugin does not seem to support parsing the tree of the object the hook receives as an argument.

Therefore It would be appreciated if it is supported inside Nuxt Content module with @atinux's way.

[benjamincanac]

@nahokomatsui Have you tried using excerpt inside content:file:beforeInsert hook using the text variable instead of the body?

[nahokoxxx]

@benjamincanac I tried it on this commit but it makes excerpt value undefined.
I think the plugin's transformer expects HTML node tree, not markdown text.
https://github.com/manovotny/remark-excerpt/blob/master/index.js#L15

[benjamincanac]

@nahokomatsui Until we support it, you could do something like:

const remark = require('remark');
const excerpt = require('remark-excerpt');

...

'content:file:beforeInsert': (document) => {
  document.excerpt = await remark()
    .use(excerpt)
    .process(document.text)
}

[nahokoxxx]

@benjamincanac Sorry for misunderstanding.
On the latest commit I succeeded in retrieving only plain excerpt texts using remark plugin properly and retext-stringify plugin additionally.

import remark from 'remark'
import remarkExcerpt from 'remark-excerpt'
import retextStringify from 'retext-stringify'

...
hooks: {
  'content:file:beforeInsert': async (document) => {
    if (document.extension === '.md') {
      const processed = await remark()
        .use(remarkExcerpt)
        .use(retextStringify)
        .process(document.text)
      document.excerpt = processed.contents
    }
  }
}

This workaround should be enough until it is officially supported in a more integrated way. Thank you.

[arkhaiel]

My "101" solution : I manually add a new field in the YAML, which contains a "résumé", or the first paragraph of my doc.

[imlautaro]

I solved the problem just with this code:

const articles = await $content('articles').fetch()
articles.map((article) => {
	article.excerpt = { body: article.excerpt }
})
return { articles }

Then you can use <nuxt-content :document="article.excerpt" />.

[benjamincanac]

@imlautaro This has been implemented in the core of @nuxt/content since then: https://content.nuxtjs.org/writing#excerpt.