From 00fe7d0f71fc391df9ace7366df8828522975af0 Mon Sep 17 00:00:00 2001
From: Stephen Fluin <stephen.fluin@gmail.com>
Date: Fri, 7 May 2021 15:44:51 -0700
Subject: [PATCH] add anchor links on hover

---
 _includes/feed.liquid  |  2 +-
 _includes/main.liquid  | 87 ++++++++++++++++++++++++------------------
 _includes/nodes.liquid |  2 +-
 _src/docs.css          | 11 ++++++
 _src/images/link.svg   |  1 +
 5 files changed, 64 insertions(+), 39 deletions(-)
 create mode 100644 _src/images/link.svg

diff --git a/_includes/feed.liquid b/_includes/feed.liquid
index 0a185287861..8b4620a5adc 100644
--- a/_includes/feed.liquid
+++ b/_includes/feed.liquid
@@ -38,7 +38,7 @@ section: smartContract
     render = (data) => {
         let html = '';
         for(let network of data["{{stub}}"].networks) {
-            html += `<h2 id="${network.name}">${network.name}</h2>`;
+            html += `<h2 id="${network.name}">${network.name} <a class="anchor" href="#${network.name}"><img src="/images/link.svg" alt="Link to this section"></a></h2>`;
             
             let proxyList = '';
             for(let proxy of network.proxies) {
diff --git a/_includes/main.liquid b/_includes/main.liquid
index 69df4172b7f..1d809110fad 100644
--- a/_includes/main.liquid
+++ b/_includes/main.liquid
@@ -54,35 +54,7 @@
             gtag("config", "UA-128878871-16");
         </script>
 
-        <script>
-            // Detect highlighting
-            let lastEvent = 0;
-            const checkForHighlight = (event) => {
-                try {
-                    const selection = window.getSelection().toString();
-                    // Rate limit to 30s
-                    if(selection && Date.now() > (lastEvent + 1000 * 30)) {
-                        gtag('event','select_content',{'event_category': 'docs-engagement', label: selection.substring(0,30)});
-                        lastEvent = Date.now();
-                    }
-                } catch (e) {}
-            }
-            document.addEventListener('mouseup',checkForHighlight);
-
-            // Track remix deployments
-            document.addEventListener('DOMContentLoaded', () => {
-                [...document.getElementsByTagName('a')]
-                    .filter(x => x.href.startsWith('https://remix.ethereum.org/') && x.href.length > 27 )
-                    .map(x => {x.addEventListener('click',(event) => {
-                        console.log('sending to gtag!');
-                        gtag('event','deploy-to-remix',{event_category:'docs-engagement'});
-                    });});
-                [...document.getElementsByClassName('copy-to-clipboard-button')]
-                    .map(x => {x.addEventListener('click',(event) => {
-                        gtag('event','copy-code',{event_category:'docs-engagement'});
-                    });});
-            })
-        </script>
+        
 
 
     </head>
@@ -275,17 +247,58 @@
             </div>
         </footer>
 
+
         <script>
-            var links = document.links;
-            for (var i = 0, linksLength = links.length; i < linksLength; i++) {
-                if(!links[i].href.startsWith("javascript:")) {
-                    if (links[i].hostname != window.location.hostname) {
-                        links[i].target = '_blank';
-                    } 
+            
+            document.addEventListener('DOMContentLoaded', () => {
+                // Detect highlighting
+                let lastEvent = 0;
+                const checkForHighlight = (event) => {
+                    try {
+                        const selection = window.getSelection().toString();
+                        // Rate limit to 30s
+                        if(selection && Date.now() > (lastEvent + 1000 * 30)) {
+                            gtag('event','select_content',{'event_category': 'docs-engagement', label: selection.substring(0,30)});
+                            lastEvent = Date.now();
+                        }
+                    } catch (e) {}
                 }
-            }
-        </script>
+                document.addEventListener('mouseup',checkForHighlight);
 
+                // Track remix deployments
+                [...document.getElementsByTagName('a')]
+                    .filter(x => x.href.startsWith('https://remix.ethereum.org/') && x.href.length > 27 )
+                    .map(x => {x.addEventListener('click',(event) => {
+                        gtag('event','deploy-to-remix',{event_category:'docs-engagement'});
+                    });});
+                [...document.getElementsByClassName('copy-to-clipboard-button')]
+                    .map(x => {x.addEventListener('click',(event) => {
+                        gtag('event','copy-code',{event_category:'docs-engagement'});
+                    });});
+
+                    // Open all external links in a blank context
+                    const links = document.links;
+                    for (var i = 0, linksLength = links.length; i < linksLength; i++) {
+                        if(!links[i].href.startsWith("javascript:")) {
+                            if (links[i].hostname != window.location.hostname) {
+                                links[i].target = '_blank';
+                            } 
+                        }
+                    }
+
+                    // Add header anchor tags
+                    const headers = document.querySelectorAll('.article > h1:not(.page-title),.article > h2,.article > h3');
+                    [...headers].map(header => {
+                        const link = document.createElement('a');
+                        link.href = `#${header.id}`;
+                        link.classList.add('anchor');
+                        link.innerHTML = '<img src="/images/link.svg" alt="Link to this section">';
+                        header.appendChild(link);
+                    })
+            })
+
+
+        </script>
     </body>
 
 
diff --git a/_includes/nodes.liquid b/_includes/nodes.liquid
index 5eb3a56a838..ce2efb54680 100644
--- a/_includes/nodes.liquid
+++ b/_includes/nodes.liquid
@@ -30,7 +30,7 @@ layout: ./main.liquid
         {% endfor %}
 
     </navigation>
-    <div>
+    <div class="article">
         <!--{% include banner %}-->
         {% if title %}
             <h1 class="page-title">{{title}}</h1>
diff --git a/_src/docs.css b/_src/docs.css
index 9ed241f57a8..44308986920 100644
--- a/_src/docs.css
+++ b/_src/docs.css
@@ -109,6 +109,17 @@ a:hover,
 #nav-container .tab a:hover {
   color: #375bd2;
 }
+a.anchor {
+  display: none;
+}
+h1:hover .anchor,
+h2:hover .anchor,
+h3:hover .anchor {
+  display: inline;
+}
+a.anchor img {
+  margin: 0 0 0 8px;
+}
 
 /** Side navigation */
 .nav-content {
diff --git a/_src/images/link.svg b/_src/images/link.svg
new file mode 100644
index 00000000000..6f4c3b604d8
--- /dev/null
+++ b/_src/images/link.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z" /></svg>
\ No newline at end of file