Merge "website: add header anchor links on hover"

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>
 

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;
+}

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}}