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:
reading-timeto calculate minutes read
mdast-util-to-stringto extract all text from your markdown
- 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.
- Add the plugin to your config:
Now all Markdown documents will have a calculated
minutesRead property in their frontmatter.
- Display Reading Time
minutesRead frontmatter property from
Astro.props to add the reading time to a Markdown layout. The example layout below displays the reading time above the page content:
Share State Between Islands
Learn how to share state across components — and frameworks! — with Nano Stores.
Add an RSS feed
Add an RSS feed to your Astro site to let users subscribe to your content.
Installing a Vite or Rollup plugin
Learn how you can import YAML data by adding a Rollup plugin to your project.
Build Forms With API Routes
Build HTML Forms in Astro Pages
Learn how to build HTML forms and handle submissions in your frontmatter
Use Bun with Astro
Learn how to use Bun with your Astro site.
Verify a Captcha
Learn how to create an API route and fetch it from the client.
Build your Astro Site with Docker
Learn how to build your Astro site using Docker.
Add icons to external links
Learn how to install a rehype plugin to add icons to external links in your Markdown files
Add i18n features
Use dynamic routing and content collections to add internationalization support to your Astro site.
Add Reading Time
Build a remark plugin to add reading time to your Markdown or MDX files.