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

Merge pull request #110 from Borber/main

Browse source 
fix: copy button position
This commit is contained in:
Francesco Tomaselli 2025-04-01 11:22:55 +02:00 • committed by GitHub
commit f56961a5c4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 34 additions and 24 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;
}
& > input[type="checkbox"] {
&>input[type="checkbox"] {
width: var(--li-checkbox-size);
height: var(--li-checkbox-size);
margin: 0 0.2em 0.15em -1.25em;
@ -86,17 +86,24 @@ input {
/* Code blocks */
.highlight {
position: relative;
}
.copy-code-container {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
}
.copy-code-button {
background-color: var(--background);
font-family: var(--font-mono);
padding: 3px 6px;
font-size: 0.8em;
font-size: .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);
}
@ -599,4 +606,4 @@ blockquote {
blockquote p {
margin-left: 1rem;
margin-right: 1rem;
}
}

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

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