From a7df2a9f0ef2953be0e9e423bd6c6099fee9aa22 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Mon, 26 Oct 2026 10:49:11 +0800
Subject: [PATCH] refactor: share the hero category nav between home and
 category pages

The "Browse by category" markup was duplicated in index.html and category.html, and the two copies had drifted.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/templates/_category_nav.html | 22 ++++++++++++++++++++++
 website/templates/category.html      | 23 +----------------------
 website/templates/index.html         | 23 +----------------------
 3 files changed, 24 insertions(+), 44 deletions(-)
 create mode 100644 website/templates/_category_nav.html

diff --git a/website/templates/_category_nav.html b/website/templates/_category_nav.html
new file mode 100644
index 00000000..c6f60bd6
--- /dev/null
+++ b/website/templates/_category_nav.html
@@ -0,0 +1,22 @@
+<nav class="hero-category-nav" aria-labelledby="hero-category-heading">
+      <details class="hero-category-details" open>
+        <summary class="hero-category-meta">
+          <h2 id="hero-category-heading">Browse by category</h2>
+        </summary>
+        <ul class="hero-category-links">
+          {% for category in nav_categories %}
+          <li>
+            <a class="hero-category-link" href="{{ category_urls[category.name] }}"
+              >{{ category.name }}</a
+            >
+          </li>
+          {% endfor %}
+        </ul>
+      </details>
+      <script>
+        // Collapse before first paint on phones, where the open list pushes the table about 1.5 screens down
+        if (matchMedia("(max-width: 680px)").matches) {
+          document.currentScript.previousElementSibling.open = false;
+        }
+      </script>
+    </nav>
diff --git a/website/templates/category.html b/website/templates/category.html
index c1a49186..b64af1a3 100644
--- a/website/templates/category.html
+++ b/website/templates/category.html
@@ -55,28 +55,7 @@
     </div>
 
     {% if group_categories %}
-    <nav class="hero-category-nav" aria-labelledby="hero-category-heading">
-      <details class="hero-category-details" open>
-        <summary class="hero-category-meta">
-          <h2 id="hero-category-heading">Browse by category</h2>
-        </summary>
-        <ul class="hero-category-links">
-          {% for sub in group_categories %}
-          <li>
-            <a class="hero-category-link" href="{{ category_urls[sub.name] }}"
-              >{{ sub.name }}</a
-            >
-          </li>
-          {% endfor %}
-        </ul>
-      </details>
-      <script>
-        // Collapse before first paint on phones, where the open list pushes the table about 1.5 screens down
-        if (matchMedia("(max-width: 680px)").matches) {
-          document.currentScript.previousElementSibling.open = false;
-        }
-      </script>
-    </nav>
+    {%+ with nav_categories = group_categories %}{% include "_category_nav.html" %}{% endwith +%}
     {% endif %}
   </div>
 </header>
diff --git a/website/templates/index.html b/website/templates/index.html
index fcea908b..af081acb 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -50,28 +50,7 @@
       </div>
     </div>
 
-    <nav class="hero-category-nav" aria-labelledby="hero-category-heading">
-      <details class="hero-category-details" open>
-        <summary class="hero-category-meta">
-          <h2 id="hero-category-heading">Browse by category</h2>
-        </summary>
-        <ul class="hero-category-links">
-          {% for category in categories %}
-          <li>
-            <a class="hero-category-link" href="{{ category_urls[category.name] }}"
-              >{{ category.name }}</a
-            >
-          </li>
-          {% endfor %}
-        </ul>
-      </details>
-      <script>
-        // Collapse before first paint on phones, where the open list pushes the table about 1.5 screens down
-        if (matchMedia("(max-width: 680px)").matches) {
-          document.currentScript.previousElementSibling.open = false;
-        }
-      </script>
-    </nav>
+    {%+ with nav_categories = categories %}{% include "_category_nav.html" %}{% endwith +%}
   </div>
 </header>
 {% endblock %}