mirrors/hugo-typo
1
0
Fork 0
mirror of https://github.com/tomfran/typo.git synced 2025-04-25 13:09:54 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Revert "fix: copy button position"

Browse source
This commit is contained in:
Francesco Tomaselli 2025-04-01 12:06:34 +02:00 • committed by GitHub
parent f56961a5c4
commit 9128fe46e3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

23
assets/css/main.css
View file

@ -66,7 +66,7 @@ li {
list-style-type: none; list-style-type: none;
} }
&>input[type="checkbox"] { & > input[type="checkbox"] {
width: var(--li-checkbox-size); width: var(--li-checkbox-size);
height: var(--li-checkbox-size); height: var(--li-checkbox-size);
margin: 0 0.2em 0.15em -1.25em; margin: 0 0.2em 0.15em -1.25em;
@ -86,24 +86,17 @@ input {
/* Code blocks */ /* Code blocks */
.highlight {
position: relative;
}
.copy-code-container {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
.copy-code-button { .copy-code-button {
background-color: var(--background); background-color: var(--background);
font-family: var(--font-mono); font-family: var(--font-mono);
padding: 3px 6px; padding: 3px 6px;
font-size: .8em; font-size: 0.8em;
border-radius: var(--copy-code-button-border-radius); 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); border: 1px solid var(--code-border);
} }
@ -606,4 +599,4 @@ blockquote {
blockquote p { blockquote p {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1rem; margin-right: 1rem;
} }

35
static/js/copy-code.js
View file

@ -1,37 +1,34 @@
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const codeBlocks = document.querySelectorAll(".highlight") const codeBlocks = document.querySelectorAll("pre");
codeBlocks.forEach((codeBlock) => { codeBlocks.forEach((codeBlock) => {
if (codeBlock.className == "mermaid") return if (codeBlock.className == "mermaid") return;
const copyButton = document.createElement("button") const copyButton = document.createElement("button");
copyButton.className = "copy-code-button" copyButton.className = "copy-code-button";
copyButton.textContent = "copy" copyButton.textContent = "copy";
const copyButtonContainer = document.createElement("div")
copyButtonContainer.className = "copy-code-container"
copyButtonContainer.appendChild(copyButton)
// Insert the button inside the <pre> block // Insert the button inside the <pre> block
codeBlock.appendChild(copyButton) codeBlock.appendChild(copyButton);
copyButton.addEventListener("click", function () { copyButton.addEventListener("click", function () {
const code = codeBlock.querySelector("code") const code = codeBlock.querySelector("code");
// Get the code content // Get the code content
const textToCopy = code.textContent || code.innerText const textToCopy = code.textContent || code.innerText;
// Use the Clipboard API to copy the text // Use the Clipboard API to copy the text
navigator.clipboard navigator.clipboard
.writeText(textToCopy) .writeText(textToCopy)
.then(() => { .then(() => {
// Change button text to "Copied" // Change button text to "Copied"
copyButton.textContent = "copied" copyButton.textContent = "copied";
setTimeout(() => { setTimeout(() => {
copyButton.textContent = "copy" copyButton.textContent = "copy";
}, 2000) // Reset the button text after 2 seconds }, 2000); // Reset the button text after 2 seconds
}) })
.catch((err) => { .catch((err) => {
console.error("Unable to copy text:", err) console.error("Unable to copy text:", err);
}) });
}) });
}) });
}) });