diff --git a/content/blog/shortcodes.ca.md b/content/blog/shortcodes.ca.md index 6210c14..7a9daa9 100644 --- a/content/blog/shortcodes.ca.md +++ b/content/blog/shortcodes.ca.md @@ -1,7 +1,7 @@ +++ title = "Shortcodes personalitzats" date = 2023-02-19 -updated = 2023-08-11 +updated = 2023-08-24 description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran." [taxonomies] @@ -88,7 +88,7 @@ Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}} ``` -## Cites +## Shortcodes de text ### Cites multillenguatge @@ -102,9 +102,7 @@ Aquest shortcode permet mostrar una cita traduïda i en el llenguatge original: {{/* multilingual_quote(original="Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.", translated="La lògica, encara que inquebrantable, no resisteix a un home que vol viure.", author="Franz Kafka") */}} ``` -## Referències - -### Sagnat invertit +### Referències amb sagnat invertit Aquest shortcode formata una secció de referència amb un sagnat invertit de la següent manera: @@ -134,6 +132,20 @@ Cada una en una nova línia. Es renderitzarà el Markdown (enllaços, cursiva… {%/* end */%} ``` +### Spoiler + +Aquest shortcode amaga el text fins que l'usuari fa clic per revelar-lo. Per exemple: A l'antiga Roma, el *vomitorium* era {{ spoiler(text="l'entrada a través de la qual les multituds entraven i sortien d'un estadi, no un espai especial utilitzat per a vomitar durant els àpats. Sí, [de debó](https://ca.wikipedia.org/wiki/Vomitori).") }} + +Com veus, el Markdown es renderitza. + +Aquest shortcode té l'opció `fixed_blur` per difuminar el text "SPOILER", en lloc de difuminar el contingut real. Per exemple: és {{ spoiler(text="innecessari", fixed_blur=true)}} esperar 24 hores abans de denunciar la desaparició d'una persona. + +#### Ús + +``` +{{/* spoiler(text="text a amagar", fixed_blur=false) */}} +``` + ## Contenidors ### Contenidor ample @@ -161,6 +173,3 @@ El Markdown, per suposat, serà interpretat. {%/* end */%} ``` -""" - -¡Espero que esto sea lo que buscabas! diff --git a/content/blog/shortcodes.es.md b/content/blog/shortcodes.es.md index 5bce387..8ab4ab3 100644 --- a/content/blog/shortcodes.es.md +++ b/content/blog/shortcodes.es.md @@ -1,7 +1,7 @@ +++ title = "Shortcodes personalizados" date = 2023-02-19 -updated = 2023-08-11 +updated = 2023-08-24 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más." [taxonomies] @@ -89,7 +89,7 @@ Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}} ``` -## Citas +## Shortcodes de texto ### Citas multilenguaje @@ -103,9 +103,7 @@ Este shortcode permite mostrar una cita traducida y en su lenguaje original: {{/* multilingual_quote(original="Ce qui est terrible, ce n’est pas de souffrir ni de mourir, mais de mourir en vain.", translated="Lo terrible no es sufrir o morir, sino morir en vano.", author="Jean-Paul Sartre") */}} ``` -## Referencias - -### Sangría francesa +### Referencias con sangría francesa Este shortcode formatea una sección de referencias con sangría francesa de la siguiente manera: @@ -135,6 +133,21 @@ Cada una en una línea nueva. Se renderizará Markdown (enlaces, cursivas…). {%/* end */%} ``` +### Spoilers + +Este shortcode permite ocultar texto que se revelará al hacer clic. Por ejemplo: las galletas de la fortuna tiene su origen en {{ spoiler(text="Japón. Sí, [en serio](https://es.wikipedia.org/wiki/Galleta_de_la_suerte#Historia_y_origen).") }} + +Como ves, el Markdown se renderiza. + +Este shortcode tiene la opción `fixed_blur` para difuminar el texto "SPOILER", en lugar de difuminar el contenido real. Por ejemplo: es {{ spoiler(text="innecesario", fixed_blur=true)}} esperar 24 horas antes de denunciar la desaparición de una persona. + + +#### Uso + +``` +{{/* spoiler(text="texto que ocultar", fixed_blur=false) */}} +``` + ## Contenedores ### Contenedor ancho diff --git a/content/blog/shortcodes.md b/content/blog/shortcodes.md index 91cda3c..f26d6b0 100644 --- a/content/blog/shortcodes.md +++ b/content/blog/shortcodes.md @@ -1,7 +1,7 @@ +++ title = "Custom shortcodes" date = 2023-02-19 -updated = 2023-08-11 +updated = 2023-08-24 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." [taxonomies] @@ -88,7 +88,7 @@ All other image shortcodes can be made into full-width by setting the optional p {{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}} ``` -## Quotes +## Text shortcodes ### Multilingual quotes @@ -102,9 +102,7 @@ This shortcode allows you to display both the translated and original text for a {{/* multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") */}} ``` -## References - -### Hanging indent +### References with hanging indent This shortcode formats a reference section with a hanging indent like so: @@ -134,6 +132,20 @@ Each in a new line. Markdown (links, italics…) will be rendered. {%/* end */%} ``` +### Spoiler + +This shortcode allows you to blur text until the user clicks on it. Like this: Goldfish have a memory span of a few {{ spoiler(text="months. Yes, [really](https://en.wikipedia.org/wiki/Goldfish#Cognitive_abilities).") }} + +As you can see, Markdown is rendered. You can even add newlines with `
`. + +This shortcode has the optional flag `fixed_blur` to blur a fixed placeholder ("SPOILER"), instead of blurring the actual contents. Like this: it is {{ spoiler(text="not necessary", fixed_blur=true)}} to wait 24 hours before filing a missing person report. + +#### Usage + +``` +{{/* spoiler(text="text to hide", fixed_blur=false) */}} +``` + ## Containers ### Wide container diff --git a/sass/main.scss b/sass/main.scss index 48ea751..8e8f29c 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -6,13 +6,14 @@ @use 'parts/_header-anchor.scss'; @use 'parts/_header.scss'; @use 'parts/_home-banner.scss'; -@use 'parts/_image-toggler.scss'; @use 'parts/_image-hover.scss'; +@use 'parts/_image-toggler.scss'; @use 'parts/_image.scss'; @use 'parts/_misc.scss'; @use 'parts/_multilingual_quote.scss'; @use 'parts/_pagination.scss'; @use 'parts/_posts_list.scss'; +@use 'parts/_spoiler.scss'; @use 'parts/_table.scss'; @use 'parts/_tags.scss'; @use 'parts/_theme-switch.scss'; diff --git a/sass/parts/_spoiler.scss b/sass/parts/_spoiler.scss new file mode 100644 index 0000000..c914243 --- /dev/null +++ b/sass/parts/_spoiler.scss @@ -0,0 +1,53 @@ +.spoiler-toggle { + display: none; // Hide the checkbox. +} + +.spoiler-content { + cursor: help; // Indicate interactive element. + display: inline-block; // Allow content to only take up its own width. + + .spoiler-hidden { + filter: blur(6px); + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + + a { + pointer-events: none; // Make links unclickable. + } + } +} + +.spoiler-toggle:checked + .spoiler-content { + .spoiler-hidden { + filter: none; + user-select: auto; + + a { + pointer-events: auto; // Enable clicking on links when revealed. + } + } +} + +.spoiler-container.fixed-blur { + .spoiler-content:before { + content: 'SPOILER'; // Display the word "SPOILER". + filter: blur(6px); + display: inline-block; // Block display within the inline flow. + } + + .spoiler-content .spoiler-hidden { + display: none; // Completely hide the actual content. + } + + .spoiler-toggle:checked + .spoiler-content { + &:before { + content: none; // Hide the word "SPOILER". + } + + .spoiler-hidden { + display: inline; // Reveal the actual content. + } + } +} diff --git a/templates/shortcodes/spoiler.html b/templates/shortcodes/spoiler.html new file mode 100644 index 0000000..ff9e695 --- /dev/null +++ b/templates/shortcodes/spoiler.html @@ -0,0 +1,13 @@ +{# The `random_id` ensures that each instance of the shortcode has a "unique" id #} +{# allowing individual interactive elements (like toggles) to function correctly. #} +{# This avoids conflicts when multiple instances of the shortcode are used. #} +{# More context: https://github.com/welpo/tabi/issues/82 #} +{%- set random_id = get_random(end=100000) -%} +{%- set fixed_blur = fixed_blur | default(value=false) -%} + +