From 037529bad8dc95fa9e80b1308deb2b32210c5d4c Mon Sep 17 00:00:00 2001
From: Dave Grantham <dwg@linuxprogrammer.org>
Date: Wed, 4 Feb 2026 14:00:31 -0700
Subject: [PATCH] add anchors to status page

Signed-off-by: Dave Grantham <dwg@linuxprogrammer.org>
---
 sass/sections/_reports.scss   | 13 +++++++++++++
 sass/sections/_status.scss    | 30 ++++++++++++++++++++++++++++++
 templates/status/section.html | 26 ++++++++++++++++++++------
 3 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/sass/sections/_reports.scss b/sass/sections/_reports.scss
index 0f7323a..51ef4f7 100644
--- a/sass/sections/_reports.scss
+++ b/sass/sections/_reports.scss
@@ -183,6 +183,19 @@
             margin-bottom: $spacing-2;
         }
 
+        // Ensure heading anchor links look like plain headings
+        h2, h3, h4 {
+            > a[href^="#"] {
+                color: inherit;
+                text-decoration: none;
+
+                &:hover {
+                    color: inherit;
+                    text-decoration: none;
+                }
+            }
+        }
+
         p {
             margin-bottom: $spacing-4;
             line-height: $line-height-relaxed;
diff --git a/sass/sections/_status.scss b/sass/sections/_status.scss
index 9ce6ca1..2d29dce 100644
--- a/sass/sections/_status.scss
+++ b/sass/sections/_status.scss
@@ -18,6 +18,16 @@
 
     &__title {
         margin-bottom: $spacing-4;
+
+        > a[href^="#"] {
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+                color: inherit;
+                text-decoration: none;
+            }
+        }
     }
 
     &__description {
@@ -126,6 +136,16 @@
     &__title {
         font-size: $font-size-2xl;
         margin-bottom: $spacing-2;
+
+        > a[href^="#"] {
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+                color: inherit;
+                text-decoration: none;
+            }
+        }
     }
 
     &__description {
@@ -236,6 +256,16 @@
         padding: $spacing-3 $spacing-4;
         background-color: $color-gray-50;
         border-bottom: 1px solid $color-gray-200;
+
+        > a[href^="#"] {
+            color: inherit;
+            text-decoration: none;
+
+            &:hover {
+                color: inherit;
+                text-decoration: none;
+            }
+        }
     }
 }
 
diff --git a/templates/status/section.html b/templates/status/section.html
index 1372550..51e47cc 100644
--- a/templates/status/section.html
+++ b/templates/status/section.html
@@ -15,7 +15,9 @@
         <div class="status-content">
             {# Header #}
             <header class="status-header">
-                <h1 class="status-header__title">Interoperability Status</h1>
+                <h1 class="status-header__title" id="interoperability-status">
+                    <a href="#interoperability-status">Interoperability Status</a>
+                </h1>
                 <p class="status-header__description">
                     Real-time interoperability test results across libp2p implementations.
                     These tests verify that different implementations can communicate with each other.
@@ -39,7 +41,9 @@ <h1 class="status-header__title">Interoperability Status</h1>
             {# Transport Interop Section #}
             <section class="status-section" id="transport">
                 <header class="status-section__header">
-                    <h2 class="status-section__title">Transport Interoperability</h2>
+                    <h2 class="status-section__title" id="transport-interoperability">
+                        <a href="#transport-interoperability">Transport Interoperability</a>
+                    </h2>
                     <p class="status-section__description">
                         Tests verifying that different transport implementations (TCP, QUIC, WebSocket, etc.) can communicate.
                     </p>
@@ -106,7 +110,10 @@ <h2 class="status-section__title">Transport Interoperability</h2>
                 {% for combo in combinations | sort %}
                 <div class="status-section__subsection">
                     <div class="status-grid-wrapper">
-                        <h3 class="status-grid-wrapper__title">{{ combo }}</h3>
+                        {% set combo_id = combo | slugify %}
+                        <h3 class="status-grid-wrapper__title" id="{{ combo_id }}">
+                            <a href="#{{ combo_id }}">{{ combo }}</a>
+                        </h3>
                         <table class="status-grid__table status-grid__table--compact">
                             <thead>
                                 <tr>
@@ -167,7 +174,9 @@ <h3 class="status-grid-wrapper__title">{{ combo }}</h3>
             {# Performance Section #}
             <section class="status-section" id="performance">
                 <header class="status-section__header">
-                    <h2 class="status-section__title">Performance Benchmarks</h2>
+                    <h2 class="status-section__title" id="performance-benchmarks">
+                        <a href="#performance-benchmarks">Performance Benchmarks</a>
+                    </h2>
                     <p class="status-section__description">
                         Performance measurements across different libp2p implementations, measuring upload and download throughput against baseline tests: iperf, https, and quic-go. These tests run on a single host using Docker containers and a Docker network. The performance numbers are relative to each other and the baselines. This gives us a measurement of the overhead of each implementation and transport.
                     </p>
@@ -188,7 +197,9 @@ <h2 class="status-section__title">Performance Benchmarks</h2>
             {# Hole Punching Section #}
             <section class="status-section" id="hole-punching">
                 <header class="status-section__header">
-                    <h2 class="status-section__title">Hole Punching</h2>
+                    <h2 class="status-section__title" id="hole-punching-heading">
+                        <a href="#hole-punching-heading">Hole Punching</a>
+                    </h2>
                     <p class="status-section__description">
                         Tests verifying NAT traversal capabilities across implementations using relay nodes.
                     </p>
@@ -251,7 +262,10 @@ <h2 class="status-section__title">Hole Punching</h2>
                 {% for relay in hp_relays | sort %}
                 <div class="status-section__subsection">
                     <div class="status-grid-wrapper">
-                        <h3 class="status-grid-wrapper__title">Relay: {{ relay }}</h3>
+                        {% set relay_id = "relay-" ~ relay | slugify %}
+                        <h3 class="status-grid-wrapper__title" id="{{ relay_id }}">
+                            <a href="#{{ relay_id }}">Relay: {{ relay }}</a>
+                        </h3>
                         <table class="status-grid__table">
                             <thead>
                                 <tr>