Add Reading Time to Starlight

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

Steps by steps

Section titled Steps by steps

1. Start by installing all packages that need:

   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 reading time remark plugin:

   plugins/remark-reading-time.mjs

   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
     }
   }

3. Change Starlight’s page title:

   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 { Icon } from '@astrojs/starlight/components'
   import type { Props } from '@astrojs/starlight/props'
   
   const { entry } = Astro.props
   const { title } = entry.data
   const { remarkPluginFrontmatter } = await entry.render()
   ---
   
   <div class="wrapper">
     <h1 id="_top">
       <span>{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 page title:

   astro.config.mjs

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

Resources

Section titled Resources

1. Add reading time ↗