Enhancing content articles in Nuxt3

I’ve already covered reading time and generated excerpts for Nuxt3 content but there are still a couple more things you can do to enhance your content articles.

Enhanced typography

I love typography and that includes the use of em-dashes, smart-quotes and other typographic niceties. I do not however enjoying having to type them in my simple markdown files. Thankfully Nuxt3 Content v2 is built on top of Remark which has many plugins including remark-typography which does exactly what we want.

1. Install remark-typography with your package manager of choice (bun/yarn/npm/pnpm)
2. Add the plugin to you nuxt.config.js or ts file via:

 content: {
    markdown: {
      remarkPlugins: {
        "remark-typography": {},
      },
    },

If you want more control also consider checking out the Remark-Textr plugin which lets you build the options you like.

Set front-matter image from content

It’s great when rendering cards or links to other pages (or when using RSS) to be able to specify an image for the post but again, it’s a pain to do it manually!

Thankfully a tiny bit of code can be used to grab the first image from the content and set it as the image property on the content object in much the same pattern as the reading time and excerpt plugins.

import type { MarkdownNode, MarkdownRoot, ParsedContent } from "@nuxt/content"

export default defineNitroPlugin((nitroApp) => {
  nitroApp.hooks.hook("content:file:afterParse", (file) => {
    if (file._id.endsWith(".md") && file.body) {
      addFirstImage(file)
    }
  })
})

const addFirstImage = (file: ParsedContent) => {
  if (file.image) return
  visit(file.body!.children, (n) => {
    if (n?.tag == "img") {
      file.image = n.props.src
    }
  })
}

Damien