Website: change static status tables on category pages to filtering

_includes/eiplist.html

@@ -0,0 +1,23 @@
+{% assign eips = include.eips | sort: "eip" %}
+<table class="eiptable" id="eip-table">
+  <thead>
+    <tr>
+      <th class="eipnum">Number</th>
+      <th class="date">Review ends</th>
+      <th class="title">Title</th>
+      <th class="author">Author</th>
+    </tr>
+  </thead>
+  <tbody>
+    {% for page in eips %}
+      {% if page.eip %}
+        <tr data-status="{{ page.status }}">
+          <td class="eipnum"><a href="{{ page.url | relative_url }}">{{ page.eip | xml_escape }}</a></td>
+          <td class="date">{% if page.status == "Last Call" and page.last-call-deadline %}{{ page.last-call-deadline | xml_escape }}{% endif %}</td>
+          <td class="title">{{ page.title | xml_escape }}</td>
+          <td class="author">{% include authorlist.html authors=page.author %}</td>
+        </tr>
+      {% endif %}
+    {% endfor %}
+  </tbody>
+</table>

_includes/eiptable.html

@@ -1,12 +1,3 @@
-<style type="text/css">
-  .eiptable .title {
-    width: 67%;
-  }
-
-  .eiptable .author {
-    width: 33%;
-  }
-</style>
 {% for status in site.data.statuses %}
   {% assign eips = include.eips|where:"status",status|sort:"eip" %}
   {% assign count = eips|size %}

_includes/head.html

@@ -92,4 +92,88 @@
       }
     });
   </script>
+  <script type="text/javascript">
+    // EIP status filtering
+    document.addEventListener('DOMContentLoaded', function() {
+      var table = document.getElementById('eip-table');
+      if (!table) return;
+
+      // Statuses from _data/statuses.yaml
+      var statuses = [{% for status in site.data.statuses %}'{{ status }}'{% unless forloop.last %}, {% endunless %}{% endfor %}];
+
+      function filterByStatus(status) {
+        var rows = table.querySelectorAll('tbody tr');
+        var visibleCount = 0;
+        rows.forEach(function(row) {
+          if (!status || row.getAttribute('data-status') === status) {
+            row.classList.remove('hidden');
+            visibleCount++;
+          } else {
+            row.classList.add('hidden');
+          }
+        });
+
+        // Update active state on status links
+        document.querySelectorAll('.status-link').forEach(function(link) {
+          var linkStatus = link.getAttribute('data-status');
+          if (linkStatus === status || (!status && linkStatus === '')) {
+            link.classList.add('active');
+          } else {
+            link.classList.remove('active');
+          }
+        });
+
+        // Show "No EIPs" message if filter returns no results
+        var noResultsMsg = document.getElementById('no-results');
+        if (visibleCount === 0) {
+          table.style.display = 'none';
+          if (!noResultsMsg) {
+            noResultsMsg = document.createElement('p');
+            noResultsMsg.id = 'no-results';
+            noResultsMsg.textContent = 'No EIPs';
+            noResultsMsg.className = 'no-results';
+            table.parentNode.insertBefore(noResultsMsg, table.nextSibling);
+          }
+          noResultsMsg.style.display = '';
+        } else {
+          table.style.display = '';
+          if (noResultsMsg) noResultsMsg.style.display = 'none';
+        }
+      }
+
+      // Map hash to status name (e.g., 'last-call' -> 'Last Call')
+      function getStatusFromHash() {
+        var hash = window.location.hash.slice(1);
+        if (!hash) return '';
+        for (var i = 0; i < statuses.length; i++) {
+          if (statuses[i].toLowerCase().replace(/ /g, '-') === hash) {
+            return statuses[i];
+          }
+        }
+        return '';
+      }
+
+      // Apply filter on load
+      filterByStatus(getStatusFromHash());
+
+      // Apply filter on hash change
+      window.addEventListener('hashchange', function() {
+        filterByStatus(getStatusFromHash());
+      });
+
+      // Handle click on status links
+      document.querySelectorAll('.status-link').forEach(function(link) {
+        link.addEventListener('click', function(e) {
+          e.preventDefault();
+          var status = this.getAttribute('data-status');
+          if (status) {
+            window.location.hash = status.toLowerCase().replace(/ /g, '-');
+          } else {
+            history.pushState('', document.title, window.location.pathname);
+            filterByStatus('');
+          }
+        });
+      });
+    });
+  </script>
 </head>

_includes/header.html

@@ -19,11 +19,24 @@
           {%- for path in page_paths -%}
             {%- assign my_page = site.pages | where: "path", path | first -%}
             {%- if my_page.title -%}
-            <a class="page-link col" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
+            <a class="page-link col{% if page.category_filter == my_page.title %} active{% endif %}" href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
             {%- endif -%}
           {%- endfor -%}
         </div>
       </nav>
     {%- endif -%}
   </div>
+  {% if page.category_filter %}
+  <div class="wrapper">
+    <nav class="status-nav" aria-label="Filter by status">
+      <span class="status-nav-label">Status:</span>
+      <div class="status-nav-links">
+        <a class="status-link active" href="#" data-status="">All</a>
+        {% for status in site.data.statuses %}
+        <a class="status-link" href="#{{ status | slugify }}" id="{{ status | slugify }}" data-status="{{ status }}">{{ status }}</a>
+        {% endfor %}
+      </div>
+    </nav>
+  </div>
+  {% endif %}
 </header>

all.html

@@ -1,6 +1,7 @@
 ---
 layout: page
 title: All
+category_filter: All
 ---
 
-{% include eiptable.html eips=site.pages %}
+{% include eiplist.html eips=site.pages %}

assets/css/override.css

@@ -24,6 +24,37 @@
     background-color: #111100;
   }
 
+  .status-nav-label {
+    color: #aaa;
+  }
+
+  .status-link,
+  .status-link:visited,
+  .status-link:link {
+    border-color: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    color: #ccc !important;
+  }
+
+  .status-link:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.3);
+    color: #eee !important;
+  }
+
+  .status-link.active,
+  .status-link.active:visited,
+  .status-link.active:link {
+    background-color: rgba(140, 135, 180, 0.7);
+    border-color: rgba(140, 135, 180, 0.7);
+    color: #fff !important;
+  }
+
+  .status-link.active:hover {
+    background-color: rgba(160, 155, 200, 0.8);
+    border-color: rgba(160, 155, 200, 0.8);
+  }
+
   :root {
     color-scheme: dark;
     --bs-body-color: #dee2e6;

assets/css/style.scss

@@ -14,6 +14,81 @@ $content-width: 1152px;
   }
 }
 
+// Category nav active state
+.site-nav .page-link.active {
+  font-weight: 600;
+  color: #726E97;
+}
+
+// Status filter bar
+.status-nav {
+  width: 100%;
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.status-nav-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: #888;
+}
+
+.status-nav-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px;
+}
+
+.status-link,
+.status-link:visited,
+.status-link:link {
+  font-size: 11px;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(128, 128, 128, 0.3);
+  background: rgba(128, 128, 128, 0.08);
+  color: #666 !important;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.status-link:hover {
+  background-color: rgba(128, 128, 128, 0.15);
+  border-color: rgba(128, 128, 128, 0.4);
+  text-decoration: none;
+  color: #444 !important;
+}
+
+.status-link.active,
+.status-link.active:visited,
+.status-link.active:link {
+  background-color: rgba(114, 110, 151, 0.85);
+  border-color: rgba(114, 110, 151, 0.85);
+  color: #fff !important;
+}
+
+.status-link.active:hover {
+  background-color: rgba(90, 87, 120, 0.9);
+  border-color: rgba(90, 87, 120, 0.9);
+  color: #fff !important;
+}
+
+// Hidden rows (for filtering)
+.hidden {
+  display: none;
+}
+
+// No results message
+.no-results {
+  text-align: center;
+  color: #888;
+  padding: 2em 0;
+}
+
 .page-content {
   a.anchor-link {
     width: 16px;
@@ -164,3 +239,14 @@ h1 a {
   word-break: normal;
   overflow-wrap: normal;
 }
+
+// EIP table styles
+.eiptable {
+  .title {
+    width: 67%;
+  }
+
+  .author {
+    width: 33%;
+  }
+}

core.html

@@ -1,7 +1,8 @@
 ---
 layout: page
 title: Core
+category_filter: Core
 ---
 
 {% assign eips=site.pages|where:"type","Standards Track"|where:"category","Core" %}
-{% include eiptable.html eips=eips %}
+{% include eiplist.html eips=eips %}

erc.html

@@ -1,7 +1,8 @@
 ---
 layout: page
 title: ERC
+category_filter: ERC
 ---
 
 {% assign eips=site.pages|where:"type","Standards Track"|where:"category","ERC" %}
-{% include eiptable.html eips=eips %}
+{% include eiplist.html eips=eips %}

informational.html

@@ -1,7 +1,8 @@
 ---
 layout: page
 title: Informational
+category_filter: Informational
 ---
 
 {% assign eips=site.pages|where:"type","Informational" %}
-{% include eiptable.html eips=eips %}
+{% include eiplist.html eips=eips %}

interface.html

@@ -1,7 +1,8 @@
 ---
 layout: page
 title: Interface
+category_filter: Interface
 ---
 
 {% assign eips=site.pages|where:"type","Standards Track"|where:"category","Interface" %}
-{% include eiptable.html eips=eips %}
+{% include eiplist.html eips=eips %}

meta.html

@@ -1,7 +1,8 @@
 ---
 layout: page
 title: Meta
+category_filter: Meta
 ---
 
 {% assign eips=site.pages|where:"type","Meta" %}
-{% include eiptable.html eips=eips %}
+{% include eiplist.html eips=eips %}

networking.html

@@ -1,7 +1,8 @@
 ---
 layout: page
 title: Networking
+category_filter: Networking
 ---
 
 {% assign eips=site.pages|where:"type","Standards Track"|where:"category","Networking" %}
-{% include eiptable.html eips=eips %}
+{% include eiplist.html eips=eips %}