Show Reading Time Estimator in Your Astro Blog
If you’ve ever read a blog on Medium, you’ve probably noticed the reading time estimator (e.g., “10 min read”) displayed next to the author’s avatar. Adding a similar feature to your website is simple! In this post, I’ll show you how to implement it using Astro.
Prerequisite
To keep this blog concise, I won’t dive deep into Astro concepts. Instead, I’ll assume you’re already familiar with:
- Setting up an Astro project
- Using Astro layouts
Steps
-
Install the
reading-time
package -
Create a utility function to calculate the reading time from a given text using the package
-
Use the utility function in your layout component
rawContent
refers to your blog content, usually written inMarkdown
, and will replace<slot />
in the generated markup
Example
Suppose we have a Markdown blog post that utilizes the Blog
layout defined earlier and will be accessible at /blog/reading-time
on our website, as illustrated below:
The resulting markup will look like this
And that’s how you can add a reading time estimator to your Astro blog, enhancing the user experience by giving readers a quick idea of how long it will take to read your content.