From f4191b274619a75f9d550ce2a899f0a87e8a3cc4 Mon Sep 17 00:00:00 2001
From: Vinta Chen <vinta.chen@gmail.com>
Date: Mon, 26 Oct 2026 10:55:51 +0800
Subject: [PATCH] refactor: extract shared projects table macro

Co-Authored-By: Claude <noreply@anthropic.com>
---
 website/templates/_projects_table.html | 74 ++++++++++++++++++++++++++
 website/templates/category.html        | 74 ++------------------------
 website/templates/index.html           | 74 ++------------------------
 3 files changed, 80 insertions(+), 142 deletions(-)
 create mode 100644 website/templates/_projects_table.html

diff --git a/website/templates/_projects_table.html b/website/templates/_projects_table.html
new file mode 100644
index 00000000..193000e3
--- /dev/null
+++ b/website/templates/_projects_table.html
@@ -0,0 +1,74 @@
+{% macro projects_table(count, scope, editorial=false) %}
+  <div class="controls section-shell">
+    <h2 class="sr-only">Search and filter</h2>
+    <div class="search-wrap">
+      <svg
+        class="search-icon"
+        aria-hidden="true"
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="11" cy="11" r="8" />
+        <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      </svg>
+      <input
+        type="search"
+        class="search"
+        placeholder="Search {{ count }} project{{ "s" if count != 1 }} {{ scope }}…"
+        data-short-placeholder="Search {{ count }} project{{ "s" if count != 1 }}…"
+        aria-label="Search projects"
+      />
+    </div>
+  </div>
+
+  <h2 class="sr-only">Results</h2>
+  <div
+    class="table-wrap"
+    tabindex="0"
+    role="region"
+    aria-label="Projects table"
+  >
+    <table class="table"{% if editorial %} data-default-sort="editorial"{% endif %}>
+      <thead>
+        <tr>
+          <th class="col-num"><span class="sr-only">Row number</span></th>
+          <th class="col-name" data-sort="name">
+            <button type="button" class="sort-btn">Project Name</button>
+          </th>
+          <th class="col-downloads" data-sort="downloads">
+            <button type="button" class="sort-btn" title="PyPI downloads, last 30 days">PyPI Downloads</button>
+          </th>
+          <th class="col-stars" data-sort="stars">
+            <button type="button" class="sort-btn">GitHub Stars</button>
+          </th>
+          <th class="col-commit" data-sort="commit-time">
+            <button type="button" class="sort-btn">Last Commit</button>
+          </th>
+          <th class="col-cat">Tags</th>
+          <th class="col-arrow">
+            <button class="back-to-top" aria-label="Back to top">
+              Top &uarr;
+            </button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+{{ caller() }}
+      </tbody>
+    </table>
+  </div>
+
+  <div class="no-results" hidden>
+    <p>No projects match your search.</p>
+    <p class="no-results-hint">
+      Try a broader term, or
+      <button class="no-results-clear">browse all projects</button>.
+    </p>
+  </div>
+{% endmacro %}
diff --git a/website/templates/category.html b/website/templates/category.html
index cdadd21f..10fa0bd5 100644
--- a/website/templates/category.html
+++ b/website/templates/category.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% from "_projects_table.html" import projects_table %}
 {% block title %}{{ category_title }}{% endblock %}
 {% block description %}{{ category_description }}{% endblock %}
 {% block canonical_url %}{{ category_url }}{% endblock %}
@@ -216,66 +217,7 @@
     </p>
   </div>
 
-  <div class="controls section-shell">
-    <h2 class="sr-only">Search and filter</h2>
-    <div class="search-wrap">
-      <svg
-        class="search-icon"
-        aria-hidden="true"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <circle cx="11" cy="11" r="8" />
-        <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      </svg>
-      <input
-        type="search"
-        class="search"
-        placeholder="Search {{ entries | length }} project{{ "s" if not single_entry }} in {{ category.name }}…"
-        data-short-placeholder="Search {{ entries | length }} project{{ "s" if not single_entry }}…"
-        aria-label="Search projects"
-      />
-    </div>
-  </div>
-
-  <h2 class="sr-only">Results</h2>
-  <div
-    class="table-wrap"
-    tabindex="0"
-    role="region"
-    aria-label="Projects table"
-  >
-    <table class="table"{% if entry_groups %} data-default-sort="editorial"{% endif %}>
-      <thead>
-        <tr>
-          <th class="col-num"><span class="sr-only">Row number</span></th>
-          <th class="col-name" data-sort="name">
-            <button type="button" class="sort-btn">Project Name</button>
-          </th>
-          <th class="col-downloads" data-sort="downloads">
-            <button type="button" class="sort-btn" title="PyPI downloads, last 30 days">PyPI Downloads</button>
-          </th>
-          <th class="col-stars" data-sort="stars">
-            <button type="button" class="sort-btn">GitHub Stars</button>
-          </th>
-          <th class="col-commit" data-sort="commit-time">
-            <button type="button" class="sort-btn">Last Commit</button>
-          </th>
-          <th class="col-cat">Tags</th>
-          <th class="col-arrow">
-            <button class="back-to-top" aria-label="Back to top">
-              Top &uarr;
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
+  {% call projects_table(entries | length, "in " ~ category.name, entry_groups) %}
         {% if entry_groups %}
         {% set row = namespace(index=0) %}
         {% for group in entry_groups %}
@@ -302,17 +244,7 @@
         {{ entry_rows(entry, loop.index) }}
         {% endfor %}
         {% endif %}
-      </tbody>
-    </table>
-  </div>
-
-  <div class="no-results" hidden>
-    <p>No projects match your search.</p>
-    <p class="no-results-hint">
-      Try a broader term, or
-      <button class="no-results-clear">browse all projects</button>.
-    </p>
-  </div>
+  {% endcall %}
 </section>
 
 {% if guide_html %}
diff --git a/website/templates/index.html b/website/templates/index.html
index b6b1e578..8d0a4385 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -1,4 +1,5 @@
 {% extends "base.html" %}
+{% from "_projects_table.html" import projects_table %}
 {% block extra_head %}
 <script type="application/ld+json">{{ homepage_json_ld | safe }}</script>
 {% endblock %}
@@ -68,66 +69,7 @@
     </p>
   </div>
 
-  <div class="controls section-shell">
-    <h2 class="sr-only">Search and filter</h2>
-    <div class="search-wrap">
-      <svg
-        class="search-icon"
-        aria-hidden="true"
-        width="16"
-        height="16"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <circle cx="11" cy="11" r="8" />
-        <line x1="21" y1="21" x2="16.65" y2="16.65" />
-      </svg>
-      <input
-        type="search"
-        class="search"
-        placeholder="Search {{ entries | length }} projects across {{ total_categories }} categories…"
-        data-short-placeholder="Search {{ entries | length }} projects…"
-        aria-label="Search projects"
-      />
-    </div>
-  </div>
-
-  <h2 class="sr-only">Results</h2>
-  <div
-    class="table-wrap"
-    tabindex="0"
-    role="region"
-    aria-label="Projects table"
-  >
-    <table class="table">
-      <thead>
-        <tr>
-          <th class="col-num"><span class="sr-only">Row number</span></th>
-          <th class="col-name" data-sort="name">
-            <button type="button" class="sort-btn">Project Name</button>
-          </th>
-          <th class="col-downloads" data-sort="downloads">
-            <button type="button" class="sort-btn" title="PyPI downloads, last 30 days">PyPI Downloads</button>
-          </th>
-          <th class="col-stars" data-sort="stars">
-            <button type="button" class="sort-btn">GitHub Stars</button>
-          </th>
-          <th class="col-commit" data-sort="commit-time">
-            <button type="button" class="sort-btn">Last Commit</button>
-          </th>
-          <th class="col-cat">Tags</th>
-          <th class="col-arrow">
-            <button class="back-to-top" aria-label="Back to top">
-              Top &uarr;
-            </button>
-          </th>
-        </tr>
-      </thead>
-      <tbody>
+  {% call projects_table(entries | length, "across " ~ total_categories ~ " categories") %}
         {% for entry in entries %}
         <tr
           class="row"
@@ -253,17 +195,7 @@
           <td></td>
         </tr>
         {% endfor %}
-      </tbody>
-    </table>
-  </div>
-
-  <div class="no-results" hidden>
-    <p>No projects match your search.</p>
-    <p class="no-results-hint">
-      Try a broader term, or
-      <button class="no-results-clear">browse all projects</button>.
-    </p>
-  </div>
+  {% endcall %}
 </section>
 
 {% include "_final_cta.html" +%}