From 156f1eb9623a54843a728936b08851cdb7aa21e3 Mon Sep 17 00:00:00 2001 From: Arun Mathai Date: Tue, 14 Jan 2025 17:27:28 +0530 Subject: feat(copy-code): To allow user to copy contents within code block to clipboard fix(ui): corrections told by tomfran fix(ui): add more contrast to button. fix(ui): loading js as deferred --- assets/css/main.css | 19 +++++++++++++++++ assets/css/vars.css | 1 + layouts/_default/baseof.html | 49 ++++++++++++++++++++++---------------------- static/js/copy-code.js | 33 +++++++++++++++++++++++++++++ 4 files changed, 78 insertions(+), 24 deletions(-) create mode 100644 static/js/copy-code.js diff --git a/assets/css/main.css b/assets/css/main.css index 61eca0a..c25d741 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -74,7 +74,26 @@ a { /* Code blocks */ +.copy-code-button { + background-color: var(--background); + font-family: var(--font-mono); + padding: 3px 6px; + font-size: 0.8em; + border-radius: var(--copy-code-button-border-radius); + position: absolute; + top: 10px; + right: 10px; + z-index: 1; + display: none; + border: 1px solid var(--code-border); +} + +pre:hover .copy-code-button { + display: block; +} + pre { + position: relative; padding: var(--code-padding); border: 1px solid var(--code-border); overflow: scroll; diff --git a/assets/css/vars.css b/assets/css/vars.css index 995cf2e..b28df63 100644 --- a/assets/css/vars.css +++ b/assets/css/vars.css @@ -44,6 +44,7 @@ /* Code */ --code-padding: 1.5rem; --code-border-radius: 10px; + --copy-code-button-border-radius: 7px; /* Social section */ --social-icons-bottom-margin: 3rem; diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 462b2e8..52a6767 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -2,39 +2,39 @@ - - {{ partial "head.html" . }} - + + {{ partial "head.html" . }} + - {{ $theme := "auto"}} +{{ $theme := "auto"}} - {{ with .Param "theme" }} - {{ $theme = .}} - {{ end }} +{{ with .Param "theme" }} +{{ $theme = .}} +{{ end }} - + -
-
- {{ partial "header.html" . }} -
+
+
+ {{ partial "header.html" . }} +
-
- {{ block "main" . }}{{ end }} -
-
+
+ {{ block "main" . }}{{ end }} +
+
- + - {{ if .Param "math" }} - {{ partialCached "math.html" . }} - {{ end }} + {{ if .Param "math" }} + {{ partialCached "math.html" . }} + {{ end }} - + - + \ No newline at end of file diff --git a/static/js/copy-code.js b/static/js/copy-code.js new file mode 100644 index 0000000..67fd936 --- /dev/null +++ b/static/js/copy-code.js @@ -0,0 +1,33 @@ +document.addEventListener("DOMContentLoaded", function () { + const codeBlocks = document.querySelectorAll("pre"); + + codeBlocks.forEach((codeBlock) => { + const copyButton = document.createElement("button"); + copyButton.className = "copy-code-button"; + copyButton.textContent = "copy"; + + // Insert the button inside the 
 block
+    codeBlock.appendChild(copyButton);
+
+    copyButton.addEventListener("click", function () {
+      const code = codeBlock.querySelector("code");
+      // Get the code content
+      const textToCopy = code.textContent || code.innerText;
+
+      // Use the Clipboard API to copy the text
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          // Change button text to "Copied"
+          copyButton.textContent = "copied";
+
+          setTimeout(() => {
+            copyButton.textContent = "copy";
+          }, 2000); // Reset the button text after 2 seconds
+        })
+        .catch((err) => {
+          console.error("Unable to copy text:", err);
+        });
+    });
+  });
+});
-- 
cgit v1.2.3