Skip to content

add anchors to status page #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dhuseby merged 1 commit into from
Feb 4, 2026
Merged

add anchors to status page #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions sass/sections/_reports.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
30 changes: 30 additions & 0 deletions sass/sections/_status.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,16 @@

&__title {
margin-bottom: $spacing-4;

> a[href^="#"] {
color: inherit;
text-decoration: none;

&:hover {
color: inherit;
text-decoration: none;
}
}
}

&__description {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
}

Expand Down
26 changes: 20 additions & 6 deletions templates/status/section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
Loading