mirrors/hugo-typo
1
0
Fork 0
mirror of https://github.com/tomfran/typo.git synced 2025-04-25 21:19:55 +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; 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,17 +86,24 @@ 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: 0.8em; font-size: .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);
} }
@ -599,4 +606,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,34 +1,37 @@
document.addEventListener("DOMContentLoaded", function () { document.addEventListener("DOMContentLoaded", function () {
const codeBlocks = document.querySelectorAll("pre"); const codeBlocks = document.querySelectorAll(".highlight")
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)
}); })
}); })
}); })
}); })