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

feat(copy-code): To allow user to copy contents within code block to clipboard

Browse source 
fix(ui): corrections told by tomfran

fix(ui): add more contrast to button.

fix(ui): loading js as deferred
This commit is contained in:
Arun Mathai 2025-01-14 17:27:28 +05:30
parent 2658baf36e
commit 6e5bc2f944
4 changed files with 82 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

19
assets/css/main.css
View file

@ -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;

1
assets/css/vars.css
View file

@ -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;

57
layouts/_default/baseof.html
View file

@ -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 = .}}
{{ with .Param "theme" }}
{{ $theme = .}}
{{ end }}
<body class="{{ $theme }}">
<div class="content">
<header>
{{ partial "header.html" . }}
</header>
<main class="main">
{{ block "main" . }}{{ end }}
</main>
</div>
<footer>
{{ partial "footer.html" . }}
</footer>
{{ if .Param "math" }}
{{ partialCached "math.html" . }}
{{ end }}
<body class="{{ $theme }}">
</body>
<div class="content">
<header>
{{ partial "header.html" . }}
</header>
<main class="main">
{{ block "main" . }}{{ end }}
</main>
</div>
<footer>
{{ partial "footer.html" . }}
</footer>
{{ if .Param "math" }}
{{ partialCached "math.html" . }}
{{ end }}
</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>

33
static/js/copy-code.js Normal file
View file

@ -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);
});
});
});
});