✨ feat: add copy button to code blocks
Óscar
2 years ago
committed by
GitHub
commit
ee6a54b3f9
@ -1,17 +0,0 @@
|
|||||||
+++
|
|
||||||
title = "Gairebé sense JavaScript"
|
|
||||||
date = 2023-01-06
|
|
||||||
updated = 2023-04-28
|
|
||||||
description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
|
|
||||||
|
|
||||||
[taxonomies]
|
|
||||||
tags = ["funcionalitat"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# JavaScript?
|
|
||||||
|
|
||||||
Aquest tema gairebé no utilitza JavaScript. Inclou uns ~900 bytes de fitxers `.js` amb la lògica per al canvi de tema clar/fosc, que es pot desactivar establint `theme_switcher = false` al fitxer `config.toml`.
|
|
||||||
|
|
||||||
La funcionalitat de KaTex, que requereix carregar un fitxer JavaScript de 274 KB, es pot activar per a publicacions específiques.
|
|
||||||
|
|
||||||
A part d'això, és un tema ràpid amb HTML i CSS. Tal i com hauria de ser (la major part de) la web :-)
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
+++
|
|
||||||
title = "Casi sin JavaScript"
|
|
||||||
date = 2023-01-06
|
|
||||||
updated = 2023-04-28
|
|
||||||
description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
|
|
||||||
|
|
||||||
[taxonomies]
|
|
||||||
tags = ["funcionalidad"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# ¿JavaScript?
|
|
||||||
|
|
||||||
Este tema casi no utiliza JavaScript. Incluye ~900 bytes de código `.js` con la lógica para el interruptor de modo claro/oscuro, el cual puede ser desactivado configurando `theme_switcher = false` en el archivo `config.toml`.
|
|
||||||
|
|
||||||
El soporte de KaTeX, que requiere cargar un archivo JavaScript de 274 KB, puede ser activado para publicaciones específicas.
|
|
||||||
|
|
||||||
Aparte de esto, es un tema rápido con HTML y CSS. Como debería ser (en su mayoría) la web :-)
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
+++
|
|
||||||
title = "Almost no JavaScript"
|
|
||||||
date = 2023-01-06
|
|
||||||
updated = 2023-04-28
|
|
||||||
description = "JavaScript is only used when HTML and CSS aren't enough."
|
|
||||||
|
|
||||||
[taxonomies]
|
|
||||||
tags = ["showcase"]
|
|
||||||
+++
|
|
||||||
|
|
||||||
# JavaScript?
|
|
||||||
|
|
||||||
This theme has almost no JavaScript. It includes ~900 bytes of `.js` with the logic for the light/dark mode switch, which can be disabled by setting `theme_switcher = false` in the `config.toml` file.
|
|
||||||
|
|
||||||
KaTex support, which requires loading a 274 KB JavaScript file, can be activated for specific posts.
|
|
||||||
|
|
||||||
Other than that, it's a fast site with HTML and CSS. Just the way (most of) the web should be :-)
|
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
+++
|
||||||
|
title = "Sense JavaScript obligatori"
|
||||||
|
date = 2023-01-06
|
||||||
|
updated = 2023-07-08
|
||||||
|
description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
|
||||||
|
|
||||||
|
[taxonomies]
|
||||||
|
tags = ["funcionalitat"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
## JavaScript?
|
||||||
|
|
||||||
|
Aquest tema funciona perfectament sense JavaScript. Opcionalment, pot carregar una quantitat mínima per afegir algunes funcionalitats que no són possibles utilitzant només HTML i CSS:
|
||||||
|
|
||||||
|
- **Canvi de mode clar/fosc**. S'activa establint `theme_switcher = true`. (~900 bytes)
|
||||||
|
- **Còpia de blocs de codi amb un sol clic**. S'activa establint `copy_button = true`. (~700 bytes)
|
||||||
|
|
||||||
|
Aquestes dues configuracions cal aplicar-les a la secció `[extra]` del fitxer `config.toml`.
|
||||||
|
|
||||||
|
La [funcionalitat de KaTeX](@/blog/markdown.ca.md#katex), que requereix carregar un fitxer JavaScript de 274 KB, es pot activar per a publicacions específiques. Això es pot fer establint `katex = true` a la secció `[extra]` de l'encapçalament de la publicació.
|
||||||
|
|
||||||
|
A part d'això, és un tema ràpid amb HTML i CSS. Tal i com hauria de ser (la major part de) la web :-)
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
+++
|
||||||
|
title = "Sin JavaScript obligatorio"
|
||||||
|
date = 2023-01-06
|
||||||
|
updated = 2023-07-08
|
||||||
|
description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
|
||||||
|
|
||||||
|
[taxonomies]
|
||||||
|
tags = ["funcionalidad"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
## ¿JavaScript?
|
||||||
|
|
||||||
|
Este tema funciona perfectamente sin JavaScript. Opcionalmente, puede cargar una cantidad mínima para añadir algunas funciones que son imposibles de lograr con HTML y CSS:
|
||||||
|
|
||||||
|
- **El cambio de modo claro/oscuro**. Habilitado estableciendo `theme_switcher = true`. (~900 bytes)
|
||||||
|
- **Copia de bloques de código con un clic**. Se activa configurando `copy_button = true`. (~700 bytes)
|
||||||
|
|
||||||
|
Estas dos configuraciones se deben aplicar en la sección `[extra]` de tu archivo `config.toml`.
|
||||||
|
|
||||||
|
La [funcionalidad de KaTeX](@/blog/markdown.es.md#katex), que requiere cargar un archivo JavaScript de 274 KB, se puede activar para publicaciones específicas. Esto se puede hacer configurando `katex = true` en la sección `[extra]` del encabezado de la publicación.
|
||||||
|
|
||||||
|
Aparte de esto, es un tema rápido con HTML y CSS. Como debería ser (en su mayoría) la web :-)
|
||||||
@ -0,0 +1,22 @@
|
|||||||
|
+++
|
||||||
|
title = "No mandatory JavaScript"
|
||||||
|
date = 2023-01-06
|
||||||
|
updated = 2023-07-08
|
||||||
|
description = "JavaScript is only used when HTML and CSS aren't enough."
|
||||||
|
|
||||||
|
[taxonomies]
|
||||||
|
tags = ["showcase"]
|
||||||
|
+++
|
||||||
|
|
||||||
|
## JavaScript?
|
||||||
|
|
||||||
|
This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS:
|
||||||
|
|
||||||
|
- **Light/dark mode switch**. Enabled by setting `theme_switcher = true`. (~900 bytes)
|
||||||
|
- **One-click copy of code blocks**. Enabled by setting `copy_button = true`. (~700 bytes)
|
||||||
|
|
||||||
|
These two settings can be applied in the `[extra]` section of your `config.toml` file.
|
||||||
|
|
||||||
|
[KaTeX support](@/blog/markdown.md#katex), which requires loading a 274 KB JavaScript file, can be activated for specific posts. This can be done by setting `katex = true` in the post's `[extra]` section of the post's front matter.
|
||||||
|
|
||||||
|
Other than that, it's a fast site with HTML and CSS. Just the way (most of) the web should be :-)
|
||||||
@ -1,15 +1,28 @@
|
|||||||
table {
|
table {
|
||||||
border-spacing: 0;
|
border-spacing: 0;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
|
justify-self: center;
|
||||||
|
font: inherit;
|
||||||
|
overflow: hidden;
|
||||||
|
border-style: hidden !important;
|
||||||
|
margin: 2rem auto;
|
||||||
|
min-width: 13rem;
|
||||||
|
border-radius: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
table th {
|
table th,
|
||||||
|
table td {
|
||||||
padding: 6px 13px;
|
padding: 6px 13px;
|
||||||
border: 1px solid #dfe2e5;
|
border: 1px solid #dfe2e5;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
}
|
}
|
||||||
|
|
||||||
table td {
|
table thead tr {
|
||||||
padding: 6px 13px;
|
background-color: var(--primary-color);
|
||||||
border: 1px solid #dfe2e5;
|
color: var(--hover-color);
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
table tbody tr:nth-child(even) {
|
||||||
|
background-color: var(--bg-0);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,37 @@
|
|||||||
|
const changeIcon = (copyDiv, className) => {
|
||||||
|
copyDiv.classList.add(className);
|
||||||
|
setTimeout(() => copyDiv.classList.remove(className), 2500);
|
||||||
|
};
|
||||||
|
|
||||||
|
const addCopyEventListenerToDiv = (copyDiv, block) => {
|
||||||
|
copyDiv.addEventListener("click", () => copyCodeAndChangeIcon(copyDiv, block));
|
||||||
|
};
|
||||||
|
|
||||||
|
const copyCodeAndChangeIcon = async (copyDiv, block) => {
|
||||||
|
const code = block.querySelector('table') ? getTableCode(block) : getNonTableCode(block);
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(code);
|
||||||
|
changeIcon(copyDiv, "checked");
|
||||||
|
} catch (error) {
|
||||||
|
changeIcon(copyDiv, "error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getNonTableCode = (block) => {
|
||||||
|
return [...block.querySelectorAll('code')]
|
||||||
|
.map(code => code.textContent)
|
||||||
|
.join('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTableCode = (block) => {
|
||||||
|
return [...block.querySelectorAll('tr')]
|
||||||
|
.map(row => row.querySelector('td:last-child')?.innerText ?? '')
|
||||||
|
.join('');
|
||||||
|
};
|
||||||
|
|
||||||
|
document.querySelectorAll("pre").forEach((block) => {
|
||||||
|
const copyDiv = document.createElement("div");
|
||||||
|
copyDiv.className = "copy-code";
|
||||||
|
block.prepend(copyDiv);
|
||||||
|
addCopyEventListenerToDiv(copyDiv, block);
|
||||||
|
});
|
||||||
@ -0,0 +1 @@
|
|||||||
|
const changeIcon=(e,t)=>{e.classList.add(t),setTimeout(()=>e.classList.remove(t),2500)},addCopyEventListenerToDiv=(e,t)=>{e.addEventListener("click",()=>copyCodeAndChangeIcon(e,t))},copyCodeAndChangeIcon=async(e,t)=>{let o=t.querySelector("table")?getTableCode(t):getNonTableCode(t);try{await navigator.clipboard.writeText(o),changeIcon(e,"checked")}catch(c){changeIcon(e,"error")}},getNonTableCode=e=>[...e.querySelectorAll("code")].map(e=>e.textContent).join(""),getTableCode=e=>[...e.querySelectorAll("tr")].map(e=>e.querySelector("td:last-child")?.innerText??"").join("");document.querySelectorAll("pre").forEach(e=>{let t=document.createElement("div");t.className="copy-code",e.prepend(t),addCopyEventListenerToDiv(t,e)});
|
||||||
Loading…
Reference in New Issue