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>
This commit is contained in:
Vinta Chen
2026-10-26 12:08:15 +08:00
co-authored by Claude
parent 7974eeacdf
commit a7df2a9f0e
3 changed files with 24 additions and 44 deletions
+22
View File
@@ -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>
+1 -22
View File
@@ -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>
+1 -22
View File
@@ -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 %}