feat: add post's read time

astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
 import mdx from "@astrojs/mdx";
+import getReadTime from './src/scripts/reading_time';
 
 import vercel from "@astrojs/vercel/serverless";
 
@@ -15,5 +16,8 @@ export default defineConfig({
     speedInsights: {
       enabled: true
     }
-  })
+  }),
+  markdown: {
+    remarkPlugins: [getReadTime]
+  }
 });

package.json

@@ -20,6 +20,8 @@
     "astro": "^4.0.2",
     "astro-icon": "^0.8.2",
     "js-sha256": "^0.10.1",
+    "mdast-util-to-string": "^4.0.0",
+    "reading-time": "^1.5.0",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.2.2"
   },

src/components/PostCard.astro

@@ -2,6 +2,8 @@
 import { type CollectionEntry, getEntry } from "astro:content";
 import type { AuthorProfile, PostData } from "../scripts/types/post_types";
 import PostTypeTag from "./PostTypeBadge.astro";
+import { renderPostContent } from "../scripts/content_render";
+import PostInfo from "./PostInfo.astro";
 
 interface Props {
   post: CollectionEntry<"posts">;
@@ -11,6 +13,9 @@ const { post } = Astro.props;
 const data: PostData = post.data;
 const authorEntry = await getEntry("authors", data.author.id);
 const author: AuthorProfile = authorEntry.data;
+const postContent = await renderPostContent(post)
+const { renderPostData } = postContent
+const { remarkPluginFrontmatter: remark } = renderPostData
 
 const formatedDate = data.date.toLocaleDateString("pt-br");
 ---
@@ -29,7 +34,7 @@ const formatedDate = data.date.toLocaleDateString("pt-br");
         <PostTypeTag text={data.postType} />
       </span>
     </span>
-    <small>{author.name} ● {formatedDate}</small>
+    <PostInfo author={author} date={formatedDate} minutesRead={remark.minutesRead} />
     <div>
       <p class="text-ellipsis overflow-hidden">
         {data.description}

src/components/PostInfo.astro

@@ -0,0 +1,20 @@
+---
+import type { AuthorProfile } from '../scripts/types/post_types'
+import ReadTime from './ReadTime.astro'
+
+interface Props {
+    author: AuthorProfile
+    date: string
+    minutesRead: string
+}
+
+const { author, date, minutesRead } = Astro.props
+---
+
+<small class="flex flex-row items-center align-middle gap-1">
+    <span>by {author.name}</span>
+    <span>●</span>
+    <span>{date}</span>
+    <span>●</span>
+    <ReadTime readTime={minutesRead} />
+</small>

src/components/ReadTime.astro

@@ -0,0 +1,17 @@
+---
+import Icon from 'astro-icon';
+
+interface Props {
+    readTime: string
+}
+
+const { readTime } = Astro.props
+
+---
+
+<div class="flex flex-row items-center">
+    <Icon name="time" width="16" height="16"/>
+    <p class="ml-1">
+        {readTime}
+    </p>
+</div>

src/layouts/PostLayout.astro

@@ -6,16 +6,19 @@ import PostSideBarLeft from "../components/PostSideBarLeft.astro";
 import TagsViewer from "../components/TagsViewer.astro";
 import PostTypeTag from "../components/PostTypeBadge.astro";
 import PostImageHero from "../components/PostImageHero.astro";
-import { imageConfig } from "astro:assets";
+import PostInfo from "../components/PostInfo.astro";
+import type { RemarkFrontmatter } from "../scripts/types/render_post_data";
 
 interface Props {
   id: string;
   post: PostData;
+  remark: RemarkFrontmatter;
   author: AuthorProfile;
 }
 
-const { post, author } = Astro.props;
+const { post, remark, author } = Astro.props;
 const { id, title, date, tags, postType, description, image } = post;
+const { minutesRead } = remark;
 const formatedDate = date.toLocaleDateString("pt-br");
 ---
 
@@ -32,7 +35,7 @@ const formatedDate = date.toLocaleDateString("pt-br");
               <PostTypeTag text={postType} />
             </span>
           </div>
-          <small>by {author.name} ● {formatedDate}</small>
+          <PostInfo author={author} date={formatedDate} minutesRead={minutesRead} />
         </div>
         <TagsViewer tags={tags} />
       </header>

src/pages/post/[slug].astro

@@ -2,7 +2,9 @@
 import PostLayout from "../../layouts/PostLayout.astro";
 import { type CollectionEntry, getEntry } from "astro:content"
 import type { AuthorProfile, PostData } from "../../scripts/types/post_types";
+import type { RenderablePostData, RenderPostData } from "../../scripts/types/render_post_data"
 import { getPosts } from "../../scripts/content_fetcher";
+import { renderPostContent } from "../../scripts/content_render";
 
 export async function getStaticPaths() {
     const postCollection = await getPosts();
@@ -22,11 +24,16 @@ interface Props {
 
 const { post } = Astro.props
 const data: PostData = post.data
+
 const authorEntry = await getEntry("authors", data.author.id)
 const author: AuthorProfile = authorEntry.data
-const { Content } = await post.render()
+const postContent = await renderPostContent(post)
+const { renderablePost, renderPostData } = postContent
+
+const { Content } = renderablePost
+const { remarkPluginFrontmatter: remark } = renderPostData
 ---
 
-<PostLayout id={post.id} post={data} author={author}>
+<PostLayout id={post.id} post={data} remark={remark} author={author}>
     <Content/>
 </PostLayout>

src/scripts/content_render.ts

@@ -0,0 +1,21 @@
+import type { CollectionEntry } from "astro:content";
+import type { RenderablePostData, RenderPostData } from "./types/render_post_data";
+
+type PostRender = {
+    renderablePost: RenderablePostData
+    renderPostData: RenderPostData
+}
+
+export async function renderPostContent(post: CollectionEntry<'posts'>): Promise<PostRender> {
+    const renderableData: RenderablePostData = await post.render()
+    const renderData: RenderPostData = {
+        headings: renderableData.headings,
+        remarkPluginFrontmatter: {
+            minutesRead: renderableData.remarkPluginFrontmatter.minutesRead
+        }
+    }
+    return {
+        renderablePost: renderableData,
+        renderPostData: renderData
+    }
+}

src/scripts/reading_time.ts

@@ -0,0 +1,11 @@
+import getReadingTime from 'reading-time';
+import { toString } from 'mdast-util-to-string';
+
+export default function getReadTime() {
+    return function (tree: unknown, { data }: any) {
+        const textOnPage = toString(tree);
+        const readingTime = getReadingTime(textOnPage);
+
+        data.astro.frontmatter.minutesRead = readingTime.text;
+      };
+}

src/scripts/types/render_post_data.ts

@@ -0,0 +1,17 @@
+import type { MarkdownHeading } from "astro";
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+
+export interface RemarkFrontmatter {
+    minutesRead: string
+}
+
+export interface RenderablePostData {
+    Content: AstroComponentFactory;
+    headings: MarkdownHeading[];
+    remarkPluginFrontmatter: Record<string, any>;
+}
+
+export interface RenderPostData {
+    headings: MarkdownHeading[];
+    remarkPluginFrontmatter: RemarkFrontmatter;
+}