fix: lint issues
All checks were successful
Node.js CI / Lint and Test (pull_request) Successful in 1m23s

This commit is contained in:
Naomi Carrigan 2025-01-23 01:57:23 -08:00
parent a502436d0a
commit 0501e7e0b1
Signed by: naomi
SSH Key Fingerprint: SHA256:rca1iUI2OhAM6n4FIUaFcZcicmri0jgocqKiTTAfrt8
4 changed files with 102 additions and 57 deletions

View File

@ -6,7 +6,8 @@
"dev": "next dev -p 3003", "dev": "next dev -p 3003",
"build": "next build", "build": "next build",
"start": "next start -p 3003", "start": "next start -p 3003",
"lint": "eslint src --max-warnings 0" "lint": "eslint src --max-warnings 0",
"test": "echo \"No tests yet!\" && exit 0"
}, },
"dependencies": { "dependencies": {
"gray-matter": "4.0.3", "gray-matter": "4.0.3",

View File

@ -4,10 +4,15 @@
* @author Naomi Carrigan * @author Naomi Carrigan
*/ */
import type { JSX } from "react";
import { Rule } from "@/components/rule"; import { Rule } from "@/components/rule";
import { getSortedPostsData } from "@/lib/posts"; import { getSortedPostsData } from "@/lib/posts";
export default function Home() { /**
* Renders the home page.
* @returns JSX component.
*/
const Home = (): JSX.Element => {
const posts = getSortedPostsData(); const posts = getSortedPostsData();
return ( return (
<main> <main>
@ -17,10 +22,12 @@ export default function Home() {
return <div key={post.slug}> return <div key={post.slug}>
<Rule /> <Rule />
<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",{ year: "numeric", month: "long", day: "numeric"})}</p> <p className="italic text-center">{post.data.date.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}</p>
<p>{post.data.summary}</p> <p>{post.data.summary}</p>
</div>; </div>;
})} })}
</main> </main>
); );
} };
export default Home;

View File

@ -1,23 +1,38 @@
import { Rule } from "@/components/rule"; /**
import { getPostData } from "@/lib/posts"; * @copyright nhcarrigan
* @license Naomi's Public License
* @author Naomi Carrigan
*/
import Markdown from "react-markdown"; import Markdown from "react-markdown";
import remarkGfm from "remark-gfm"; import remarkGfm from "remark-gfm";
import type { JSX } from "react";
import { Rule } from "@/components/rule";
import { getPostData } from "@/lib/posts";
export default async function Page({ /**
params * Renders a blog post.
* @param props - The properties of the page.
* @param props.params - The path parameters.
* @returns The JSX component.
*/
const Page = async({
params,
}: { }: {
params: Promise<{slug: string}> readonly params: Promise<{ slug: string }>;
}) { }): Promise<JSX.Element> => {
const { slug } = await params; const { slug } = await params;
const post = getPostData(slug); const post = getPostData(slug);
return ( return (
<main> <main>
<h1>{post.data.title}</h1> <h1>{post.data.title}</h1>
<p className="italic text-center">{`Published ${post.data.date.toLocaleDateString("en-GB", { weekday: "long", year: "numeric", month: "long", day: "numeric"})}`}</p> <p className="italic text-center">{`Published ${post.data.date.toLocaleDateString("en-GB", { day: "numeric", month: "long", weekday: "long", year: "numeric" })}`}</p>
<Rule /> <Rule />
<Markdown remarkPlugins={[ remarkGfm ]}>{post.content}</Markdown> <Markdown remarkPlugins={[ remarkGfm ]}>{post.content}</Markdown>
<Rule /> <Rule />
<a href="/">{"← Back to home"}</a> <a href="/">{"← Back to home"}</a>
</main> </main>
) );
} };
export default Page;

View File

@ -10,49 +10,71 @@ import matter from "gray-matter";
const postsDirectory = join(process.cwd(), "posts"); const postsDirectory = join(process.cwd(), "posts");
export const getSortedPostsData = () => { /**
* Reads the posts directory and returns an array of post data.
* @returns An array of parsed frontmatter and file contents.
*/
const getSortedPostsData = (): Array<{
content: string;
data: { date: Date; summary: string; title: string };
slug: string;
}> => {
const fileNames = readdirSync(postsDirectory); const fileNames = readdirSync(postsDirectory);
const allPostsData = fileNames.map((fileName) => { const allPostsData = fileNames.map((fileName) => {
const slug = fileName.replace(/\.md$/, ""); const slug = fileName.replace(/\.md$/, "");
const fullPath = join(postsDirectory, fileName); const fullPath = join(postsDirectory, fileName);
const fileContents = readFileSync(fullPath, "utf8"); const fileContents = readFileSync(fullPath, "utf8");
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- matter doesn't take a generic I guess?
const matterResult = matter(fileContents) as unknown as { const matterResult = matter(fileContents) as unknown as {
content: string; content: string;
data: { title: string; date: string; summary: string }; data: { title: string; date: string; summary: string };
}; };
return { return {
slug: slug, content: matterResult.content,
data: { data: {
title: matterResult.data.title,
date: new Date(matterResult.data.date), date: new Date(matterResult.data.date),
summary: matterResult.data.summary, summary: matterResult.data.summary,
title: matterResult.data.title,
}, },
content: matterResult.content, slug: slug,
}; };
}); });
return allPostsData.sort((a, b) => { return allPostsData.sort((a, b) => {
if (a.data.date < b.data.date) { if (a.data.date < b.data.date) {
return 1; return 1;
} else {
return -1;
} }
return -1;
}); });
}; };
export const getPostData = (slug: string) => { /**
const fullPath = join(postsDirectory, slug + ".md"); * Reads a single post file.
* @param slug - The slug of the post to read.
* @returns The parsed frontmatter and file contents.
*/
const getPostData = (
slug: string,
): {
content: string;
data: { date: Date; summary: string; title: string };
slug: string;
} => {
const fullPath = join(postsDirectory, `${slug}.md`);
const fileContents = readFileSync(fullPath, "utf8"); const fileContents = readFileSync(fullPath, "utf8");
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions -- matter doesn't take a generic I guess?
const matterResult = matter(fileContents) as unknown as { const matterResult = matter(fileContents) as unknown as {
content: string; content: string;
data: { title: string; date: string; summary: string }; data: { title: string; date: string; summary: string };
}; };
return { return {
slug: slug, content: matterResult.content,
data: { data: {
title: matterResult.data.title,
date: new Date(matterResult.data.date), date: new Date(matterResult.data.date),
summary: matterResult.data.summary, summary: matterResult.data.summary,
title: matterResult.data.title,
}, },
content: matterResult.content, slug: slug,
}; };
} };
export { getSortedPostsData, getPostData };