astro-reading-time
v0.1.13
Published
An Astro integration for calculate reading time of Markdown/MDX files
Downloads
77
Maintainers
Readme
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-time
It will add and setup the integration automatically. If you prefer, you can install integrations manually instead.
Note: If you use
@astrojs/mdx
integration as well, please make sure to keepastro-reading-time
before@astrojs/mdx
in theastro.config.*
file.
Manual Install
First, install the astro-reading-time
package:
npm install astro-reading-time
Then, 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.