feat: add new button for copying anchor links

client/themes/tyclipso/components/page.vue

@@ -551,6 +551,24 @@ export default {
 
       // remove empty divs
       c.querySelectorAll('div:not([class]):not([id]):empty').forEach(el => el.remove())
+
+      // copy header links
+      c.querySelectorAll('.toc-header').forEach(header => {
+        const button = header.querySelector('.ty-anchor-button')
+        const link = header.querySelector('.toc-anchor').href
+        const icons = button.querySelectorAll('.v-icon')
+
+        button.addEventListener('click', () => {
+          navigator.clipboard.writeText(link)
+
+          icons[0].style.display = 'none'
+          icons[1].style.display = null
+          setTimeout(() => {
+            icons[0].style.display = null
+            icons[1].style.display = 'none'
+          }, 1000)
+        })
+      })
     },
     copyToClipboard(hash) {
       const url = window.location.origin + window.location.pathname + hash

client/themes/tyclipso/scss/app.scss

@@ -21,24 +21,15 @@
 
   h1, h2, h3, h4, h5, h6 {
     color: mc('grey', '800');
-
+    padding-right: 2rem;
-    .toc-anchor {
-      top: 0;
-      font-size: inherit;
-      overflow: hidden;
-      left: -1em;
-      right: 0;
-      color: transparent;
-
-      &::before {
-        content: '#';
-        color: mc('theme', 'primary');
-      }
-    }
 
     &:not(:first-child) {
       margin-top: 1.25em;
     }
+
+    .toc-anchor {
+      display: none !important;
+    }
   }
 
   // remove underline

client/themes/tyclipso/scss/components/_anchor-button.scss

@@ -0,0 +1,15 @@
+.ty-anchor-button {
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility .1s ease, opacity .1s ease;
+  color: mc('grey', '700');
+}
+
+.toc-header:hover .ty-anchor-button {
+  opacity: 1;
+  visibility: visible;
+}

client/themes/tyclipso/scss/components/_index.scss

@@ -1 +1,2 @@
 @import "image";
+@import "anchor-button";

server/modules/rendering/html-tyclipso/components/AnchorCopyButton.js

@@ -0,0 +1,15 @@
+/**
+ * @return {string}
+ */
+function AnchorCopyButton() {
+  return `
+      <button type="button" class="ty-anchor-button v-btn v-btn--flat v-btn--icon v-btn--round v-size--small" aria-label="Link kopieren">
+        <span class="v-btn__content">
+          <i aria-hidden="true" class="v-icon notranslate mdi mdi-link-variant" style="font-size: 16px"></i>
+          <i aria-hidden="true" class="v-icon notranslate mdi mdi-check-circle" style="font-size: 16px; display: none;"></i>
+        </span>
+      </button>
+    `
+}
+
+module.exports = AnchorCopyButton

server/modules/rendering/html-tyclipso/components/ImageOverlay.js

@@ -1,12 +1,18 @@
-const ImageOverlay = (src) => `
+/**
-<div class="ty-image-overlay">
+ * @param {string} src - Image source.
-    <a href="${src}" target="_blank" class="v-btn v-btn--contained theme--light v-size--default primary" aria-label="In neuem Tab öffnen">
+ * @return {string}
-      <span class="v-btn__content">
+ */
-          <i aria-hidden="true" class="v-icon v-icon--left notranslate mdi mdi-open-in-new theme--light"></i>
+function ImageOverlay(src) {
-          In neuem Tab öffnen
+  return `
-      </span>
+    <div class="ty-image-overlay">
-    </a>
+      <a href="${src}" target="_blank" class="v-btn v-btn--contained theme--light v-size--default primary" aria-label="In neuem Tab öffnen">
-</div>
+        <span class="v-btn__content">
-`
+            <i aria-hidden="true" class="v-icon v-icon--left notranslate mdi mdi-open-in-new theme--light"></i>
+            In neuem Tab öffnen
+        </span>
+      </a>
+    </div>
+  `
+}
 
 module.exports = ImageOverlay

server/modules/rendering/html-tyclipso/renderer.js

@@ -1,13 +1,16 @@
 const ImageOverlay = require('./components/ImageOverlay')
+const AnchorCopyButton = require('./components/AnchorCopyButton')
 
 module.exports = {
   init($, config) {
-
     // wrap images
     $('p > img').each((i, element) => {
       const src = $(element).attr('src');
       $(element).wrap(`<div class="ty-image-wrapper"></div>`)
       $(element).parent().append(ImageOverlay(src))
     })
+
+    // add anchor button to headlines
+    $('h1,h2,h3,h4,h5,h6').append(AnchorCopyButton())
   }
 }