feat: dark mode toggle

src/pages/workshop/index.astro

@@ -0,0 +1,34 @@
+---
+import "../../styles/global.css"
+import Layout from "../../layouts/Layout.astro"
+import { getCollection } from 'astro:content';
+
+const posts = (await getCollection('workshop')).sort(
+	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
+);
+---
+
+<Layout>
+  <section class="max-w-3xl mb-10 sm:mb-14">
+    <h1 class="text-4xl sm:text-5xl font-bold mb-6 text-neutral-900 dark:text-neutral-100">Workshop</h1>
+    <p class="text-lg text-neutral-600 dark:text-neutral-400 leading-relaxed text-justify">
+      I'm a second year computer science student at the European Institute of Technology, still trying to figure out my place but enjoying the journey through systems programming, webdev and other fields. Outside of code, my favorite writer is Isaac Asimov, my favorite piece of music is Spiegel im Spiegel, and my favorite book is The Witches by Roald Dahl. My favorite star is Vega because it was once our north star and will be again in about 12,000 years - something poetic about that cycle. And that's pretty much everything you need to know about me, except maybe my tea preferences, but we'll save that for another time...    </p>
+  </section>
+
+  <ul class="space-y-4">
+    {posts.map((post) => (
+      <li class="p-4 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-800 hover:shadow-md transition-shadow">
+        <a href={`/workshop/${post.id}/`} class="block">
+          <h4 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 hover:text-neutral-700 dark:hover:text-neutral-300 transition-colors">
+            {post.data.title}
+          </h4>
+          {post.data.pubDate && (
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
+              {new Date(post.data.pubDate).toLocaleDateString()}
+            </p>
+          )}
+        </a>
+      </li>
+    ))}
+  </ul>
+</Layout>