feat: add fakemon and generation filters to catalog sidebar

src/components/HackCard.astro

@@ -20,6 +20,8 @@ const summary = hack.summary || hack.notability || 'No summary has been added ye
   data-base={hack.base ?? 'Unknown'}
   data-status={hack.status ?? 'Unknown'}
   data-types={hack.types.join('|')}
+  data-fakemon={hack.fakemon ?? 'Unknown'}
+  data-generations={hack.generations.join('|')}
   data-release={hack.releaseDate ?? ''}
   data-search={hack.searchText}
   style={`--accent: var(--type-${accent.toLowerCase().replaceAll(' ', '-')}, var(--type-unknown));`}

src/lib/site-data.ts

@@ -67,6 +67,27 @@ export function getHacksForFacet(facet: FacetName, value: string, sort: SortKey
   return sortHacks(matches, sort);
 }
 
+export function getFakemonEntries(): [string, number][] {
+  const counts: Record<string, number> = {};
+  for (const hack of catalog.hacks) {
+    const value = hack.fakemon ?? 'Unknown';
+    counts[value] = (counts[value] ?? 0) + 1;
+  }
+  return Object.entries(counts)
+    .filter(([value]) => value !== 'Unknown')
+    .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+}
+
+export function getGenerationEntries(): [string, number][] {
+  const counts: Record<string, number> = {};
+  for (const hack of catalog.hacks) {
+    for (const gen of hack.generations) {
+      counts[gen] = (counts[gen] ?? 0) + 1;
+    }
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]));
+}
+
 export function displayValue(value?: string): string {
   return value || 'Unknown';
 }

src/pages/index.astro

@@ -2,13 +2,15 @@
 import HackCard from '../components/HackCard.astro';
 import FilterGroup from '../components/FilterGroup.astro';
 import Layout from '../components/Layout.astro';
-import { catalog, facetValueSlug, flagshipHacks, getFacetEntries, hacks } from '../lib/site-data';
+import { catalog, facetValueSlug, flagshipHacks, getFacetEntries, getFakemonEntries, getGenerationEntries, hacks } from '../lib/site-data';
 import type { FacetName } from '../lib/types';
 
 const platforms = getFacetEntries('platform');
 const bases = getFacetEntries('base').slice(0, 12);
 const types = getFacetEntries('type');
 const statuses = getFacetEntries('status');
+const fakemonEntries = getFakemonEntries();
+const generationEntries = getGenerationEntries();
 
 type StatItem = {
   label: string;
@@ -149,6 +151,8 @@ const browseGroups: BrowseGroup[] = [
       <FilterGroup title="Base" name="base" entries={bases} />
       <FilterGroup title="Type" name="type" entries={types} />
       <FilterGroup title="Status" name="status" entries={statuses} />
+      <FilterGroup title="Fakemon" name="fakemon" entries={fakemonEntries} />
+      <FilterGroup title="Generation" name="generation" entries={generationEntries} />
     </aside>
 
     <div class="catalog-results">
@@ -184,12 +188,17 @@ const browseGroups: BrowseGroup[] = [
       const base = selected('base');
       const type = selected('type');
       const status = selected('status');
+      const fakemon = selected('fakemon');
+      const generation = selected('generation');
       const cardTypes = card.dataset.types ? card.dataset.types.split('|') : [];
+      const cardGens = card.dataset.generations ? card.dataset.generations.split('|') : [];
       if (query && !card.dataset.search.includes(query)) return false;
       if (platform.length && !platform.includes(card.dataset.platform)) return false;
       if (base.length && !base.includes(card.dataset.base)) return false;
       if (status.length && !status.includes(card.dataset.status)) return false;
       if (type.length && !type.some((value) => cardTypes.includes(value))) return false;
+      if (fakemon.length && !fakemon.includes(card.dataset.fakemon)) return false;
+      if (generation.length && !generation.some((value) => cardGens.includes(value))) return false;
       return true;
     }