package.json

@@ -15,6 +15,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "9.0.3",
+    "reading-time": "1.5.0",
     "rehype-raw": "7.0.0",
     "remark-gfm": "4.0.0"
   },

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       react-markdown:
         specifier: 9.0.3
         version: 9.0.3(@types/react@19.0.7)(react@19.0.0)
+      reading-time:
+        specifier: 1.5.0
+        version: 1.5.0
       rehype-raw:
         specifier: 7.0.0
         version: 7.0.0
@@ -2352,6 +2355,9 @@ packages:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
 
+  reading-time@1.5.0:
+    resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}
+
   reflect.getprototypeof@1.0.10:
     resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
     engines: {node: '>= 0.4'}
@@ -5642,6 +5648,8 @@ snapshots:
     dependencies:
       picomatch: 2.3.1
 
+  reading-time@1.5.0: {}
+
   reflect.getprototypeof@1.0.10:
     dependencies:
       call-bind: 1.0.8

src/app/page.tsx

@@ -24,6 +24,7 @@ const Home = (): JSX.Element => {
           <h2><a className="underline" href={`/post/${post.slug}`}>{post.data.title}</a></h2>
           <p className="italic text-center">{post.data.date.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}</p>
           <p className="text-center">{post.data.summary}</p>
+          <p className="text-center">{`A ${post.data.readtime} read.`}</p>
         </div>;
       })}
     </main>

src/app/post/[slug]/page.tsx

@@ -31,6 +31,8 @@ const Page = async({
         "en-GB",
         { day: "numeric", month: "long", weekday: "long", year: "numeric" },
       )}`}</p>
+      <h2 className="text-center">{post.data.summary}</h2>
+      <p className="text-center">{`A ${post.data.readtime} read.`}</p>
       <Rule />
       <Markdown rehypePlugins={[ rehypeRaw ]} remarkPlugins={[ remarkGfm ]}>
         {post.content}

src/lib/posts.ts

@@ -7,6 +7,7 @@
 import { readFileSync, readdirSync } from "node:fs";
 import { join } from "node:path";
 import matter from "gray-matter";
+import readingTime from "reading-time";
 
 const postsDirectory = join(process.cwd(), "posts");
 
@@ -16,7 +17,7 @@ const postsDirectory = join(process.cwd(), "posts");
  */
 const getSortedPostsData = (): Array<{
   content: string;
-  data:    { date: Date; summary: string; title: string };
+  data:    { date: Date; summary: string; title: string; readtime: string };
   slug:    string;
 }> => {
   const fileNames = readdirSync(postsDirectory);
@@ -33,6 +34,7 @@ const getSortedPostsData = (): Array<{
       content: matterResult.content,
       data:    {
         date:     new Date(matterResult.data.date),
+        readtime: readingTime(matterResult.content).text,
         summary:  matterResult.data.summary,
         title:    matterResult.data.title,
       },
@@ -56,7 +58,7 @@ const getPostData = (
   slug: string,
 ): {
   content: string;
-  data:    { date: Date; summary: string; title: string };
+  data:    { date: Date; summary: string; title: string; readtime: string };
   slug:    string;
 } => {
   const fullPath = join(postsDirectory, `${slug}.md`);
@@ -70,6 +72,7 @@ const getPostData = (
     content: matterResult.content,
     data:    {
       date:     new Date(matterResult.data.date),
+      readtime: readingTime(matterResult.content).text,
       summary:  matterResult.data.summary,
       title:    matterResult.data.title,
     },