diff --git a/_plugins/highlight-linedivs.rb b/_plugins/highlight-linedivs.rb index 34c82ec0..02d8b8ba 100644 --- a/_plugins/highlight-linedivs.rb +++ b/_plugins/highlight-linedivs.rb @@ -63,14 +63,21 @@ def render(context) "
-
- - - - - - - +
+
+ + + + + + + +
+
" suffix = " " \ diff --git a/_sass/_highlight.scss b/_sass/_highlight.scss index d2d00866..74b448d6 100644 --- a/_sass/_highlight.scss +++ b/_sass/_highlight.scss @@ -56,19 +56,31 @@ $background: var(--code-background); } } -.window-controls { +.window-header { position: relative; top: 9px; - margin-left: 14px; - margin-right: 0px; z-index: 2; text-align: initial; + height: 28.5px; + + .window-controls { + float: left; + margin-left: 14px; + margin-right: 0px; + } + + .window-copy { + color: #fbfbfb; + fill: #fbfbfb; + float: right; + margin-right: 14px; + cursor: pointer; + } } figure.highlight { position: relative; - margin-block-start: 0; margin-inline-start: 0px; diff --git a/darkmode.js b/darkmode.js index 56cf4d7c..a61e5021 100644 --- a/darkmode.js +++ b/darkmode.js @@ -41,3 +41,29 @@ function initDarkMode() { } initDarkMode(); + +// This assumes that you're using Rouge; if not, update the selector +const codeBlocks = document.querySelectorAll('.highlight'); +const copyCodeButtons = document.querySelectorAll('.window-copy'); + +copyCodeButtons.forEach((copyCodeButton, index) => { + const code = codeBlocks[index].innerText; + + copyCodeButton.addEventListener('click', () => { + // Copy the code to the user's clipboard + window.navigator.clipboard.writeText(code); + + // Update the button text visually + const { innerHTML: originalText } = copyCodeButton; + copyCodeButton.innerText = 'Copied!'; + + // (Optional) Toggle a class for styling the button + //copyCodeButton.classList.add('copied'); + + // After 2 seconds, reset the button to its initial UI + setTimeout(() => { + copyCodeButton.innerHTML = originalText; + //copyCodeButton.classList.remove('copied'); + }, 1000); + }); +}); diff --git a/darkmode.min.js b/darkmode.min.js index b5515668..85159dfa 100644 --- a/darkmode.min.js +++ b/darkmode.min.js @@ -1 +1 @@ -const t=document.querySelectorAll(".dark-mode-switch");t&&t.forEach((e=>{e.addEventListener("click",(()=>{t.forEach((t=>t.classList.add("animated"))),"true"===localStorage.getItem("darkMode")?(document.documentElement.setAttribute("data-mode","light"),localStorage.setItem("darkMode",!1),t.forEach((t=>t.classList.add("light"))),t.forEach((t=>t.classList.remove("dark")))):(document.documentElement.setAttribute("data-mode","dark"),localStorage.setItem("darkMode",!0),t.forEach((t=>t.classList.add("dark"))),t.forEach((t=>t.classList.remove("light"))))}))})),function(){let e=localStorage.getItem("darkMode");"true"!==e?"false"!==e?window.matchMedia("(prefers-color-scheme: dark)").matches&&(document.documentElement.setAttribute("data-mode","dark"),t.forEach((t=>t.classList.add("dark")))):t.forEach((t=>t.classList.add("light"))):t.forEach((t=>t.classList.add("dark")))}(); \ No newline at end of file +const darkModeSwitches=document.querySelectorAll(".dark-mode-switch");function toggleDarkMode(){"true"===localStorage.getItem("darkMode")?(document.documentElement.setAttribute("data-mode","light"),localStorage.setItem("darkMode",!1),darkModeSwitches.forEach(e=>e.classList.add("light")),darkModeSwitches.forEach(e=>e.classList.remove("dark"))):(document.documentElement.setAttribute("data-mode","dark"),localStorage.setItem("darkMode",!0),darkModeSwitches.forEach(e=>e.classList.add("dark")),darkModeSwitches.forEach(e=>e.classList.remove("light")))}function initDarkMode(){let e=localStorage.getItem("darkMode");if("true"===e){darkModeSwitches.forEach(e=>e.classList.add("dark"));return}if("false"===e){darkModeSwitches.forEach(e=>e.classList.add("light"));return}window.matchMedia("(prefers-color-scheme: dark)").matches&&(document.documentElement.setAttribute("data-mode","dark"),darkModeSwitches.forEach(e=>e.classList.add("dark")))}darkModeSwitches&&darkModeSwitches.forEach(e=>{e.addEventListener("click",()=>{darkModeSwitches.forEach(e=>e.classList.add("animated")),toggleDarkMode()})}),initDarkMode();const codeBlocks=document.querySelectorAll(".highlight"),copyCodeButtons=document.querySelectorAll(".window-copy");copyCodeButtons.forEach((e,t)=>{let d=codeBlocks[t].innerText;e.addEventListener("click",()=>{window.navigator.clipboard.writeText(d);let{innerHTML:t}=e;e.innerText="Copied!",setTimeout(()=>{e.innerHTML=t},1e3)})}); \ No newline at end of file