generated from nhcarrigan/template
feat: add reading time #6
@ -15,6 +15,7 @@
|
|||||||
"react": "^19.0.0",
|
"react": "^19.0.0",
|
||||||
"react-dom": "^19.0.0",
|
"react-dom": "^19.0.0",
|
||||||
"react-markdown": "9.0.3",
|
"react-markdown": "9.0.3",
|
||||||
|
"reading-time": "1.5.0",
|
||||||
"rehype-raw": "7.0.0",
|
"rehype-raw": "7.0.0",
|
||||||
"remark-gfm": "4.0.0"
|
"remark-gfm": "4.0.0"
|
||||||
},
|
},
|
||||||
|
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@ -23,6 +23,9 @@ importers:
|
|||||||
react-markdown:
|
react-markdown:
|
||||||
specifier: 9.0.3
|
specifier: 9.0.3
|
||||||
version: 9.0.3(@types/react@19.0.7)(react@19.0.0)
|
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:
|
rehype-raw:
|
||||||
specifier: 7.0.0
|
specifier: 7.0.0
|
||||||
version: 7.0.0
|
version: 7.0.0
|
||||||
@ -2352,6 +2355,9 @@ packages:
|
|||||||
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
|
||||||
engines: {node: '>=8.10.0'}
|
engines: {node: '>=8.10.0'}
|
||||||
|
|
||||||
|
reading-time@1.5.0:
|
||||||
|
resolution: {integrity: sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==}
|
||||||
|
|
||||||
reflect.getprototypeof@1.0.10:
|
reflect.getprototypeof@1.0.10:
|
||||||
resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
|
resolution: {integrity: sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==}
|
||||||
engines: {node: '>= 0.4'}
|
engines: {node: '>= 0.4'}
|
||||||
@ -5642,6 +5648,8 @@ snapshots:
|
|||||||
dependencies:
|
dependencies:
|
||||||
picomatch: 2.3.1
|
picomatch: 2.3.1
|
||||||
|
|
||||||
|
reading-time@1.5.0: {}
|
||||||
|
|
||||||
reflect.getprototypeof@1.0.10:
|
reflect.getprototypeof@1.0.10:
|
||||||
dependencies:
|
dependencies:
|
||||||
call-bind: 1.0.8
|
call-bind: 1.0.8
|
||||||
|
@ -58,6 +58,8 @@ The more you enjoy your work, the more you subconsciously position yourself for
|
|||||||
|
|
||||||
## And remember...
|
## 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.
|
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!
|
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!
|
||||||
|
@ -24,6 +24,7 @@ const Home = (): JSX.Element => {
|
|||||||
<h2><a className="underline" href={`/post/${post.slug}`}>{post.data.title}</a></h2>
|
<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="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">{post.data.summary}</p>
|
||||||
|
<p className="text-center">{`A ${post.data.readtime} read.`}</p>
|
||||||
</div>;
|
</div>;
|
||||||
})}
|
})}
|
||||||
</main>
|
</main>
|
||||||
|
@ -31,6 +31,8 @@ const Page = async({
|
|||||||
"en-GB",
|
"en-GB",
|
||||||
{ day: "numeric", month: "long", weekday: "long", year: "numeric" },
|
{ day: "numeric", month: "long", weekday: "long", year: "numeric" },
|
||||||
)}`}</p>
|
)}`}</p>
|
||||||
|
<h2 className="text-center">{post.data.summary}</h2>
|
||||||
|
<p className="text-center">{`A ${post.data.readtime} read.`}</p>
|
||||||
<Rule />
|
<Rule />
|
||||||
<Markdown rehypePlugins={[ rehypeRaw ]} remarkPlugins={[ remarkGfm ]}>
|
<Markdown rehypePlugins={[ rehypeRaw ]} remarkPlugins={[ remarkGfm ]}>
|
||||||
{post.content}
|
{post.content}
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
import { readFileSync, readdirSync } from "node:fs";
|
import { readFileSync, readdirSync } from "node:fs";
|
||||||
import { join } from "node:path";
|
import { join } from "node:path";
|
||||||
import matter from "gray-matter";
|
import matter from "gray-matter";
|
||||||
|
import readingTime from "reading-time";
|
||||||
|
|
||||||
const postsDirectory = join(process.cwd(), "posts");
|
const postsDirectory = join(process.cwd(), "posts");
|
||||||
|
|
||||||
@ -16,7 +17,7 @@ const postsDirectory = join(process.cwd(), "posts");
|
|||||||
*/
|
*/
|
||||||
const getSortedPostsData = (): Array<{
|
const getSortedPostsData = (): Array<{
|
||||||
content: string;
|
content: string;
|
||||||
data: { date: Date; summary: string; title: string };
|
data: { date: Date; summary: string; title: string; readtime: string };
|
||||||
slug: string;
|
slug: string;
|
||||||
}> => {
|
}> => {
|
||||||
const fileNames = readdirSync(postsDirectory);
|
const fileNames = readdirSync(postsDirectory);
|
||||||
@ -33,6 +34,7 @@ const getSortedPostsData = (): Array<{
|
|||||||
content: matterResult.content,
|
content: matterResult.content,
|
||||||
data: {
|
data: {
|
||||||
date: new Date(matterResult.data.date),
|
date: new Date(matterResult.data.date),
|
||||||
|
readtime: readingTime(matterResult.content).text,
|
||||||
summary: matterResult.data.summary,
|
summary: matterResult.data.summary,
|
||||||
title: matterResult.data.title,
|
title: matterResult.data.title,
|
||||||
},
|
},
|
||||||
@ -56,7 +58,7 @@ const getPostData = (
|
|||||||
slug: string,
|
slug: string,
|
||||||
): {
|
): {
|
||||||
content: string;
|
content: string;
|
||||||
data: { date: Date; summary: string; title: string };
|
data: { date: Date; summary: string; title: string; readtime: string };
|
||||||
slug: string;
|
slug: string;
|
||||||
} => {
|
} => {
|
||||||
const fullPath = join(postsDirectory, `${slug}.md`);
|
const fullPath = join(postsDirectory, `${slug}.md`);
|
||||||
@ -70,6 +72,7 @@ const getPostData = (
|
|||||||
content: matterResult.content,
|
content: matterResult.content,
|
||||||
data: {
|
data: {
|
||||||
date: new Date(matterResult.data.date),
|
date: new Date(matterResult.data.date),
|
||||||
|
readtime: readingTime(matterResult.content).text,
|
||||||
summary: matterResult.data.summary,
|
summary: matterResult.data.summary,
|
||||||
title: matterResult.data.title,
|
title: matterResult.data.title,
|
||||||
},
|
},
|
||||||
|
Reference in New Issue
Block a user