DEV Community

Cover image for Adding reading time to Astro (the easy way)
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

Adding reading time to Astro (the easy way)

You may have noted this blog, along with many others out there, provides reading time.

This reading time is used to indicate how long it would take to read an article.

Reading time on a blog

This is valuable information, as sometimes you want to be aware of what you are getting into while starting to read an article.

Adding a reading time to Astro

We'll be going for the easy way. Meaning it's not a scientific approach and more used as a guideline than a perfect number.

First of all, let's take the Astro blog starter and work from there.

Install the starter template with the following command.

mkdir astro-blog && cd astro-blog
npm init astro -- --template blog-multiple-authors
Enter fullscreen mode Exit fullscreen mode

We'll be adding our reading time script on the post overview page so the visitor can determine which article they want to read.

First, let's create the file that will determine the actual reading time for us.

I created a lib folder in the src directory for these little scripts, creating a readingtime.js file.

Then add the following template, which creates a function that accepts content and should return the reading time.

export function getReadingTime(content) {
  if (!content) return;
  // Do something
}
Enter fullscreen mode Exit fullscreen mode

Now open up the components/PostPreview.astro and import this script like so:

---
import { getReadingTime } from '../lib/readingtime.js'

// Rest of frontmatter
---
Enter fullscreen mode Exit fullscreen mode

And in our HTML section we can use it like so:

<p>{getReadingTime(post.astro.html)} minutes to read</p>
Enter fullscreen mode Exit fullscreen mode

We invoke the function and pass the HTML of the post content.
However, nothing will happen at this point.

So head back over to the readingtime.js file.
The first thing we need to do is determine what the average person reads per minute.

This is widely known to be between 200/250 words, so let's stick to the lower number.

Read more on the number of words read per minute

With this in mind, we can create a variable that states this number.

const WORDS_PER_MINUTE = 200;
Enter fullscreen mode Exit fullscreen mode

The content we pass is pure HTML, including all kinds of HTML tags, images, etc., which we don't want to count towards the reading time.

We can't use document manipulation in Astro, so let's use a regex to remove these elements.

export function getReadingTime(content) {
  if (!content) return;
  const clean = content.replace(/<\/?[^>]+(>|$)/g, '');
}
Enter fullscreen mode Exit fullscreen mode

Then we can extract the number of words from our cleaned string by splitting it into spaces.

const numberOfWords = clean.split(/\s/g).length;
Enter fullscreen mode Exit fullscreen mode

Lastly, we can divide the number of words by our word per minute variable and round this up.

Making the function look like this:

const WORDS_PER_MINUTE = 200;

export function getReadingTime(content) {
  if (!content) return;
  const clean = content.replace(/<\/?[^>]+(>|$)/g, '');
  const numberOfWords = clean.split(/\s/g).length;
  return Math.ceil(numberOfWords / WORDS_PER_MINUTE);
}
Enter fullscreen mode Exit fullscreen mode

If we now go to our website, we should see the reading times pop-up.

Reading time in action

You can also find the completed code example on GitHub for reference purposes.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Discussion (1)

Collapse
lexlohr profile image
Alex Lohr

It's a bit problematic to use a regular expression to clean up tags. Imagine you are using < in the text, because you are describing an equation; while that will only invalidate the result of your calculation, it's still considered bad practice.

A fast virtual DOM parser like linkedom will allow you to get document.body.textContent and run the calculation on that.

Also, if you split by \s, you may get non-existing words if there are multiple spaces; better split by \W+.