From 9d6e03cdba22174aa1d591059d2a585c5f86d21b Mon Sep 17 00:00:00 2001 From: ignace nyamagana butera Date: Fri, 21 Jun 2024 11:03:32 +0200 Subject: [PATCH] adding copy to clipboard to Period documentation website --- .gitignore | 1 + docs/_data/manifest.yml | 4 +- docs/input.css | 16 ++++++ docs/scripts.0001.js | 15 ------ docs/scripts.0002.js | 51 ++++++++++++++++++ docs/{styles.0001.css => styles.0002.css} | 65 +++++++++++++++++++---- 6 files changed, 125 insertions(+), 27 deletions(-) delete mode 100644 docs/scripts.0001.js create mode 100644 docs/scripts.0002.js rename docs/{styles.0001.css => styles.0002.css} (97%) diff --git a/.gitignore b/.gitignore index d4e832b..596fcdc 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ build .idea docs/_site docs/.jekyll-cache +docs/tailwindcss .phpunit.cache composer.lock .php-cs-fixer.cache diff --git a/docs/_data/manifest.yml b/docs/_data/manifest.yml index 66ed101..b067579 100644 --- a/docs/_data/manifest.yml +++ b/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" } diff --git a/docs/input.css b/docs/input.css index eca3a5a..bc2a2e4 100644 --- a/docs/input.css +++ b/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 } diff --git a/docs/scripts.0001.js b/docs/scripts.0001.js deleted file mode 100644 index f52b450..0000000 --- a/docs/scripts.0001.js +++ /dev/null @@ -1,15 +0,0 @@ -(() => { - 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); - }); - } -})(); diff --git a/docs/scripts.0002.js b/docs/scripts.0002.js new file mode 100644 index 0000000..d79047e --- /dev/null +++ b/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); + }); +})(); diff --git a/docs/styles.0001.css b/docs/styles.0002.css similarity index 97% rename from docs/styles.0001.css rename to docs/styles.0002.css index b328ce8..22f35d7 100644 --- a/docs/styles.0001.css +++ b/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 }