From 3c7f02a09c424d89e18105ac834225e3a1d7dddc Mon Sep 17 00:00:00 2001
From: Roan Horning <roan.horning@gmail.com>
Date: Sat, 18 Oct 2025 10:54:57 -0400
Subject: [PATCH] Add go top of page link to major sections

Per [issure 283](https://repo.anhonesthost.net/HPR/hpr_generator/issues/283),
add a link to each major section of the about page which allows the user
to move to the index of topics at the top of the page.
---
 public_html/css/hpr.css          |  3 +++
 templates/content-about.tpl.html | 38 ++++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index f590dbf..779fd3e 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -371,6 +371,9 @@ article > p,
 	font-size: 1.45rem;
 	color: var(--background-primary);
 }
+.lane > article > header > .index-link {
+	float: right;
+}
 .lane.stack > article  {
 	border-radius: 0.5rem;
 	border: thin solid var(--background-secondary);
diff --git a/templates/content-about.tpl.html b/templates/content-about.tpl.html
index 6d97b91..37dfabc 100644
--- a/templates/content-about.tpl.html
+++ b/templates/content-about.tpl.html
@@ -19,6 +19,7 @@
 <div class="lane stack">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="about">About HPR<a href="<!--% absolute_url(baseurl,'about.html#about') %-->">.</a></h1>
 	</header>
 <h2 id="community">The HPR Community<a href="<!--% absolute_url(baseurl,'about.html#community') %-->">.</a></h2>
@@ -95,6 +96,7 @@ now hosting our media files.
 <hr class="no-css">
 <article>
 	<header>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
 		<h1 id="contact">Contact<a href="<!--% absolute_url(baseurl,'about.html#contact') %-->">.</a></h1>
 	</header>
 <h2 id="contact_primary">Primary Contact Points</h2>
@@ -129,7 +131,8 @@ now hosting our media files.
 <hr class="no-css">
 <article>
 	<header>
-<h1 id ="press" >In the Press<a href="<!--% absolute_url(baseurl,'about.html#press') %-->">.</a></h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id ="press" >In the Press<a href="<!--% absolute_url(baseurl,'about.html#press') %-->">.</a></h1>
 	</header>
 <ul>
 	<li>2019-10-18: <a href="https://blog.feedspot.com/hacker_podcasts/">Top 10 Hacker Podcasts You Must Follow in 2019</a> (<a href="<!--% absolute_url(baseurl,'press/2019-10-18_blog.feedspot.com-hacker_podcasts-Top_10_Hacker_Podcasts_You_Must_Follow_in_2019.pdf') %-->">Archived</a>)</li>
@@ -149,7 +152,8 @@ now hosting our media files.
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="how_to_help">How to Help<a href="<!--% absolute_url(baseurl,'about.html#how_to_help') %-->">.</a></h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="how_to_help">How to Help<a href="<!--% absolute_url(baseurl,'about.html#how_to_help') %-->">.</a></h1>
 	</header>
 <p>
 Hacker Public Radio is a communty podcast where the shows are provided by the community, and is also
@@ -196,7 +200,8 @@ You can help by:
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="download">Download Archive<a href="<!--% absolute_url(baseurl,'about.html#download') %-->">.</a></h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="download">Download Archive<a href="<!--% absolute_url(baseurl,'about.html#download') %-->">.</a></h1>
 	</header>
 <p>Please be aware that our Archive exceeds <strong>62Gb</strong> <em>(Ogg: 21Gb, Spx: 16Gb, mp3: 25Gb)</em>. We are happy for you to download them, but please make sure that you are not going to incur additional bandwidth charges on your side.</p>
 
@@ -222,7 +227,8 @@ You can download the audio of the episodes directly from the command line using
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="so_you_want_to_record_a_podcast">So you want to record a podcast<a href="<!--% absolute_url(baseurl,'about.html#so_you_want_to_record_a_podcast') %-->">.</a></h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="so_you_want_to_record_a_podcast">So you want to record a podcast<a href="<!--% absolute_url(baseurl,'about.html#so_you_want_to_record_a_podcast') %-->">.</a></h1>
 	</header>
 <p>Well you've come to the right place. Our goal here at HPR is to make it as easy as possible for you to get a podcast released. We take care of the hard bits so you don't need to. Recording your first show is always a daunting prospect but <a href="<!--% absolute_url(baseurl) %-->correspondents/index.html">hundreds of people</a> like yourself have done it and so can you.
 </p>
@@ -338,7 +344,8 @@ and chat with a live person 24/7.
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="requested_topics">Requested topics<a href="<!--% absolute_url(baseurl,'about.html#requested_topics') %-->">.</a></h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="requested_topics">Requested topics<a href="<!--% absolute_url(baseurl,'about.html#requested_topics') %-->">.</a></h1>
 	</header>
 <p>This is a list of topics that have been requested by the community. 
 Feel free to add it to the list by emailing admin at hpr or by tweeting us on <a href="https://twitter.com/hpr">@HPR</a>.</p>
@@ -411,7 +418,8 @@ Feel free to add it to the list by emailing admin at hpr or by tweeting us on <a
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="agreement">Stuff you need to know<a href="<!--% absolute_url(baseurl,'about.html#agreement') %-->">.</a></h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="agreement">Stuff you need to know<a href="<!--% absolute_url(baseurl,'about.html#agreement') %-->">.</a></h1>
 	</header>
 <p>
 This is some important information that you will need to know before uploading to HPR.
@@ -627,7 +635,8 @@ These shows contain a message alerting listeners to the fact that we had free sl
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="recording_a_podcast">Recording a Podcast</h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="recording_a_podcast">Recording a Podcast</h1>
 	</header>
 <p>
 On this page you will find information on how to record a podcast. Our golden rule is <strong>Any audio is better than no audio.</strong> 
@@ -745,7 +754,8 @@ There is no need to add any information to the file as that will be inserted bas
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="promote_hpr">Please promote HPR<a href="<!--% absolute_url(baseurl,'about.html#promote_hpr') %-->') %-->">.</a></h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="promote_hpr">Please promote HPR<a href="<!--% absolute_url(baseurl,'about.html#promote_hpr') %-->') %-->">.</a></h1>
 	</header>
 <p>Feel free to use the promotional material to spread the word in your podcasts, or have them played on to other shows.</p>
 <h2>General HPR promotion</h2>
@@ -766,7 +776,8 @@ There is no need to add any information to the file as that will be inserted bas
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="requesting_slot">Picking a slot for your show</h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="requesting_slot">Picking a slot for your show</h1>
 	</header>
 <p>
 Any host can select any free slot a up to year in advance, by recording their show and uploading it to the desired slot. 
@@ -814,7 +825,8 @@ Once you have pressed submit you will not be able to edit any of the information
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="adding_an_episode">Adding an Episode</h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="adding_an_episode">Adding an Episode</h1>
 	</header>
 <p>
 The unique link sent by email will allow you to manage both the episode and information about yourself that is displayed on HPR. 
@@ -953,7 +965,8 @@ Your show information is used to process the media files, on the website, in the
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="workflow">Workflow</h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="workflow">Workflow</h1>
 	</header>
 <ol>
 	<li>REQUEST_UNVERIFIED    - </li>
@@ -970,7 +983,8 @@ Your show information is used to process the media files, on the website, in the
 <hr class="no-css">
 <article>
 	<header>
-<h1 id="faq">Frequently Asked Questions</h1>
+		<p class="index-link"><a href="/about.html#TOP">↑ Go to top</a></p>
+		<h1 id="faq">Frequently Asked Questions</h1>
 	</header>
 <h2 data-number="0.1" id="what-is-hacker-public-radio"><span class="header-section-number">0.1</span> What is Hacker Public Radio?</h2>
 <ul>