feat: add reading time (#6)

### Explanation

_No response_

### Issue

_No response_

### Attestations

- [x] I have read and agree to the [Code of Conduct](https://docs.nhcarrigan.com/community/coc/)
- [x] I have read and agree to the [Community Guidelines](https://docs.nhcarrigan.com/community/guide/).
- [x] My contribution complies with the [Contributor Covenant](https://docs.nhcarrigan.com/dev/covenant/).

### Dependencies

- [x] I have pinned the dependencies to a specific patch version.

### Style

- [x] I have run the linter and resolved any errors.
- [x] My pull request uses an appropriate title, matching the conventional commit standards.
- [x] My scope of feat/fix/chore/etc. correctly matches the nature of changes in my pull request.

### Tests

- [ ] My contribution adds new code, and I have added tests to cover it.
- [ ] My contribution modifies existing code, and I have updated the tests to reflect these changes.
- [ ] All new and existing tests pass locally with my changes.
- [ ] Code coverage remains at or above the configured threshold.

### Documentation

_No response_

### Versioning

_No response_

Reviewed-on: #6
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
Co-committed-by: Naomi Carrigan <commits@nhcarrigan.com>

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);
@@ -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,
   };