feat: add reading time #6

Merged
naomi merged 2 commits from feat/read-time into main 2025-07-08 18:30:52 -07:00
6 changed files with 25 additions and 8 deletions

View File

@ -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"
},

8
pnpm-lock.yaml generated
View File

@ -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

View File

@ -58,6 +58,8 @@ The more you enjoy your work, the more you subconsciously position yourself for
## And remember...
Every conversation is a potential networking opportunity.
There is no "one true path" here. There are no guaranteed ways to land a job. There is no certainty in any of this. I share this advice because it has been my own journey to success, and I hope that it benefits some of you. But I am under no illusion that it will work for every person, every time.
But hey... What's the worst that could happen? If you follow these guidelines and *don't* get a job, at the very least you should have made some new friends. And that's always a win!

View File

@ -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>

View File

@ -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}

View File

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