Enable readingTime remark plugin

astro.config.mjs

@@ -9,6 +9,7 @@ import image from '@astrojs/image';
 import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 import compress from 'astro-compress';
+import { readingTimeRemarkPlugin } from './src/utils/frontmatter.mjs';
 
 import { SITE } from './src/config.mjs';
 
@@ -24,6 +25,10 @@ export default defineConfig({
 
   output: 'static',
 
+  markdown: {
+    remarkPlugins: [readingTimeRemarkPlugin],
+  },
+
   integrations: [
     tailwind({
       config: {
@@ -55,8 +60,6 @@ export default defineConfig({
     }),
   ],
 
-  markdown: {},
-
   vite: {
     resolve: {
       alias: {

src/components/blog/ListItem.astro

@@ -43,13 +43,13 @@ const link = !BLOG?.post?.disabled ? getPermalink(post.permalink, 'post') : '';
     <header>
       <div class="mb-1">
         <span class="text-sm">
-          
           <Icon name="tabler:clock" class="w-3.5 h-3.5 inline-block -mt-0.5 dark:text-gray-400" />
           <time datetime={String(post.publishDate)}>{getFormattedDate(post.publishDate)}</time>
           {
             post.category && (
               <>
-              {' '} ·
+                {' '}
+                ·{' '}
                 <a class="capitalize hover:underline" href={getPermalink(post.category, 'category')}>
                   {post.category.replaceAll('-', ' ')}
                 </a>

src/components/blog/SinglePost.astro

@@ -29,13 +29,14 @@ const { post, url } = Astro.props;
             post.category && (
               <>
                 {' '}
-                ·
+                ·{' '}
                 <a class="capitalize hover:underline" href={getPermalink(post.category, 'category')}>
                   {post.category.replaceAll('-', ' ')}
                 </a>
               </>
             )
           }
+          {' '}·{' '}{post.readingTime} min read
         </p>
       </div>
       <h1

src/types.ts

@@ -20,6 +20,8 @@ export interface Post {
 
   Content: unknown;
   content?: string;
+
+  readingTime?: number;
 }
 
 export interface MetaSEO {

src/utils/blog.ts

@@ -30,7 +30,7 @@ const generatePermalink = async ({ id, slug, publishDate, category }) => {
 
 const getNormalizedPost = async (post: CollectionEntry<'post'>): Promise<Post> => {
   const { id, slug: rawSlug = '', data } = post;
-  const { Content } = await post.render();
+  const { Content, remarkPluginFrontmatter } = await post.render();
 
   const {
     tags: rawTags = [],
@@ -60,6 +60,8 @@ const getNormalizedPost = async (post: CollectionEntry<'post'>): Promise<Post> =
     // or 'body' in case you consume from API
 
     permalink: await generatePermalink({ id, slug, publishDate, category }),
+
+    readingTime: remarkPluginFrontmatter?.readingTime,
   };
 };
 

src/utils/frontmatter.mjs

@@ -1,12 +1,11 @@
 import getReadingTime from 'reading-time';
 import { toString } from 'mdast-util-to-string';
 
-export function remarkReadingTime() {
+export function readingTimeRemarkPlugin() {
   return function (tree, file) {
-    const text = toString(tree);
-    const readingTime = Math.ceil(getReadingTime(text).minutes);
+    const textOnPage = toString(tree);
+    const readingTime = Math.ceil(getReadingTime(textOnPage).minutes);
 
-    const { frontmatter } = file.data.astro;
-    frontmatter.readingTime = readingTime;
+    file.data.astro.frontmatter.readingTime = readingTime
   };
 }