✨ feat: add multilingual quote shortcode

2 years ago · ab29511d5e
parent 58d0dd6f2f
commit ab29511d5e
8 changed files with 109 additions and 5 deletions
--- a/config.toml
+++ b/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]

--- 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-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
--- 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-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
--- a/content/blog/shortcodes.md
+++ b/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
--- a/sass/main.scss
+++ b/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;
--- a/sass/parts/_multilingual_quote.scss
+++ b/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;
+}
--- a/static/custom_subset.css
+++ b/static/custom_subset.css
--- a/templates/shortcodes/multilingual_quote.html
+++ b/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>