adding copy to clipboard to Period documentation website

.gitignore

@@ -3,6 +3,7 @@ build
 .idea
 docs/_site
 docs/.jekyll-cache
+docs/tailwindcss
 .phpunit.cache
 composer.lock
 .php-cs-fixer.cache

docs/_data/manifest.yml

@@ -1,4 +1,4 @@
 {
-  "docs.css": "/styles.0001.css",
-  "docs.js": "/scripts.0001.js"
+  "docs.css": "/styles.0002.css",
+  "docs.js": "/scripts.0002.js"
 }

docs/input.css

@@ -50,6 +50,22 @@ code {
     @apply text-sm sm:text-base font-mono;
 }
 
+.language-php.highlighter-rouge {
+  @apply relative
+}
+
+.language-php.highlighter-rouge .copy-snippet {
+  @apply absolute top-1 right-1 px-4 py-2 bg-white hidden no-underline cursor-pointer
+}
+
+.language-php.highlighter-rouge .copy-snippet-notification {
+  @apply absolute top-14 right-1 text-white
+}
+
+.language-php.highlighter-rouge:hover .copy-snippet {
+  @apply block;
+}
+
 .language-php .string {
     color: #ff4143
 }

docs/scripts.0002.js

@@ -0,0 +1,51 @@
+(() => {
+  let contentHeaders = document.querySelectorAll("main h2[id]");
+  if (!document.querySelector('html').classList.contains('homepage') && contentHeaders) {
+    const uri = new URL(location.href);
+    contentHeaders.forEach((header) => {
+      uri.hash = header.id;
+      let link = document.createElement("a");
+      link.classList.add("header-permalink");
+      link.title = "Permalink";
+      link.href = uri.toString();
+      link.innerHTML = "¶";
+      header.appendChild(link);
+    });
+  }
+
+  let codeSnippet = document.querySelectorAll('.content .language-php.highlighter-rouge');
+  codeSnippet.forEach((snippet) => {
+    let notification = document.createElement("div");
+    notification.classList.add('copy-snippet-notification', 'hidden', 'rounded', 'p-2');
+    snippet.appendChild(notification);
+
+    let link = document.createElement("span");
+    link.classList.add("copy-snippet");
+    link.innerHTML = "copy 📋";
+    link.addEventListener('click', function (e) {
+      let snippetParent = e.target.parentNode;
+      let notification = snippetParent.querySelector('.copy-snippet-notification');
+      let content = snippetParent.querySelector('pre').textContent;
+      try {
+        navigator.clipboard.writeText(content);
+        notification.innerHTML = 'Copied!';
+        notification.classList.add('bg-black');
+        notification.classList.remove('hidden');
+        setTimeout(() => {
+          notification.classList.add('hidden');
+          notification.classList.remove('bg-black');
+        }, 500);
+      } catch (err) {
+        console.error('Failed to copy: ', err);
+        notification.innerHTML = 'Copy failed!';
+        notification.classList.add('bg-red-800');
+        notification.classList.remove('hidden');
+        setTimeout(() => {
+          notification.classList.add('hidden');
+          notification.classList.remove('bg-red-800');
+        }, 500);
+      }
+    }, false);
+    snippet.appendChild(link);
+  });
+})();

docs/styles.0001.css → docs/styles.0002.css

@@ -691,10 +691,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.mt-1 {
-  margin-top: 0.25rem;
-}
-
 .block {
   display: block;
 }
@@ -842,18 +838,18 @@ video {
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
-.space-y-8 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
-}
-
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
 
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -866,6 +862,10 @@ video {
   white-space: nowrap;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -904,6 +904,11 @@ video {
   --tw-border-opacity: 0.5;
 }
 
+.bg-black {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+}
+
 .bg-gray-200 {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
@@ -924,6 +929,11 @@ video {
   background-color: rgb(255 221 119 / var(--tw-bg-opacity));
 }
 
+.bg-red-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
+}
+
 .bg-slate-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(241 245 249 / var(--tw-bg-opacity));
@@ -953,6 +963,10 @@ video {
   --tw-gradient-to: #fff var(--tw-gradient-to-position);
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -1282,6 +1296,37 @@ code {
   }
 }
 
+.language-php.highlighter-rouge {
+  position: relative;
+}
+
+.language-php.highlighter-rouge .copy-snippet {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  display: none;
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  text-decoration-line: none;
+}
+
+.language-php.highlighter-rouge .copy-snippet-notification {
+  position: absolute;
+  top: 3.5rem;
+  right: 0.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.language-php.highlighter-rouge:hover .copy-snippet {
+  display: block;
+}
+
 .language-php .string {
   color: #ff4143
 }