From 820a5f9556c102f3fa716312a4a16696add3de0b Mon Sep 17 00:00:00 2001
From: kbenestad <kristian@benestad.net>
Date: Thu, 21 May 2026 21:46:47 +0700
Subject: [PATCH] Dynamic theme selector: fetch themes/index.json at runtime

---
 index.html        | 298 ++-------------
 themes/index.json | 896 ++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 923 insertions(+), 271 deletions(-)
 create mode 100644 themes/index.json

diff --git a/index.html b/index.html
index bfae591..dc9fcc2 100644
--- a/index.html
+++ b/index.html
@@ -158,278 +158,8 @@
     <label for="theme-select">Theme</label>
     <select id="theme-select">
       <option value="">— site default —</option>
-        <optgroup label="Accessibility-first">
-          <option value="Accessibility-first/a11y-aaa.yaml">a11y aaa</option>
-          <option value="Accessibility-first/a11y-calm.yaml">a11y calm</option>
-          <option value="Accessibility-first/a11y-readable.yaml">a11y readable</option>
-        </optgroup>
-        <optgroup label="Airliner">
-          <option value="Airliner/air-ba-bold.yaml">air ba bold</option>
-          <option value="Airliner/air-ba-muted.yaml">air ba muted</option>
-          <option value="Airliner/air-emirates-bold.yaml">air emirates bold</option>
-          <option value="Airliner/air-emirates-muted.yaml">air emirates muted</option>
-          <option value="Airliner/air-etihad-bold.yaml">air etihad bold</option>
-          <option value="Airliner/air-etihad-muted.yaml">air etihad muted</option>
-          <option value="Airliner/air-icelandair-bold.yaml">air icelandair bold</option>
-          <option value="Airliner/air-icelandair-muted.yaml">air icelandair muted</option>
-          <option value="Airliner/air-ita-bold.yaml">air ita bold</option>
-          <option value="Airliner/air-ita-muted.yaml">air ita muted</option>
-          <option value="Airliner/air-klm-bold.yaml">air klm bold</option>
-          <option value="Airliner/air-klm-muted.yaml">air klm muted</option>
-          <option value="Airliner/air-lufthansa-bold.yaml">air lufthansa bold</option>
-          <option value="Airliner/air-lufthansa-muted.yaml">air lufthansa muted</option>
-          <option value="Airliner/air-norse-bold.yaml">air norse bold</option>
-          <option value="Airliner/air-norse-muted.yaml">air norse muted</option>
-          <option value="Airliner/air-qatar-bold.yaml">air qatar bold</option>
-          <option value="Airliner/air-qatar-muted.yaml">air qatar muted</option>
-          <option value="Airliner/air-sas-bold.yaml">air sas bold</option>
-          <option value="Airliner/air-sas-muted.yaml">air sas muted</option>
-          <option value="Airliner/air-singapore-bold.yaml">air singapore bold</option>
-          <option value="Airliner/air-singapore-muted.yaml">air singapore muted</option>
-          <option value="Airliner/air-swiss-bold.yaml">air swiss bold</option>
-          <option value="Airliner/air-swiss-muted.yaml">air swiss muted</option>
-          <option value="Airliner/air-thai-bold.yaml">air thai bold</option>
-          <option value="Airliner/air-thai-muted.yaml">air thai muted</option>
-          <option value="Airliner/air-ups-bold.yaml">air ups bold</option>
-          <option value="Airliner/air-ups-muted.yaml">air ups muted</option>
-        </optgroup>
-        <optgroup label="Anglican">
-          <option value="Anglican/lit-festal-bold.yaml">lit festal bold</option>
-          <option value="Anglican/lit-festal.yaml">lit festal</option>
-          <option value="Anglican/lit-ordinary-bold.yaml">lit ordinary bold</option>
-          <option value="Anglican/lit-ordinary.yaml">lit ordinary</option>
-          <option value="Anglican/lit-pentecost-bold.yaml">lit pentecost bold</option>
-          <option value="Anglican/lit-pentecost.yaml">lit pentecost</option>
-          <option value="Anglican/lit-requiem-bold.yaml">lit requiem bold</option>
-          <option value="Anglican/lit-requiem.yaml">lit requiem</option>
-          <option value="Anglican/lit-rose-bold.yaml">lit rose bold</option>
-          <option value="Anglican/lit-rose.yaml">lit rose</option>
-          <option value="Anglican/lit-sarum-bold.yaml">lit sarum bold</option>
-          <option value="Anglican/lit-sarum.yaml">lit sarum</option>
-          <option value="Anglican/lit-violet-bold.yaml">lit violet bold</option>
-          <option value="Anglican/lit-violet.yaml">lit violet</option>
-        </optgroup>
-        <optgroup label="Blue">
-          <option value="Blue/blue-charcoal.yaml">blue charcoal</option>
-          <option value="Blue/blue-paper.yaml">blue paper</option>
-          <option value="Blue/blue-tinted.yaml">blue tinted</option>
-        </optgroup>
-        <optgroup label="Brown">
-          <option value="Brown/brown-charcoal.yaml">brown charcoal</option>
-          <option value="Brown/brown-paper.yaml">brown paper</option>
-          <option value="Brown/brown-tinted.yaml">brown tinted</option>
-        </optgroup>
-        <optgroup label="CAP">
-          <option value="CAP/amber-bold.yaml">amber bold</option>
-          <option value="CAP/amber-charcoal.yaml">amber charcoal</option>
-          <option value="CAP/amber-mono.yaml">amber mono</option>
-          <option value="CAP/amber-paper.yaml">amber paper</option>
-          <option value="CAP/amber-sun.yaml">amber sun</option>
-          <option value="CAP/indigo-bold.yaml">indigo bold</option>
-          <option value="CAP/indigo-contrast.yaml">indigo contrast</option>
-          <option value="CAP/indigo-dusk.yaml">indigo dusk</option>
-          <option value="CAP/indigo-monochrome.yaml">indigo monochrome</option>
-          <option value="CAP/indigo-paper.yaml">indigo paper</option>
-          <option value="CAP/indigo-warm.yaml">indigo warm</option>
-        </optgroup>
-        <optgroup label="Childrens">
-          <option value="Childrens/kids-crayon.yaml">kids crayon</option>
-          <option value="Childrens/kids-meadow.yaml">kids meadow</option>
-          <option value="Childrens/kids-storybook.yaml">kids storybook</option>
-        </optgroup>
-        <optgroup label="Coffee shop">
-          <option value="Coffee shop/coffee-cortado.yaml">coffee cortado</option>
-          <option value="Coffee shop/coffee-espresso.yaml">coffee espresso</option>
-          <option value="Coffee shop/coffee-latte.yaml">coffee latte</option>
-        </optgroup>
-        <optgroup label="Developer">
-          <option value="Developer/dev-catppuccin.yaml">dev catppuccin</option>
-          <option value="Developer/dev-dracula.yaml">dev dracula</option>
-          <option value="Developer/dev-gruvbox.yaml">dev gruvbox</option>
-          <option value="Developer/dev-monokai.yaml">dev monokai</option>
-          <option value="Developer/dev-nord.yaml">dev nord</option>
-          <option value="Developer/dev-one-dark.yaml">dev one dark</option>
-          <option value="Developer/dev-solarized.yaml">dev solarized</option>
-          <option value="Developer/dev-tokyo-night.yaml">dev tokyo night</option>
-        </optgroup>
-        <optgroup label="Government-Institutional">
-          <option value="Government-Institutional/gov-civic.yaml">gov civic</option>
-          <option value="Government-Institutional/gov-eu.yaml">gov eu</option>
-          <option value="Government-Institutional/gov-uk.yaml">gov uk</option>
-        </optgroup>
-        <optgroup label="Gray">
-          <option value="Gray/gray-mono.yaml">gray mono</option>
-          <option value="Gray/gray-paper.yaml">gray paper</option>
-          <option value="Gray/gray-tinted.yaml">gray tinted</option>
-        </optgroup>
-        <optgroup label="Green">
-          <option value="Green/green-charcoal.yaml">green charcoal</option>
-          <option value="Green/green-paper.yaml">green paper</option>
-          <option value="Green/green-tinted.yaml">green tinted</option>
-        </optgroup>
-        <optgroup label="International flags">
-          <option value="International flags/canada-bold.yaml">canada bold</option>
-          <option value="International flags/canada-muted.yaml">canada muted</option>
-          <option value="International flags/china-bold.yaml">china bold</option>
-          <option value="International flags/china-muted.yaml">china muted</option>
-          <option value="International flags/ireland-bold.yaml">ireland bold</option>
-          <option value="International flags/ireland-muted.yaml">ireland muted</option>
-          <option value="International flags/italy-bold.yaml">italy bold</option>
-          <option value="International flags/italy-muted.yaml">italy muted</option>
-          <option value="International flags/kenya-bold.yaml">kenya bold</option>
-          <option value="International flags/kenya-muted.yaml">kenya muted</option>
-          <option value="International flags/netherlands-bold.yaml">netherlands bold</option>
-          <option value="International flags/netherlands-muted.yaml">netherlands muted</option>
-          <option value="International flags/south-africa-bold.yaml">south africa bold</option>
-          <option value="International flags/south-africa-muted.yaml">south africa muted</option>
-          <option value="International flags/south-korea-bold.yaml">south korea bold</option>
-          <option value="International flags/south-korea-muted.yaml">south korea muted</option>
-          <option value="International flags/thailand-bold.yaml">thailand bold</option>
-          <option value="International flags/thailand-muted.yaml">thailand muted</option>
-          <option value="International flags/ukraine-bold.yaml">ukraine bold</option>
-          <option value="International flags/ukraine-muted.yaml">ukraine muted</option>
-        </optgroup>
-        <optgroup label="Legal-formal">
-          <option value="Legal-formal/legal-bar.yaml">legal bar</option>
-          <option value="Legal-formal/legal-counsel.yaml">legal counsel</option>
-          <option value="Legal-formal/legal-court.yaml">legal court</option>
-        </optgroup>
-        <optgroup label="Medical-Clinical">
-          <option value="Medical-Clinical/med-clinic-bold.yaml">med clinic bold</option>
-          <option value="Medical-Clinical/med-clinic.yaml">med clinic</option>
-          <option value="Medical-Clinical/med-pharmacy-bold.yaml">med pharmacy bold</option>
-          <option value="Medical-Clinical/med-pharmacy.yaml">med pharmacy</option>
-          <option value="Medical-Clinical/med-wellness-bold.yaml">med wellness bold</option>
-          <option value="Medical-Clinical/med-wellness.yaml">med wellness</option>
-        </optgroup>
-        <optgroup label="Modern">
-          <option value="Modern/mono-press.yaml">mono press</option>
-          <option value="Modern/sage.yaml">sage</option>
-          <option value="Modern/sunset.yaml">sunset</option>
-        </optgroup>
-        <optgroup label="Newspaper-inspired">
-          <option value="Newspaper-inspired/broadsheet.yaml">broadsheet</option>
-          <option value="Newspaper-inspired/ledger.yaml">ledger</option>
-        </optgroup>
-        <optgroup label="Nordic flags">
-          <option value="Nordic flags/aland-bold.yaml">aland bold</option>
-          <option value="Nordic flags/aland-muted.yaml">aland muted</option>
-          <option value="Nordic flags/denmark-bold.yaml">denmark bold</option>
-          <option value="Nordic flags/denmark-muted.yaml">denmark muted</option>
-          <option value="Nordic flags/faroe-bold.yaml">faroe bold</option>
-          <option value="Nordic flags/faroe-muted.yaml">faroe muted</option>
-          <option value="Nordic flags/finland-bold.yaml">finland bold</option>
-          <option value="Nordic flags/finland-muted.yaml">finland muted</option>
-          <option value="Nordic flags/greenland-bold.yaml">greenland bold</option>
-          <option value="Nordic flags/greenland-muted.yaml">greenland muted</option>
-          <option value="Nordic flags/iceland-bold.yaml">iceland bold</option>
-          <option value="Nordic flags/iceland-muted.yaml">iceland muted</option>
-          <option value="Nordic flags/sweden-bold.yaml">sweden bold</option>
-          <option value="Nordic flags/sweden-muted.yaml">sweden muted</option>
-        </optgroup>
-        <optgroup label="Norge - 17 mai">
-          <option value="Norge - 17 mai/norge-banner.yaml">norge banner</option>
-          <option value="Norge - 17 mai/norge-classic.yaml">norge classic</option>
-          <option value="Norge - 17 mai/norge-crisp.yaml">norge crisp</option>
-          <option value="Norge - 17 mai/norge-festive.yaml">norge festive</option>
-        </optgroup>
-        <optgroup label="Orange">
-          <option value="Orange/orange-charcoal.yaml">orange charcoal</option>
-          <option value="Orange/orange-paper.yaml">orange paper</option>
-          <option value="Orange/orange-tinted.yaml">orange tinted</option>
-        </optgroup>
-        <optgroup label="Painters and art movements">
-          <option value="Painters and art movements/art-bauhaus.yaml">art bauhaus</option>
-          <option value="Painters and art movements/art-hokusai.yaml">art hokusai</option>
-          <option value="Painters and art movements/art-klein.yaml">art klein</option>
-          <option value="Painters and art movements/art-matisse.yaml">art matisse</option>
-          <option value="Painters and art movements/art-memphis.yaml">art memphis</option>
-          <option value="Painters and art movements/art-mondrian.yaml">art mondrian</option>
-          <option value="Painters and art movements/art-okeeffe.yaml">art okeeffe</option>
-          <option value="Painters and art movements/art-rothko.yaml">art rothko</option>
-        </optgroup>
-        <optgroup label="Pink">
-          <option value="Pink/pink-charcoal.yaml">pink charcoal</option>
-          <option value="Pink/pink-paper.yaml">pink paper</option>
-          <option value="Pink/pink-tinted.yaml">pink tinted</option>
-        </optgroup>
-        <optgroup label="Purple">
-          <option value="Purple/purple-charcoal.yaml">purple charcoal</option>
-          <option value="Purple/purple-paper.yaml">purple paper</option>
-          <option value="Purple/purple-tinted.yaml">purple tinted</option>
-        </optgroup>
-        <optgroup label="Reading">
-          <option value="Reading/read-mono.yaml">read mono</option>
-          <option value="Reading/read-paper.yaml">read paper</option>
-          <option value="Reading/read-sepia.yaml">read sepia</option>
-        </optgroup>
-        <optgroup label="Red">
-          <option value="Red/red-charcoal.yaml">red charcoal</option>
-          <option value="Red/red-paper.yaml">red paper</option>
-          <option value="Red/red-tinted.yaml">red tinted</option>
-        </optgroup>
-        <optgroup label="Retro terminals">
-          <option value="Retro terminals/term-pdp.yaml">term pdp</option>
-          <option value="Retro terminals/term-robco.yaml">term robco</option>
-          <option value="Retro terminals/term-teletype.yaml">term teletype</option>
-          <option value="Retro terminals/term-vt100.yaml">term vt100</option>
-        </optgroup>
-        <optgroup label="Subway maps and cartography">
-          <option value="Subway maps and cartography/map-nautical-bold.yaml">map nautical bold</option>
-          <option value="Subway maps and cartography/map-nautical-muted.yaml">map nautical muted</option>
-          <option value="Subway maps and cartography/map-nyc-subway-bold.yaml">map nyc subway bold</option>
-          <option value="Subway maps and cartography/map-nyc-subway-muted.yaml">map nyc subway muted</option>
-          <option value="Subway maps and cartography/map-osm-bold.yaml">map osm bold</option>
-          <option value="Subway maps and cartography/map-osm-muted.yaml">map osm muted</option>
-          <option value="Subway maps and cartography/map-paris-metro-bold.yaml">map paris metro bold</option>
-          <option value="Subway maps and cartography/map-paris-metro-muted.yaml">map paris metro muted</option>
-          <option value="Subway maps and cartography/map-swisstopo-bold.yaml">map swisstopo bold</option>
-          <option value="Subway maps and cartography/map-swisstopo-muted.yaml">map swisstopo muted</option>
-          <option value="Subway maps and cartography/map-tokyo-metro-bold.yaml">map tokyo metro bold</option>
-          <option value="Subway maps and cartography/map-tokyo-metro-muted.yaml">map tokyo metro muted</option>
-          <option value="Subway maps and cartography/map-tube-bold.yaml">map tube bold</option>
-          <option value="Subway maps and cartography/map-tube-muted.yaml">map tube muted</option>
-          <option value="Subway maps and cartography/map-tunnelbana-bold.yaml">map tunnelbana bold</option>
-          <option value="Subway maps and cartography/map-tunnelbana-muted.yaml">map tunnelbana muted</option>
-        </optgroup>
-        <optgroup label="Teal">
-          <option value="Teal/teal-charcoal.yaml">teal charcoal</option>
-          <option value="Teal/teal-paper.yaml">teal paper</option>
-          <option value="Teal/teal-tinted.yaml">teal tinted</option>
-        </optgroup>
-        <optgroup label="Time of day">
-          <option value="Time of day/tod-dawn.yaml">tod dawn</option>
-          <option value="Time of day/tod-dusk.yaml">tod dusk</option>
-          <option value="Time of day/tod-midnight.yaml">tod midnight</option>
-        </optgroup>
-        <optgroup label="Transportation">
-          <option value="Transportation/tx-bvg-bold.yaml">tx bvg bold</option>
-          <option value="Transportation/tx-bvg-muted.yaml">tx bvg muted</option>
-          <option value="Transportation/tx-db-bold.yaml">tx db bold</option>
-          <option value="Transportation/tx-db-ice-bold.yaml">tx db ice bold</option>
-          <option value="Transportation/tx-db-ice-muted.yaml">tx db ice muted</option>
-          <option value="Transportation/tx-db-muted.yaml">tx db muted</option>
-          <option value="Transportation/tx-dsb-bold.yaml">tx dsb bold</option>
-          <option value="Transportation/tx-dsb-muted.yaml">tx dsb muted</option>
-          <option value="Transportation/tx-evergreen-bold.yaml">tx evergreen bold</option>
-          <option value="Transportation/tx-evergreen-muted.yaml">tx evergreen muted</option>
-          <option value="Transportation/tx-hapag-bold.yaml">tx hapag bold</option>
-          <option value="Transportation/tx-hapag-muted.yaml">tx hapag muted</option>
-          <option value="Transportation/tx-maersk-bold.yaml">tx maersk bold</option>
-          <option value="Transportation/tx-maersk-muted.yaml">tx maersk muted</option>
-          <option value="Transportation/tx-vy-bold.yaml">tx vy bold</option>
-          <option value="Transportation/tx-vy-muted.yaml">tx vy muted</option>
-          <option value="Transportation/tx-zim-bold.yaml">tx zim bold</option>
-          <option value="Transportation/tx-zim-muted.yaml">tx zim muted</option>
-        </optgroup>
-        <optgroup label="UN Blue">
-          <option value="UN Blue/un-blue-bold.yaml">un blue bold</option>
-          <option value="UN Blue/un-blue-charcoal.yaml">un blue charcoal</option>
-          <option value="UN Blue/un-blue-paper.yaml">un blue paper</option>
-          <option value="UN Blue/un-blue-tinted.yaml">un blue tinted</option>
-        </optgroup>
     </select>
-    <div class="hint">208 themes across 30 categories. Selection applies when you open a site.</div>
+    <div class="hint" id="theme-hint">Loading themes…</div>
   </div>
 
   <div class="grid">
@@ -483,6 +213,32 @@
   </footer>
 
   <script>
+    fetch('themes/index.json')
+      .then(r => r.json())
+      .then(index => {
+        const sel = document.getElementById('theme-select');
+        let total = 0;
+        for (const [cat, themes] of Object.entries(index)) {
+          const grp = document.createElement('optgroup');
+          grp.label = cat;
+          for (const t of themes) {
+            const opt = document.createElement('option');
+            opt.value = t.slug;
+            opt.textContent = t.label;
+            grp.appendChild(opt);
+            total++;
+          }
+          sel.appendChild(grp);
+        }
+        const cats = Object.keys(index).length;
+        document.getElementById('theme-hint').textContent =
+          total + ' themes across ' + cats + ' categories. Selection applies when you open a site.';
+      })
+      .catch(() => {
+        document.getElementById('theme-hint').textContent =
+          'Theme list unavailable. Selection applies when you open a site.';
+      });
+
     function openSite(slug) {
       const val = document.getElementById('theme-select').value;
       let url = slug + '/';
diff --git a/themes/index.json b/themes/index.json
new file mode 100644
index 0000000..0d7a979
--- /dev/null
+++ b/themes/index.json
@@ -0,0 +1,896 @@
+{
+  "Accessibility-first": [
+    {
+      "slug": "Accessibility-first/a11y-aaa.yaml",
+      "label": "a11y aaa"
+    },
+    {
+      "slug": "Accessibility-first/a11y-calm.yaml",
+      "label": "a11y calm"
+    },
+    {
+      "slug": "Accessibility-first/a11y-readable.yaml",
+      "label": "a11y readable"
+    }
+  ],
+  "Airliner": [
+    {
+      "slug": "Airliner/air-ba-bold.yaml",
+      "label": "air ba bold"
+    },
+    {
+      "slug": "Airliner/air-ba-muted.yaml",
+      "label": "air ba muted"
+    },
+    {
+      "slug": "Airliner/air-emirates-bold.yaml",
+      "label": "air emirates bold"
+    },
+    {
+      "slug": "Airliner/air-emirates-muted.yaml",
+      "label": "air emirates muted"
+    },
+    {
+      "slug": "Airliner/air-etihad-bold.yaml",
+      "label": "air etihad bold"
+    },
+    {
+      "slug": "Airliner/air-etihad-muted.yaml",
+      "label": "air etihad muted"
+    },
+    {
+      "slug": "Airliner/air-icelandair-bold.yaml",
+      "label": "air icelandair bold"
+    },
+    {
+      "slug": "Airliner/air-icelandair-muted.yaml",
+      "label": "air icelandair muted"
+    },
+    {
+      "slug": "Airliner/air-ita-bold.yaml",
+      "label": "air ita bold"
+    },
+    {
+      "slug": "Airliner/air-ita-muted.yaml",
+      "label": "air ita muted"
+    },
+    {
+      "slug": "Airliner/air-klm-bold.yaml",
+      "label": "air klm bold"
+    },
+    {
+      "slug": "Airliner/air-klm-muted.yaml",
+      "label": "air klm muted"
+    },
+    {
+      "slug": "Airliner/air-lufthansa-bold.yaml",
+      "label": "air lufthansa bold"
+    },
+    {
+      "slug": "Airliner/air-lufthansa-muted.yaml",
+      "label": "air lufthansa muted"
+    },
+    {
+      "slug": "Airliner/air-norse-bold.yaml",
+      "label": "air norse bold"
+    },
+    {
+      "slug": "Airliner/air-norse-muted.yaml",
+      "label": "air norse muted"
+    },
+    {
+      "slug": "Airliner/air-qatar-bold.yaml",
+      "label": "air qatar bold"
+    },
+    {
+      "slug": "Airliner/air-qatar-muted.yaml",
+      "label": "air qatar muted"
+    },
+    {
+      "slug": "Airliner/air-sas-bold.yaml",
+      "label": "air sas bold"
+    },
+    {
+      "slug": "Airliner/air-sas-muted.yaml",
+      "label": "air sas muted"
+    },
+    {
+      "slug": "Airliner/air-singapore-bold.yaml",
+      "label": "air singapore bold"
+    },
+    {
+      "slug": "Airliner/air-singapore-muted.yaml",
+      "label": "air singapore muted"
+    },
+    {
+      "slug": "Airliner/air-swiss-bold.yaml",
+      "label": "air swiss bold"
+    },
+    {
+      "slug": "Airliner/air-swiss-muted.yaml",
+      "label": "air swiss muted"
+    },
+    {
+      "slug": "Airliner/air-thai-bold.yaml",
+      "label": "air thai bold"
+    },
+    {
+      "slug": "Airliner/air-thai-muted.yaml",
+      "label": "air thai muted"
+    },
+    {
+      "slug": "Airliner/air-ups-bold.yaml",
+      "label": "air ups bold"
+    },
+    {
+      "slug": "Airliner/air-ups-muted.yaml",
+      "label": "air ups muted"
+    }
+  ],
+  "Anglican": [
+    {
+      "slug": "Anglican/lit-festal-bold.yaml",
+      "label": "lit festal bold"
+    },
+    {
+      "slug": "Anglican/lit-festal.yaml",
+      "label": "lit festal"
+    },
+    {
+      "slug": "Anglican/lit-ordinary-bold.yaml",
+      "label": "lit ordinary bold"
+    },
+    {
+      "slug": "Anglican/lit-ordinary.yaml",
+      "label": "lit ordinary"
+    },
+    {
+      "slug": "Anglican/lit-pentecost-bold.yaml",
+      "label": "lit pentecost bold"
+    },
+    {
+      "slug": "Anglican/lit-pentecost.yaml",
+      "label": "lit pentecost"
+    },
+    {
+      "slug": "Anglican/lit-requiem-bold.yaml",
+      "label": "lit requiem bold"
+    },
+    {
+      "slug": "Anglican/lit-requiem.yaml",
+      "label": "lit requiem"
+    },
+    {
+      "slug": "Anglican/lit-rose-bold.yaml",
+      "label": "lit rose bold"
+    },
+    {
+      "slug": "Anglican/lit-rose.yaml",
+      "label": "lit rose"
+    },
+    {
+      "slug": "Anglican/lit-sarum-bold.yaml",
+      "label": "lit sarum bold"
+    },
+    {
+      "slug": "Anglican/lit-sarum.yaml",
+      "label": "lit sarum"
+    },
+    {
+      "slug": "Anglican/lit-violet-bold.yaml",
+      "label": "lit violet bold"
+    },
+    {
+      "slug": "Anglican/lit-violet.yaml",
+      "label": "lit violet"
+    }
+  ],
+  "Blue": [
+    {
+      "slug": "Blue/blue-charcoal.yaml",
+      "label": "blue charcoal"
+    },
+    {
+      "slug": "Blue/blue-paper.yaml",
+      "label": "blue paper"
+    },
+    {
+      "slug": "Blue/blue-tinted.yaml",
+      "label": "blue tinted"
+    }
+  ],
+  "Brown": [
+    {
+      "slug": "Brown/brown-charcoal.yaml",
+      "label": "brown charcoal"
+    },
+    {
+      "slug": "Brown/brown-paper.yaml",
+      "label": "brown paper"
+    },
+    {
+      "slug": "Brown/brown-tinted.yaml",
+      "label": "brown tinted"
+    }
+  ],
+  "CAP": [
+    {
+      "slug": "CAP/amber-bold.yaml",
+      "label": "amber bold"
+    },
+    {
+      "slug": "CAP/amber-charcoal.yaml",
+      "label": "amber charcoal"
+    },
+    {
+      "slug": "CAP/amber-mono.yaml",
+      "label": "amber mono"
+    },
+    {
+      "slug": "CAP/amber-paper.yaml",
+      "label": "amber paper"
+    },
+    {
+      "slug": "CAP/amber-sun.yaml",
+      "label": "amber sun"
+    },
+    {
+      "slug": "CAP/indigo-bold.yaml",
+      "label": "indigo bold"
+    },
+    {
+      "slug": "CAP/indigo-contrast.yaml",
+      "label": "indigo contrast"
+    },
+    {
+      "slug": "CAP/indigo-dusk.yaml",
+      "label": "indigo dusk"
+    },
+    {
+      "slug": "CAP/indigo-monochrome.yaml",
+      "label": "indigo monochrome"
+    },
+    {
+      "slug": "CAP/indigo-paper.yaml",
+      "label": "indigo paper"
+    },
+    {
+      "slug": "CAP/indigo-warm.yaml",
+      "label": "indigo warm"
+    }
+  ],
+  "Childrens": [
+    {
+      "slug": "Childrens/kids-crayon.yaml",
+      "label": "kids crayon"
+    },
+    {
+      "slug": "Childrens/kids-meadow.yaml",
+      "label": "kids meadow"
+    },
+    {
+      "slug": "Childrens/kids-storybook.yaml",
+      "label": "kids storybook"
+    }
+  ],
+  "Coffee shop": [
+    {
+      "slug": "Coffee shop/coffee-cortado.yaml",
+      "label": "coffee cortado"
+    },
+    {
+      "slug": "Coffee shop/coffee-espresso.yaml",
+      "label": "coffee espresso"
+    },
+    {
+      "slug": "Coffee shop/coffee-latte.yaml",
+      "label": "coffee latte"
+    }
+  ],
+  "Developer": [
+    {
+      "slug": "Developer/dev-catppuccin.yaml",
+      "label": "dev catppuccin"
+    },
+    {
+      "slug": "Developer/dev-dracula.yaml",
+      "label": "dev dracula"
+    },
+    {
+      "slug": "Developer/dev-gruvbox.yaml",
+      "label": "dev gruvbox"
+    },
+    {
+      "slug": "Developer/dev-monokai.yaml",
+      "label": "dev monokai"
+    },
+    {
+      "slug": "Developer/dev-nord.yaml",
+      "label": "dev nord"
+    },
+    {
+      "slug": "Developer/dev-one-dark.yaml",
+      "label": "dev one dark"
+    },
+    {
+      "slug": "Developer/dev-solarized.yaml",
+      "label": "dev solarized"
+    },
+    {
+      "slug": "Developer/dev-tokyo-night.yaml",
+      "label": "dev tokyo night"
+    }
+  ],
+  "Government-Institutional": [
+    {
+      "slug": "Government-Institutional/gov-civic.yaml",
+      "label": "gov civic"
+    },
+    {
+      "slug": "Government-Institutional/gov-eu.yaml",
+      "label": "gov eu"
+    },
+    {
+      "slug": "Government-Institutional/gov-uk.yaml",
+      "label": "gov uk"
+    }
+  ],
+  "Gray": [
+    {
+      "slug": "Gray/gray-mono.yaml",
+      "label": "gray mono"
+    },
+    {
+      "slug": "Gray/gray-paper.yaml",
+      "label": "gray paper"
+    },
+    {
+      "slug": "Gray/gray-tinted.yaml",
+      "label": "gray tinted"
+    }
+  ],
+  "Green": [
+    {
+      "slug": "Green/green-charcoal.yaml",
+      "label": "green charcoal"
+    },
+    {
+      "slug": "Green/green-paper.yaml",
+      "label": "green paper"
+    },
+    {
+      "slug": "Green/green-tinted.yaml",
+      "label": "green tinted"
+    }
+  ],
+  "International flags": [
+    {
+      "slug": "International flags/canada-bold.yaml",
+      "label": "canada bold"
+    },
+    {
+      "slug": "International flags/canada-muted.yaml",
+      "label": "canada muted"
+    },
+    {
+      "slug": "International flags/china-bold.yaml",
+      "label": "china bold"
+    },
+    {
+      "slug": "International flags/china-muted.yaml",
+      "label": "china muted"
+    },
+    {
+      "slug": "International flags/ireland-bold.yaml",
+      "label": "ireland bold"
+    },
+    {
+      "slug": "International flags/ireland-muted.yaml",
+      "label": "ireland muted"
+    },
+    {
+      "slug": "International flags/italy-bold.yaml",
+      "label": "italy bold"
+    },
+    {
+      "slug": "International flags/italy-muted.yaml",
+      "label": "italy muted"
+    },
+    {
+      "slug": "International flags/kenya-bold.yaml",
+      "label": "kenya bold"
+    },
+    {
+      "slug": "International flags/kenya-muted.yaml",
+      "label": "kenya muted"
+    },
+    {
+      "slug": "International flags/netherlands-bold.yaml",
+      "label": "netherlands bold"
+    },
+    {
+      "slug": "International flags/netherlands-muted.yaml",
+      "label": "netherlands muted"
+    },
+    {
+      "slug": "International flags/south-africa-bold.yaml",
+      "label": "south africa bold"
+    },
+    {
+      "slug": "International flags/south-africa-muted.yaml",
+      "label": "south africa muted"
+    },
+    {
+      "slug": "International flags/south-korea-bold.yaml",
+      "label": "south korea bold"
+    },
+    {
+      "slug": "International flags/south-korea-muted.yaml",
+      "label": "south korea muted"
+    },
+    {
+      "slug": "International flags/thailand-bold.yaml",
+      "label": "thailand bold"
+    },
+    {
+      "slug": "International flags/thailand-muted.yaml",
+      "label": "thailand muted"
+    },
+    {
+      "slug": "International flags/ukraine-bold.yaml",
+      "label": "ukraine bold"
+    },
+    {
+      "slug": "International flags/ukraine-muted.yaml",
+      "label": "ukraine muted"
+    }
+  ],
+  "Legal-formal": [
+    {
+      "slug": "Legal-formal/legal-bar.yaml",
+      "label": "legal bar"
+    },
+    {
+      "slug": "Legal-formal/legal-counsel.yaml",
+      "label": "legal counsel"
+    },
+    {
+      "slug": "Legal-formal/legal-court.yaml",
+      "label": "legal court"
+    }
+  ],
+  "Medical-Clinical": [
+    {
+      "slug": "Medical-Clinical/med-clinic-bold.yaml",
+      "label": "med clinic bold"
+    },
+    {
+      "slug": "Medical-Clinical/med-clinic.yaml",
+      "label": "med clinic"
+    },
+    {
+      "slug": "Medical-Clinical/med-pharmacy-bold.yaml",
+      "label": "med pharmacy bold"
+    },
+    {
+      "slug": "Medical-Clinical/med-pharmacy.yaml",
+      "label": "med pharmacy"
+    },
+    {
+      "slug": "Medical-Clinical/med-wellness-bold.yaml",
+      "label": "med wellness bold"
+    },
+    {
+      "slug": "Medical-Clinical/med-wellness.yaml",
+      "label": "med wellness"
+    }
+  ],
+  "Modern": [
+    {
+      "slug": "Modern/mono-press.yaml",
+      "label": "mono press"
+    },
+    {
+      "slug": "Modern/sage.yaml",
+      "label": "sage"
+    },
+    {
+      "slug": "Modern/sunset.yaml",
+      "label": "sunset"
+    }
+  ],
+  "Newspaper-inspired": [
+    {
+      "slug": "Newspaper-inspired/broadsheet.yaml",
+      "label": "broadsheet"
+    },
+    {
+      "slug": "Newspaper-inspired/ledger.yaml",
+      "label": "ledger"
+    }
+  ],
+  "Nordic flags": [
+    {
+      "slug": "Nordic flags/aland-bold.yaml",
+      "label": "aland bold"
+    },
+    {
+      "slug": "Nordic flags/aland-muted.yaml",
+      "label": "aland muted"
+    },
+    {
+      "slug": "Nordic flags/denmark-bold.yaml",
+      "label": "denmark bold"
+    },
+    {
+      "slug": "Nordic flags/denmark-muted.yaml",
+      "label": "denmark muted"
+    },
+    {
+      "slug": "Nordic flags/faroe-bold.yaml",
+      "label": "faroe bold"
+    },
+    {
+      "slug": "Nordic flags/faroe-muted.yaml",
+      "label": "faroe muted"
+    },
+    {
+      "slug": "Nordic flags/finland-bold.yaml",
+      "label": "finland bold"
+    },
+    {
+      "slug": "Nordic flags/finland-muted.yaml",
+      "label": "finland muted"
+    },
+    {
+      "slug": "Nordic flags/greenland-bold.yaml",
+      "label": "greenland bold"
+    },
+    {
+      "slug": "Nordic flags/greenland-muted.yaml",
+      "label": "greenland muted"
+    },
+    {
+      "slug": "Nordic flags/iceland-bold.yaml",
+      "label": "iceland bold"
+    },
+    {
+      "slug": "Nordic flags/iceland-muted.yaml",
+      "label": "iceland muted"
+    },
+    {
+      "slug": "Nordic flags/sweden-bold.yaml",
+      "label": "sweden bold"
+    },
+    {
+      "slug": "Nordic flags/sweden-muted.yaml",
+      "label": "sweden muted"
+    }
+  ],
+  "Norge - 17 mai": [
+    {
+      "slug": "Norge - 17 mai/norge-banner.yaml",
+      "label": "norge banner"
+    },
+    {
+      "slug": "Norge - 17 mai/norge-classic.yaml",
+      "label": "norge classic"
+    },
+    {
+      "slug": "Norge - 17 mai/norge-crisp.yaml",
+      "label": "norge crisp"
+    },
+    {
+      "slug": "Norge - 17 mai/norge-festive.yaml",
+      "label": "norge festive"
+    }
+  ],
+  "Orange": [
+    {
+      "slug": "Orange/orange-charcoal.yaml",
+      "label": "orange charcoal"
+    },
+    {
+      "slug": "Orange/orange-paper.yaml",
+      "label": "orange paper"
+    },
+    {
+      "slug": "Orange/orange-tinted.yaml",
+      "label": "orange tinted"
+    }
+  ],
+  "Painters and art movements": [
+    {
+      "slug": "Painters and art movements/art-bauhaus.yaml",
+      "label": "art bauhaus"
+    },
+    {
+      "slug": "Painters and art movements/art-hokusai.yaml",
+      "label": "art hokusai"
+    },
+    {
+      "slug": "Painters and art movements/art-klein.yaml",
+      "label": "art klein"
+    },
+    {
+      "slug": "Painters and art movements/art-matisse.yaml",
+      "label": "art matisse"
+    },
+    {
+      "slug": "Painters and art movements/art-memphis.yaml",
+      "label": "art memphis"
+    },
+    {
+      "slug": "Painters and art movements/art-mondrian.yaml",
+      "label": "art mondrian"
+    },
+    {
+      "slug": "Painters and art movements/art-okeeffe.yaml",
+      "label": "art okeeffe"
+    },
+    {
+      "slug": "Painters and art movements/art-rothko.yaml",
+      "label": "art rothko"
+    }
+  ],
+  "Pink": [
+    {
+      "slug": "Pink/pink-charcoal.yaml",
+      "label": "pink charcoal"
+    },
+    {
+      "slug": "Pink/pink-paper.yaml",
+      "label": "pink paper"
+    },
+    {
+      "slug": "Pink/pink-tinted.yaml",
+      "label": "pink tinted"
+    }
+  ],
+  "Purple": [
+    {
+      "slug": "Purple/purple-charcoal.yaml",
+      "label": "purple charcoal"
+    },
+    {
+      "slug": "Purple/purple-paper.yaml",
+      "label": "purple paper"
+    },
+    {
+      "slug": "Purple/purple-tinted.yaml",
+      "label": "purple tinted"
+    }
+  ],
+  "Reading": [
+    {
+      "slug": "Reading/read-mono.yaml",
+      "label": "read mono"
+    },
+    {
+      "slug": "Reading/read-paper.yaml",
+      "label": "read paper"
+    },
+    {
+      "slug": "Reading/read-sepia.yaml",
+      "label": "read sepia"
+    }
+  ],
+  "Red": [
+    {
+      "slug": "Red/red-charcoal.yaml",
+      "label": "red charcoal"
+    },
+    {
+      "slug": "Red/red-paper.yaml",
+      "label": "red paper"
+    },
+    {
+      "slug": "Red/red-tinted.yaml",
+      "label": "red tinted"
+    }
+  ],
+  "Retro terminals": [
+    {
+      "slug": "Retro terminals/term-pdp.yaml",
+      "label": "term pdp"
+    },
+    {
+      "slug": "Retro terminals/term-robco.yaml",
+      "label": "term robco"
+    },
+    {
+      "slug": "Retro terminals/term-teletype.yaml",
+      "label": "term teletype"
+    },
+    {
+      "slug": "Retro terminals/term-vt100.yaml",
+      "label": "term vt100"
+    }
+  ],
+  "Subway maps and cartography": [
+    {
+      "slug": "Subway maps and cartography/map-nautical-bold.yaml",
+      "label": "map nautical bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-nautical-muted.yaml",
+      "label": "map nautical muted"
+    },
+    {
+      "slug": "Subway maps and cartography/map-nyc-subway-bold.yaml",
+      "label": "map nyc subway bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-nyc-subway-muted.yaml",
+      "label": "map nyc subway muted"
+    },
+    {
+      "slug": "Subway maps and cartography/map-osm-bold.yaml",
+      "label": "map osm bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-osm-muted.yaml",
+      "label": "map osm muted"
+    },
+    {
+      "slug": "Subway maps and cartography/map-paris-metro-bold.yaml",
+      "label": "map paris metro bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-paris-metro-muted.yaml",
+      "label": "map paris metro muted"
+    },
+    {
+      "slug": "Subway maps and cartography/map-swisstopo-bold.yaml",
+      "label": "map swisstopo bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-swisstopo-muted.yaml",
+      "label": "map swisstopo muted"
+    },
+    {
+      "slug": "Subway maps and cartography/map-tokyo-metro-bold.yaml",
+      "label": "map tokyo metro bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-tokyo-metro-muted.yaml",
+      "label": "map tokyo metro muted"
+    },
+    {
+      "slug": "Subway maps and cartography/map-tube-bold.yaml",
+      "label": "map tube bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-tube-muted.yaml",
+      "label": "map tube muted"
+    },
+    {
+      "slug": "Subway maps and cartography/map-tunnelbana-bold.yaml",
+      "label": "map tunnelbana bold"
+    },
+    {
+      "slug": "Subway maps and cartography/map-tunnelbana-muted.yaml",
+      "label": "map tunnelbana muted"
+    }
+  ],
+  "Teal": [
+    {
+      "slug": "Teal/teal-charcoal.yaml",
+      "label": "teal charcoal"
+    },
+    {
+      "slug": "Teal/teal-paper.yaml",
+      "label": "teal paper"
+    },
+    {
+      "slug": "Teal/teal-tinted.yaml",
+      "label": "teal tinted"
+    }
+  ],
+  "Time of day": [
+    {
+      "slug": "Time of day/tod-dawn.yaml",
+      "label": "tod dawn"
+    },
+    {
+      "slug": "Time of day/tod-dusk.yaml",
+      "label": "tod dusk"
+    },
+    {
+      "slug": "Time of day/tod-midnight.yaml",
+      "label": "tod midnight"
+    }
+  ],
+  "Transportation": [
+    {
+      "slug": "Transportation/tx-bvg-bold.yaml",
+      "label": "tx bvg bold"
+    },
+    {
+      "slug": "Transportation/tx-bvg-muted.yaml",
+      "label": "tx bvg muted"
+    },
+    {
+      "slug": "Transportation/tx-db-bold.yaml",
+      "label": "tx db bold"
+    },
+    {
+      "slug": "Transportation/tx-db-ice-bold.yaml",
+      "label": "tx db ice bold"
+    },
+    {
+      "slug": "Transportation/tx-db-ice-muted.yaml",
+      "label": "tx db ice muted"
+    },
+    {
+      "slug": "Transportation/tx-db-muted.yaml",
+      "label": "tx db muted"
+    },
+    {
+      "slug": "Transportation/tx-dsb-bold.yaml",
+      "label": "tx dsb bold"
+    },
+    {
+      "slug": "Transportation/tx-dsb-muted.yaml",
+      "label": "tx dsb muted"
+    },
+    {
+      "slug": "Transportation/tx-evergreen-bold.yaml",
+      "label": "tx evergreen bold"
+    },
+    {
+      "slug": "Transportation/tx-evergreen-muted.yaml",
+      "label": "tx evergreen muted"
+    },
+    {
+      "slug": "Transportation/tx-hapag-bold.yaml",
+      "label": "tx hapag bold"
+    },
+    {
+      "slug": "Transportation/tx-hapag-muted.yaml",
+      "label": "tx hapag muted"
+    },
+    {
+      "slug": "Transportation/tx-maersk-bold.yaml",
+      "label": "tx maersk bold"
+    },
+    {
+      "slug": "Transportation/tx-maersk-muted.yaml",
+      "label": "tx maersk muted"
+    },
+    {
+      "slug": "Transportation/tx-vy-bold.yaml",
+      "label": "tx vy bold"
+    },
+    {
+      "slug": "Transportation/tx-vy-muted.yaml",
+      "label": "tx vy muted"
+    },
+    {
+      "slug": "Transportation/tx-zim-bold.yaml",
+      "label": "tx zim bold"
+    },
+    {
+      "slug": "Transportation/tx-zim-muted.yaml",
+      "label": "tx zim muted"
+    }
+  ],
+  "UN Blue": [
+    {
+      "slug": "UN Blue/un-blue-bold.yaml",
+      "label": "un blue bold"
+    },
+    {
+      "slug": "UN Blue/un-blue-charcoal.yaml",
+      "label": "un blue charcoal"
+    },
+    {
+      "slug": "UN Blue/un-blue-paper.yaml",
+      "label": "un blue paper"
+    },
+    {
+      "slug": "UN Blue/un-blue-tinted.yaml",
+      "label": "un blue tinted"
+    }
+  ]
+}
\ No newline at end of file