Turn headings into links (#1044)

* turn headings into anchor links

* remove anchor emoji to make design consistent with rest of the report + add anchor links to all headings

* remove commented code

---------

Co-authored-by: Barry Pollard <barrypollard@google.com>

Author: sarahfossheim

static/css/techreport/techreport.css

@@ -224,6 +224,11 @@ nav {
   display: none;
 }
 
+/* Heading links */
+.anchor {
+  color: inherit;
+}
+
 /* Filter info */
 .meta {
   font-size: 0.75rem;

templates/techreport/category.html

@@ -88,7 +88,7 @@ <h1>
         data-type="section"
         data-api="category"
       >
-        <h2 class="summary-heading">Summary</h2>
+        <h2 class="summary-heading"><a href="#cateogry-summary" class="anchor">Summary</a></h2>
         <div class="summary-grid">
           {% for summary in tech_report_page.config.summary %}
             {% include "techreport/components/summary_card.html" %}
@@ -102,7 +102,7 @@ <h2 class="summary-heading">Summary</h2>
         data-type="section"
         data-api="cwv,lighthouse,page-weight"
       >
-        <h2>Technologies</h2>
+        <h2><a href="#comparison-summary" class="anchor">Technologies</a></h2>
         <div class="table-descr">
           <p>
             Overview of the latest Core Web Vitals of all technologies within this category, sorted by number of origins.

templates/techreport/comparison.html

@@ -29,7 +29,7 @@ <h1>
         data-type="section"
         data-api="cwv,lighthouse,page-weight"
       >
-        <h2>Summary</h2>
+        <h2><a href="#comparison-summary" class="anchor">Summary</a></h2>
         <p>Showing the latest data for <strong>{{ technologies | length }} technologies</strong>.</p>
         {% set component = tech_report_page.config.tech_comparison_summary %}
         {% set id = component.id %}
@@ -48,7 +48,7 @@ <h2>Summary</h2>
         data-type="section"
         data-api="cwv"
       >
-        <h2>Core Web Vitals</h2>
+        <h2><a href="#comparison-good-cwvs" class="anchor">Core Web Vitals</a></h2>
         <p>{{ tech_report_labels.metrics.vitals.general.description }}</p>
 
         <!-- Timeseries -->
@@ -68,7 +68,7 @@ <h2>Core Web Vitals</h2>
         data-type="section"
         data-api="lighthouse"
       >
-        <h2>Lighthouse</h2>
+        <h2><a href="#comparison-lighthouse" class="anchor">Lighthouse</a></h2>
         <p>{{ tech_report_labels.metrics.lighthouse.general.description }}</p>
 
         <!-- Timeseries -->
@@ -88,7 +88,7 @@ <h2>Lighthouse</h2>
         data-type="section"
         data-api="page-weight"
       >
-        <h2>Page weight</h2>
+        <h2><a href="#comparison-page-weight" class="anchor">Page weight</a></h2>
         <p>{{ tech_report_labels.metrics.pageWeight.general.description }}</p>
 
         <!-- Timeseries -->
@@ -108,7 +108,7 @@ <h2>Page weight</h2>
         data-type="section"
         data-api="adopiton"
       >
-        <h2>Adoption</h2>
+        <h2><a href="#comparison-adoption" class="anchor">Adoption</a></h2>
         <p>{{ tech_report_labels.metrics.adoption.general.description }}</p>
 
         <!-- Timeseries -->

templates/techreport/components/timeseries.html

@@ -1,7 +1,7 @@
 {% set category = selected_subcategory or subcategory.default %}
 {% set endpoint = timeseries.endpoint %}
 
-<div data-id="{{ timeseries.id }}" data-component="timeseries" data-endpoint="{{timeseries.endpoint}}" data-category="{{category}}" data-metric="{{timeseries.metric}}" data-summary="{{timeseries.viz.metric_summary}}" data-client="{{ request.args.get('client', '')  or 'mobile' }}">
+<div id="section-{{ timeseries.id }}" data-id="{{ timeseries.id }}" data-component="timeseries" data-endpoint="{{timeseries.endpoint}}" data-category="{{category}}" data-metric="{{timeseries.metric}}" data-summary="{{timeseries.viz.metric_summary}}" data-client="{{ request.args.get('client', '')  or 'mobile' }}">
   <div class="component-heading-wrapper">
     <div class="component-heading">
       {% set title = timeseries.title %}
@@ -11,7 +11,7 @@
         {% set descr = tech_report_labels.metrics[endpoint][selected_subcategory].description %}
       {% endif %}
 
-      <h3>{{ title }}</h3>
+      <h3><a href="#section-{{ timeseries.id }}" class="anchor">{{ title }}</a></h3>
       <p class="descr">{{ descr }}</p>
     </div>
 

templates/techreport/drilldown.html

@@ -49,7 +49,7 @@ <h2 class="summary-heading">Summary</h2>
         data-type="section"
         data-api="cwv"
       >
-        <h2>Core Web Vitals</h2>
+        <h2><a class="anchor" href="#good-cwvs">Core Web Vitals</a></h2>
         <p>{{ tech_report_labels.metrics.vitals.general.description }}</p>
 
         {% if tech_report_page.config.good_cwv_summary %}
@@ -76,7 +76,7 @@ <h3>{{ tech_report_page.config.good_cwv_summary.title }}</h3>
         data-type="section"
         data-api="lighthouse"
       >
-        <h2>Lighthouse</h2>
+        <h2><a class="anchor" href="#lighthouse">Lighthouse</a></h2>
         <p>{{ tech_report_labels.metrics.lighthouse.general.description }}</p>
 
         {% if tech_report_page.config.lighthouse_summary %}
@@ -103,7 +103,7 @@ <h3>{{ tech_report_page.config.lighthouse_summary.title }}</h3>
         data-type="section"
         data-api="page-weight"
       >
-        <h2>Page weight</h2>
+        <h2><a class="anchor" href="#page-weight">Page weight</a></h2>
         <p>{{ tech_report_labels.metrics.pageWeight.general.description }}</p>
 
         {% if tech_report_page.config.weight_summary %}
@@ -130,7 +130,7 @@ <h3>{{ tech_report_page.config.weight_summary.title }}</h3>
         data-type="section"
         data-api="adoption"
       >
-        <h2>Adoption</h2>
+        <h2><a class="anchor" href="#adoption">Adoption</a></h2>
         <p>{{ tech_report_labels.metrics.adoption.general.description }}</p>
 
         <div class="card">

templates/techreport/techreport.html

@@ -73,19 +73,19 @@
 
   {% block report_content %}{% endblock %}
 
-  <div class="feedback">
+  <div class="feedback" id="section-feedback">
     <div class="block-m">
-      <h2>Feedback?</h2>
+      <h2><a href="#section-feedback" class="anchor">Feedback?</a></h2>
       <p>
         We are still working on this dashboard. The design and functionality can still change, and we're working on accessibility improvements and bugfixes.
         What you're seeing here is a snapshot of our latest GitHub commit, and are <a href="https://github.com/HTTPArchive/httparchive.org/issues/new?template=tech-report.md">open for feedback</a>.
       </p>
     </div>
   </div>
 
-  <div class="accessibility-options">
+  <div class="accessibility-options" id="section-accessibility-options">
     <div class="wrapper block-m">
-      <h2>Accessibility</h2>
+      <h2><a href="#section-accessibility-options" class="anchor">Accessibility</a></h2>
       <p>Change settings related to accessibility here</p>
 
       <div class="setting">