astro-reading-time
v0.1.13
Published
An Astro integration for calculate reading time of Markdown/MDX files
Downloads
17
Maintainers
mogekoReadme
astro-reading-time
An Astro integration for calculate reading time of Markdown/MDX files.
This idea is comes from the official guide, but I want to make it as an integration for easy to use.
Installation
This integration supports the astro add command, you can install it by running:
npx astro add astro-reading-timeIt will add and setup the integration automatically. If you prefer, you can install integrations manually instead.
Note: If you use
@astrojs/mdxintegration as well, please make sure to keepastro-reading-timebefore@astrojs/mdxin theastro.config.*file.
Manual Install
First, install the astro-reading-time package:
npm install astro-reading-timeThen, apply the integration to your astro.config.* file using the integrations property:
import { defineConfig } from "astro/config";
import readingTime from "astro-reading-time";
import mdx from "@astrojs/mdx";
export default defineConfig({
// ...
integrations: [
readingTime(), // Keep it before `mdx` integration
mdx(),
],
});Usage
The usage of this integration is same as the official guide, you can use the minutesRead field which is injected into the frontmatters of your Markdown/MDX content.
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.
---
import { CollectionEntry, getCollection } from "astro:content";
export async function getStaticPaths() {
const blog = await getCollection("blog");
return blog.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}));
}
const { entry } = Astro.props;
const { Content, remarkPluginFrontmatter } = await entry.render();
---
<html>
<head></head>...
<body>
...
<p>{remarkPluginFrontmatter.minutesRead}</p>
...
</body>
</html>If you’re using a Markdown layout, use the minutesRead frontmatter property from Astro.props in your layout template.
---
const { minutesRead } = Astro.props.frontmatter;
---
<html>
<head></head>...
<body>
<p>{minutesRead}</p>
<slot />
</body>
</html>License
The code in this package under the MIT License.