✨ feat: add force_text_direction shortcode (#414)

content/blog/shortcodes/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2024-09-22
+updated = 2024-10-18
 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]
@@ -362,3 +362,31 @@ El Markdown, per suposat, serà interpretat.
 
 {%/* end */%}
 ```
+
+### Forçar direcció del text
+
+Força la direcció del text d'un bloc de contingut. Substitueix tant la configuració global `force_codeblock_ltr` com la direcció general del document.
+
+Accepta el paràmetre `direction`: la direcció de text desitjada. Pot ser "ltr" (d'esquerra a dreta) o "rtl" (de dreta a esquerra). Per defecte és "ltr".
+
+{% force_text_direction(direction="rtl") %}
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+{% end %}
+
+#### Ús
+
+En una pàgina LTR podem forçar que un bloc de codi sigui RTL (com es mostra a dalt) de la següent manera:
+
+````
+{%/* force_text_direction(direction="rtl") */%}
+
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+
+{%/* end */%}
+````

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2024-09-22
+updated = 2024-10-18
 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]
@@ -362,3 +362,31 @@ El Markdown, por supuesto, será interpretado.
 
 {%/* end */%}
 ```
+
+### Forzar dirección del texto
+
+Fuerza la dirección del texto de un bloque de contenido. Anula tanto la configuración global `force_codeblock_ltr` como la dirección general del documento.
+
+Acepta el parámetro `direction`: la dirección de texto deseada. Puede ser "ltr" (de izquierda a derecha) o "rtl" (de derecha a izquierda). Por defecto es "ltr".
+
+{% force_text_direction(direction="rtl") %}
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+{% end %}
+
+#### Uso
+
+En una página LTR podemos forzar que un bloque de código sea RTL (como se muestra arriba) de la siguiente manera:
+
+````
+{%/* force_text_direction(direction="rtl") */%}
+
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+
+{%/* end */%}
+````

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2024-09-22
+updated = 2024-10-18
 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]
@@ -362,3 +362,31 @@ Markdown will of course be rendered.
 
 {%/* end */%}
 ```
+
+### Force text direction
+
+Force the text direction of a content block. Overrides both the global `force_codeblock_ltr` setting and the document's overall direction.
+
+Accepts the parameter `direction`: the desired text direction. This can be either "ltr" (left-to-right) or "rtl" (right-to-left). Defaults to "ltr".
+
+{% force_text_direction(direction="rtl") %}
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+{% end %}
+
+#### Usage
+
+In a LTR page we can force a code block to be RTL (as shown above) like so:
+
+````
+{%/* force_text_direction(direction="rtl") */%}
+
+```python
+def مرحبا_بالعالم():
+    print("مرحبا بالعالم!")
+```
+
+{%/* end */%}
+````

sass/parts/_misc.scss

@@ -237,3 +237,19 @@ details summary {
 .mermaid .node .label {
     max-width: none !important;
 }
+
+// For the `force_text_direction` shortcode.
+[data-force-text-direction="ltr"] {
+    direction: ltr;
+    unicode-bidi: bidi-override;
+}
+
+[data-force-text-direction="rtl"] {
+    direction: rtl;
+    unicode-bidi: bidi-override;
+}
+
+[data-force-text-direction="ltr"] *,
+[data-force-text-direction="rtl"] * {
+    direction: inherit;
+}

templates/shortcodes/force_text_direction.html

@@ -0,0 +1,5 @@
+{%- set direction = direction | default(value="ltr") -%}
+
+<div data-force-text-direction="{{ direction }}">
+    {{ body | markdown | safe }}
+</div>