added copy short links to headings

Author: wassfila

src/components/markdown/Heading.astro

@@ -11,36 +11,57 @@ const { node, headings } = Astro.props as Props;
 
 const HeadingLevel = `h${node.depth}`
 const heading_line = node.position.start.line
-const slug = headings.find((entry)=>(entry.line == heading_line)).slug
+const entry = headings.find((entry)=>(entry.line == heading_line))
 ---
-<HeadingLevel id={slug} class="heading bar">
-  <a href={`#${slug}`} class="link">
-    <div class="text">
-      {node.children.map((node)=>(
-        <Fragment set:html={toHtml(toHast(node))}></Fragment>
+<HeadingLevel id={entry.slug} class="heading bar">
+  <div class="text">
+    {node.children.map((node)=>(
+      <Fragment set:html={toHtml(toHast(node))}></Fragment>
       ))}
+  </div>
+  <div class="icon link">
+      <a href={`#${entry.slug}`} class="link">
+        <Svgicons filename="link"/>
+      </a>
+      <div class="icon copy" title="copy short link" data-sid={entry.sid}>
+        <Svgicons filename="copy"/>
+      </div>
     </div>
-    <div class="icon"><Svgicons filename="link"/></div>
-  </a>
 </HeadingLevel>
 
 <style>
 .heading.bar{
   width: fit-content;
+  display: flex;
+  gap: 10px;
 }
-.link{
-    display: flex;
-    gap:10px;
+.icon{
+  opacity: 0;
+}
+.heading.bar:hover .icon.link{
+  opacity: 1;
+}
+.icon.link:hover .icon.copy{
+  opacity: 1;
 }
-.link:hover{
-  text-decoration: underline;
+.icon.copy{
+    cursor: pointer;
+    position: relative; /* Needed to position the 'Copied!' message correctly */
+}
+.link{
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
 .icon :global(svg){
   width:16px;
+  height:16px;
     fill:rgb(101, 96, 96);
 }
 .heading.bar :global(a){
   text-decoration: none;
   color: inherit;
 }
 </style>
+
+<script src="./heading.js" />

src/components/markdown/heading.js

@@ -0,0 +1,36 @@
+
+function init(){
+    const copyIcons = document.querySelectorAll('.icon.copy');
+    copyIcons.forEach(icon => {
+      icon.addEventListener('click', function() {
+        // Copy data-sid to clipboard
+        const sid = this.getAttribute('data-sid');
+        const url = `${window.location.origin}/${sid}`;
+        navigator.clipboard.writeText(url).then(() => {
+          // Show success message
+          const message = document.createElement('span');
+          message.textContent = 'Copied!';
+          message.style.position = 'absolute';
+          message.style.left = '100%';
+          message.style.top = '0';
+          //message.style.backgroundColor = 'white';
+          message.style.color = 'white';
+          //message.style.border = '1px solid black';
+          message.style.padding = '2px 8px';
+          message.style.fontSize = '0.75rem';
+          message.style.marginLeft = '10px';
+          this.appendChild(message);
+
+          // Remove the message after 1 second
+          setTimeout(() => {
+            this.removeChild(message);
+          }, 1000);
+        }).catch(err => {
+          console.error('Failed to copy text: ', err);
+        });
+      });
+    });
+}
+
+document.addEventListener('DOMContentLoaded', init);  
+