feat: add copy button to header

Author: alsolovyev

src/backend/views/pages/blocks/header.twig

@@ -1,4 +1,11 @@
 <h{{ level }} id="{{ text | urlify  }}" class="block-header block-header--{{ level }}">
+  {%
+    include 'components/copy-button.twig' with {
+      ariaLabel: 'Copy Link to the ' ~ text,
+      class: 'block-header__copy-button',
+      textToCopy: '#' ~ text | urlify,
+    }
+  %}
   <a href="#{{ text | urlify  }}">
     {{ text }}
   </a>

src/frontend/styles/components/page.pcss

@@ -125,6 +125,20 @@
     pointer-events: none;
   }
 
+  &__copy-button {
+    margin-right: 8px;
+    color: var(--color-text-second);
+    opacity: 0;
+  }
+
+  @media (--can-hover) {
+    &:hover {
+      .block-header__copy-button {
+        opacity: 1;
+      }
+    }
+  }
+
   .inline-code {
     line-height: inherit;
   }