updates

website/src/css/custom.css

@@ -2033,6 +2033,21 @@ html[data-theme="dark"] .theme-doc-sidebar-container>div>button.button:hover {
   margin: 10px;
   color: #818589; /* You can adjust the color as needed */
 }
+h3.anchor a.hash-link:before,
+h2.anchor a.hash-link:before {
+  content: "";
+  background-image: url('/img/copy.png');
+  background-size: 18px 18px;
+  height: 18px;
+  width: 18px;
+  display: inline-block;
+}
+h3.anchor.clicked a.hash-link:before,
+h2.anchor.clicked a.hash-link:before {
+  background-image: url('/img/check.png');
+  background-size: 18px 13px;
+  height: 13px;
+}
 
 @media (max-width: 996px) {
   .quickstart-container {

website/static/js/headerLinkCopy.js

@@ -3,19 +3,23 @@
 window.addEventListener("load", function () {
     // Get all the headers with anchor links
     const headers = document.querySelectorAll("h2.anchor, h3.anchor"); 
-  console.log("headers",headers);
+
     headers.forEach((header) => {
       header.style.cursor = "pointer";
       const clipboard = new ClipboardJS(header, { 
         text: function(trigger) {
-          const anchorLink = trigger.getAttribute('href');
-          return window.location.href.split('#')[0] + anchorLink;
+          const anchorLink = trigger.getAttribute("id");
+          return window.location.href.split('#')[0] +'#' + anchorLink;
         }
       });
 
       clipboard.on('success', function(e) {
         // Provide user feedback (e.g., alert or tooltip) here
-        alert("Link copied to clipboard: " + e.text);
+        console.log("e",e);
+        e.trigger.classList.add("clicked");
+        setTimeout(() => {
+          e.trigger.classList.remove('clicked')
+        }, 5000) 
       });
 
       clipboard.on('error', function(e) {