ukhsa-collaboration
diff --git a/‎docs/_layouts/guidance-page.html
Lines changed: 3 additions & 2 deletions b/‎docs/_layouts/guidance-page.html
Lines changed: 3 additions & 2 deletions
diff --git a/‎docs/assets/img/permalink.png
10.2 KB b/‎docs/assets/img/permalink.png
10.2 KB
diff --git a/‎docs/_includes/expandable-sections.js renamed to ‎docs/assets/scripts/expandable-sections.js b/‎docs/_includes/expandable-sections.js renamed to ‎docs/assets/scripts/expandable-sections.js
diff --git a/‎docs/assets/scripts/section-links.js
Lines changed: 32 additions & 0 deletions b/‎docs/assets/scripts/section-links.js
Lines changed: 32 additions & 0 deletions
diff --git a/‎docs/assets/styles.css
Lines changed: 25 additions & 1 deletion b/‎docs/assets/styles.css
Lines changed: 25 additions & 1 deletion
@@ -24,7 +24,8 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
     <!--Scripts-->
-    <script> {% include expandable-sections.js %} </script>
+    <script src="assets/scripts/expandable-sections.js"></script>
+    <script src="assets/scripts/section-links.js" defer></script>
 
   </head>
   <body>
@@ -57,4 +58,4 @@ <h1>{{ page.title }}</h1>
 
   </body>
 
-</html>
+</html>
@@ -0,0 +1,32 @@
+// Function to copy link to clipboard
+function copylink(text) {
+    navigator.clipboard.writeText(text).then(() => {
+        alert(`Link copied to clipboard:\n${text}`);
+    }).catch(err => {
+        console.error('Failed to copy link', err);
+    });
+}
+
+// Add copy link icons to all heading elements
+document.querySelectorAll('h1, h2, h3, h4, h5').forEach(heading => {
+    // Ensure the heading has an ID for the anchor link
+    if (!heading.id) {
+        heading.id = heading.textContent.trim().toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
+    }
+
+    // Create the icon element
+    const iconWrapper = document.createElement('span');
+    iconWrapper.className = 'section-link';
+    iconWrapper.title = 'Section link';
+    iconWrapper.innerHTML = ' ';
+
+    // Append the icon to the heading
+    heading.appendChild(iconWrapper);
+
+    // Add event listener for copying the link
+    iconWrapper.addEventListener('click', (e) => {
+        e.stopPropagation(); // Prevent the click event from bubbling up
+        const url = `${window.location.origin}${window.location.pathname}#${heading.id}`;
+        copylink(url);
+    });
+});
@@ -143,6 +143,30 @@ ul, ol{
 }
 
 
+/*Section links*/
+.section-link{
+  background-image: url('img/permalink.png');
+  width: 18px;
+  height: 18px;
+  opacity: 0;
+  margin-left: 5px;
+  display: inline-block;
+  background-size: cover;
+}
+
+.section-link:hover{
+  cursor: pointer;
+}
+
+h1 span, h2 span, h3 span, h4 span, h5 span {
+  transition: opacity 0.3s ease-in-out;
+}
+
+h1:hover span, h2:hover span, h3:hover span, h4:hover span, h5:hover span{
+  opacity: 0.5;
+}
+
+
 /*Fancy elements*/
 blockquote{
   margin: 1em 0 2em 0;
@@ -342,4 +366,4 @@ td:first-child {
 @media only screen and (max-width: 985px) {
   #copyright-block{display:block;}
   #copyright-notice{margin-left:0; padding-left:0;}
-}
+}