diff options
| -rw-r--r-- | assets/css/main.css | 19 | ||||
| -rw-r--r-- | assets/css/vars.css | 1 | ||||
| -rw-r--r-- | layouts/_default/baseof.html | 49 | ||||
| -rw-r--r-- | static/js/copy-code.js | 33 |
4 files changed, 78 insertions, 24 deletions
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 @@ <html lang="{{ or site.Language.LanguageCode site.Language.Lang }}" dir="{{ or site.Language.LanguageDirection `ltr` }}"> - <head> - {{ partial "head.html" . }} - </head> +<head> + {{ partial "head.html" . }} +</head> - {{ $theme := "auto"}} +{{ $theme := "auto"}} - {{ with .Param "theme" }} - {{ $theme = .}} - {{ end }} +{{ with .Param "theme" }} +{{ $theme = .}} +{{ end }} - <body class="{{ $theme }}"> +<body class="{{ $theme }}"> - <div class="content"> - <header> - {{ partial "header.html" . }} - </header> + <div class="content"> + <header> + {{ partial "header.html" . }} + </header> - <main class="main"> - {{ block "main" . }}{{ end }} - </main> - </div> + <main class="main"> + {{ block "main" . }}{{ end }} + </main> + </div> - <footer> - {{ partial "footer.html" . }} - </footer> + <footer> + {{ partial "footer.html" . }} + </footer> - {{ if .Param "math" }} - {{ partialCached "math.html" . }} - {{ end }} + {{ if .Param "math" }} + {{ partialCached "math.html" . }} + {{ end }} - </body> +</body> - <script> +<script> function isAuto() { return document.body.classList.contains("auto"); @@ -67,4 +67,5 @@ </script> +<script defer src="{{ "js/copy-code.js" | relURL }}"></script> </html>
\ 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 <pre> 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); + }); + }); + }); +}); |