astro-reading-time
TypeScript icon, indicating that this package has built-in type declarations

0.1.13 • Public • Published

astro-reading-time

Monorepo Build CodeQL codecov

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 keep astro-reading-time before @astrojs/mdx in the astro.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.

Package Sidebar

Install

npm i astro-reading-time

Weekly Downloads

2

Version

0.1.13

License

MIT

Unpacked Size

12.5 kB

Total Files

6

Last publish

Collaborators

  • mogeko