Add Reading Time to Starlight

This recipe will show one possible way to add reading time to Starlight.

Step-by-step Guide

Section titled Step-by-step Guide

1. Start by installing the required packages:

   npm

   npm add reading-time mdast-util-to-string

   pnpm

   pnpm add reading-time mdast-util-to-string

   Yarn

   yarn add reading-time mdast-util-to-string

   Bun

   bun add reading-time mdast-util-to-string

2. Create a reading time remark plugin:

   plugins/remark-reading-time.mjs

   import getReadingTime from "reading-time";
   import { toString as mdToString } from "mdast-util-to-string";
   
   export const remarkReadingTime =
     () =>
     (tree, { data }) => {
       if (!data.astro) data.astro = {};
       if (!data.astro.frontmatter) data.astro.frontmatter = {};
   
       const textOnPage = mdToString(tree);
       const readingTime = getReadingTime(textOnPage);
   
       data.astro.frontmatter.minutesRead = readingTime.text;
     };

3. Modify Starlight’s PageTitle component:

   src/components/PageTitle.astro

   ---
   /*
   * Implement the source code according to Astro Docs:
   * https://github.com/withastro/docs/blob/main/src/components/starlight/PageTitle.astro
   */
   
   import { render } from "astro:content";
   import { Icon } from "@astrojs/starlight/components";
   
   const { entry } = Astro.locals.starlightRoute;
   const { data } = Astro.locals.starlightRoute.entry;
   const { remarkPluginFrontmatter } = await render(entry);
   ---
   
   <div class="wrapper">
     <h1 id="_top">
       <span>{data.title}</span>
     </h1>
     <p class="sl-flex">
       <Icon name="seti:clock" size="1.2em" />
       {remarkPluginFrontmatter.minutesRead}
     </p>
   </div>
   
   <style>
     .wrapper {
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
     }
     h1 {
       display: flex;
       flex-wrap: wrap;
       color: var(--sl-color-white);
       font-size: var(--sl-text-h1);
       font-weight: 600;
       line-height: var(--sl-line-height-headings);
     }
     p {
       gap: 0.5rem;
       align-items: center;
       text-decoration: none;
       color: var(--sl-color-gray-3);
     }
   </style>

4. Add the plugin to your config and override Starlight’s PageTitle component:

   astro.config.mjs

   import { remarkReadingTime } from "./plugins/remark-reading-time.mjs";
   
   export default defineConfig({
     markdown: {
       remarkPlugins: [remarkReadingTime],
     },
     integrations: [
       starlight({
         components: {
           PageTitle: "./src/components/PageTitle.astro",
         },
       }),
     ],
   });

Resources

Section titled Resources

1. Add reading time ↗