Replace root redirect with spec listing index page and build issues lists

Instead of redirecting to drafts.csswg.org, build-index.py now generates
a proper index page listing all specs with their titles, last-update
dates, and links to Disposition of Comments documents.

Multi-level spec families are visually grouped under a shortname header.

Also adds a workflow step that runs bikeshed issues-list on all .bsi and
issues-*.txt source files, regenerating the Disposition of Comments HTML
pages during deployment.

Relates to #12054

Author: sideshowbarker

.github/workflows/build-specs.yml

@@ -57,6 +57,12 @@ jobs:
             SHORT_DATE="$(date --date=@"$TIMESTAMP" --utc +%F)"
             bikeshed -f spec "$file" "${file%Overview.bs}index.html" --md-date="$SHORT_DATE" --md-Text-Macro="BUILTBYGITHUBCI foo"
           done
+      - name: Build issues lists
+        run: |
+          for file in ./**/*.bsi ./**/issues-*.txt; do
+            echo "  $file"
+            bikeshed issues-list "$file" || true
+          done
       - name: Build index & symlinks
         run: python ./bin/build-index.py
       - run: rm -rf ./.git{,attributes,ignore}

bin/build-index.py

@@ -2,18 +2,19 @@
 All the drafts are built by the build-specs workflow itself.
 This handles the rest of the work:
 
-* creates a root page that just redirects to the draft server root listing.
+* creates an index page listing all specs
 * creates symlinks for unlevelled urls, linking to the appropriate levelled folder
-* builds timestamps.json, which provides a bunch of metadata about the specs which is consumed by some W3C tooling.
+* builds timestamps.json, which provides metadata about the specs
 """
 
+import glob
 import json
 import os
 import os.path
 import re
-import sys
 import subprocess
 from collections import defaultdict
+from datetime import datetime, timezone
 
 import bikeshed
 from html.parser import HTMLParser
@@ -122,6 +123,21 @@ def create_symlink(shortname, spec_folder):
         pass
 
 
+def format_timestamp(ts):
+    """Format a Unix timestamp as a human-readable date string."""
+    dt = datetime.fromtimestamp(ts, tz=timezone.utc)
+    return dt.strftime("%Y-%m-%d")
+
+
+def escape_html(text):
+    """Escape HTML special characters."""
+    return (text
+            .replace("&", "&")
+            .replace("<", "&lt;")
+            .replace(">", "&gt;")
+            .replace('"', "&quot;"))
+
+
 CURRENT_WORK_EXCEPTIONS = {
     "css-conditional": 5,
     "css-easing": 2,
@@ -159,6 +175,9 @@ def create_symlink(shortname, spec_folder):
 
         metadata["dir"] = entry.name
         metadata["currentWork"] = False
+        issues_files = sorted(f for f in glob.glob(os.path.join(entry.path, "issues-*.html"))
+                                  if not f.endswith(".bsi.html"))
+        metadata["issues"] = [os.path.basename(f) for f in issues_files]
         specgroups[metadata["shortname"]].append(metadata)
 
 # Reorder the specs with common shortname based on their level (or year, for
@@ -195,13 +214,120 @@ def create_symlink(shortname, spec_folder):
 with open('./timestamps.json', 'w') as f:
     json.dump(timestamps, f, indent = 2, sort_keys=True)
 
+# Build the index page
+rows = []
+for shortname in sorted(specgroups.keys()):
+    specgroup = specgroups[shortname]
+    is_group = len(specgroup) > 1
+
+    if is_group:
+        rows.append(
+            f'      <tr class="group-header">\n'
+            f'        <td colspan="2">{escape_html(shortname)}</td>\n'
+            f'      </tr>'
+        )
+
+    for spec in specgroup:
+        title = escape_html(spec["title"] or spec["dir"])
+        current_label = ' <span class="current-work">(Current Work)</span>' if spec["currentWork"] else ""
+        dir_name = spec["dir"]
+
+        ts = timestamps.get(dir_name)
+        date_str = format_timestamp(ts) if ts else ""
+
+        issues_html = ""
+        if spec["issues"]:
+            links = []
+            for fname in spec["issues"]:
+                label = fname.replace("issues-", "").replace(".html", "")
+                links.append(f'<a href="./{dir_name}/{fname}">{label}</a>')
+            issues_html = '<br><span class="issues">DoC: ' + " \u00b7 ".join(links) + '</span>'
+
+        indent_class = ' class="grouped-spec"' if is_group else ""
+        rows.append(
+            f'      <tr{indent_class}>\n'
+            f'        <td><a href="./{dir_name}/">{title}</a>{current_label}{issues_html}</td>\n'
+            f'        <td>{date_str}</td>\n'
+            f'      </tr>'
+        )
+
+rows_html = "\n".join(rows)
+
 with open("./index.html", mode='w', encoding="UTF-8") as f:
-    f.write("""
+    f.write(f"""\
 <!doctype html>
-<meta charset=utf-8>
-<title>Redirecting to the Drafts listing...</title>
-<meta http-equiv=Refresh content="0; url='https://drafts.csswg.org'">
-<script>
-window.location.href = "https://drafts.csswg.org";
-</script>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>CSS Working Group Editor Drafts</title>
+  <style>
+    body {{
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      max-width: 900px;
+      margin: 2em auto;
+      padding: 0 1em;
+      color: #333;
+    }}
+    h1 {{
+      border-bottom: 1px solid #ccc;
+      padding-bottom: 0.3em;
+    }}
+    table {{
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 1em;
+    }}
+    th, td {{
+      text-align: left;
+      padding: 0.5em 0.75em;
+      border-bottom: 1px solid #eee;
+    }}
+    th {{
+      border-bottom: 2px solid #ccc;
+      font-weight: 600;
+    }}
+    td:last-child {{
+      white-space: nowrap;
+      color: #666;
+    }}
+    a {{
+      color: #0366d6;
+      text-decoration: none;
+    }}
+    a:hover {{
+      text-decoration: underline;
+    }}
+    .current-work {{
+      color: #080;
+      font-size: 0.9em;
+    }}
+    .group-header td {{
+      font-weight: 600;
+      padding-top: 1em;
+      border-bottom: 1px solid #ccc;
+    }}
+    .grouped-spec td:first-child {{
+      padding-left: 2em;
+    }}
+    .issues {{
+      font-size: 0.85em;
+      color: #666;
+    }}
+  </style>
+</head>
+<body>
+  <h1>CSS Working Group Editor Drafts</h1>
+  <table>
+    <thead>
+      <tr>
+        <th>Specification</th>
+        <th>Last Update</th>
+      </tr>
+    </thead>
+    <tbody>
+{rows_html}
+    </tbody>
+  </table>
+</body>
+</html>
 """)