dynamic markdown

pages/blog/[slug].tsx

@@ -0,0 +1,64 @@
+import { GetStaticPaths, GetStaticProps } from "next";
+import fs from "fs";
+import { ParsedUrlQuery } from "querystring";
+import {
+  BLOGS_PATH,
+  getFileContentBySlug,
+  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";
+
+export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
+  return (
+    <MainLayout>
+      <Link href="/blog">
+        <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">
+        {frontMatter.date}
+      </div>
+      <div className="lg:text-5xl font-bold">{frontMatter.title}</div>
+      <div className="mt-2 font-medium">
+        By: <span className="text-action">@{frontMatter.author}</span>
+      </div>
+      <div
+        className="mt-4 prose prose-headings:text-primary-text prose-p:text-gray-400"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    </MainLayout>
+  );
+};
+interface BlogProps extends ParsedUrlQuery {
+  slug: string;
+}
+export const getStaticPaths: GetStaticPaths<BlogProps> = async () => {
+  const paths = fs
+    .readdirSync(BLOGS_PATH)
+    .map((path) => path.replace(/\.mdx?$/, ""))
+    .map((slug) => ({ params: { slug } }));
+
+  return {
+    paths,
+    fallback: false,
+  };
+};
+
+export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
+  params,
+}) => {
+  const markdownContent = getFileContentBySlug(params?.slug as string);
+  const renderedHTML = await renderMarkdown(markdownContent.content);
+  return {
+    props: {
+      frontMatter: markdownContent.frontMatter,
+      html: renderedHTML,
+    },
+  };
+};
+export default BlogArticle;