✨ feat: add multilingual quote shortcode

config.toml

@@ -65,6 +65,8 @@ of = "de"
 draft = "BORRADOR"
 table_of_contents = "Tabla de contenido"
 last_updated_on = "Última actualización el"
+show_original_quote = "Mostrar cita original"
+show_translation = "Mostrar traducción"
 
 [languages.ca.translations]
 language_name = "Català"
@@ -93,6 +95,8 @@ of = "de"
 draft = "ESBORRANY"
 table_of_contents = "Taula de contingut"
 last_updated_on = "Última actualizació el"
+show_original_quote = "Mostra la cita original"
+show_translation = "Mostra la traducció"
 
 [extra]
 

content/blog/shortcodes.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2023-04-16
+updated = 2023-06-05
 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]
@@ -45,6 +45,20 @@ Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc.
 {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") */}}
 ```
 
+## Cites
+
+### Cites multillenguatge
+
+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") }}
+
+#### Ús
+
+```
+{{/* 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

content/blog/shortcodes.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2023-05-21
+updated = 2023-06-05
 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]
@@ -36,7 +36,7 @@ Ideal para gráficos, dibujos lineales, diagramas... Invierte los colores de la
 
 ### Imagen atenuable
 
-Las imágenes con demasiado brillo o contraste pueden ser impactantes en un fondo oscuro. Aquí tienes un ejemplo de una fotografía que se atenúa cuando el tema oscuro está activo.
+Las imágenes con demasiado brillo o contraste pueden ser demasiado discordantes en un fondo oscuro. Aquí tienes un ejemplo de una fotografía que se atenúa cuando el tema oscuro está activo.
 
 {{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") }}
 
@@ -46,6 +46,20 @@ Las imágenes con demasiado brillo o contraste pueden ser impactantes en un fond
 {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") */}}
 ```
 
+## Citas
+
+### Citas multilenguaje
+
+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") }}
+
+#### Uso
+
+```
+{{/* 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

content/blog/shortcodes.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2023-05-21
+updated = 2023-06-05
 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]
@@ -45,6 +45,20 @@ Images with too much brightness or contrast can be jarring against a dark backgr
 {{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}}
 ```
 
+## Quotes
+
+### Multilingual quotes
+
+This shortcode allows you to display both the translated and original text for a quote:
+
+{{ 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") }}
+
+#### Usage
+
+```
+{{/* 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

sass/main.scss

@@ -27,6 +27,7 @@
 @import 'parts/_code.scss';
 @import 'parts/_header.scss';
 @import 'parts/_image.scss';
+@import 'parts/_multilingual_quote.scss';
 @import 'parts/misc.scss';
 @import 'parts/table.scss';
 @import 'parts/home-banner.scss';
@@ -56,6 +57,7 @@
     --bg-2: #fefefe;
     --hover-color: white;
     --primary-color: #087E96;
+    --primary-color-dark: #10668b;
     --divider-color: #d7d7d7;
     --text-color: #222226;
     --text-color-high-contrast: #313333;
@@ -73,6 +75,7 @@
     --bg-2: #171717;
     --hover-color: black;
     --primary-color: #91e0ee;
+    --primary-color-dark: #69bace;
     --divider-color: #4a4a4a;
     --text-color: #D4D4D4;
     --text-color-high-contrast: #eceeef;

sass/parts/_multilingual_quote.scss

@@ -0,0 +1,35 @@
+.quote-container {
+    border: none;
+}
+
+.quote-toggle {
+    display: none;
+}
+
+.quote-label {
+    font-family: var(--sans-serif-font);
+    cursor: pointer;
+    color: var(--meta-color);
+    text-align: center;
+    text-decoration: none;
+    font-size: 0.75rem;
+    border-radius: 5px;
+    display: none;
+}
+
+.quote-toggle:not(:checked) ~ .quote .translated .quote-label-original,
+.quote-toggle:checked ~ .quote .original .quote-label-translate {
+    display: inline;
+}
+
+.original {
+    display: none;
+}
+
+.quote-toggle:checked ~ .quote .original {
+    display: block;
+}
+
+.quote-toggle:checked ~ .quote .translated {
+    display: none;
+}

templates/shortcodes/multilingual_quote.html

@@ -0,0 +1,20 @@
+<div class="quote-container">
+    <input type="checkbox" id="toggle" class="quote-toggle">
+    <div class="quote">
+        <div class="translated">
+            <blockquote>
+                <p>"{{ translated }}"</p>
+                <p> — {{ author }} <label for="toggle" class="quote-label quote-label-original">
+                    ({%- if lang != config.default_language %}{{ trans(key="show_original_quote" | safe, lang=lang) }}{% else %}Show original quote{% endif %})</label></p>
+            </blockquote>
+        </div>
+        <div class="original">
+            <blockquote>
+                <p>"{{ original }}"</p>
+                <p> — {{ author }} <label for="toggle" class="quote-label quote-label-translate">
+                    ({%- if lang != config.default_language %}{{ trans(key="show_translation" | safe, lang=lang) }}{% else %}Show translation{% endif %})
+                </label></p>
+            </blockquote>
+        </div>
+    </div>
+</div>