Create speakers.html istead speaker/index.html

Author: nikoshell

src/data/links.json

@@ -17,7 +17,7 @@
         },
         {
           "name": "List of Speakers",
-          "path": "/speaker"
+          "path": "/speakers"
         },
         {
           "name": "Speaker Mentorship",

src/pages/speaker/index.astro

@@ -0,0 +1,84 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "../layouts/Layout.astro";
+import Prose from "../components/prose/prose.astro";
+import { Separator } from "../components/separator/separator";
+
+// Fetch all speaker entries
+const speakersCollection = await getCollection("speakers");
+
+// Define the type for the groups object
+type Speaker = {
+  slug: string;
+  data: {
+    name: string;
+  };
+};
+
+type Groups = {
+  [key: string]: Speaker[];
+};
+
+// Group speakers by the first letter of their name
+const groups: Groups = speakersCollection
+.filter((speaker: Speaker) => !!speaker.data.name)
+.reduce((acc: Groups, speaker: Speaker) => {
+    const letter = speaker.data.name[0].toUpperCase();
+    if (!acc[letter]) {
+      acc[letter] = [];
+    }
+    acc[letter].push(speaker);
+    return acc;
+  }, {} as Groups);
+
+const letters = Object.keys(groups).sort((a, b) => a.localeCompare(b));
+
+const title = "Speakers";
+
+const description = "Alphabetical list of all confirmed speakers for the conference";
+---
+
+<Layout title={title} description={description}>
+  <div class="px-6">
+    <Prose>
+      <h1>Speakers</h1>
+    </Prose>
+
+    <div class="flex text-3xl font-bold flex-wrap mb-6">
+      {letters.map((letter) => (
+        <h3 class="mr-2">
+          <a href={`#letter-${letter}`}>{letter}</a>
+        </h3>
+      ))}
+    </div>
+
+    <ol class="speakers">
+      {letters.map((letter, index) => (
+        <>
+          <div id={`letter-${letter}`}>
+            <h2 class="relative font-title text-primary font-bold mb-[0.6em] [&>a]:border-0 [&>a]:text-inherit text-4xl">
+              {letter}
+            </h2>
+
+            <ul class="pl-4">
+              {groups[letter]
+                .sort((a, b) => a.data.name.localeCompare(b.data.name))
+                .map((speaker) => (
+                  <li {...{ key: speaker.slug }} class="mb-1">
+                    <a
+                      class="underline hover:text-primary-hover"
+                      href={`/speaker/${speaker.slug}`}
+                    >
+                      {speaker.data.name}
+                    </a>
+                  </li>
+                ))}
+            </ul>
+          </div>
+
+          {index !== letters.length - 1 ? <Separator /> : <div class="mb-20" />}
+        </>
+      ))}
+    </ol>
+  </div>
+</Layout>