readtime

What it does

Calculates reading time in minutes from the word count of your post's Portable Text body. Writes two fields to metadata on every publish: readingTimeMinutes (integer, min 1) and wordCount (integer). Ships ReadingTime.astro with four variants.

Install

Register

Open astro.config.mjs at the root of your Astro project. Import the plugin at the top, then add it to the plugins array of the emdash() integration - the one that sits inside Astro's top-level integrations array:

// astro.config.mjs
import { defineConfig } from "astro/config"
import emdash from "emdash/astro"
import { readtimePlugin } from "@plugdash/readtime"

export default defineConfig({
  integrations: [
    emdash({
      plugins: [
        readtimePlugin({ collections: ["blog"] }),
      ],
    }),
  ],
})

Add the component

---
import ReadingTime from "@plugdash/readtime/ReadingTime.astro"
---
<ReadingTime post={post} />

Live demo

All four variants, rendered against a fixture post:

Props

prop	type	default	description
post	EmDash content item		Required - the post
variant	"badge" | "pill" | "inline" | "minimal"	"badge"	Visual style
size	"sm" | "md" | "lg"	"md"	Size scale
label	string	"min read"	Text after the number
showWords	boolean	false	Also show word count

CSS custom properties

token	description
--plugdash-rt-color	Text colour
--plugdash-rt-size	Font size
--plugdash-rt-bg	Background (badge/pill only)
--plugdash-rt-border	Border colour (badge only)
--plugdash-rt-radius	Border radius (badge/pill)
--plugdash-rt-padding	Padding (badge/pill)

For agents

After install and registration, verify setup by publishing a test post and checking that post.data.metadata.readingTimeMinutes is populated. If it is not, confirm the post status is "published" and the post's collection appears in the collections option.