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.
Recipe
Section titled Recipe- Install Helper Packages
Install these two helper packages:
reading-time
to calculate minutes readmdast-util-to-string
to extract all text from your markdown
npm install reading-time mdast-util-to-string
pnpm install reading-time mdast-util-to-string
yarn add reading-time mdast-util-to-string
- 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.
import getReadingTime from 'reading-time';
import { toString } from 'mdast-util-to-string';
export function remarkReadingTime() {
return function (tree, { data }) {
const textOnPage = toString(tree);
const readingTime = getReadingTime(textOnPage);
// readingTime.text will give us minutes read as a friendly string,
// i.e. "3 min read"
data.astro.frontmatter.minutesRead = readingTime.text;
};
}
- Add the plugin to your config:
import { defineConfig } from 'astro/config';
import { remarkReadingTime } from './remark-reading-time.mjs';
export default defineConfig({
markdown: {
remarkPlugins: [remarkReadingTime],
},
});
Now all Markdown documents will have a calculated minutesRead
property in their frontmatter.
- Display Reading Time
Use the 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:
---
const { minutesRead } = Astro.props.frontmatter;
---
<html>
<head>...</head>
<body>
<p>{minutesRead}</p>
<slot />
</body>
</html>
More recipes
-
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
Learn how to use JavaScript to send form submissions to an API Route
-
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.