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.
RecipeSection titled Recipe
Install Helper Packages
Install these two helper packages:
Create a remark plugin.
This plugin uses the
mdast-util-to-stringpackage to get the Markdown file’s text. This text is then passed to the
reading-timepackage to calculate the reading time in minutes.
Add the plugin to your config:
Now all Markdown documents will have a calculated
minutesReadproperty in their frontmatter.
Display Reading Time
If your blog posts are stored in a content collection, access the
entry.render()function. Then, render
minutesReadin your template wherever you would like it to appear.
If you’re using a Markdown layout, use the
minutesReadfrontmatter property from
Astro.propsin your layout template.