init

app/blog/[slug]/page.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link"
+import { ArrowLeftIcon } from "@heroicons/react/24/solid"
+import { getArticleData } from "@/lib/articles";
+
+const Article = async ({ params }: { params: Promise<{ slug: string }> }) => {
+    const { slug } = await params;
+    const articleData = await getArticleData(slug);
+
+    return (
+        <section className={"mx-auto w-10/12 md:w-1/2 mt-20 flex flex-col gap-5"}>
+            <div className={"flex justify-between font-poppins"}>
+                <Link href={"/blog"} className={"flex flex-row gap-1 place-items-center"}>
+                    <ArrowLeftIcon width={20} />
+                    <p>blog homepage</p>
+                </Link>
+                <p>{articleData.date.toString()}</p>
+            </div>
+            <article className={"article"} dangerouslySetInnerHTML={{ __html: articleData.contentHtml }} />
+        </section>
+    )
+}
+
+export default Article;

app/blog/page.tsx

@@ -0,0 +1,21 @@
+import {getCategorizedArticles} from "@/lib/articles";
+import ArticleItemList from "@/components/ArticleListItem";
+
+export default function BlogPage() {
+    const articles = getCategorizedArticles()
+
+    return (
+        <>
+            <section className={"mx-auto w-11/12 md:w-1/2 mt-20 flex flex-col gap-16 mb-20"}>
+                <header className={"font-cormorantGaramond font-light text-6xl text-center"}>
+                    <h1>Shrimple blog.</h1>
+                </header>
+                <section className={"md:grid md:grid-cols-2 flex flex-col gap-10"}>
+                    {articles != null && Object.keys(articles).map((article) => (
+                        <ArticleItemList category={article} articles={articles[article]} key={article}/>
+                    ))}
+                </section>
+            </section>
+        </>
+    );
+}