feat(blog): added blog posting infrastructure

src/pages/blog/[...slug].astro

@@ -0,0 +1,33 @@
+---
+import { render } from "astro:content";
+import { getCollection } from "astro:content";
+import Main from "../../layouts/MainLayout.astro";
+import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
+import Panel from "../../layouts/Panel.astro";
+
+export const getStaticPaths = async () => {
+  const posts = await getCollection("blog");
+  return posts.map((post) => ({
+    params: { slug: post.id },
+    props: post,
+  }));
+};
+
+const post = Astro.props;
+const { Content } = await render(post);
+---
+
+<Main title={post.data.title}>
+  <TransFlagPanel>
+    <h1>{post.data.title}</h1>
+  </TransFlagPanel>
+  {
+    post.data.wantsPanel ? (
+      <Panel>
+        <Content />
+      </Panel>
+    ) : (
+      <Content />
+    )
+  }
+</Main>

src/pages/blog/index.astro

@@ -0,0 +1,31 @@
+---
+import { getCollection } from "astro:content";
+import Main from "../../layouts/MainLayout.astro";
+import TransFlagPanel from "../../layouts/TransFlagPanel.astro";
+import Panel from "../../layouts/Panel.astro";
+import "./index.scss";
+
+const latestPosts = (await getCollection("blog")).sort(
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<Main title="Blog">
+  <TransFlagPanel>
+    <h1>Blog!!!</h1>
+  </TransFlagPanel>
+  {
+    latestPosts.map((post) => {
+      return (
+        <a href={`/blog/${post.id}`} class="blog-post-link">
+          <Panel
+            title={`${post.data.title} - ${post.data.pubDate.toLocaleString()}`}
+            customClass="blog-post-panel"
+          >
+            <p>{post.data.description}</p>
+          </Panel>
+        </a>
+      );
+    })
+  }
+</Main>

src/pages/blog/index.scss

@@ -0,0 +1,8 @@
+.blog-post-panel {
+  background-color: lightgray;
+}
+
+.blog-post-link {
+  text-decoration: none;
+  color: black;
+}