80 lines
2.4 KiB
TypeScript
80 lines
2.4 KiB
TypeScript
import { GetStaticPaths, GetStaticProps } from "next";
|
|
import fs from "fs";
|
|
import { ParsedUrlQuery } from "querystring";
|
|
import {
|
|
getProjectContentBySlug,
|
|
PROJECTS_PATH,
|
|
renderMarkdown,
|
|
} from "../../utils/markdown";
|
|
import { MarkdownRenderingResult } from "../../types/types";
|
|
import { MainLayout } from "../../layouts/MainLayout";
|
|
import Link from "next/link";
|
|
import { IoMdArrowRoundBack as BackIcon } from "react-icons/io";
|
|
import { BasicProjectProps } from "../projects";
|
|
|
|
export const ProjectArticle = ({
|
|
frontMatter,
|
|
html,
|
|
}: MarkdownRenderingResult) => {
|
|
const { title, author, date, description, authorLink } =
|
|
frontMatter as BasicProjectProps;
|
|
return (
|
|
<MainLayout>
|
|
<Link href="/projects">
|
|
<button className="flex flex-row items-center gap-2 text-secondary hover:text-secondary/50 transition-all ease-in duration-75">
|
|
<BackIcon />
|
|
<span>Go Back</span>
|
|
</button>
|
|
</Link>
|
|
<div className="lg:mt-10 mt-4 mb-2 text-sm font-medium text-gray-500">
|
|
{date}
|
|
</div>
|
|
<div className="lg:text-5xl font-bold">{title}</div>
|
|
{author && (
|
|
<div className="mt-2 font-medium">
|
|
By{" "}
|
|
{authorLink && (
|
|
<Link href={authorLink} className="text-action">
|
|
@{author}
|
|
</Link>
|
|
)}
|
|
{!authorLink && <span className="text-action">@{author}</span>}
|
|
</div>
|
|
)}
|
|
<div className="mt-2 mb-10">{description}</div>
|
|
<div
|
|
className="prose prose-headings:text-primary-text prose-p:text-gray-400 prose-img:w-full prose-img:h-auto xl:prose-img:max-h-96 prose-img:object-cover"
|
|
dangerouslySetInnerHTML={{ __html: html }}
|
|
/>
|
|
</MainLayout>
|
|
);
|
|
};
|
|
interface ProjectProps extends ParsedUrlQuery {
|
|
slug: string;
|
|
}
|
|
export const getStaticPaths: GetStaticPaths<ProjectProps> = async () => {
|
|
const paths = fs
|
|
.readdirSync(PROJECTS_PATH)
|
|
.map((path) => path.replace(/\.mdx?$/, ""))
|
|
.map((slug) => ({ params: { slug } }));
|
|
|
|
return {
|
|
paths,
|
|
fallback: false,
|
|
};
|
|
};
|
|
|
|
export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
|
|
params,
|
|
}) => {
|
|
const markdownContent = getProjectContentBySlug(params?.slug as string);
|
|
const renderedHTML = await renderMarkdown(markdownContent.content);
|
|
return {
|
|
props: {
|
|
frontMatter: markdownContent.frontMatter,
|
|
html: renderedHTML,
|
|
},
|
|
};
|
|
};
|
|
export default ProjectArticle;
|