feat: boilerplate [alpha]/[page] route

Author: babblebey

src/pages/browse/[alpha]/[page].astro

@@ -0,0 +1,43 @@
+---
+import { getCollection } from "astro:content";
+import { ALPHABETS } from "../../../../constants.js";
+import BaseLayout from "../../../layouts/base.astro";
+
+const { page } = Astro.props;
+const params = Astro.params;
+
+export const prerender = true;
+
+export async function getStaticPaths({ paginate }) {
+  const dictionary = await getCollection("dictionary");
+  return ALPHABETS.flatMap(alpha => {
+    const filteredWords = dictionary.filter(word => word.slug[0] === alpha);
+    console.log(filteredWords);
+
+    return paginate(filteredWords, {
+      params: { alpha },
+      pageSize: 1
+    });
+  });
+}
+---
+
+<BaseLayout>
+  <main class="max-w-screen-lg p-5 md:mt-10 mx-auto min-h-screen space-y-6">
+    <h1 class="text-3xl md:text-5xl font-black">
+      Browse: Letter { params.alpha.toUpperCase() }
+    </h1>
+    <div>
+      {page.data.map(word => (
+        <a href={`/browse/${word.slug}`}
+          class="flex items-center md:text-lg justify-between no-underline w-full p-4 even:bg-gray-100 hover:bg-gray-100/50"
+        >
+          <span>{ word.data.title }</span>
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
+          </svg>
+        </a>
+      ))}
+    </div>
+  </main>
+</BaseLayout>