✨ 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 {
|
||||
border-spacing: 0;
|
||||
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;
|
||||
border: 1px solid #dfe2e5;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #dfe2e5;
|
||||
table thead tr {
|
||||
background-color: var(--primary-color);
|
||||
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