permalink in docs headings

giulong · Dec 29, 2023 · 2096c58 · 2096c58
1 parent 30b2e67
commit 2096c58
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 16 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -1653,7 +1653,7 @@ slack:
 
 ---
 
-# TestBook (Coverage)
+# TestBook - Coverage
 
 Talking about coverage for e2e tests is not so straightforward. Coverage makes sense for unit tests, since they directly run against methods,
 so it's easy to check which lines were covered during the execution.

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -47,11 +47,11 @@
 </footer>
 <!--[if !IE]>
 <script>fixScale(document);</script><![endif]-->
+<script src="assets/scripts/leftMenu.js"></script>
 <script src="assets/scripts/search.js"></script>
 <script src="assets/scripts/copyCode.js"></script>
 <script src="assets/scripts/openImage.js"></script>
 <script src="assets/scripts/topButton.js"></script>
 <script src="assets/scripts/jsonSchemas.js"></script>
-<script src="assets/scripts/leftMenu.js"></script>
 </body>
 </html>
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
@@ -216,6 +216,20 @@ h2, h3, h4 {
     margin-top: 25px;
 }
 
+h1, h2, h3, h4 {
+    cursor: pointer;
+}
+
+h1:hover::after, h2:hover::after, h3:hover::after, h4:hover::after {
+    content: url('../images/permalink-icon.png');
+    margin-left: 4px;
+}
+
+h3:hover::after, h4:hover::after {
+    position: relative;
+    top: 2px;
+}
+
 tbody tr td:first-child {
     font-weight: bold;
 }

diff --git a/docs/assets/images/permalink-icon.png b/docs/assets/images/permalink-icon.png
diff --git a/docs/assets/scripts/leftMenu.js b/docs/assets/scripts/leftMenu.js
@@ -1,18 +1,18 @@
 const leftMenu = document.getElementById('left-menu');
+const headings = Array.from(document.querySelectorAll('h1, h2, h3, h4'));
 const tocList = document.getElementById('toc-list');
-const tocElements = Array.from(document.querySelectorAll('h1, h2, h3, h4'));
 const toggleTocButton = document.getElementById('toggle-toc-button');
 
 document.onload = buildLeftMenu();
 
 function buildLeftMenu() {
-    tocElements
-        .map(tocElement => {
+    headings
+        .map(heading => {
             const li = document.createElement('li');
-            const text = tocElement.innerText.toLowerCase();
+            const text = heading.innerText;
 
-            li.setAttribute('onclick', 'navigateTo("' + text.replaceAll(' ', '-') + '")');
-            li.classList.add('toc-element', tocElement.nodeName.toLowerCase());
+            li.setAttribute('onclick', 'navigateTo("' + text.toLowerCase().replaceAll(' ', '-') + '")');
+            li.classList.add('toc-element', heading.nodeName.toLowerCase());
             li.innerText = text;
 
             return li;

diff --git a/docs/assets/scripts/search.js b/docs/assets/scripts/search.js
@@ -1,6 +1,5 @@
 const header = document.getElementsByTagName('header')[0];
 const wrapper = document.getElementsByClassName('wrapper')[0];
-const paragraphs = Array.from(document.querySelectorAll('h1, h2, h3, h4')).map(p => p.innerText.toLowerCase());
 const searchContainer = document.getElementById('search-container');
 const searchInput = document.getElementById('search-input');
 const resultsContainer = document.getElementById('results-container');
@@ -16,7 +15,7 @@ searchInput.setAttribute('onfocus', 'highlight()');
 searchInput.setAttribute('onclick', 'showResults()');
 searchInput.setAttribute('onkeyup', 'search()');
 
-document.onload = addAnchor();
+document.onload = setUpAnchors();
 document.addEventListener('click', function(event) {
     if (!searchContainer.contains(event.target)) {
         hideResults();
@@ -32,6 +31,13 @@ document.addEventListener('keydown', evt => {
 window.onscroll = function() { stickyHeader() };
 window.onresize = function() { stickyHeader() };
 
+function setUpAnchors() {
+    location.href = location.hash ? location.hash : '#spectrum';
+    headings.forEach(h => h.setAttribute('onclick', 'navigateTo("' + h.innerText.toLowerCase().replaceAll(' ', '-') + '")'));
+
+    setTimeout(() => scrollUpABit(), 100);
+}
+
 function highlight() {
     searchInput.classList.add('shadow');
     resultsContainer.classList.add('shadow');
@@ -64,20 +70,21 @@ function hideResults() {
     searchInput.classList.remove('shadow');
 }
 
-function addAnchor() {
-    location.href = '#spectrum';
+function scrollUpABit() {
+    window.scrollBy(0, -75);
 }
 
 function navigateTo(anchor) {
     hideResults();
 
     location.href = '#' + anchor;
-    window.scrollBy(0, -75);
+    window.navigator.clipboard.writeText(location.href);
+    scrollUpABit();
 }
 
 function search() {
     const value = searchInput.value.toLowerCase();
-    const results = paragraphs.filter(p => p.includes(value));
+    const results = headings.filter(h => h.innerText.toLowerCase().includes(value));
 
     resultsContainer.innerHTML = '';
     if (value == '') {
@@ -94,9 +101,9 @@ function search() {
         .map(r => {
             const li = document.createElement('li');
 
-            li.setAttribute('onclick', 'navigateTo("' + r.replaceAll(' ', '-') + '")');
+            li.setAttribute('onclick', 'navigateTo("' + r.innerText.toLowerCase().replaceAll(' ', '-') + '")');
             li.classList.add('search-result');
-            li.innerText = r;
+            li.innerText = r.innerText;
 
             return li;
         })