feat(website): add data-url to tag buttons for client-side routing

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

website/build.py

@@ -332,6 +332,7 @@ def build(repo_root: Path) -> None:
         trim_blocks=True,
         lstrip_blocks=True,
     )
+    env.filters["slugify"] = slugify
 
     site_dir = website / "output"
     if site_dir.exists():

website/templates/category.html

@@ -117,15 +117,19 @@
           </td>
           <td class="col-cat">
             {% for subcat in entry.subcategories %}
-            <button class="tag" data-value="{{ subcat.value }}">
+            <button class="tag" data-value="{{ subcat.value }}" data-url="{{ subcat.url }}">
               {{ subcat.name }}
             </button>
             {% endfor %}
-            <button class="tag active" data-value="{{ category.name }}">
+            <button class="tag active" data-value="{{ category.name }}" data-url="/categories/{{ category.slug }}/">
               {{ category.name }}
             </button>
             {% if entry.groups %}
-            <button class="tag tag-group" data-value="{{ entry.groups[0] }}">
+            <button
+              class="tag tag-group"
+              data-value="{{ entry.groups[0] }}"
+              data-url="/categories/{{ entry.groups[0] | slugify }}/"
+            >
               {{ entry.groups[0] }}
             </button>
             {% endif %}

website/templates/index.html

@@ -227,7 +227,7 @@
           </td>
           <td class="col-cat">
             {% for subcat in entry.subcategories %}
-            <button class="tag" data-value="{{ subcat.value }}">
+            <button class="tag" data-value="{{ subcat.value }}" data-url="{{ subcat.url }}">
               {{ subcat.name }}
             </button>
             {% endfor %} {% for cat in entry.categories %}
@@ -235,10 +235,15 @@
               class="tag"
               href="{{ category_urls[cat] }}"
               data-value="{{ cat }}"
+              data-url="{{ category_urls[cat] }}"
               >{{ cat }}</a
             >
             {% endfor %}
-            <button class="tag tag-group" data-value="{{ entry.groups[0] }}">
+            <button
+              class="tag tag-group"
+              data-value="{{ entry.groups[0] }}"
+              data-url="/categories/{{ entry.groups[0] | slugify }}/"
+            >
               {{ entry.groups[0] }}
             </button>
             {% if entry.source_type == 'Built-in' %}

website/tests/test_build.py

@@ -724,6 +724,37 @@ class TestBuild:
         assert "wf1" in web_dev
         assert "dl1" not in web_dev
 
+    def test_tag_buttons_have_data_url(self, tmp_path):
+        readme = textwrap.dedent("""\
+            # T
+
+            ---
+
+            **AI & ML**
+
+            ## Deep Learning
+
+            - Vision
+
+                - [v1](https://example.com/v1) - Vision lib.
+
+            # Contributing
+
+            Done.
+        """)
+        self._copy_real_templates(tmp_path)
+        (tmp_path / "README.md").write_text(readme, encoding="utf-8")
+        build(tmp_path)
+
+        site = tmp_path / "website" / "output"
+        index_html = (site / "index.html").read_text(encoding="utf-8")
+
+        assert 'data-value="Deep Learning"' in index_html
+        assert 'data-url="/categories/deep-learning/"' in index_html
+        assert 'data-value="AI & ML"' in index_html or 'data-value="AI & ML"' in index_html
+        assert 'data-url="/categories/ai-ml/"' in index_html
+        assert 'data-url="/categories/deep-learning/vision/"' in index_html
+
 
 # ---------------------------------------------------------------------------
 # extract_github_repo