Add files to repos

themes/tabi/content/blog/shortcodes/index.ca.md

@@ -0,0 +1,473 @@
++++
+title = "Shortcodes personalitzats"
+date = 2023-02-19
+updated = 2025-02-15
+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]
+tags = ["funcionalitat", "shortcodes"]
+
+[extra]
+toc = true
+toc_levels = 2
+quick_navigation_buttons = true
+code_block_name_links = true
+mermaid = true
+social_media_card = "social_cards/ca_blog_shortcodes.jpg"
++++
+
+## Shortcodes de diagrames
+
+### Diagrames de Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid) és una eina de diagramació i gràfics que utilitza text i codi per generar diagrames. Admet diagrames de flux, diagrames de seqüència, gràfics de Gantt i més.
+
+Per incloure un diagrama Mermaid a la teva publicació, cal fer dues coses:
+
+1. Estableix `mermaid = true` a la secció `[extra]` del front matter de la teva pàgina, secció o `config.toml`. Això carregarà el JavaScript necessari per renderitzar els diagrames.
+
+2. Utilitza el shortcode `mermaid()` per definir el teu diagrama. Per exemple:
+
+```txt
+{%/* mermaid() */%}
+classDiagram
+    class DistorsionsCognitives {
+        +PensamentTotORes()
+        +Sobregeneralitzacio()
+        +FiltreMental()
+        +TreureConclusionsPrecipitades()
+    }
+    class PensamentTotORes {
+        +VeureEnExtrems()
+    }
+    class Sobregeneralitzacio {
+        +GeneralitzarDUnic()
+    }
+    class FiltreMental {
+        +EnfocarseEnNegatiu()
+    }
+    class TreureConclusionsPrecipitades {
+        +FerSuposicions()
+    }
+    DistorsionsCognitives *-- PensamentTotORes
+    DistorsionsCognitives *-- Sobregeneralitzacio
+    DistorsionsCognitives *-- FiltreMental
+    DistorsionsCognitives *-- TreureConclusionsPrecipitades
+{%/* end */%}
+```
+
+El diagrama es renderitzarà així:
+
+{% mermaid() %}
+classDiagram
+    class DistorsionsCognitives {
+        +PensamentTotORes()
+        +Sobregeneralitzacio()
+        +FiltreMental()
+        +TreureConclusionsPrecipitades()
+    }
+    class PensamentTotORes {
+        +VeureEnExtrems()
+    }
+    class Sobregeneralitzacio {
+        +GeneralitzarDUnic()
+    }
+    class FiltreMental {
+        +EnfocarseEnNegatiu()
+    }
+    class TreureConclusionsPrecipitades {
+        +FerSuposicions()
+    }
+    DistorsionsCognitives *-- PensamentTotORes
+    DistorsionsCognitives *-- Sobregeneralitzacio
+    DistorsionsCognitives *-- FiltreMental
+    DistorsionsCognitives *-- TreureConclusionsPrecipitades
+{% end %}
+
+El shortcode de Mermaid admet dos paràmetres:
+
+- `invertible`: Si s'estableix a `true` (per defecte), el diagrama invertirà els seus colors en mode fosc, igual que les [imatges invertibles](#imatge-invertible).
+- `full_width`: Permet que el diagrama ocupi l'amplada de la capçalera. Mira [imatge d'amplada completa](#imatge-d-amplada-completa).
+
+{{ admonition(type="tip", title="CONSELL", text="Empra l'[editor de Mermaid](https://mermaid.live/) per crear i previsualitzar els teus diagrames.") }}
+
+#### Ús
+
+```
+{%/* mermaid(invertible=true, full_width=false) */%}
+
+El teu codi Mermaid va aquí.
+
+`invertible` or `full_width` poden ometre's per emprar els valors per defecte.
+
+{%/* end */%}
+```
+
+## Shortcodes d'imatge
+
+Tots els shortcodes d'imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre `src`.
+
+Tots els shortcodes d'imatge tenen els següents paràmetres opcionals:
+
+- `raw_path`. Per defecte és `false`. Si es configura a `true`, el paràmetre `src` s'utilitzarà tal qual. Útil per a actius ubicats a la mateixa carpeta que tenen un slug personalitzat (vegeu [Zola issue #2598](https://github.com/getzola/zola/issues/2598)).
+- `inline`. Valor predeterminat: `false`. Si s'estableix a `true`, la imatge es mostrarà en línia amb el text.
+- `full_width`. Valor predeterminat: `false` (vegeu [a sota](#imatge-d-amplada-completa)).
+- `lazy_loading`. Valor predeterminat: `true`.
+
+### Imatges per a temes duals
+
+Útil si vols utilitzar una imatge diferent pels temes clar i fosc:
+
+{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }}
+
+#### Ús
+```
+{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") */}}
+```
+
+### Imatge invertible
+
+Útil per a gràfics, dibuixos de línies, diagrames… Inverteix els colors de la imatge. La imatge original s'utilitzarà per al tema clar.
+
+{{ invertible_image(src="img/graph.webp", alt="Gràfic invertible") }}
+
+#### Ús
+
+```
+{{/* invertible_image(src="img/graph.webp", alt="Gràfic invertible") */}}
+```
+
+### Imatge regulable
+
+Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc. Aquí tens un exemple d'una fotografia que s'atenua quan s'activa el tema fosc.
+
+{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }}
+
+#### Ús
+
+```
+{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") */}}
+```
+
+### Canvi d'imatge en passar el cursor
+
+La imatge mostrada canvia quan l'usuari passa el cursor per sobre. Útil per a comparacions d'abans i després, per exemple.
+
+{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }}
+
+#### Ús
+
+```
+{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Foto editada", hovered_alt="Foto original") */}}
+```
+
+### Canvi d'imatge via clic
+
+Mostra una imatge i canvia a una diferent en fer clic. Ideal per destacar diferències o cridar l'atenció sobre detalls.
+
+{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }}
+
+#### Ús
+
+```
+{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") */}}
+```
+
+### Imatge d'amplada completa
+
+La imatge s'expandirà per coincidir amb l'amplada de la capçalera, que normalment és més ampla que el text de l'article (excepte en mòbil/finestres petites).
+
+Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant `true` al paràmetre opcional `full_width`.
+
+{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }}
+
+#### Ús
+
+```
+{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}}
+```
+
+## Shortcodes de codi
+
+### Mostrar ruta o URL
+
+Pots mostrar una ruta o URL per a un bloc de codi utilitzant la sintaxi nativa de Zola:
+
+{{ aside(text="Requereix Zola 0.20.0 o superior.") }}
+
+````
+```rust,name=src/main.rs
+fn main() {
+    println!("Hola, món!");
+}
+```
+````
+
+Això renderitza:
+
+```rust,name=src/main.rs
+fn main() {
+    println!("Hola, món!");
+}
+```
+
+Si estableixes el `name` com una URL (és a dir, comença amb `http` o `https`), pots convertir-lo en un enllaç clicable. Això és particularment útil quan s'utilitza juntament amb el [shortcode de text remot](#text-remot).
+
+{{ admonition(type="warning", title="JavaScript necessari", text="La funció d'URLs clicables requereix JavaScript. Per habilitar-la, configura `code_block_name_links = true` a la secció `[extra]` de la teva pàgina, secció, o `config.toml`.") }}
+
+```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
+__pycache__/
+*coverage*
+.vscode/
+dist/
+```
+
+### Suport de shortcode heretat
+
+El shortcode `add_src_to_code_block` segueix funcionant per retrocompatibilitat però serà descontinuat en una versió futura. Si us plau, utilitza la sintaxi nativa de Zola:
+
+```
+# Forma antiga (descontinuada):
+{{/* add_src_to_code_block(src="ruta/al/fitxer.rs") */}}
+
+# Forma nova (recomanada):
+```rust,name=ruta/al/fitxer.rs
+```
+
+#### Ús
+
+````
+{{/* add_src_to_code_block(src="https://github.com/welpo/doteki/blob/main/.gitignore") */}}
+```.gitignore
+**pycache**/
+*coverage*
+.vscode/
+dist/
+```
+````
+
+## Shortcodes de text
+
+### Aside (nota al marge)
+
+Afegeix contingut complementari als marges en pantalles amples, o com a blocs distintius en mòbil.
+
+{{ aside(text="*Nota al marge* ve de *nota* (del llatí, 'marca' o 'senyal') i *marge* (del llatí *margo*, 'vora' o 'límit').") }}
+
+El shortcode accepta dos paràmetres:
+
+- `position`: Establir com a `"right"` per col·locar al marge dret (per defecte, esquerre)
+- El contingut es pot proporcionar mitjançant el paràmetre `text` o entre les etiquetes del shortcode
+
+#### Ús
+
+{{ admonition(type="warning", text="Separa la definició de la nota del shortcode amb dues línies en blanc per evitar errors de renderització.") }}
+
+Fent servir el paràmetre `text`:
+
+```
+{{/* aside(text="*Nota al marge* ve de *nota* (del llatí, 'marca' o 'senyal') i *marge* (del llatí *margo*, 'vora' o 'límit').") */}}
+```
+
+Fent servir el cos del contingut i indicant la posició a la dreta:
+
+```
+{%/* aside(position="right") */%}
+Una nota més llarga que
+pot ocupar diverses línies.
+
+S'admet *Markdown*.
+{%/* end */%}
+```
+
+### Text remot
+
+Afegeix text des d'una URL remota o un arxiu local.
+
+El shortcode accepta tres paràmetres:
+
+- `src`: L'URL d'origen o ruta del fitxer (obligatori)
+- `start`: Primera línia a mostrar (opcional, comença a 1)
+- `end`: Número de l'última línia (opcional, per defecte és 0, l'última línia)
+
+{{ admonition(type="info", text="`start` i `end` són inclusius. `start=3, end=3` mostrarà només la tercera línia.") }}
+
+**Important**:
+
+- **Arxius remots VS arxius locals**: Si `src` comença amb "http", es tractarà com un arxiu remot. D'altra banda, s'assumeix que és una ruta d'arxiu local.
+- **Accés a arxius**: Atès que utilitza la funció [`load_data`](https://www.getzola.org/documentation/templates/overview/#load-data) de Zola, els arxius locals han d'estar dins del directori de Zola —vegeu la [lògica de cerca d'arxius](https://www.getzola.org/documentation/templates/overview/#file-searching-logic). Desde [tabi 2.16.0](https://github.com/welpo/tabi/releases/tag/v2.16.0), el shortcode admet també rutes relatives.
+- **Formateig de blocs de codi**: Per mostrar el text com un bloc de codi, has d'afegir manualment les tanques de codi Markdown (cometes inverses) i, opcionalment, especificar el llenguatge de programació per al ressaltat sintàctic.
+
+#### Ús
+
+Afegeix un script de Python remot dins d'un bloc de codi amb ressaltat sintàctic:
+
+````
+```python
+{{/* remote_text(src="https://example.com/script.py") */}}
+```
+````
+
+Mostra el text d'un arxiu local:
+
+```
+{{/* remote_text(src="ruta/a/arxiu.txt") */}}
+```
+
+Mostreu només les línies 3 a 5 d'un arxiu local:
+
+```
+{{/* remote_text(src="ruta/a/arxiu.txt", start=3, end=5) */}}
+```
+
+### Advertències
+
+Destaca informació amb aquests shortcodes. Hi ha cinc tipus (`type`): `note`, `tip`, `info`, `warning`, i `danger`.
+
+{{ admonition(type="note", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }}
+
+{{ admonition(type="tip", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }}
+
+{{ admonition(type="info", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }}
+
+{{ admonition(type="warning", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }}
+
+{{ admonition(type="danger", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }}
+
+Pots canviar el `title` i la `icon` de l'advertència. Ambdós paràmetres accepten text i per defecte coincideixen amb el tipus d'advertència. `icon` pot ser qualsevol dels tipus d'advertència disponibles.
+
+{{ admonition(type="note", icon="tip", title="Títol i icona personalitzats", text="Contingut amb **sintaxi** *Markdown*. Consulta [aquesta `api`](#).") }}
+
+#### Ús
+
+Pots utilitzar les advertències de dues maneres:
+
+1. En línia amb paràmetres:
+
+```md
+{{/* admonition(type="danger", icon="tip", title="Un consell important", text="Mantingues-te hidratat") */}}
+```
+
+2. Amb contingut al cos:
+
+```md
+{%/* admonition(type="danger", icon="tip", title="Un consell important") */%}
+Mantingues-te hidratat
+
+Aquest mètode és especialment útil per a contingut llarg o múltiples paràgrafs.
+{%/* end */%}
+```
+
+Ambdós mètodes admeten els mateixos paràmetres (`type`, `icon`, i `title`).
+
+### 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 amb sagnat invertit
+
+Aquest shortcode formata una secció de referència amb un sagnat invertit de la següent manera:
+
+{% references() %}
+
+Alderson, E. (2015). Ciberseguretat i justícia social: Una crítica a la hegemonia corporativa en un món digital. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
+
+Funkhouser, M. (2012). Les normes socials d'indecència: Un anàlisi del comportament desviat a la societat contemporània. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
+
+Schrute, D. (2005). La revolució de l'agricultura de remolatxa: Un anàlisi de la innovació agrícola. *Scranton Agricultural Quarterly, 38*(3), 67-81.
+
+Steinbrenner, G. (1997). L'anàlisi cost-benefici de George Costanza: Un anàlisi del comportament de presa de riscos en el lloc de treball. *New York Journal of Business, 12*(4), 112-125.
+
+Winger, J. A. (2010). L'art del debat: Un examen de la retòrica en el model de les Nacions Unides del Greendale Community College. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
+
+{% end %}
+
+#### Ús
+
+```
+{%/* references() */%}
+
+Les teves referències van aquí.
+
+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
+
+Utilitza aquest codi curt si vols tenir una taula, paràgraf, bloc de codi… més ample. A l'escriptori, ocuparà l'amplada de la capçalera. A mòbils no tindrà efecte, excepte per les taules, que guanyaran scroll horitzontal.
+
+{% wide_container() %}
+
+| Títol             |  Any  | Director              | Director de fotografia | Gènere         | IMDb  | Durada       |
+|-------------------|-------|----------------------|-------------------------|----------------|-------|--------------|
+| Beoning           | 2018  | Lee Chang-dong       | Hong Kyung-pyo          | Drama/Misteri  | 7.5   | 148 min      |
+| The Master        | 2012  | Paul Thomas Anderson | Mihai Mălaimare Jr.     | Drama/Història | 7.1   | 137 min      |
+| The Tree of Life  | 2011  | Terrence Malick      | Emmanuel Lubezki        | Drama          | 6.8   | 139 min      |
+
+{% end %}
+
+#### Ús
+
+```
+{%/* wide_container() */%}
+
+Posa el teu bloc de codi, paràgraf, taula… aquí.
+
+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 */%}
+````

themes/tabi/content/blog/shortcodes/index.es.md

@@ -0,0 +1,461 @@
++++
+title = "Shortcodes personalizados"
+date = 2023-02-19
+updated = 2025-02-15
+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]
+tags = ["funcionalidad", "shortcodes"]
+
+[extra]
+toc = true
+toc_levels = 2
+quick_navigation_buttons = true
+code_block_name_links = true
+mermaid = true
+social_media_card = "social_cards/es_blog_shortcodes.jpg"
++++
+
+## Shortcodes de diagramas
+
+### Diagramas de Mermaid
+
+[Mermaid](https://github.com/mermaid-js/mermaid) es una herramienta de diagramación y gráficos que usa texto y código para generar diagramas. Admite diagramas de flujo, diagramas de secuencia, gráficos de Gantt y más.
+
+Para incluir un diagrama Mermaid en tu publicación, sigue estos dos pasos:
+
+1. Establece `mermaid = true` en la sección `[extra]` del front matter de tu página, sección o `config.toml`. Esto cargará el JavaScript necesario para renderizar los diagramas.
+
+2. Usa el shortcode `mermaid()` para definir tu diagrama. Por ejemplo:
+
+```txt
+{%/* mermaid() */%}
+classDiagram
+    class DistorsionesCognitivas {
+        +PensamientoTodoONada()
+        +Sobregeneralizacion()
+        +FiltroMental()
+        +SacarConclusionesPrecipitadas()
+    }
+    class PensamientoTodoONada {
+        +VerEnExtremos()
+    }
+    class Sobregeneralizacion {
+        +GeneralizarDeUnicoEjemplo()
+    }
+    class FiltroMental {
+        +EnfocarseEnNegativo()
+    }
+    class SacarConclusionesPrecipitadas {
+        +HacerSuposiciones()
+    }
+    DistorsionesCognitivas *-- PensamientoTodoONada
+    DistorsionesCognitivas *-- Sobregeneralizacion
+    DistorsionesCognitivas *-- FiltroMental
+    DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
+{%/* end */%}
+```
+
+El diagrama se renderizará así:
+
+{% mermaid() %}
+classDiagram
+    class DistorsionesCognitivas {
+        +PensamientoTodoONada()
+        +Sobregeneralizacion()
+        +FiltroMental()
+        +SacarConclusionesPrecipitadas()
+    }
+    class PensamientoTodoONada {
+        +VerEnExtremos()
+    }
+    class Sobregeneralizacion {
+        +GeneralizarDeUnicoEjemplo()
+    }
+    class FiltroMental {
+        +EnfocarseEnNegativo()
+    }
+    class SacarConclusionesPrecipitadas {
+        +HacerSuposiciones()
+    }
+    DistorsionesCognitivas *-- PensamientoTodoONada
+    DistorsionesCognitivas *-- Sobregeneralizacion
+    DistorsionesCognitivas *-- FiltroMental
+    DistorsionesCognitivas *-- SacarConclusionesPrecipitadas
+{% end %}
+
+El shortcode de Mermaid admite dos parámetros:
+
+- `invertible`: Si se establece en `true` (por defecto), el diagrama se invertirá en modo oscuro, igual que las [imágenes invertibles](#imagen-invertible).
+- `full_width`: Permite que el diagrama ocupe el ancho del encabezado. Mira [imagen a ancho completo](#imagen-a-ancho-completo).
+
+{{ admonition(type="tip", title="CONSEJO", text="Puedes usar el [editor de Mermaid](https://mermaid.live/) para crear y previsualizar tus diagramas.") }}
+
+#### Uso
+
+```
+{%/* mermaid(invertible=true, full_width=false) */%}
+
+Tu diagrama Mermaid va aquí. Puedes omitir los parámetros para usar los valores predeterminados.
+
+{%/* end */%}
+```
+
+## Shortcodes de imagen
+
+Todos los shortcodes de imagen admiten rutas absolutas, rutas relativas, y fuentes remotas en el parámetro `src`.
+
+Todos los shortcodes de imagen tienen los siguientes parámetros opcionales:
+
+- `raw_path`. Por defecto es `false`. Si se establece en `true`, el parámetro `src` se usará tal cual. Útil para activos ubicados en la misma carpeta que tienen un slug personalizado (ver [Zola issue #2598](https://github.com/getzola/zola/issues/2598)).
+- `inline`. Valor predeterminado: `false`. Si se establece `true`, la imagen se mostrará en línea con el texto.
+- `full_width`. Valor predeterminado: `false` (ver [más abajo](#imagen-a-ancho-completo)).
+- `lazy_loading`. Valor predeterminado: `true`.
+
+### Imágenes de doble tema
+
+Útil si deseas usar una imagen diferente para los temas claro y oscuro:
+
+{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }}
+
+#### Uso
+```
+{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") */}}
+```
+
+### Imagen invertible
+
+Ideal para gráficos, dibujos lineales, diagramas... Invierte los colores de la imagen. La imagen de origen se utilizará para el tema claro.
+
+{{ invertible_image(src="img/graph.webp", alt="Gráfico invertible") }}
+
+#### Uso
+
+```
+{{/* invertible_image(src="img/graph.webp", alt="Gráfico invertible") */}}
+```
+
+
+### Imagen atenuable
+
+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") }}
+
+#### Uso
+
+```
+{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") */}}
+```
+
+### Cambio de imagen al pasar el cursor
+
+La imagen mostrada cambia cuando el usuario pasa el cursor por encima. Útil para comparaciones de antes y después, por ejemplo.
+
+{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }}
+
+#### Uso
+
+```
+{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Imagen editada", hovered_alt="Toma original") */}}
+```
+
+### Cambio de imagen vía click
+
+Muestra una imagen y cambia a una diferente al hacer clic. Ideal para destacar diferencias o llamar la atención sobre detalles.
+
+{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") }}
+
+#### Uso
+
+```
+{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") */}}
+```
+
+### Imagen a ancho completo
+
+La imagen se expandirá para coincidir con el ancho del encabezado, que generalmente es más ancho que el texto del artículo (excepto en móvil/ventanas pequeñas).
+
+Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando el valor `true` al parámetro opcional `full_width`.
+
+{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }}
+
+#### Uso
+
+```
+{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}}
+```
+
+## Shortcodes de código
+
+### Mostrar ruta o URL
+
+Puedes mostrar una ruta o URL para un bloque de código usando la sintaxis nativa de Zola:
+
+{{ aside(text="Requiere Zola 0.20.0 o superior.") }}
+
+````
+```rust,name=src/main.rs
+fn main() {
+    println!("¡Hola, mundo!");
+}
+```
+````
+
+Esto renderiza:
+
+```rust,name=src/main.rs
+fn main() {
+    println!("¡Hola, mundo!");
+}
+```
+
+Si estableces el `name` como una URL (es decir, comienza con `http` o `https`), puedes convertirlo en un enlace clickable. Esto es particularmente útil cuando se usa junto con el [shortcode de texto remoto](#texto-remoto).
+
+{{ admonition(type="warning", title="JavaScript requerido", text="La función de URLs clickables requiere JavaScript. Para habilitarla, configura `code_block_name_links = true` en la sección `[extra]` de tu página, sección, o `config.toml`.") }}
+
+```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
+__pycache__/
+*coverage*
+.vscode/
+dist/
+```
+
+### Soporte de shortcode heredado
+
+El shortcode `add_src_to_code_block` sigue funcionando por retrocompatibilidad, pero será descontinuado en una versión futura. Por favor, usa la sintaxis nativa de Zola:
+
+```
+# Forma antigua (descontinuada):
+{{/* add_src_to_code_block(src="ruta/al/archivo.rs") */}}
+
+# Forma nueva (recomendada):
+```rust,name=ruta/al/archivo.rs
+```
+
+## Shortcodes de texto
+
+### Aside (nota al margen)
+
+Añade contenido complementario en los márgenes en pantallas anchas, o como bloques distintivos en móvil.
+
+{{ aside(text="*Nota al margen* viene de *nota* (del latín, 'marca' o 'señal') y *margen* (del latín *margo*, 'borde' o 'límite').") }}
+
+El shortcode acepta dos parámetros:
+
+- `position`: Establecer como `"right"` para colocar en el margen derecho (por defecto, izquierdo)
+- El contenido puede proporcionarse mediante el parámetro `text` o entre las etiquetas del shortcode
+
+#### Uso
+
+{{ admonition(type="warning", text="Separa la llamada al shortcode con saltos de línea para evitar errores de renderizado.") }}
+
+Usando el parámetro `text`:
+
+```
+{{/* aside(text="*Nota al margen* viene de *nota* (del latín, 'marca' o 'señal') y *margen* (del latín *margo*, 'borde' o 'límite').") */}}
+```
+
+Usando el cuerpo del contenido e indicando la posición:
+
+```
+{%/* aside(position="right") */%}
+Una nota más larga que
+puede ocupar varias líneas.
+
+Se admite *Markdown*.
+{%/* end */%}
+```
+
+### Texto remoto
+
+Añade texto desde una URL remota o un archivo local.
+
+El shortcode acepta tres parámetros:
+
+- `src`: La URL de origen o ruta del archivo (obligatorio)
+- `start`: Primera línea a mostrar (opcional, empieza en 1)
+- `end`: Número de la última línea (opcional, por defecto es 0, la última línea)
+
+{{ admonition(type="info", text="`start` y `end` son inclusivos. `start=3, end=3` mostrará solo la tercera línea.") }}
+
+**Importante**:
+
+- **Archivos remotos VS archivos locales**: Si `src` empieza con "http", se tratará como un archivo remoto. De lo contrario, se asume que es una ruta de archivo local.
+- **Acceso a archivos**: Dado que utiliza la función [`load_data`](https://www.getzola.org/documentation/templates/overview/#load-data) de Zola, los archivos locales deben estar dentro del directorio de Zola —ver la [lógica de búsqueda de archivos](https://www.getzola.org/documentation/templates/overview/#file-searching-logic). Desde [tabi 2.16.0](https://github.com/welpo/tabi/releases/tag/v2.16.0), el shortcode admite también rutas relativas.
+- **Formateo de bloques de código**: Para mostrar el texto como un bloque de código, debes añadir manualmente las cercas de código Markdown (comillas invertidas) y, opcionalmente, especificar el lenguaje de programación para el resaltado sintáctico.
+
+#### Uso
+
+Añade un script de Python remoto dentro de un bloque de código con resaltado sintáctico:
+
+````
+```python
+{{/* remote_text(src="https://example.com/script.py") */}}
+```
+````
+
+Visualización de texto de un archivo local:
+
+```
+{{/* remote_text(src="ruta/a/archivo.txt") */}}
+```
+
+Mostar sólo las líneas 3 a 5 de un archivo remoto:
+
+```
+{{/* remote_text(src="https://example.com/script.py", start=3, end=5) */}}
+```
+
+### Advertencias
+
+Destaca información con estos shortcodes. Hay cinco tipos (`type`): `note`, `tip`, `info`, `warning`, y `danger`.
+
+{{ admonition(type="note", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }}
+
+{{ admonition(type="tip", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }}
+
+{{ admonition(type="info", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }}
+
+{{ admonition(type="warning", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }}
+
+{{ admonition(type="danger", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }}
+
+Puedes cambiar el `title` y el `icon` de la advertencia. Ambos parámetros aceptan texto y por defecto coinciden con el tipo de advertencia. `icon` puede ser cualquiera de los tipos de advertencia disponibles.
+
+{{ admonition(type="note", icon="tip", title="Título e icono personalizados", text="Contenido con **sintaxis** *Markdown*. Consulta [esta `api`](#).") }}
+
+#### Uso
+
+Puedes usar las advertencias de dos formas:
+
+1. En línea con parámetros:
+
+```md
+{{/* admonition(type="danger", icon="tip", title="Un consejo importante", text="Mantente hidratado") */}}
+```
+
+2. Con contenido en el cuerpo:
+
+```md
+{%/* admonition(type="danger", icon="tip", title="Un consejo importante") */%}
+Mantente hidratado
+
+Este método es especialmente útil para contenido largo o múltiples párrafos.
+{%/* end */%}
+```
+
+Ambos métodos admiten los mismos parámetros (`type`, `icon`, y `title`).
+
+### 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 con sangría francesa
+
+Este shortcode formatea una sección de referencias con sangría francesa de la siguiente manera:
+
+{% references() %}
+
+Alderson, E. (2015). Ciberseguridad y justicia social: Una crítica a la hegemonía corporativa en un mundo digital. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
+
+Funkhouser, M. (2012). Las normas sociales de indecencia: Un análisis del comportamiento desviado en la sociedad contemporánea. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
+
+Schrute, D. (2005). La revolución de la agricultura de remolacha: Un análisis de la innovación agrícola. *Scranton Agricultural Quarterly, 38*(3), 67-81.
+
+Steinbrenner, G. (1997). El análisis costo-beneficio de George Costanza: Un examen del comportamiento de toma de riesgos en el lugar de trabajo. *New York Journal of Business, 12*(4), 112-125.
+
+Winger, J. A. (2010). El arte del debate: Un examen de la retórica en el modelo de las Naciones Unidas del Greendale Community College. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
+
+{% end %}
+
+#### Uso
+
+```
+{%/* references() */%}
+
+Tus referencias van aquí.
+
+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
+
+Utiliza este código corto si deseas tener una tabla, párrafo, bloque de código… más ancho. En escritorio, ocupará el ancho del encabezado. En móviles no tendrá efecto, excepto para las tablas, que ganarán scroll horizontal.
+
+{% wide_container() %}
+
+| Título            |  Año  | Director             | Director de Fotografía| Género        | IMDb  | Duración     |
+|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------|
+| Beoning           | 2018  | Lee Chang-dong       | Hong Kyung-pyo        | Drama/Misterio| 7.5   | 148 min      |
+| The Master        | 2012  | Paul Thomas Anderson | Mihai Mălaimare Jr.   | Drama/Historia| 7.1   | 137 min      |
+| The Tree of Life  | 2011  | Terrence Malick      | Emmanuel Lubezki      | Drama         | 6.8   | 139 min      |
+
+{% end %}
+
+#### Uso
+
+```
+{%/* wide_container() */%}
+
+Coloca tu bloque de código, párrafo, tabla… aquí.
+
+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 */%}
+````

themes/tabi/content/blog/shortcodes/index.md

@@ -0,0 +1,461 @@
++++
+title = "Custom shortcodes"
+date = 2023-02-19
+updated = 2025-02-15
+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]
+tags = ["showcase", "shortcodes"]
+
+[extra]
+toc = true
+toc_levels = 2
+quick_navigation_buttons = true
+code_block_name_links = true
+mermaid = true
+social_media_card = "social_cards/blog_shortcodes.jpg"
++++
+
+## Diagram shortcode
+
+### Mermaid diagrams
+
+[Mermaid](https://github.com/mermaid-js/mermaid) is a a diagramming and charting tool that uses text and code to generate diagrams. It supports flowcharts, sequence diagrams, Gantt charts, and more.
+
+To include a Mermaid diagram in your post, there are two steps:
+
+1. Set `mermaid = true` in the `[extra]` section of the front matter of your page, section or `config.toml`. This will load the JavaScript needed to render the diagrams.
+
+2. Use the `mermaid()` shortcode to define your diagram in your posts. For example:
+
+```txt
+{%/* mermaid() */%}
+classDiagram
+    class CognitiveDistortions {
+        +AllOrNothingThinking()
+        +Overgeneralization()
+        +MentalFilter()
+        +JumpingToConclusions()
+    }
+    class AllOrNothingThinking {
+        +SeeInExtremes()
+    }
+    class Overgeneralization {
+        +GeneralizeFromSingle()
+    }
+    class MentalFilter {
+        +FocusOnNegative()
+    }
+    class JumpingToConclusions {
+        +MakeAssumptions()
+    }
+    CognitiveDistortions *-- AllOrNothingThinking
+    CognitiveDistortions *-- Overgeneralization
+    CognitiveDistortions *-- MentalFilter
+    CognitiveDistortions *-- JumpingToConclusions
+{%/* end */%}
+```
+
+The diagram will be rendered as follows:
+
+{% mermaid() %}
+classDiagram
+    class CognitiveDistortions {
+        +AllOrNothingThinking()
+        +Overgeneralization()
+        +MentalFilter()
+        +JumpingToConclusions()
+    }
+    class AllOrNothingThinking {
+        +SeeInExtremes()
+    }
+    class Overgeneralization {
+        +GeneralizeFromSingle()
+    }
+    class MentalFilter {
+        +FocusOnNegative()
+    }
+    class JumpingToConclusions {
+        +MakeAssumptions()
+    }
+    CognitiveDistortions *-- AllOrNothingThinking
+    CognitiveDistortions *-- Overgeneralization
+    CognitiveDistortions *-- MentalFilter
+    CognitiveDistortions *-- JumpingToConclusions
+{% end %}
+
+The Mermaid shortcode supports two parameters:
+
+- `invertible`: If set to `true` (default), the diagram will be inverted in dark mode, just like [invertible images](#invertible-image).
+- `full_width`: Allows the diagram to take up the width of the header. See [full-width image](#full-width-image).
+
+{{ admonition(type="tip", text="You can use the [Mermaid Live Editor](https://mermaid.live/) to create and preview your diagrams.") }}
+
+#### Usage
+
+```
+{%/* mermaid(invertible=true, full_width=false) */%}
+
+Your diagram goes here.
+
+`invertible` or `full_width` can be omitted if default values are used.
+
+{%/* end */%}
+```
+
+## Image shortcodes
+
+All image shortcodes support absolute paths, relative paths, and remote sources in the `src` parameter.
+
+All image shortcodes have these optional parameters:
+
+- `raw_path`. Defaults to `false`. If set to `true`, the `src` parameter will be used as is. Useful for colocated assets with a custom slug (see [Zola issue #2598](https://github.com/getzola/zola/issues/2598)).
+- `inline`. Defaults to `false`. If set to `true`, the image will be displayed inline with the text.
+- `full_width`. Defaults to `false` (see [below](#full-width-image))
+- `lazy_loading`. Defaults to `true`.
+
+### Dual theme images
+
+Useful if you want to use a different image for the light and dark themes:
+
+{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }}
+
+#### Usage
+```
+{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") */}}
+```
+
+### Invertible image
+
+Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme.
+
+{{ invertible_image(src="img/graph.webp", alt="Invertible graph") }}
+
+#### Usage
+
+```
+{{/* invertible_image(src="img/graph.webp", alt="Invertible graph") */}}
+```
+
+### Dimmable image
+
+Images with too much brightness or contrast can be jarring against a dark background. Here's an example of a photograph that dims when the dark theme is active.
+
+{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }}
+
+#### Usage
+
+```
+{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}}
+```
+
+### Swap image on hover
+
+Povides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example.
+
+{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }}
+
+#### Usage
+
+```
+{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Edited picture", hovered_alt="Original shot") */}}
+```
+
+### Interactive image toggle
+
+Display an image and switch to a different one on click. Ideal for highlighting differences or drawing attention to details.
+
+{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }}
+
+#### Usage
+
+```
+{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") */}}
+```
+
+### Full-width image
+
+The image will expand to match the width of the header, which is usually wider than the article text (except on mobile/small windows).
+
+All other image shortcodes can be made into full-width by setting the optional parameter `full_width` to `true`.
+
+{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}
+
+#### Usage
+
+```
+{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}}
+```
+
+## Code shortcodes
+
+### Show source or path
+
+You can display a path or URL for a code block using Zola's native syntax:
+
+{{ aside(text="Requires Zola 0.20.0 or later.") }}
+
+````
+```rust,name=src/main.rs
+fn main() {
+    println!("Hello, world!");
+}
+```
+````
+
+This renders:
+
+```rust,name=src/main.rs
+fn main() {
+    println!("Hello, world!");
+}
+```
+
+If you set the `name` to a URL (i.e. it starts with `http` or `https`), you can turn it into a clickable link. This is particularly useful when used in conjunction with the [remote text shortcode](#remote-text).
+
+{{ admonition(type="warning", title="JavaScript required", text="The clickable URL feature requires JavaScript. To enable it, set `code_block_name_links = true` on the `[extra]` section of your page, section, or `config.toml`.") }}
+
+```.gitignore,name=https://github.com/welpo/doteki/blob/main/.gitignore
+__pycache__/
+*coverage*
+.vscode/
+dist/
+```
+
+### Legacy shortcode support
+
+The `add_src_to_code_block` shortcode is still supported for backward compatibility but will be deprecated in a future release. Please use Zola's native syntax shown above instead:
+
+```
+# Old way (deprecated):
+{{/* add_src_to_code_block(src="path/to/file.rs") */}}
+
+# New way (preferred):
+```rust,name=path/to/file.rs
+```
+
+## Text shortcodes
+
+### Aside (side/margin note)
+
+Add supplementary content in the margins on wide screens, or as distinct blocks on mobile.
+
+{{ aside(text="*Sidenote* comes from Latin *nota* ('mark') + Old English *síde* ('side').") }}
+
+The shortcode accepts two parameters:
+
+- `position`: Set to `"right"` to place in right margin (defaults to left)
+- Content can be provided via `text` parameter or between shortcode tags
+
+#### Usage
+
+{{ admonition(type="warning", text="Place the aside shortcode on its own line to prevent formatting issues.") }}
+
+Using the `text` parameter:
+
+```
+{{/* aside(text="*Sidenote* comes from Latin *nota* ('mark') + Old English *síde* ('side').") */}}
+```
+
+Using the content body and setting the position to right:
+
+```
+{%/* aside(position="right") */%}
+A longer note that
+can span multiple lines.
+
+*Markdown* is supported.
+{%/* end */%}
+```
+
+### Remote text
+
+Embed text from a remote URL or a local file. To display the path or URL on the code block, see the [show source or path shortcode](#show-source-or-path).
+
+The shortcode accepts three parameters:
+
+- `src`: The source URL or file path (required)
+- `start`: First line to display (optional, starts at 1)
+- `end`: The ending line number (optional, defaults to 0, meaning the last line)
+
+{{ admonition(type="info", text="`start` and `end` are inclusive. `start=3, end=3` will display only the third line.") }}
+
+**Important**:
+
+- **Remote VS local files**: If `src` starts with "http", it will be treated as a remote file. Otherwise, it assumes a local file path.
+- **Files access**: As it uses Zola's [`load_data`](https://www.getzola.org/documentation/templates/overview/#load-data), local files must be inside the Zola directory—see [File searching logic](https://www.getzola.org/documentation/templates/overview/#file-searching-logic). As of [tabi 2.16.0](https://github.com/welpo/tabi/releases/tag/v2.16.0), the shortcode supports both relative and absolute paths.
+- **Code block formatting**: To display the text as a code block, you must manually add the Markdown code fences (backticks) and, optionally, specify the programming language for syntax highlighting.
+
+#### Usage
+
+Embedding a remote Python script within a code block with syntax highlighting:
+
+````
+```python
+{{/* remote_text(src="https://example.com/script.py") */}}
+```
+````
+
+Displaying text from a local file:
+
+```
+{{/* remote_text(src="path/to/file.txt") */}}
+```
+
+Display lines 3 to 7 (both inclusive) of a local file:
+
+```
+{{/* remote_text(src="path/to/file.txt", start=3, end=7) */}}
+```
+
+### Admonitions
+
+Bring attention to information with these admonition shortcodes. They come in five `type`s: `note`, `tip`, `info`, `warning`, and `danger`.
+
+{{ admonition(type="note", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+
+{{ admonition(type="tip", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+
+{{ admonition(type="info", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+
+{{ admonition(type="warning", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+
+{{ admonition(type="danger", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+
+You can change the `title` and `icon` of the admonition. Both parameters take a string and default to the type of admonition. `icon` can be any of the available admonition types.
+
+{{ admonition(type="note", icon="tip", title="Custom title and icon", text="Some **content** with _Markdown_ `syntax`. Check [this `api`](#).") }}
+
+#### Usage
+
+You can use admonitions in two ways:
+
+1. Inline with parameters:
+
+```md
+{{/* admonition(type="danger", icon="tip", title="An important tip", text="Stay hydrated~") */}}
+```
+
+2. With a content body:
+
+```md
+{%/* admonition(type="danger", icon="tip", title="An important tip") */%}
+Stay hydrated~
+
+This method is particularly useful for longer content or multiple paragraphs.
+{%/* end */%}
+```
+
+Both methods support the same parameters (`type`, `icon`, and `title`), with the content either passed as the `text` parameter or as the body between tags.
+
+### Multilingual quotes
+
+This shortcode allows you to display both the translated and original text for a quote. The quotation marks will be added automatically:
+
+{{ 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 with hanging indent
+
+This shortcode formats a reference section with a hanging indent like so:
+
+{% references() %}
+
+Alderson, E. (2015). Cybersecurity and Social Justice: A Critique of Corporate Hegemony in a Digital World. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
+
+Funkhouser, M. (2012). The Social Norms of Indecency: An Analysis of Deviant Behavior in Contemporary Society. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
+
+Schrute, D. (2005). The Beet Farming Revolution: An Analysis of Agricultural Innovation. *Scranton Agricultural Quarterly, 38*(3), 67-81.
+
+Steinbrenner, G. (1997). The Cost-Benefit Analysis of George Costanza: An Examination of Risk-Taking Behavior in the Workplace. *New York Journal of Business, 12*(4), 112-125.
+
+Winger, J. A. (2010). The Art of Debate: An Examination of Rhetoric in Greendale Community College's Model United Nations. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
+
+{% end %}
+
+#### Usage
+
+```
+{%/* references() */%}
+
+Your references go here.
+
+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
+
+Use this shortcode if you want to have a wider table, paragraph, code block… On desktop, it will take up the width of the header. It will have no effect on mobile, except for tables, which will get a horizontal scroll.
+
+{% wide_container() %}
+
+| Title             |  Year | Director             | Cinematographer       | Genre         | IMDb  | Duration     |
+|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------|
+| Beoning           | 2018  | Lee Chang-dong       | Hong Kyung-pyo        | Drama/Mystery | 7.5   | 148 min      |
+| The Master        | 2012  | Paul Thomas Anderson | Mihai Mălaimare Jr.   | Drama/History | 7.1   | 137 min      |
+| The Tree of Life  | 2011  | Terrence Malick      | Emmanuel Lubezki      | Drama         | 6.8   | 139 min      |
+
+{% end %}
+
+#### Usage
+
+```
+{%/* wide_container() */%}
+
+Place your code block, paragraph, table… here.
+
+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 */%}
+````