Website: add hover link to article headings. (#25760)

Closes: #24863

Changes:
- Added hover links to headings in articles that copies a link to the
heading to the user's clipboard when clicked.

website/assets/js/pages/articles/basic-article.page.js

@@ -37,6 +37,30 @@ parasails.registerPage('basic-article', {
       let startValue = parseInt(ol.getAttribute('start'), 10) - 1;
       ol.style.counterReset = 'custom-counter ' + startValue;
     });
+
+    let headingsOnThisPage = $('[purpose="article-content"]').find(':header');
+    for(let key in Object.values(headingsOnThisPage)){
+      let heading = headingsOnThisPage[key];
+      // Find the child <a> element
+      let linkElementNestedInThisHeading = _.first($(heading).find('a.markdown-link'));
+      $(linkElementNestedInThisHeading).click(()=> {
+        if(typeof navigator.clipboard !== 'undefined') {
+          // If this heading has already been clicked and still has the copied class we'll just ignore this click
+          if(!$(heading).hasClass('copied')){
+            // If the link's href is missing, we'll copy the current url (and remove any hashes) to the clipboard instead
+            if(linkElementNestedInThisHeading.href) {
+              navigator.clipboard.writeText(linkElementNestedInThisHeading.href);
+            } else {
+              navigator.clipboard.writeText(heading.baseURI.split('#')[0]);
+            }
+            // Add the copied class to the header to notify the user that the link has been copied.
+            $(heading).addClass('copied');
+            // Remove the copied class 5 seconds later, so we can notify the user again if they re-cick on this heading
+            setTimeout(()=>{$(heading).removeClass('copied');}, 5000);
+          }
+        }
+      });
+    }
     // Add an event listener to add a class to the right sidebar when the header is hidden.
     window.addEventListener('scroll', this.handleScrollingInArticle);
 

website/assets/styles/pages/articles/basic-article.less

@@ -8,6 +8,40 @@
     border-top: 2px solid @core-vibrant-blue-15;
     width: 100%;
   }
+  .markdown-heading:hover {
+    .markdown-link {
+      height: 16px;
+      vertical-align: middle;
+      margin-left: 8px;
+      content: url('/images/[email protected]');
+    }
+  }
+
+  .markdown-heading.copied::before {
+    content: 'Link copied to clipboard';
+    display: flex;
+    font-weight: 400;
+    position: relative;
+    top: -25px;
+    height: 0px;
+    font-size: 14px;
+    // line-height: 14px;
+    color: @core-vibrant-blue;
+    animation-name: copiedText;
+    animation-duration: 4s;
+    animation-fill-mode: forwards;
+  }
+
+  @keyframes copiedText {
+    0% {opacity: 0;}
+    20% {opacity: 100;}
+    30% {opacity: 80;}
+    50% {opacity: 60;}
+    70% {opacity: 40;}
+    80% {opacity: 20;}
+    100% {opacity: 0;}
+  }
+
   [purpose='page-container'] {
     max-width: 1200px;
     padding: 64px;