From 5e7f6dfb6e21731f25a1f67a155f3a47e0474479 Mon Sep 17 00:00:00 2001
From: Peter Etelej <peter@etelej.com>
Date: Sun, 25 Feb 2018 00:46:45 +0300
Subject: [PATCH] website: add header anchor links on hover

Adds header link icons on hover. Check for headers (h1-h4) with
defined id's and adds link icon with relevant fragment link.

Fixes #1028

Change-Id: Ic9c8744efe12dda251f4a461adb0b09cf84604c3
---
 website/content/index.html |  8 ++++----
 website/static/all.css     | 23 +++++++++++++++++++++++
 website/tmpl/page.html     | 19 +++++++++++++++++++
 3 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/website/content/index.html b/website/content/index.html
index ff8054d1f..7dd0a2c66 100644
--- a/website/content/index.html
+++ b/website/content/index.html
@@ -17,16 +17,16 @@
   <li>Your data should be alive in 80 years, especially if you are</li>
 </ul>
 
-<h2>Latest Tweets</h2>
+<h2 id="latest-tweets">Latest Tweets</h2>
 
 <center><a class="twitter-timeline" data-lang="en" data-width="400" data-height="400" data-dnt="true" data-theme="light" data-link-color="#5B732B" href="https://twitter.com/PerkeepOrg?ref_src=twsrc%5Etfw">Tweets by PerkeepOrg</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script></center>
 
-<h2>Latest Release</h2>
+<h2 id="latest-release">Latest Release</h2>
 
 <p>The latest release is <a href="docs/release/monthly/2017-05-05.html">2017-05-05</a>.</p>
 <p>Follow the <a href="/download">download and getting started instructions</a> to set up Perkeep.</p>
 
-<h2>Video Demo</h2>
+<h2 id="video-demo">Video Demo</h2>
 
 <p>LinuxFest Northwest 2016 <a href="https://www.youtube.com/watch?v=8Dk2iVlc67M">Camlistore presentation</a>:</p>
 
@@ -34,7 +34,7 @@
 
 <p>Or see the <a href="/doc/#presentations">other presentations</a>.</p>
 
-<h2>Contribute</h2>
+<h2 id="contribute">Contribute</h2>
 
 <p>In addition to user feedback, bug reports, and <a href="/code#contributing"><b>code contributions</b></a>, we also accept donations via either <a href="https://www.coinbase.com/checkouts/cb36d0d49984c31062332af51f0346a8"><b>our Bitcoin donation page</b></a> or via OpenCollective:</p>
 
diff --git a/website/static/all.css b/website/static/all.css
index 63bd5173c..5024bdaa5 100644
--- a/website/static/all.css
+++ b/website/static/all.css
@@ -283,3 +283,26 @@ a.downloadBox:hover .filename {
 }
 
 a { font-weight: bold; }
+
+/* Header anchor links styling */
+.anchor {
+	padding:4px;
+}
+.anchor svg {
+	visibility: hidden;
+	vertical-align:middle;
+}
+h1 svg,
+h2 svg,
+h3 svg,
+h4 svg {
+	fill: #375EAB;
+}
+h2 svg {
+	fill: #fff;
+}
+h1:hover .anchor svg, h2:hover .anchor svg,
+h3:hover .anchor svg, h4:hover .anchor svg,
+h5:hover .anchor svg, h6:hover .anchor svg {
+	visibility: visible;
+}
diff --git a/website/tmpl/page.html b/website/tmpl/page.html
index 668c1f524..05b47c7e1 100644
--- a/website/tmpl/page.html
+++ b/website/tmpl/page.html
@@ -55,4 +55,23 @@
   Website layout inspired by <a href="http://memcached.org/">memcached</a>.<br>
   Content by <a href="/contributors">the authors</a>.
 </div>
+<script>
+function addHeaderAnchors(){
+    var headers = document.querySelectorAll("h1, h2, h3, h4")
+    var svg = '<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'
+    for (var i = 0 ; i < headers.length; i++){
+       var id = headers[i].id
+       if (!id) {
+           continue
+       }
+       var link = document.createElement('a')
+       link.className = 'anchor'
+       link.href = '#' + id
+       link.setAttribute('aria-disabled', true)
+       link.innerHTML = svg
+       headers[i].appendChild(link)
+    }
+}
+document.addEventListener("DOMContentLoaded", addHeaderAnchors)
+</script>
 {{end}}