diff --git a/package.json b/package.json index d0e7fda..fb654f1 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 55efa63..a3b3e2f 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/app/page.tsx b/src/app/page.tsx index 1b3f0be..8f2adad 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -24,6 +24,7 @@ const Home = (): JSX.Element => {

{post.data.title}

{post.data.date.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}

{post.data.summary}

+

{`A ${post.data.readtime} read.`}

; })} diff --git a/src/app/post/[slug]/page.tsx b/src/app/post/[slug]/page.tsx index 3ee29d2..136cc1a 100644 --- a/src/app/post/[slug]/page.tsx +++ b/src/app/post/[slug]/page.tsx @@ -31,6 +31,8 @@ const Page = async({ "en-GB", { day: "numeric", month: "long", weekday: "long", year: "numeric" }, )}`}

+

{post.data.summary}

+

{`A ${post.data.readtime} read.`}

{post.content} diff --git a/src/lib/posts.ts b/src/lib/posts.ts index 57726b3..12dde88 100644 --- a/src/lib/posts.ts +++ b/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); @@ -32,9 +33,10 @@ const getSortedPostsData = (): Array<{ return { content: matterResult.content, data: { - date: new Date(matterResult.data.date), - summary: matterResult.data.summary, - title: matterResult.data.title, + date: new Date(matterResult.data.date), + readtime: readingTime(matterResult.content).text, + summary: matterResult.data.summary, + title: matterResult.data.title, }, slug: slug, }; @@ -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`); @@ -69,9 +71,10 @@ const getPostData = ( return { content: matterResult.content, data: { - date: new Date(matterResult.data.date), - summary: matterResult.data.summary, - title: matterResult.data.title, + date: new Date(matterResult.data.date), + readtime: readingTime(matterResult.content).text, + summary: matterResult.data.summary, + title: matterResult.data.title, }, slug: slug, };