Statistics: Add anchor links

xsf · Jul 30, 2024 · 5630152 · 5630152
1 parent 0b16b98
commit 5630152
Showing 1 changed file with 32 additions and 8 deletions.
diff --git a/themes/xmpp-providers/layouts/shortcodes/statistics.html b/themes/xmpp-providers/layouts/shortcodes/statistics.html
@@ -10,7 +10,10 @@
 <div class="row pb-4">
     <div class="col mx-auto text-center">
         <div class="bg-body-tertiary rounded p-3">
-            <h5>Provider Categories</h5>
+            <h3 id="provider-categories">
+                Provider Categories
+                <a class="heading-anchor" href="#provider-categories"><i class="fa-solid fa-link fa-xs"></i></a>
+            </h3>
             <small class="text-muted">A provider's <a href="/faq/#how-are-categories-determined"
                     class="abbr">category</a> is determined by its properties.</small>
             <div id="categories_pie_chart_container" style="height:300px;"
@@ -22,7 +25,10 @@ <h5>Provider Categories</h5>
 <div class="row pb-4">
     <div class="col mx-auto text-center">
         <div class="bg-body-tertiary rounded p-3">
-            <h5>History of Providers</h5>
+            <h3 id="history-of-providers">
+                History of Providers
+                <a class="heading-anchor" href="#history-of-providers"><i class="fa-solid fa-link fa-xs"></i></a>
+            </h3>
             <small class="text-muted">This chart shows since when providers are available or listed.</small>
             <div id="since_bar_chart_container" style="height:400px;"
                 data-values="{{ .Site.Data.statistics.since_bar_chart_data | jsonify }}"></div>
@@ -33,7 +39,10 @@ <h5>History of Providers</h5>
 <div class="row pb-4">
     <div class="col mx-auto text-center">
         <div class="bg-body-tertiary rounded p-3">
-            <h5>Bus Factor</h5>
+            <h3 id="bus-factor">
+                Bus Factor
+                <a class="heading-anchor" href="#bus-factor"><i class="fa-solid fa-link fa-xs"></i></a>
+            </h3>
             <small class="text-muted">A provider's <a href="/faq/#bus-factor" class="abbr">bus factor</a> describes the
                 minimum number of team members that the service could not survive losing.</small>
             <div id="bus_factor_pie_chart_container" style="height:300px;"
@@ -45,7 +54,10 @@ <h5>Bus Factor</h5>
 <div class="row pb-4">
     <div class="col mx-auto text-center">
         <div class="bg-body-tertiary rounded p-3">
-            <h5>Green Hosting</h5>
+            <h3 id="green-hosting">
+                Green Hosting
+                <a class="heading-anchor" href="#green-hosting"><i class="fa-solid fa-link fa-xs"></i></a>
+            </h3>
             <small class="text-muted">Whether a provider's server is <a href="/faq/#green-hosting" class="abbr">hosted
                     green</a>.</small>
             <div id="green_web_check_pie_chart_container" style="height:300px;"
@@ -57,7 +69,10 @@ <h5>Green Hosting</h5>
 <div class="row pb-4">
     <div class="col mx-auto text-center">
         <div class="bg-body-tertiary rounded p-3">
-            <h5>File Sharing</h5>
+            <h3 id="file-sharing">
+                File Sharing
+                <a class="heading-anchor" href="#file-sharing"><i class="fa-solid fa-link fa-xs"></i></a>
+            </h3>
             <small class="text-muted">Maximum file size for shared files (in Megabytes).</small>
             <div id="file_size_bar_chart_container" style="height:400px;"
                 data-values="{{ .Site.Data.statistics.file_size_bar_chart_data | jsonify }}"></div>
@@ -68,7 +83,10 @@ <h5>File Sharing</h5>
 <div class="row pb-4">
     <div class="col mx-auto text-center">
         <div class="bg-body-tertiary rounded p-3">
-            <h5>Providers Offering a Provider File</h5>
+            <h3 id="provider-file">
+                Providers Offering a Provider File
+                <a class="heading-anchor" href="#provider-file"><i class="fa-solid fa-link fa-xs"></i></a>
+            </h3>
             <small class="text-muted">A <a href="/faq/#provider-file" class="abbr">provider file</a> allows retrieving
                 properties automatically.</small>
             <div id="provider_file_pie_chart_container" style="height:300px;"
@@ -80,7 +98,10 @@ <h5>Providers Offering a Provider File</h5>
 <div class="row pb-4">
     <div class="col mx-auto text-center">
         <div class="bg-body-tertiary rounded p-3">
-            <h5>Providers Allowing Server Testing</h5>
+            <h3 id="server-testing">
+                Providers Allowing Server Testing
+                <a class="heading-anchor" href="#server-testing"><i class="fa-solid fa-link fa-xs"></i></a>
+            </h3>
             <small class="text-muted">Whether tests against the provider's server are allowed (e.g., certificate checks
                 and uptime monitoring).</small>
             <div id="server_testing_pie_chart_container" style="height:300px;"
@@ -91,7 +112,10 @@ <h5>Providers Allowing Server Testing</h5>
 
 <div class="row">
     <div class="col mx-auto text-center">
-        <h5>Provider Distribution on the Globe</h5>
+        <h3 id="provider-distribution">
+            Provider Distribution on the Globe
+            <a class="heading-anchor" href="#provider-distribution"><i class="fa-solid fa-link fa-xs"></i></a>
+        </h3>
         <small class="text-muted">This map shows where servers of providers are distributed in the world.</small>
         <div id="map_container" class="border rounded shadow mt-2" style="height:500px;"
             data-providers="{{ .Site.Data.statistics.server_locations | jsonify }}"></div>