added projects

pages/project/[slug].tsx

@@ -0,0 +1,79 @@
+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;