nuxt-content-body-html

Adds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.

Install

# npm
$ npm install nuxt-content-body-html

# Yarn
$ yarn add nuxt-content-body-html

Sometimes you need the raw HTML code of @nuxt/content documents for processing. A frequent use case is to generate an RSS feed and to add the HTML as content:encoded. The module will use the default remark and rehype plugins. You can also add additional plugins.

Nuxt 3

Add the module to your nuxt.config.js file:

export default {
  modules: [
    '@nuxt/content',
    'nuxt-content-body-html',
  },
}

To generate the HTML, you have two options: 1. Add fields to the module config and 2. use the useNuxtContentBodyHtml composable. If you just need a simple HTML version of your markdown content, the module config is fine. But if you want to add extra remark or rehype plugins involving functions, you will need to use the composable because Nuxt won't be able to serialize it into the runtime config.

Module config

export default {
  modules: [
    '@nuxt/content',
    ['nuxt-content-body-html', {
      fields: {
        bodyHtml: {},
      },
    }],
  },
}

This is the simplest way of generating the bodyHtml field into the file objects.

Composable

Add a Nitro plugin to server/plugins. We will hook into content:file:beforeParse and add our HTML code by calling the composable. Unfortunately, there is currently an open issue in @nuxt/content that does not persist variables added in content:file:beforeParse. So we will have to store them and restore them in content:file:afterParse. Hopefully this will be fixed soon.

// server/plugins/body-html.js

import { defineNitroPlugin, useNuxtContentBodyHtml } from '#imports'

const nuxtContentBodyHtml = useNuxtContentBodyHtml()

export default defineNitroPlugin(nitroApp => {
  const bodyHtmls = {}

  nitroApp.hooks.hook('content:file:beforeParse', async file =>
    bodyHtmls[file._id] = await nuxtContentBodyHtml.generate(file)
  )
  nitroApp.hooks.hook('content:file:afterParse', file => (file.bodyHtml = bodyHtmls[file._id]))
})

Adding Remark and Rehype plugins

In some cases you will want to add additional plugins to customize the HTML. E.g. in an RSS feed you want to have absolute URLs. You can add plugins to the field configs and the composable like so:

export default {
  modules: [
    '@nuxt/content',
    ['nuxt-content-body-html', {
      fields: {
        bodyHtml: {
          remarkPlugins: {
            'remark-foo': {},
          },
          rehypePlugins: {
            'rehype-foo: {},
          },
        },
      },
    }],
  },
}

await useNuxtContentBodyHtml.generate(file, {
  remarkPlugins: {
    'remark-foo': {},
  },
  rehypePlugins: {
    'rehype-foo: {},
  },
})

Enabling the highlighter

You can easily enable syntax highlighting like so:

export default {
  modules: [
    '@nuxt/content',
    ['nuxt-content-body-html', {
      fields: {
        bodyHtml: { highlight: true },
      },
    }],
  },
}

await useNuxtContentBodyHtml.generate(file, { highlight: true })

Nuxt 2 and @nuxt/content@^1

nuxt-content-body-html works similarly for Nuxt 2 with some minor differences. Firstly, you need to add the module to your nuxt.config.js file before @nuxt/content:

export default {
  modules: [
    'nuxt-content-body-html',
    '@nuxt/content',
  },
}

Then, the HTML code will be generated in module context and not in Nitro context, so you can completely configure your fields via the module config and you do not need a composable.

For convenience, if you do not configure any field, a bodyHtml field will be configured by default. So the above config will already generate a field.

To add fields or have a different name for the field, you can add fields like so:

export default {
  modules: [
    ['nuxt-content-body-html', {
      fooHtml: {},
    }],
    '@nuxt/content',
  ],
}

Plugins

You can also add plugins to the config. Note that the plugins are arrays:

export default {
  modules: [
    ['nuxt-content-body-html', {
      fooHtml: {
        remarkPlugins: [
          'plugin1',
          ['plugin2', { /* options */ }],
        ],
        rehypePlugins: [
          'plugin1',
          ['plugin2', { /* options */ }],
        ],
      },
    }],
    '@nuxt/content',
  ],
}

Overriding or disabling the highlighter

In @nuxt/content^1 the highlighter is enabled by default. You can explicitly override or disable the highlighter by setting it in the config:

export default {
  modules: [
    ['nuxt-content-body-html', {
      // Pass a custom highlighter
      highlighter: customHighlighter,

      // Disable the highlighter by setting a noop function
      highlighter: code => `<pre><code class="language-js">${code}</code></pre>`,
    }],
    '@nuxt/content',
  ],
}

Usage for RSS feeds

You can customize the module so that you can use the resulting HTML code for RSS feeds.

Firstly, RSS feeds require URLs to be absolute. You can use rehype-urls to make relative URLs absolute. At the time of writing, the npm version is not compatible with @nuxt/content@^2, you will need to fix the issue in this PR.

// nuxt.config.js

// Set process.env.BASE_URL to the domain to prepend

export default {
  runtimeConfig: {
    baseUrl: process.env.BASE_URL,
  },
  modules: [
    '@nuxt/content',
    'nuxt-content-body-html',
  ],
}

// server/plugins/body-html.js

import { defineNitroPlugin, useNuxtContentBodyHtml, useRuntimeConfig } from '#imports'

const { baseUrl } = useRuntimeConfig()
const nuxtContentBodyHtml = useNuxtContentBodyHtml()

export default defineNitroPlugin(nitroApp => {
  const bodyHtmls = {}

  nitroApp.hooks.hook('content:file:beforeParse', async file =>
    bodyHtmls[file._id] = await nuxtContentBodyHtml.generate(file, {
      rehypePlugins: {
        'rehype-urls', { transform: url => (url.host ? url : new URL(url.href, baseUrl)) },
      },
    })
  )
  nitroApp.hooks.hook('content:file:afterParse', file => (file.bodyHtml = bodyHtmls[file._id]))
})

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

If you want to send me a one time donation. The coffee is pretty good 😊.
Also for one time donations if you like PayPal.
Here you can support me regularly, which is great so I can steadily work on projects.

Thanks a lot for your support! ❤️

License

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two Factor Authentication for your account, set its level to "Authorization only" in your account settings. semantic-release cannot publish with the default "
Authorization and writes" level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

dword-design / nuxt-content-body-html Goto Github PK