3 files changed, 296 insertions, 0 deletions
diff --git a/src/pages/blog/[event]/[...slug].astro b/src/pages/blog/[event]/[...slug].astro
new file mode 100644
index 0000000..2d7c495
--- /dev/null
+++ b/src/pages/blog/[event]/[...slug].astro
@@ -0,0 +1,50 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import BlogPost from "../../../layouts/BlogPost.astro";
+import { render } from "astro:content";
+import { object } from "astro:schema";
+
+export async function getStaticPaths() {
+  const posts = await getCollection("blog");
+  const events = Object.keys(
+    Object.groupBy(
+      posts.map((post) => ({
+        id: post.id,
+        event: post.id.split("/").at(-2) || "",
+      })),
+      (post) => post.event
+    )
+  ).filter((event) => event);
+
+  const postPaths = posts.map((post) => post.id.split("/").at(-1));
+  console.log(postPaths);
+
+  const paths = [];
+  for (const event of events) {
+    for (const post of postPaths) {
+      paths.push({
+        params: { event, slug: post },
+        props: { post: posts.find((p) => p.id.endsWith(post!!)) },
+      });
+    }
+  }
+
+  return paths;
+  //   return posts.map((post) => ({
+  //     params: { slug: post.id, event: post.id.split("/").at(-2) },
+  //     props: { post },
+  //   }));
+}
+// type Props = {
+//   post: CollectionEntry<"blog">;
+//   siblings: CollectionEntry<"blog">[];
+// };
+type Props = CollectionEntry<"blog">;
+
+const post = Astro.props;
+const { Content } = await render(post.post);
+---
+
+<BlogPost {...post.post.data}>
+  <Content />
+</BlogPost>
diff --git a/src/pages/blog/[event]/index.astro b/src/pages/blog/[event]/index.astro
new file mode 100644
index 0000000..5bab8f0
--- /dev/null
+++ b/src/pages/blog/[event]/index.astro
@@ -0,0 +1,126 @@
+---
+import BaseHead from "../../../components/BaseHead.astro";
+import Header from "../../../components/Header.astro";
+import Footer from "../../../components/Footer.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../../../consts";
+import { getCollection } from "astro:content";
+import FormattedDate from "../../../components/FormattedDate.astro";
+
+export async function getStaticPaths() {
+  const blogs = await getCollection("blog");
+  const events = Object.keys(
+    Object.groupBy(
+      blogs.map((b) => ({
+        id: b.id,
+        event: b.id.split("/").at(-2) || "",
+      })),
+      (b) => b.event
+    )
+  );
+  console.log(events);
+  return events.filter((e) => e).map((event) => ({ params: { event } }));
+}
+
+const event = Astro.params.event;
+
+const blogs = await getCollection("blog");
+
+const posts = blogs
+  .filter((b) => b.id.includes(event + "/"))
+  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+    <style>
+      main {
+        width: 960px;
+      }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+      ul li {
+        width: calc(50% - 1rem);
+      }
+      ul li * {
+        text-decoration: none;
+        transition: 0.2s ease;
+      }
+      ul li:first-child {
+        width: 100%;
+        margin-bottom: 1rem;
+        text-align: center;
+      }
+      ul li:first-child img {
+        width: 100%;
+      }
+      ul li:first-child .title {
+        font-size: 2.369rem;
+      }
+      ul li img {
+        margin-bottom: 0.5rem;
+        border-radius: 12px;
+      }
+      ul li a {
+        display: block;
+      }
+      .title {
+        margin: 0;
+        color: rgb(var(--black));
+        line-height: 1;
+      }
+      .date {
+        margin: 0;
+        color: rgb(var(--gray));
+      }
+      ul li a:hover h4,
+      ul li a:hover .date {
+        color: rgb(var(--accent));
+      }
+      ul a:hover img {
+        box-shadow: var(--box-shadow);
+      }
+      @media (max-width: 720px) {
+        ul {
+          gap: 0.5em;
+        }
+        ul li {
+          width: 100%;
+          text-align: center;
+        }
+        ul li:first-child {
+          margin-bottom: 0;
+        }
+        ul li:first-child .title {
+          font-size: 1.563em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <Header />
+    <main>
+      <section>
+        <ul>
+          {
+            posts.map((post) => (
+              <li>
+                <a href={`/blog/${post.id}`}>
+                  <h4 class="title">{post.data.title}</h4>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+    </main>
+    <Footer />
+  </body>
+</html>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
new file mode 100644
index 0000000..07cc838
--- /dev/null
+++ b/src/pages/blog/index.astro
@@ -0,0 +1,120 @@
+---
+import BaseHead from "../../components/BaseHead.astro";
+import Header from "../../components/Header.astro";
+import Footer from "../../components/Footer.astro";
+import { SITE_TITLE, SITE_DESCRIPTION } from "../../consts";
+import { getCollection } from "astro:content";
+import FormattedDate from "../../components/FormattedDate.astro";
+
+const blogs = await getCollection("blog");
+
+const posts = blogs.sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+);
+
+const events = Object.keys(
+  Object.groupBy(
+    blogs.map((b) => ({
+      id: b.id,
+      event: b.id.split("/").at(-2) || "",
+    })),
+    (b) => b.event
+  )
+).toSorted((a, b) => +a.split("-").at(-1)!! - +b.split("-").at(-1)!!);
+console.log(events);
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+    <style>
+      main {
+        width: 960px;
+      }
+      ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 2rem;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+      ul li {
+        width: calc(50% - 1rem);
+      }
+      ul li * {
+        text-decoration: none;
+        transition: 0.2s ease;
+      }
+      ul li:first-child {
+        width: 100%;
+        margin-bottom: 1rem;
+        text-align: center;
+      }
+      ul li:first-child img {
+        width: 100%;
+      }
+      ul li:first-child .title {
+        font-size: 2.369rem;
+      }
+      ul li img {
+        margin-bottom: 0.5rem;
+        border-radius: 12px;
+      }
+      ul li a {
+        display: block;
+      }
+      .title {
+        margin: 0;
+        color: rgb(var(--black));
+        line-height: 1;
+      }
+      .date {
+        margin: 0;
+        color: rgb(var(--gray));
+      }
+      ul li a:hover h4,
+      ul li a:hover .date {
+        color: rgb(var(--accent));
+      }
+      ul a:hover img {
+        box-shadow: var(--box-shadow);
+      }
+      @media (max-width: 720px) {
+        ul {
+          gap: 0.5em;
+        }
+        ul li {
+          width: 100%;
+          text-align: center;
+        }
+        ul li:first-child {
+          margin-bottom: 0;
+        }
+        ul li:first-child .title {
+          font-size: 1.563em;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <Header />
+    <main>
+      <section>
+        <ul>
+          {
+            events.map((event) => (
+              <li>
+                <a href={`/blog/${event}/`}>
+                  <h4 class="title">{event}</h4>
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </section>
+    </main>
+    <Footer />
+  </body>
+</html>