From 04a04a136b4143b4c7753e9edd8422433c8c2267 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Sun, 3 May 2026 00:44:43 +0800
Subject: [PATCH] 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                |  1 +
 website/templates/category.html | 10 +++++++---
 website/templates/index.html    |  9 +++++++--
 website/tests/test_build.py     | 31 +++++++++++++++++++++++++++++++
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/website/build.py b/website/build.py
index 3e94a2b2..7c87f986 100644
--- a/website/build.py
+++ b/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():
diff --git a/website/templates/category.html b/website/templates/category.html
index 8983c77e..c17cebc5 100644
--- a/website/templates/category.html
+++ b/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 %}
diff --git a/website/templates/index.html b/website/templates/index.html
index b3f9c6e2..2f909644 100644
--- a/website/templates/index.html
+++ b/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' %}
diff --git a/website/tests/test_build.py b/website/tests/test_build.py
index 85c7ea21..b482c1a6 100644
--- a/website/tests/test_build.py
+++ b/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 &amp; 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