src/components/Post.astro

@@ -7,7 +7,7 @@ const { post } = Astro.props;
 <li class="flex flex-col text-center no-underline">
   <a href={`/blog/${post.slug}`}>
     <span
-      class="flex flex-wrap justify-center text-balance text-2xl font-JetBrainsMono"
+      class="flex flex-wrap justify-center text-balance text-2xl"
       >{post.data.title}</span
     >
     <div

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

@@ -0,0 +1,66 @@
+---
+import { type CollectionEntry, getCollection } from "astro:content";
+import { Image } from "astro:assets";
+
+import { SITE } from "@/siteConfig.ts";
+
+import BaseLayout from "@/layouts/BaseLayout.astro";
+
+import SeoPost from "@/components/SeoPost.astro";
+
+import { formatDate } from "@/lib/util";
+
+interface Props {
+  entry: CollectionEntry<"blog">;
+}
+
+export async function getStaticPaths() {
+  const blog = await getCollection("blog");
+  return blog.map((entry) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+---
+
+<BaseLayout>
+  <SeoPost slot="head" entry={entry} />
+  <main>
+    <a
+      href="/"
+      class="block py-3 text-lg uppercase text-lightModeForegroundMuted underline underline-offset-4 hover:text-lightModeForeground dark:text-darkModeForegroundMuted dark:hover:text-darkModeForeground"
+      >{`← ${SITE.name}`}</a
+    >
+    {
+      entry.data.image && (
+        <Image
+          src={entry.data.image}
+          alt={entry.data.imageAlt || ""}
+          class="mt-10 h-auto w-full"
+        />
+      )
+    }
+    <h1
+      class="mt-6 flex flex-wrap justify-center text-balance text-2xl text-lightModeForeground dark:text-darkModeForeground"
+    >
+      {entry.data.title}
+    </h1>
+    <p
+      class="text-center text-sm text-lightModeForegroundMuted dark:text-darkModeForegroundMuted"
+    >
+      {formatDate(entry.data.publicationDate)}
+    </p>
+    <hr class="my-6 opacity-50" />
+    <div class="prose mx-auto mb-16 dark:prose-invert">
+      <Content />
+    </div>
+    <a
+      href="/"
+      class="block py-3 text-lg uppercase text-lightModeForegroundMuted underline underline-offset-4 hover:text-lightModeForeground dark:text-darkModeForegroundMuted dark:hover:text-darkModeForeground"
+      >{`← ${SITE.name}`}</a
+    >
+  </main>
+</BaseLayout>

src/pages/index.astro

@@ -0,0 +1,32 @@
+---
+import { getCollection, type CollectionEntry } from "astro:content";
+
+import { SITE } from "@/siteConfig";
+
+import BaseLayout from "@/layouts/BaseLayout.astro";
+
+import Content from "@/components/Content.astro";
+import Post from "@/components/Post.astro";
+import SeoPage from "@/components/SeoPage.astro";
+
+const posts = (await getCollection("blog")).sort(
+  (a: CollectionEntry<"blog">, b: CollectionEntry<"blog">) =>
+    b.data.publicationDate.valueOf() - a.data.publicationDate.valueOf(),
+);
+---
+
+<BaseLayout>
+  <SeoPage slot="head" />
+  <main>
+    <Content />
+    {
+      SITE.blog ? (
+        <ul class="grid list-none gap-y-8 px-0 py-12">
+          {posts.map((post: CollectionEntry<"blog">) => (
+            <Post post={post} />
+          ))}
+        </ul>
+      ) : null
+    }
+  </main>
+</BaseLayout>

src/pages/robots.txt.ts

@@ -0,0 +1,13 @@
+import type { APIRoute } from "astro";
+
+const getRobotsTxt = (sitemapURL: URL) => `
+User-agent: *
+Allow: /
+
+Sitemap: ${sitemapURL.href}
+`;
+
+export const GET: APIRoute = ({ site }) => {
+  const sitemapURL = new URL("sitemap-index.xml", site);
+  return new Response(getRobotsTxt(sitemapURL));
+};

src/pages/rss.xml.js

@@ -0,0 +1,18 @@
+import rss from "@astrojs/rss";
+import { getCollection } from "astro:content";
+import { SITE } from "@/siteConfig";
+
+export async function GET(context) {
+  const blog = await getCollection("blog");
+  return rss({
+    title: SITE.name,
+    description: SITE.bio,
+    site: context.site,
+    items: blog.map((post) => ({
+      title: post.data.title,
+      description: post.data.description,
+      pubDate: post.data.publicationDate,
+      link: `/blog/${post.slug}`,
+    })),
+  });
+}

src/siteConfig.json

@@ -1,7 +1,7 @@
 {
   "name": "Typha",
   "bio": "Some sort of werid thing",
-  "profilePicture": "/profile-picture.png",
+  "profilePicture": "/STEAM1.jpg",
   "url": "https://opnkty.uk",
   "blog": false,
   "iconLinks": [