✨feat(shortcode): add spoiler shortcode (#113)

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
+### Referències amb sagnat invertit
-
-### 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!

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
+### Referencias con sangría francesa
-
-### 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

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
+### References with hanging indent
-
-### 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 `<br>`.
+
+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

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

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.
+        }
+    }
+}

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) -%}
+
+<label class="spoiler-container{% if fixed_blur %} fixed-blur{% endif %}">
+    <input type="checkbox" id="spoiler-{{random_id}}" class="spoiler-toggle" role="button" aria-pressed="false" />
+    <span class="spoiler-content" title="reveal spoiler" tabindex="0">
+        <span class="spoiler-hidden">{{ text | markdown | trim_start_matches(pat="<p>") | trim_start_matches(pat="</p>") | safe }}</span>
+    </span>
+</label>