Add reading time to posts (#31)

astro.config.mjs

@@ -3,6 +3,7 @@ import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import tailwind from "@astrojs/tailwind";
 import icon from "astro-icon";
+import { remarkReadingTime } from './remark-reading-time.mjs';
 
 // https://astro.build/config
 export default defineConfig({
@@ -12,6 +13,7 @@ export default defineConfig({
     drafts: false,
     shikiConfig: {
       theme: 'rose-pine-moon'
-    }
+    },
+    remarkPlugins: [remarkReadingTime],
   }
 });

package.json

@@ -17,16 +17,18 @@
 		"astro": "^4.8.6",
 		"astro-icon": "^1.1.0",
 		"markdown-it": "^14.1.0",
+		"mdast-util-to-string": "^4.0.0",
+		"reading-time": "^1.5.0",
 		"tailwindcss": "^3.2.7",
 		"tinacms": "^1.6.3"
 	},
 	"devDependencies": {
-	  "rimraf": "^5.0.7",
 		"@astrojs/check": "^0.7.0",
 		"@tailwindcss/typography": "^0.5.9",
 		"@tinacms/cli": "^1.5.45",
 		"@types/node": "^20.12.12",
 		"date-fns-tz": "^3.1.3",
+		"rimraf": "^5.0.7",
 		"sanitize-html": "^2.10.0",
 		"typescript": "^5.4.5"
 	}

remark-reading-time.mjs

@@ -0,0 +1,12 @@
+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;
+  };
+}

src/layouts/BlogPost.astro

@@ -4,9 +4,10 @@ import BaseLayout from './BaseLayout.astro';
 import FormattedDate from '../components/FormattedDate.astro';
 import TopicList from '../components/TopicList.astro';
 
-type Props = CollectionEntry<'blog'>['data'];
+type Props = CollectionEntry<'blog'>['data']  & {minutesRead: string};
+
+const { title, description, pubDate, updatedDate, heroImage, topics, minutesRead } = Astro.props;
 
-const { title, description, pubDate, updatedDate, heroImage, topics } = Astro.props;
 
 const showUpdatedDate = () => {
     return updatedDate && updatedDate.getTime() !== pubDate.getTime()
@@ -23,9 +24,10 @@ const showUpdatedDate = () => {
                             | Updated <FormattedDate date={updatedDate} />
                         </span>
                     )
-                }
+                } <span>| {minutesRead}</span>
             </div>
             <h1 class="mb-2 font-black">{title}</h1>
+
             {topics && topics.length > 0 && <TopicList topics={topics} />}
             <hr class="mt-2" />
             <slot />

src/pages/[slug].astro

@@ -1,7 +1,6 @@
 ---
 import { CollectionEntry, getCollection } from 'astro:content';
 import BlogPost from '../layouts/BlogPost.astro';
-
 export async function getStaticPaths() {
 	const posts = await getCollection('blog');
 	return posts.map((post) => ({
@@ -12,9 +11,11 @@ export async function getStaticPaths() {
 type Props = CollectionEntry<'blog'>;
 
 const post = Astro.props;
-const { Content } = await post.render();
+const { Content, remarkPluginFrontmatter } = await post.render();
+const postData = { minutesRead: remarkPluginFrontmatter.minutesRead, ...post.data }
+
 ---
 
-<BlogPost {...post.data}>
+<BlogPost {...postData}>
 	<Content />
 </BlogPost>