feat: add romhack archive site

src/pages/browse/[facet]/[value].astro

@@ -0,0 +1,33 @@
+---
+import HackCard from '../../../components/HackCard.astro';
+import Layout from '../../../components/Layout.astro';
+import { facetValueSlug, getFacetEntries, getHacksForFacet } from '../../../lib/site-data';
+import type { FacetName } from '../../../lib/types';
+
+export function getStaticPaths() {
+  const browsableFacets: FacetName[] = ['platform', 'base', 'type', 'status'];
+  return browsableFacets.flatMap((facet) =>
+    getFacetEntries(facet).map(([value]) => ({
+      params: { facet, value: facetValueSlug(value) },
+      props: { facet, value },
+    })),
+  );
+}
+
+const { facet, value } = Astro.props as { facet: FacetName; value: string };
+const facetTitle = facet.replace('_', ' ');
+const matches = getHacksForFacet(facet, value);
+---
+
+<Layout title={`${value} ${facetTitle} Hacks | ROM Hack Archive`}>
+  <section class="browse-header">
+    <a class="back-link" href="/">Catalog</a>
+    <h1>{value}</h1>
+    <p>{matches.length} hacks grouped by {facetTitle}.</p>
+  </section>
+  <section class="catalog-results browse-results">
+    <div class="hack-grid">
+      {matches.map((hack) => <HackCard hack={hack} />)}
+    </div>
+  </section>
+</Layout>