Add Reading Time

Create a remark plugin which adds a reading time property to the frontmatter of your Markdown or MDX files. Use this property to display the reading time for each page.

1. Install Helper Packages

   Install these two helper packages:

   • reading-time to calculate minutes read
   • mdast-util-to-string to extract all text from your markdown
   npm pnpm Yarn

   Terminal window

2. Create a remark plugin.

   This plugin uses the mdast-util-to-string package to get the Markdown file’s text. This text is then passed to the reading-time package to calculate the reading time in minutes.

   remark-reading-time.mjs

3. Add the plugin to your config:

   astro.config.mjs

   Now all Markdown documents will have a calculated minutesRead property in their frontmatter.

4. Display Reading Time

   If your blog posts are stored in a content collection, access the remarkPluginFrontmatter from the entry.render() function. Then, render minutesRead in your template wherever you would like it to appear.

   src/pages/posts/[slug].astro

   If you’re using a Markdown layout, use the minutesRead frontmatter property from Astro.props in your layout template.

   src/layouts/BlogLayout.astro

More recipes