⚡️ refactor: co-locate images (#200)

config.toml

@@ -147,7 +147,7 @@ favicon_emoji = "🌱"
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 # Learn how to create these images in batch and automatically:
 # https://osc.garden/blog/automating-social-media-cards-zola/
-social_media_card = "img/social_cards/index.jpg"
+social_media_card = "social_cards/index.jpg"
 
 menu = [
     { name = "blog", url = "blog", trailing_slash = true },

content/_index.ca.md

@@ -8,7 +8,7 @@ template = "section.html"
 header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor de tabi" }
 section_path = "blog/_index.ca.md"
 max_posts = 4
-social_media_card = "img/social_cards/ca.jpg"
+social_media_card = "social_cards/ca.jpg"
 +++
 
 tabi és un tema de [Zola](https://www.getzola.org) ràpid, lleuger i modern. Té com a objectiu ser una pàgina personal i llar d'entrades de blog. Compta amb una puntuació perfecta de Lighthouse, disseny responsive, tema fosc i clar, shortcodes personalitzats i molt més.

content/_index.es.md

@@ -8,7 +8,7 @@ template = "section.html"
 header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor de tabi" }
 section_path = "blog/_index.es.md"
 max_posts = 4
-social_media_card = "img/social_cards/es.jpg"
+social_media_card = "social_cards/es.jpg"
 +++
 
 tabi es un tema de [Zola](https://www.getzola.org) rápido, ligero y moderno. Su objetivo es ser una página personal y hogar para publicaciones de blogs. Cuenta con una puntuación perfecta en Lighthouse, diseño responsive, tema oscuro y claro, shortcodes personalizados y mucho más.

content/_index.md

@@ -8,7 +8,7 @@ template = "section.html"
 header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
 section_path = "blog/_index.md"
 max_posts = 4
-social_media_card = "img/social_cards/index.jpg"
+social_media_card = "social_cards/index.jpg"
 +++
 
 tabi is a fast, lightweight, and modern [Zola](https://www.getzola.org) theme. It aims to be a personal page and home to blog posts. It features a perfect Lighthouse score, responsive design, dark and light themes, custom shortcodes, and much more.

content/archive/_index.ca.md

@@ -3,5 +3,5 @@ title = "Arxiu"
 template = "archive.html"
 
 [extra]
-social_media_card = "img/social_cards/ca_archive.jpg"
+social_media_card = "archive/social_cards/ca_archive.jpg"
 +++

content/archive/_index.es.md

@@ -3,5 +3,5 @@ title = "Archivo"
 template = "archive.html"
 
 [extra]
-social_media_card = "img/social_cards/es_archive.jpg"
+social_media_card = "archive/social_cards/es_archive.jpg"
 +++

content/archive/_index.md

@@ -3,5 +3,5 @@ title = "Archive"
 template = "archive.html"
 
 [extra]
-social_media_card = "img/social_cards/archive.jpg"
+social_media_card = "archive/social_cards/archive.jpg"
 +++

content/blog/_index.ca.md

@@ -7,5 +7,5 @@ template = "section.html"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "img/social_cards/ca_blog.jpg"
+social_media_card = "blog/social_cards/ca_blog.jpg"
 +++

content/blog/_index.es.md

@@ -7,5 +7,5 @@ template = "section.html"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "img/social_cards/es_blog.jpg"
+social_media_card = "blog/social_cards/es_blog.jpg"
 +++

content/blog/_index.md

@@ -7,5 +7,5 @@ template = "section.html"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "img/social_cards/blog.jpg"
+social_media_card = "blog/social_cards/blog.jpg"
 +++

content/blog/comments/index.ca.md

@@ -11,7 +11,7 @@ tags = ["funcionalitat", "tutorial"]
 giscus = true
 quick_navigation_buttons = true
 toc = true
-social_media_card = "img/social_cards/ca_blog_comments.jpg"
+social_media_card = "social_cards/ca_blog_comments.jpg"
 +++
 
 tabi actualment suporta quatre sistemes de comentaris: [giscus](https://giscus.app/ca) i [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/) i [Isso](https://isso-comments.de/).

content/blog/comments/index.es.md

@@ -11,7 +11,7 @@ tags = ["funcionalidad", "tutorial"]
 giscus = true
 quick_navigation_buttons = true
 toc = true
-social_media_card = "img/social_cards/es_blog_comments.jpg"
+social_media_card = "social_cards/es_blog_comments.jpg"
 +++
 
 tabi actualmente soporta cuatro sistemas de comentarios: [giscus](https://giscus.app/es) y [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/) e [Isso](https://isso-comments.de/).

content/blog/comments/index.md

@@ -11,7 +11,7 @@ tags = ["showcase", "tutorial"]
 giscus = true
 quick_navigation_buttons = true
 toc = true
-social_media_card = "img/social_cards/blog_comments.jpg"
+social_media_card = "social_cards/blog_comments.jpg"
 +++
 
 tabi currently supports four comment systems: [giscus](https://giscus.app/), [utterances](https://utteranc.es/), [Hyvor Talk](https://talk.hyvor.com/), and [Isso](https://isso-comments.de/).

content/blog/custom-font-subset/index.ca.md

@@ -8,7 +8,7 @@ description = "Aprèn com crear un subconjunt personalitzat que només inclogui
 tags = ["funcionalitat", "tutorial"]
 
 [extra]
-social_media_card = "img/social_cards/ca_blog_custom_font_subset.jpg"
+social_media_card = "social_cards/ca_blog_custom_font_subset.jpg"
 +++
 
 ## El problema

content/blog/custom-font-subset/index.es.md

@@ -8,7 +8,7 @@ description = "Aprende cómo crear un subconjunto personalizado que solo incluya
 tags = ["funcionalidad", "tutorial"]
 
 [extra]
-social_media_card = "img/social_cards/es_blog_custom_font_subset.jpg"
+social_media_card = "social_cards/es_blog_custom_font_subset.jpg"
 +++
 
 ## El problema

content/blog/custom-font-subset/index.md

@@ -8,7 +8,7 @@ description = "Learn how to create a custom subset that only includes the necess
 tags = ["showcase", "tutorial"]
 
 [extra]
-social_media_card = "img/social_cards/blog_custom_font_subset.jpg"
+social_media_card = "social_cards/blog_custom_font_subset.jpg"
 +++
 
 ## The problem

content/blog/customise-tabi/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Personalitza el color de tabi i el tema per defecte"
 date = 2023-08-09
-updated = 2023-08-10
+updated = 2023-10-07
 description = "Aprèn a personalitzar tabi fent servir skins i establint un tema per defecte, aconseguint un aspecte únic."
 
 [taxonomies]
@@ -10,7 +10,7 @@ tags = ["funcionalitat", "tutorial"]
 [extra]
 toc = true
 quick_navigation_buttons = true
-social_media_card = "img/social_cards/ca_blog_customise_tabi.jpg"
+social_media_card = "social_cards/ca_blog_customise_tabi.jpg"
 +++
 
 tabi pot ser personalitzat de dues maneres: establint el tema per defecte (fosc o clar) i triant el color principal per al tema ("skin").
@@ -52,13 +52,13 @@ Fes una ullada a les skins disponibles a continuació.
 
 La skin per defecte. Si la variable `skin` no està configurada (o és igual a `"teal"`), aquest és l'aspecte de tabi:
 
-{{ image_toggler(default_src="img/skins/teal_light.webp", toggled_src="img/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
 
 <hr>
 
 ### Lavanda
 
-{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="skin lavanda en mode clar", toggled_alt="skin lavanda en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="skin lavanda en mode clar", toggled_alt="skin lavanda en mode fosc", full_width=true) }}
 
 Per aplicar-la, utilitza `skin = "lavender"`.
 
@@ -66,7 +66,7 @@ Per aplicar-la, utilitza `skin = "lavender"`.
 
 ### Vermell
 
-{{ image_toggler(default_src="img/skins/red_light.webp", toggled_src="img/skins/red_dark.webp", default_alt="skin vermell en mode clar", toggled_alt="skin vermell en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="skin vermell en mode clar", toggled_alt="skin vermell en mode fosc", full_width=true) }}
 
 Canvia a aquesta skin establint `skin = "red"`.
 
@@ -76,7 +76,7 @@ Canvia a aquesta skin establint `skin = "red"`.
 
 Una skin dissenyada per 🅿️.
 
-{{ image_toggler(default_src="img/skins/mint_light.webp", toggled_src="img/skins/mint_dark.webp", default_alt="skin menta amb tema clar", toggled_alt="skin menta amb tema fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="skin menta amb tema clar", toggled_alt="skin menta amb tema fosc", full_width=true) }}
 
 Activa-la amb `skin = "mint"`.
 
@@ -86,7 +86,7 @@ Activa-la amb `skin = "mint"`.
 
 Inspirat per la temporada de floració dels cirerers al Japó.
 
-{{ image_toggler(default_src="img/skins/sakura_light.webp", toggled_src="img/skins/sakura_dark.webp", default_alt="skin sakura en mode clar", toggled_alt="skin sakura en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="skin sakura en mode clar", toggled_alt="skin sakura en mode fosc", full_width=true) }}
 
 Per habilitar aquesta skin, ajusta `skin = "sakura"`.
 
@@ -94,7 +94,7 @@ Per habilitar aquesta skin, ajusta `skin = "sakura"`.
 
 ### Blau
 
-{{ image_toggler(default_src="img/skins/blue_light.webp", toggled_src="img/skins/blue_dark.webp", default_alt="skin blau en mode clar", toggled_alt="skin blau en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="skin blau en mode clar", toggled_alt="skin blau en mode fosc", full_width=true) }}
 
 Per activar aquesta aparença, estableix `skin = "blue"`.
 
@@ -104,7 +104,7 @@ Per activar aquesta aparença, estableix `skin = "blue"`.
 
 *Indigo* pel blau (en el tema clar) i *lingot* pel daurat (en el tema fosc).
 
-{{ image_toggler(default_src="img/skins/indigo_ingot_light.webp", toggled_src="img/skins/indigo_ingot_dark.webp", default_alt="skin lingot indigo en mode clar", toggled_alt="skin lingot indigo en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="skin lingot indigo en mode clar", toggled_alt="skin lingot indigo en mode fosc", full_width=true) }}
 
 Per activar aquest tema, utilitza `skin = "indigo_ingot"`.
 
@@ -114,13 +114,13 @@ Per activar aquest tema, utilitza `skin = "indigo_ingot"`.
 
 Inspirat pels colors de la Unitat Evangelion-01 (en el tema fosc) i la Unitat-02 (en el tema clar).
 
-{{ image_toggler(default_src="img/skins/evangelion_light.webp", toggled_src="img/skins/evangelion_dark.webp", default_alt="skin evangelion en mode clar", toggled_alt="skin evangelion en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="skin evangelion en mode clar", toggled_alt="skin evangelion en mode fosc", full_width=true) }}
 
 <hr>
 
 ### Monocromàtic
 
-{{ image_toggler(default_src="img/skins/monochrome_light.webp", toggled_src="img/skins/monochrome_dark.webp", default_alt="skin monocromàtic en mode clar", toggled_alt="skin monocromàtic en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="skin monocromàtic en mode clar", toggled_alt="skin monocromàtic en mode fosc", full_width=true) }}
 
 Per aconseguir aquesta aparença, estableix `skin = "monochrome"`.
 
@@ -130,7 +130,7 @@ Per aconseguir aquesta aparença, estableix `skin = "monochrome"`.
 
 **AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_orange_light.webp", toggled_src="img/skins/lowcontrast_orange_dark.webp", default_alt="skin taronja de baix contrast en mode clar", toggled_alt="skin taronja de baix contrast en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="skin taronja de baix contrast en mode clar", toggled_alt="skin taronja de baix contrast en mode fosc", full_width=true) }}
 
 Per utilitzar-la, estableix `skin = "lowcontrast_orange"`.
 
@@ -140,7 +140,7 @@ Per utilitzar-la, estableix `skin = "lowcontrast_orange"`.
 
 **AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_peach_light.webp", toggled_src="img/skins/lowcontrast_peach_dark.webp", default_alt="skin préssec de baix contrast en mode clar", toggled_alt="skin préssec de baix contrast en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="skin préssec de baix contrast en mode clar", toggled_alt="skin préssec de baix contrast en mode fosc", full_width=true) }}
 
 Especifica `skin = "lowcontrast_peach"` per utilitzar aquesta skin.
 
@@ -150,7 +150,7 @@ Especifica `skin = "lowcontrast_peach"` per utilitzar aquesta skin.
 
 **AVÍS!** Aquesta skin en mode clar pot tenir [baix contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectant l'accessibilitat i la qualificació Lighthouse. (El mode fosc té bon contrast.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_pink_light.webp", toggled_src="img/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de baix contrast en tema clar", toggled_alt="skin rosa de baix contrast en tema fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de baix contrast en tema clar", toggled_alt="skin rosa de baix contrast en tema fosc", full_width=true) }}
 
 Per utilitzar aquests colors, assigna `skin = "lowcontrast_pink"`.
 

content/blog/customise-tabi/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Personaliza el color de tabi y el tema predeterminado"
 date = 2023-08-09
-updated = 2023-08-10
+updated = 2023-10-07
 description = "Aprende a personalizar tabi usando skins y estableciendo un tema predeterminado, haciendo que tu sitio sea único."
 
 [taxonomies]
@@ -10,7 +10,7 @@ tags = ["funcionalidad", "tutorial"]
 [extra]
 toc = true
 quick_navigation_buttons = true
-social_media_card = "img/social_cards/es_blog_customise_tabi.jpg"
+social_media_card = "social_cards/es_blog_customise_tabi.jpg"
 +++
 
 tabi puede ser personalizado de dos maneras: estableciendo el tema predeterminado (oscuro o claro) y eligiendo el color principal para el tema ("skin").
@@ -52,13 +52,13 @@ Echa un vistazo a las pieles disponibles a continuación.
 
 La skin predeterminada. Si la variable `skin` no está configurada (o es igual a `"teal"`), este es el aspecto de tabi:
 
-{{ image_toggler(default_src="img/skins/teal_light.webp", toggled_src="img/skins/teal_dark.webp", default_alt="skin aguamarina en tema claro", toggled_alt="skin aguamarina en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="skin aguamarina en tema claro", toggled_alt="skin aguamarina en tema oscuro", full_width=true) }}
 
 <hr>
 
 ### Lavanda
 
-{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="skin lavanda en tema claro", toggled_alt="skin lavanda en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="skin lavanda en tema claro", toggled_alt="skin lavanda en tema oscuro", full_width=true) }}
 
 Aplica esta skin con `skin = "lavender"`.
 
@@ -66,7 +66,7 @@ Aplica esta skin con `skin = "lavender"`.
 
 ### Rojo
 
-{{ image_toggler(default_src="img/skins/red_light.webp", toggled_src="img/skins/red_dark.webp", default_alt="skin rojo en tema claro", toggled_alt="skin rojo en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="skin rojo en tema claro", toggled_alt="skin rojo en tema oscuro", full_width=true) }}
 
 Cambia a esta skin con la configuración `skin = "red"`.
 
@@ -76,7 +76,7 @@ Cambia a esta skin con la configuración `skin = "red"`.
 
 Una skin hecha por 🅿️.
 
-{{ image_toggler(default_src="img/skins/mint_light.webp", toggled_src="img/skins/mint_dark.webp", default_alt="skin menta en tema claro", toggled_alt="skin menta en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="skin menta en tema claro", toggled_alt="skin menta en tema oscuro", full_width=true) }}
 
 Actívala con `skin = "mint"`.
 
@@ -86,7 +86,7 @@ Actívala con `skin = "mint"`.
 
 Inspirada en la temporada de florecimiento de los cerezos en Japón.
 
-{{ image_toggler(default_src="img/skins/sakura_light.webp", toggled_src="img/skins/sakura_dark.webp", default_alt="skin sakura en tema claro", toggled_alt="skin sakura en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="skin sakura en tema claro", toggled_alt="skin sakura en tema oscuro", full_width=true) }}
 
 Para activar esta skin, ajusta `skin = "sakura"`.
 
@@ -94,7 +94,7 @@ Para activar esta skin, ajusta `skin = "sakura"`.
 
 ### Azul
 
-{{ image_toggler(default_src="img/skins/blue_light.webp", toggled_src="img/skins/blue_dark.webp", default_alt="skin azul en tema claro", toggled_alt="skin azul en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="skin azul en tema claro", toggled_alt="skin azul en tema oscuro", full_width=true) }}
 
 Para lograr esta apariencia, establece `skin = "blue"`.
 
@@ -104,7 +104,7 @@ Para lograr esta apariencia, establece `skin = "blue"`.
 
 *Índigo* por el azul (en el tema claro) y *lingote* por el oro (en el tema oscuro).
 
-{{ image_toggler(default_src="img/skins/indigo_ingot_light.webp", toggled_src="img/skins/indigo_ingot_dark.webp", default_alt="skin lingote índigo en tema claro", toggled_alt="skin lingote índigo en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="skin lingote índigo en tema claro", toggled_alt="skin lingote índigo en tema oscuro", full_width=true) }}
 
 Para activar esta skin, usa `skin = "indigo_ingot"`.
 
@@ -114,7 +114,7 @@ Para activar esta skin, usa `skin = "indigo_ingot"`.
 
 Inspirada en los colores de la Unidad-01 de Evangelion (en el tema oscuro) y el EVA-02 (en el tema claro).
 
-{{ image_toggler(default_src="img/skins/evangelion_light.webp", toggled_src="img/skins/evangelion_dark.webp", default_alt="skin evangelion en tema claro", toggled_alt="skin evangelion en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="skin evangelion en tema claro", toggled_alt="skin evangelion en tema oscuro", full_width=true) }}
 
 Actívala con `skin = "evangelion"`.
 
@@ -122,7 +122,7 @@ Actívala con `skin = "evangelion"`.
 
 ### Monocromático
 
-{{ image_toggler(default_src="img/skins/monochrome_light.webp", toggled_src="img/skins/monochrome_dark.webp", default_alt="skin monocromático en tema claro", toggled_alt="skin monocromático en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="skin monocromático en tema claro", toggled_alt="skin monocromático en tema oscuro", full_width=true) }}
 
 Si te gusta este look, usa `skin = "monochrome"`.
 
@@ -132,7 +132,7 @@ Si te gusta este look, usa `skin = "monochrome"`.
 
 **¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_orange_light.webp", toggled_src="img/skins/lowcontrast_orange_dark.webp", default_alt="skin naranja de bajo contraste en tema claro", toggled_alt="skin naranja de bajo contraste en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="skin naranja de bajo contraste en tema claro", toggled_alt="skin naranja de bajo contraste en tema oscuro", full_width=true) }}
 
 Para activarla, configura `skin = "lowcontrast_orange"`.
 
@@ -142,7 +142,7 @@ Para activarla, configura `skin = "lowcontrast_orange"`.
 
 **¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_peach_light.webp", toggled_src="img/skins/lowcontrast_peach_dark.webp", default_alt="skin melocotón de bajo contraste en tema claro", toggled_alt="skin melocotón de bajo contraste en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="skin melocotón de bajo contraste en tema claro", toggled_alt="skin melocotón de bajo contraste en tema oscuro", full_width=true) }}
 
 Especifica `skin = "lowcontrast_peach"` para usar esta skin.
 
@@ -152,7 +152,7 @@ Especifica `skin = "lowcontrast_peach"` para usar esta skin.
 
 **¡ADVERTENCIA!** El tema claro de esta skin podría tener [poco contraste](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), afectando la accesibilidad y la calificación de Lighthouse. (El tema oscuro tiene buen contraste.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_pink_light.webp", toggled_src="img/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de bajo contraste en tema claro", toggled_alt="skin rosa de bajo contraste en tema oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="skin rosa de bajo contraste en tema claro", toggled_alt="skin rosa de bajo contraste en tema oscuro", full_width=true) }}
 
 Para usar estos colores, asigna `skin = "lowcontrast_pink"`.
 

content/blog/customise-tabi/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Customise tabi with skins and a default theme"
 date = 2023-08-09
-updated = 2023-08-10
+updated = 2023-10-07
 description = "Learn how to customise tabi using skins and setting a default theme, making your site uniquely yours."
 
 [taxonomies]
@@ -10,7 +10,7 @@ tags = ["showcase", "tutorial"]
 [extra]
 toc = true
 quick_navigation_buttons = true
-social_media_card = "img/social_cards/blog_customise_tabi.jpg"
+social_media_card = "social_cards/blog_customise_tabi.jpg"
 +++
 
 tabi can be customised in two ways: by setting the default theme (dark or light) and by choosing the main colour for the theme (skins).
@@ -52,13 +52,13 @@ Take a look below at the available skins below.
 
 The default skin. If the `skin` variable is unset (or set to `"teal"`), this is what tabi looks like:
 
-{{ image_toggler(default_src="img/skins/teal_light.webp", toggled_src="img/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/teal_light.webp", toggled_src="blog/customise-tabi/skins/teal_dark.webp", default_alt="teal skin in light mode", toggled_alt="teal skin in dark mode", full_width=true) }}
 
 <hr>
 
 ### Lavender
 
-{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
 
 To apply, use `skin = "lavender"`.
 
@@ -67,7 +67,7 @@ To apply, use `skin = "lavender"`.
 
 ### Red
 
-{{ image_toggler(default_src="img/skins/red_light.webp", toggled_src="img/skins/red_dark.webp", default_alt="red skin in light mode", toggled_alt="red skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/red_light.webp", toggled_src="blog/customise-tabi/skins/red_dark.webp", default_alt="red skin in light mode", toggled_alt="red skin in dark mode", full_width=true) }}
 
 Switch to this by setting `skin = "red"`.
 
@@ -78,7 +78,7 @@ Switch to this by setting `skin = "red"`.
 
 A skin designed by 🅿️.
 
-{{ image_toggler(default_src="img/skins/mint_light.webp", toggled_src="img/skins/mint_dark.webp", default_alt="mint skin in light mode", toggled_alt="mint skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/mint_light.webp", toggled_src="blog/customise-tabi/skins/mint_dark.webp", default_alt="mint skin in light mode", toggled_alt="mint skin in dark mode", full_width=true) }}
 
 Activate it with `skin = "mint"`.
 
@@ -89,7 +89,7 @@ Activate it with `skin = "mint"`.
 
 Inspired by the Japanese cherry blossom season.
 
-{{ image_toggler(default_src="img/skins/sakura_light.webp", toggled_src="img/skins/sakura_dark.webp", default_alt="sakura skin in light mode", toggled_alt="sakura skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/sakura_light.webp", toggled_src="blog/customise-tabi/skins/sakura_dark.webp", default_alt="sakura skin in light mode", toggled_alt="sakura skin in dark mode", full_width=true) }}
 
 To enable this skin, adjust `skin = "sakura"`.
 
@@ -98,7 +98,7 @@ To enable this skin, adjust `skin = "sakura"`.
 
 ### Blue
 
-{{ image_toggler(default_src="img/skins/blue_light.webp", toggled_src="img/skins/blue_dark.webp", default_alt="blue skin in light mode", toggled_alt="blue skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/blue_light.webp", toggled_src="blog/customise-tabi/skins/blue_dark.webp", default_alt="blue skin in light mode", toggled_alt="blue skin in dark mode", full_width=true) }}
 
 For this appearance, set `skin = "blue"`.
 
@@ -109,7 +109,7 @@ For this appearance, set `skin = "blue"`.
 
 *Indigo* for blue (in light theme) and *ingot* for gold (in dark theme).
 
-{{ image_toggler(default_src="img/skins/indigo_ingot_light.webp", toggled_src="img/skins/indigo_ingot_dark.webp", default_alt="indigo ingot skin in light mode", toggled_alt="indigo ingot skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/indigo_ingot_light.webp", toggled_src="blog/customise-tabi/skins/indigo_ingot_dark.webp", default_alt="indigo ingot skin in light mode", toggled_alt="indigo ingot skin in dark mode", full_width=true) }}
 
 To activate this skin, use `skin = "indigo_ingot"`.
 
@@ -120,14 +120,14 @@ To activate this skin, use `skin = "indigo_ingot"`.
 
 Inspired by the colours of Evangelion Unit-01 (in dark theme) and Unit-02 (in light theme).
 
-{{ image_toggler(default_src="img/skins/evangelion_light.webp", toggled_src="img/skins/evangelion_dark.webp", default_alt="evangelion skin in light mode", toggled_alt="evangelion skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/evangelion_light.webp", toggled_src="blog/customise-tabi/skins/evangelion_dark.webp", default_alt="evangelion skin in light mode", toggled_alt="evangelion skin in dark mode", full_width=true) }}
 
 
 <hr>
 
 ### Monochrome
 
-{{ image_toggler(default_src="img/skins/monochrome_light.webp", toggled_src="img/skins/monochrome_dark.webp", default_alt="monochrome skin in light mode", toggled_alt="monochrome skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/monochrome_light.webp", toggled_src="blog/customise-tabi/skins/monochrome_dark.webp", default_alt="monochrome skin in light mode", toggled_alt="monochrome skin in dark mode", full_width=true) }}
 
 To achieve this look, set `skin = "monochrome"`.
 
@@ -138,7 +138,7 @@ To achieve this look, set `skin = "monochrome"`.
 
 **WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_orange_light.webp", toggled_src="img/skins/lowcontrast_orange_dark.webp", default_alt="low contrast orange skin in light mode", toggled_alt="low contrast orange skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_orange_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_orange_dark.webp", default_alt="low contrast orange skin in light mode", toggled_alt="low contrast orange skin in dark mode", full_width=true) }}
 
 To use, set `skin = "lowcontrast_orange"`.
 
@@ -149,7 +149,7 @@ To use, set `skin = "lowcontrast_orange"`.
 
 **WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_peach_light.webp", toggled_src="img/skins/lowcontrast_peach_dark.webp", default_alt="low contrast peach skin in light mode", toggled_alt="low contrast peach skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_peach_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_peach_dark.webp", default_alt="low contrast peach skin in light mode", toggled_alt="low contrast peach skin in dark mode", full_width=true) }}
 
 To enable it, specify `skin = "lowcontrast_peach"`.
 
@@ -160,7 +160,7 @@ To enable it, specify `skin = "lowcontrast_peach"`.
 
 **WARNING!** This skin's light theme may have [low contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), affecting accessibility and Lighthouse rating. (Dark theme is fine.)
 
-{{ image_toggler(default_src="img/skins/lowcontrast_pink_light.webp", toggled_src="img/skins/lowcontrast_pink_dark.webp", default_alt="low contrast pink skin in light mode", toggled_alt="low contrast pink skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lowcontrast_pink_light.webp", toggled_src="blog/customise-tabi/skins/lowcontrast_pink_dark.webp", default_alt="low contrast pink skin in light mode", toggled_alt="low contrast pink skin in dark mode", full_width=true) }}
 
 For this colourscheme, choose `skin = "lowcontrast_pink"`.
 

content/blog/faq-languages/index.ca.md

@@ -9,7 +9,7 @@ tags = ["funcionalitat", "tutorial", "Preguntes Freqüents"]
 [extra]
 quick_navigation_buttons = true
 toc_ignore_pattern = "^(Preguntes Freqüents)"
-social_media_card = "img/social_cards/ca_blog_faq_languages.jpg"
+social_media_card = "social_cards/ca_blog_faq_languages.jpg"
 +++
 
 tabi simplifica el procés de creació de llocs web multilingües perquè puguis connectar amb una audiència global. En aquesta guia, t'explicarem tot el que necessites saber, des de com configurar la llengua principal en el teu lloc fins a com contribuir amb les teves pròpies traduccions. Comencem!

content/blog/faq-languages/index.es.md

@@ -9,7 +9,7 @@ tags = ["funcionalidad", "tutorial", "Preguntas Frecuentes"]
 [extra]
 quick_navigation_buttons = true
 toc_ignore_pattern = "^(Preguntas Frecuentes)"
-social_media_card = "img/social_cards/es_blog_faq_languages.jpg"
+social_media_card = "social_cards/es_blog_faq_languages.jpg"
 +++
 
 tabi simplifica el proceso de crear sitios web multilingües para que puedas conectar con una audiencia global. En esta guía, te explicaremos todo lo que necesitas saber, desde cómo configurar el idioma principal en tu sitio hasta cómo contribuir con tus propias traducciones. ¡Empecemos!

content/blog/faq-languages/index.md

@@ -9,7 +9,7 @@ tags = ["showcase", "tutorial", "FAQ"]
 [extra]
 quick_navigation_buttons = true
 toc_ignore_pattern = "^(Frequently Asked Questions)"
-social_media_card = "img/social_cards/blog_faq_languages.jpg"
+social_media_card = "social_cards/blog_faq_languages.jpg"
 +++
 
 To broaden your reach to a global audience, tabi streamlines the process of building multilingual websites. In this guide, we'll walk you through everything you need to know—from setting a default language for your site to contributing your own translations. Let's get started!

content/blog/javascript/index.ca.md

@@ -9,7 +9,7 @@ tags = ["funcionalitat", "tutorial"]
 
 [extra]
 footnote_backlinks = true
-social_media_card = "img/social_cards/ca_blog_javascript.jpg"
+social_media_card = "social_cards/ca_blog_javascript.jpg"
 +++
 
 Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una quantitat mínima per afegir algunes característiques que són impossibles d'aconseguir amb HTML i CSS.
@@ -24,9 +24,9 @@ Aquest tema no requereix JavaScript obligatori. Opcionalment, pot carregar una q
 
 Les següents opcions es poden especificar per a publicacions, seccions i globalment, seguint la jerarquia de `pàgina > secció > config.toml`:
 
-- [**Suport de KaTeX**](@/blog/markdown.ca.md#katex). Habilitat configurant `katex = true` (274 KB).
+- [**Suport de KaTeX**](@/blog/markdown/index.ca.md#katex). Habilitat configurant `katex = true` (274 KB).
-- [**Còpia de blocs de codi amb un sol clic**](@/blog/markdown.ca.md#bloc-de-codi). Habilitada configurant `copy_button = true`. (~700 bytes)
+- [**Còpia de blocs de codi amb un sol clic**](@/blog/markdown/index.ca.md#bloc-de-codi). Habilitada configurant `copy_button = true`. (~700 bytes)
-- [**Enllaços de retorn per a notes a peu de pàgina**](@/blog/markdown.ca.md#1). Habilitats configurant `footnote_backlinks = true` (~500 bytes).
+- [**Enllaços de retorn per a notes a peu de pàgina**](@/blog/markdown/index.ca.md#1). Habilitats configurant `footnote_backlinks = true` (~500 bytes).
 
 Per especificar aquestes opcions:
 
@@ -36,7 +36,7 @@ Per especificar aquestes opcions:
 
 ## Opcions que es poden habilitar globalment o per a publicacions individuals
 
-- [**Comentaris**](@/blog/comments.ca.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant `enabled_for_all_posts = true` a la secció apropiada del teu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Per habilitar comentaris en publicacions individuals, configura el nom del sistema `= true` (per exemple, `hyvortalk = true`) al front matter del post.
+- [**Comentaris**](@/blog/comments/index.ca.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) es poden habilitar globalment configurant `enabled_for_all_posts = true` a la secció apropiada del teu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Per habilitar comentaris en publicacions individuals, configura el nom del sistema `= true` (per exemple, `hyvortalk = true`) al front matter del post.
 
 A part d'això, és un tema ràpid amb HTML i CSS que funciona sense JavaScript. Just com hauria de ser (la majoria de) la web :-)
 

content/blog/javascript/index.es.md

@@ -9,7 +9,7 @@ tags = ["funcionalidad", "tutorial"]
 
 [extra]
 footnote_backlinks = true
-social_media_card = "img/social_cards/es_blog_javascript.jpg"
+social_media_card = "social_cards/es_blog_javascript.jpg"
 +++
 
 Este tema no requiere JavaScript de manera obligatoria. Opcionalmente, puede cargar una cantidad mínima de JavaScript para añadir algunas características que son imposibles de lograr con solo HTML y CSS.
@@ -24,9 +24,9 @@ Este tema no requiere JavaScript de manera obligatoria. Opcionalmente, puede car
 
 Las siguientes opciones pueden especificarse para publicaciones, secciones y a nivel global, siguiendo la jerarquía de `página > sección > config.toml`:
 
-- [**Soporte de KaTeX**](@/blog/markdown.es.md#katex). Habilitado al configurar `katex = true` (274 KB).
+- [**Soporte de KaTeX**](@/blog/markdown/index.es.md#katex). Habilitado al configurar `katex = true` (274 KB).
-- [**Copia de bloques de código con un solo clic**](@/blog/markdown.es.md#bloque-de-codigo). Habilitado al configurar `copy_button = true` (~700 bytes).
+- [**Copia de bloques de código con un solo clic**](@/blog/markdown/index.es.md#bloque-de-codigo). Habilitado al configurar `copy_button = true` (~700 bytes).
-- [**Enlaces de retorno de notas al pie**](@/blog/markdown.es.md#1). Habilitado al configurar `footnote_backlinks = true` (~500 bytes).
+- [**Enlaces de retorno de notas al pie**](@/blog/markdown/index.es.md#1). Habilitado al configurar `footnote_backlinks = true` (~500 bytes).
 
 Para especificar estas opciones:
 
@@ -36,7 +36,7 @@ Para especificar estas opciones:
 
 ## Opciones que pueden habilitarse globalmente o para publicaciones individuales
 
-- [**Comentarios**](@/blog/comments.es.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) pueden habilitarse globalmente configurando `enabled_for_all_posts = true` en la sección apropiada de tu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Para habilitar comentarios en publicaciones individuales, configura el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`) en el front matter de la publicación.
+- [**Comentarios**](@/blog/comments/index.es.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) o Isso (1KB) pueden habilitarse globalmente configurando `enabled_for_all_posts = true` en la sección apropiada de tu `config.toml` (`[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` o `[extra.isso]`). Para habilitar comentarios en publicaciones individuales, configura el nombre del sistema `= true` (por ejemplo, `hyvortalk = true`) en el front matter de la publicación.
 
 Aparte de eso, es un tema rápido con HTML y CSS que funciona con JavaScript deshabilitado. Justo como debería ser (la mayoría de) la web :-)
 

content/blog/javascript/index.md

@@ -9,7 +9,7 @@ tags = ["showcase", "tutorial"]
 
 [extra]
 footnote_backlinks = true
-social_media_card = "img/social_cards/blog_javascript.jpg"
+social_media_card = "social_cards/blog_javascript.jpg"
 +++
 
 This theme has no mandatory JavaScript. Optionally, it can load a minimal amount to add some features that are impossible to achieve with HTML and CSS.
@@ -24,9 +24,9 @@ This theme has no mandatory JavaScript. Optionally, it can load a minimal amount
 
 The following settings can be specified for posts, sections and globally, following the hierarchy of `page > section > config.toml`:
 
-- [**KaTeX support**](@/blog/markdown.md#katex). Enabled by setting `katex = true` (274 KB).
+- [**KaTeX support**](@/blog/markdown/index.md#katex). Enabled by setting `katex = true` (274 KB).
-- [**One-click copy of code blocks**](@/blog/markdown.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes)
+- [**One-click copy of code blocks**](@/blog/markdown/index.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes)
-- [**Footnote backlinks**](@/blog/markdown.md#1). Enabled by setting `footnote_backlinks = true` (~500 bytes).
+- [**Footnote backlinks**](@/blog/markdown/index.md#1). Enabled by setting `footnote_backlinks = true` (~500 bytes).
 
 To specify these settings:
 
@@ -36,7 +36,7 @@ To specify these settings:
 
 ## Settings that can be enabled globally or for individual posts
 
-- [**Comments**](@/blog/comments.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting `enabled_for_all_posts = true` in the right section of your  `config.toml` (i.e. `[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` or `[extra.isso]`). To enable comments on individual posts, set the name of the system `= true` (e.g. `hyvortalk = true`) in the post's front matter.
+- [**Comments**](@/blog/comments/index.md). giscus (2 KB), utterances (1 KB), Hyvor Talk (~800 bytes) or Isso (1KB) can be globally enabled by setting `enabled_for_all_posts = true` in the right section of your  `config.toml` (i.e. `[extra.giscus]`, `[extra.utterances]`, `[extra.hyvortalk]` or `[extra.isso]`). To enable comments on individual posts, set the name of the system `= true` (e.g. `hyvortalk = true`) in the post's front matter.
 
 Other than that, it's a fast theme with HTML and CSS which works with JavaScript disabled. Just the way (most of) the web should be :-)
 

content/blog/markdown/index.ca.md

@@ -10,7 +10,7 @@ tags = ["markdown", "funcionalitat"]
 [extra]
 katex = true
 footnote_backlinks = true
-social_media_card = "img/social_cards/ca_blog_markdown.jpg"
+social_media_card = "social_cards/ca_blog_markdown.jpg"
 +++
 
 ## $\KaTeX$

content/blog/markdown/index.es.md

@@ -10,7 +10,7 @@ tags = ["markdown", "funcionalidad"]
 [extra]
 katex = true
 footnote_backlinks = true
-social_media_card = "img/social_cards/es_blog_markdown.jpg"
+social_media_card = "social_cards/es_blog_markdown.jpg"
 +++
 
 ## $\KaTeX$

content/blog/markdown/index.md

@@ -10,7 +10,7 @@ tags = ["markdown", "showcase"]
 [extra]
 katex = true
 footnote_backlinks = true
-social_media_card = "img/social_cards/blog_markdown.jpg"
+social_media_card = "social_cards/blog_markdown.jpg"
 +++
 
 ## $\KaTeX$

content/blog/mastering-tabi-settings/index.ca.md

@@ -11,7 +11,7 @@ tags = ["funcionalitat", "tutorial", "preguntes freqüents"]
 giscus = true
 footnote_backlinks = true
 quick_navigation_buttons = true
-social_media_card = "img/social_cards/ca_blog_mastering_tabi_settings.jpg"
+social_media_card = "social_cards/ca_blog_mastering_tabi_settings.jpg"
 +++
 
 Aquesta és la guia completa sobre la configuració a tabi. Si tens alguna pregunta, pots utilitzar els [comentaris](#comments) al final d'aquesta pàgina o [obrir un issue a GitHub](https://github.com/welpo/tabi/issues/new).
@@ -47,7 +47,7 @@ tabi ofereix suport multilingüe complet per al teu lloc Zola, des de configurar
 
 La [pàgina principal](/) d'aquesta demo té una capçalera amb una imatge, un títol i una descripció:
 
-{{ dual_theme_image(light_src="img/header_light.webp", dark_src="img/header_dark.webp", alt="Capçalera de la pàgina principal") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Capçalera de la pàgina principal") }}
 
 Per configurar la imatge i el títol, pots utilitzar la variable `header` al front matter de l'arxiu `_index.md` de la secció. Per exemple:
 
@@ -114,7 +114,7 @@ El mode predeterminat es pot especificar amb la variable `default_theme`, que ac
 
 Les skins («pells») de tabi canvien el color principal del lloc web. Pots configurar la skin a `config.toml` amb `skin = "nom_de_la_skin`. Per exemple, `skin = "lavender"` es veu així (clica per canviar entre mode clar i fosc):
 
-{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="pell lavender en mode clar", toggled_alt="pell lavender en mode fosc", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="pell lavender en mode clar", toggled_alt="pell lavender en mode fosc", full_width=true) }}
 
 Explora les skins disponibles i aprèn com crear la teva pròpia consultant [la documentació](/ca/blog/customise-tabi/#skins).
 
@@ -138,7 +138,7 @@ stylesheets = ["css/custom.css", "css/another.css"]
 
 El color del tema del navegador és el color que apareix a la barra de pestanyes del navegador:
 
-{{ dual_theme_image(light_src="img/browser_theme_colour_light.webp", dark_src="img/browser_theme_colour_dark.webp" alt="pestanyes amb un tema de navegador de color") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_colour_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_colour_dark.webp" alt="pestanyes amb un tema de navegador de color") }}
 
 Pots establir-ho a `config.toml` com a `browser_theme_colour = "#087e96"`. Si vols diferents colors per als modes clar/obscur, pots establir un conjunt de colors amb `browser_theme_colour = ["#ffffff", "#000000"]`. El primer color és per al mode clar, el segon per al fosc.
 
@@ -168,15 +168,15 @@ Això habilita dues funcions:
 
 1. `show_remote_source = true` afegeix un enllaç al codi font del teu lloc web (el teu `remote_repository_url`) que es mostrarà al peu de pàgina:
 
-{{ dual_theme_image(light_src="img/site_source_light.webp", dark_src="img/site_source_dark.webp" alt="Peu de pàgina del lloc web, mostrant un enllaç 'Codi font del lloc'") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Peu de pàgina del lloc web, mostrant un enllaç 'Codi font del lloc'") }}
 
 2. `show_remote_changes = true` afegeix un enllaç "Veure canvis ↗" a l'historial de commits de l'article actualitzat, al costat de la data de l'última actualització [^1]:
 
-{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç 'Veure canvis'") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç 'Veure canvis'") }}
 
 En clicar aquest enllaç, seràs dirigit a l'historial de commits de l'article, on podràs veure els canvis realitzats en ell:
 
-{{ dual_theme_image(light_src="img/commit_history_light.webp", dark_src="img/commit_history_dark.webp" alt="Historial de commits d'un article", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Historial de commits d'un article", full_width=true) }}
 
 ---
 
@@ -330,7 +330,7 @@ Per exemple, si configures `base_canonical_url = "https://example.com"`, l'URL c
 
 Les targetes per a xarxes socials són les imatges que es mostren quan comparteixes un enllaç a les xarxes socials:
 
-![Una captura de pantalla de WhatsApp mostrant un enllaç amb una targeta per a xarxes socials](/img/with_social_media_card.webp)
+![Una captura de pantalla de WhatsApp mostrant un enllaç amb una targeta per a xarxes socials](/blog/mastering-tabi-settings/img/with_social_media_card.webp)
 
 Pots establir la imatge per a xarxes socials amb `social_media_card = "img/social_media_card.png"`.
 
@@ -376,7 +376,7 @@ menu = [
 
 Els botons de navegació ràpida són els botons que apareixen a la part inferior dreta de la pantalla. Hauries de veure'ls en aquesta pàgina, si no estàs en un dispositiu mòbil. Es veuen així:
 
-{{ dual_theme_image(light_src="img/quick_navigation_buttons_light.webp", dark_src="img/quick_navigation_buttons_dark.webp", alt="Botons de navegació ràpida") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp", alt="Botons de navegació ràpida") }}
 
 Per activar-los, estableix `quick_navigation_buttons = true`.
 
@@ -398,7 +398,7 @@ Per saber més sobre com personalitzar-ho, consulta [la documentació sobre la T
 
 Establir `footnote_backlinks = true` afegirà enllaços de retorn a les notes a peu de pàgina de les teves publicacions, com aquest:
 
-{{ dual_theme_image(light_src="img/footnote_backlinks_light.webp", dark_src="img/footnote_backlinks_dark.webp", alt="Enllaços de retorn a les notes a peu de pàgina", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp", alt="Enllaços de retorn a les notes a peu de pàgina", full_width=true) }}
 
 Quan facis clic en un enllaç de retorn (la fletxa ↩), et portarà de tornada al punt del text on es va fer referència a la nota a peu de pàgina.
 
@@ -414,7 +414,7 @@ Quan facis clic en un enllaç de retorn (la fletxa ↩), et portarà de tornada
 
 Establir `copy_button = true` afegirà un petit botó de copiar a la part superior dreta dels blocs de codi, com aquest:
 
-{{ dual_theme_image(light_src="img/copy_button_on_code_blocks_light.webp", dark_src="img/copy_button_on_code_blocks_dark.webp", alt="Botó de copiar en blocs de codi", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botó de copiar en blocs de codi", full_width=true) }}
 
 ### Suport per a KaTeX
 
@@ -549,7 +549,7 @@ copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the c
 
 `$CURRENT_YEAR` es substituirà per l'any actual i `$SEPARATOR` es substituirà per la [variable `separator`](#separador-personalitzat). El text es processarà en Markdown. Per exemple:
 
-{{ dual_theme_image(light_src="img/copyright_light.webp", dark_src="img/copyright_dark.webp" alt="Secció de drets d'autor", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Secció de drets d'autor", full_width=true) }}
 
 Si tens un lloc multilingüe i vols establir diferents notificacions de drets d'autor per a diferents idiomes, pots:
 
@@ -568,7 +568,7 @@ Si tens un lloc multilingüe i vols establir diferents notificacions de drets d'
 
 Pots activar o desactivar el temps estimat de lectura d'un article amb `show_reading_time`. Si el configures com a `true`, apareixerà a les metadades de l'article, com això:
 
-{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç «Veure canvis»") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Títol de l'article i metadades, mostrant un enllaç «Veure canvis»") }}
 
 Com que segueix [la jerarquia](#jerarquia-de-configuracio), pots activar-lo o desactivar-lo per a pàgines o seccions específiques. Per exemple, aquesta demo desactiva `show_reading_time = false` a la secció [projectes](https://welpo.github.io/tabi/ca/projects/) a l'arxiu [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), de manera que les seves publicacions individuals no mostren el temps de lectura.
 

content/blog/mastering-tabi-settings/index.es.md

@@ -11,7 +11,7 @@ tags = ["funcionalidad", "tutorial", "preguntas frecuentes"]
 giscus = true
 footnote_backlinks = true
 quick_navigation_buttons = true
-social_media_card = "img/social_cards/es_blog_mastering_tabi_settings.jpg"
+social_media_card = "social_cards/es_blog_mastering_tabi_settings.jpg"
 +++
 
 Esta es la guía completa sobre la configuración en tabi. Si tienes alguna pregunta, puedes usar los [comentarios](#comments) al final de esta página o [abrir un issue en GitHub](https://github.com/welpo/tabi/issues/new).
@@ -45,13 +45,13 @@ tabi ofrece soporte multilingüe completo para tu sitio Zola, desde configurar u
 
 La [página principal](/) de esta demo tiene un encabezado con una imagen, un título y una descripción:
 
-{{ dual_theme_image(light_src="img/header_light.webp", dark_src="img/header_dark.webp", alt="Encabezado de la página principal") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Encabezado de la página principal") }}
 
 Para configurar la imagen y el título, puedes usar la variable `header` en el front matter del archivo `_index.md` de la sección. Por ejemplo:
 
 ```toml
 [extra]
-header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor del tema" }
+header = {title = "¡Hola! Soy tabi~", img = "blog/mastering-tabi-settings/img/main.webp", img_alt = "Óscar Fernández, el autor del tema" }
 ```
 
 La descripción es contenido Markdown normal, escrito fuera del front matter.
@@ -112,7 +112,7 @@ El tema predeterminado puede especificarse con la variable `default_theme`, que
 
 Las pieles de tabi cambian el color principal del sitio. Puedes configurar la piel en `config.toml` con `skin = "nombre_de_la_piel"`. Por ejemplo, `skin = "lavender"` se ve así (haz clic para cambiar entre modo claro y oscuro):
 
-{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="piel lavender en modo claro", toggled_alt="piel lavender en modo oscuro", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="piel lavender en modo claro", toggled_alt="piel lavender en modo oscuro", full_width=true) }}
 
 Explora las pieles disponibles y aprende cómo crear la tuya propia consultando [la documentación](/es/blog/customise-tabi/#skins).
 
@@ -136,7 +136,7 @@ stylesheets = ["css/custom.css", "css/another.css"]
 
 El color del tema del navegador es el color que aparece en la barra de pestañas del navegador:
 
-{{ dual_theme_image(light_src="img/browser_theme_colour_light.webp", dark_src="img/browser_theme_colour_dark.webp" alt="pestañas con un tema de navegador de color") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_colour_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_colour_dark.webp" alt="pestañas con un tema de navegador de color") }}
 
 Puedes establecerlo en `config.toml` como `browser_theme_colour = "#087e96"`. Si deseas diferentes colores para los modos oscuro/claro, puedes establecer un conjunto de colores con `browser_theme_colour = ["#ffffff", "#000000"]`. El primer color es para el modo claro, el segundo para el oscuro.
 
@@ -166,15 +166,15 @@ Esto habilita dos funciones:
 
 1. `show_remote_source = true` añade un enlace al código fuente de tu sitio (tu `remote_repository_url`) que se mostrará en el pie de página:
 
-{{ dual_theme_image(light_src="img/site_source_light.webp", dark_src="img/site_source_dark.webp" alt="Pie de página del sitio, mostrando un enlace 'Código fuente del sitio'") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Pie de página del sitio, mostrando un enlace 'Código fuente del sitio'") }}
 
 1. `show_remote_changes = true` añade un enlace «Ver cambios ↗» al historial de commits del artículo actualizado, al lado de la fecha de última actualización [^1]:
 
-{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace 'Ver cambios'") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace 'Ver cambios'") }}
 
 Al hacer clic en este enlace, serás dirigido al historial de commits del artículo, donde podrás ver los cambios realizados en él:
 
-{{ dual_theme_image(light_src="img/commit_history_light.webp", dark_src="img/commit_history_dark.webp" alt="Historial de commits de un artículo", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Historial de commits de un artículo", full_width=true) }}
 
 ---
 
@@ -328,7 +328,7 @@ Por ejemplo, si configuras `base_canonical_url = "https://example.com"`, la URL
 
 Las tarjetas para redes sociales son las imágenes que se muestran cuando compartes un enlace en redes sociales:
 
-![Una captura de pantalla de WhatsApp mostrando un enlace con una tarjeta para redes sociales](/img/with_social_media_card.webp)
+![Una captura de pantalla de WhatsApp mostrando un enlace con una tarjeta para redes sociales](/blog/mastering-tabi-settings/img/with_social_media_card.webp)
 
 Puedes establecer la imagen para redes sociales con `social_media_card = "img/social_media_card.png"`.
 
@@ -336,7 +336,7 @@ Puedes especificar rutas tanto relativas como absolutas.
 
 - **Ruta relativa**: Coloca la imagen en la misma carpeta que tu entrada de blog y especifica su nombre. Por ejemplo, `social_media_card = "relative_image.png"`.
 
-- **Ruta absoluta**: Coloca la imagen en una carpeta específica y especifica la ruta desde la raíz. Por ejemplo, `social_media_card = "/img/absolute_image.png"`.
+- **Ruta absoluta**: Coloca la imagen en una carpeta específica y especifica la ruta desde la raíz. Por ejemplo, `social_media_card = "img/absolute_image.png"`.
 
 Si ambas rutas, relativa y absoluta, son válidas, la ruta relativa tendrá prioridad.
 
@@ -374,7 +374,7 @@ menu = [
 
 Los botones de navegación rápida son los botones que aparecen en la parte inferior derecha de la pantalla. Deberías verlos en esta página, si no estás en un dispositivo móvil. Se ven así:
 
-{{ dual_theme_image(light_src="img/quick_navigation_buttons_light.webp", dark_src="img/quick_navigation_buttons_dark.webp", alt="Botones de navegación rápida") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp", alt="Botones de navegación rápida") }}
 
 Para activarlos, establece `quick_navigation_buttons = true`.
 
@@ -396,7 +396,7 @@ Para saber más sobre cómo personalizarlo, consulta [la documentación sobre la
 
 Establecer `footnote_backlinks = true` añadirá enlaces de retorno a las notas al pie de tus publicaciones, como este:
 
-{{ dual_theme_image(light_src="img/footnote_backlinks_light.webp", dark_src="img/footnote_backlinks_dark.webp", alt="Enlaces de retorno en notas al pie", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp", alt="Enlaces de retorno en notas al pie", full_width=true) }}
 
 Cuando hagas clic en un enlace de retorno (la flecha ↩), te llevará de vuelta al punto del texto donde se hizo referencia a la nota al pie.
 
@@ -412,7 +412,7 @@ Cuando hagas clic en un enlace de retorno (la flecha ↩), te llevará de vuelta
 
 Establecer `copy_button = true` añadirá un pequeño botón de copiar en la parte superior derecha de los bloques de código, como este:
 
-{{ dual_theme_image(light_src="img/copy_button_on_code_blocks_light.webp", dark_src="img/copy_button_on_code_blocks_dark.webp", alt="Botón de copiar en bloques de código", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp", alt="Botón de copiar en bloques de código", full_width=true) }}
 
 ### Soporte para KaTeX
 
@@ -547,7 +547,7 @@ copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the c
 
 `$CURRENT_YEAR` se reemplazará por el año actual y `$SEPARATOR` se reemplazará por la [variable `separator`](#separador-personalizado). Se procesará el texto en Markdown. Por ejemplo:
 
-{{ dual_theme_image(light_src="img/copyright_light.webp", dark_src="img/copyright_dark.webp" alt="Sección de derechos de autor", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Sección de derechos de autor", full_width=true) }}
 
 Si tienes un sitio multilingüe y deseas establecer diferentes notificaciones de derechos de autor para diferentes idiomas, puedes:
 
@@ -566,7 +566,7 @@ Si tienes un sitio multilingüe y deseas establecer diferentes notificaciones de
 
 Puedes activar o desactivar el tiempo estimado de lectura de un artículo con `show_reading_time`. Si lo estableces en `true`, se mostrará en los metadatos del artículo, así:
 
-{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace «Ver cambios»") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Título del artículo y metadatos, mostrando un enlace «Ver cambios»") }}
 
 Dado que sigue [la jerarquía](#jerarquia-de-configuracion), puedes activarlo o desactivarlo para páginas o secciones específicas. Por ejemplo, esta demo desactiva `show_reading_time = false` en la sección [proyectos](https://welpo.github.io/tabi/es/projects/) en el archivo [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.es.md?plain=1), por lo que sus publicaciones individuales no muestran el tiempo de lectura.
 

content/blog/mastering-tabi-settings/index.md

@@ -11,7 +11,7 @@ tags = ["showcase", "tutorial", "FAQ"]
 giscus = true
 footnote_backlinks = true
 quick_navigation_buttons = true
-social_media_card = "img/social_cards/blog_mastering_tabi_settings.jpg"
+social_media_card = "social_cards/blog_mastering_tabi_settings.jpg"
 +++
 
 This aims to be a comprehensive guide to every setting in tabi. If you have any questions, feel free to ask in the [comments below](#comments) or [open an issue on GitHub](https://github.com/welpo/tabi/issues/new).
@@ -47,7 +47,7 @@ tabi offers comprehensive multilingual support for your Zola site, from setting
 
 The [main page](/) of this demo has a header with an image, a title and description:
 
-{{ dual_theme_image(light_src="img/header_light.webp", dark_src="img/header_dark.webp", alt="Main page header") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/header_light.webp", dark_src="blog/mastering-tabi-settings/img/header_dark.webp", alt="Main page header") }}
 
 To set the image and title, you can use the `header` variable in the front matter of the section's `_index.md` file. For example:
 
@@ -114,7 +114,7 @@ The default theme can be specified with the `default_theme` variable, which acce
 
 tabi's skins change the main colour of the site. You can set the skin in `config.toml` with `skin = "skin_name"`. For example, `skin = "lavender"` looks like this (click to switch between light and dark mode):
 
-{{ image_toggler(default_src="img/skins/lavender_light.webp", toggled_src="img/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
+{{ image_toggler(default_src="blog/customise-tabi/skins/lavender_light.webp", toggled_src="blog/customise-tabi/skins/lavender_dark.webp", default_alt="lavender skin in light mode", toggled_alt="lavender skin in dark mode", full_width=true) }}
 
 Explore the available skins and learn how to create your own reading [the documentation](/blog/customise-tabi/#skins).
 
@@ -138,7 +138,7 @@ stylesheets = ["css/custom.css", "css/another.css"]
 
 The browser theme colour is the colour that appears in the browser's tab bar:
 
-{{ dual_theme_image(light_src="img/browser_theme_colour_light.webp", dark_src="img/browser_theme_colour_dark.webp" alt="tabi with a coloured browser theme") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_colour_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_colour_dark.webp" alt="tabi with a coloured browser theme") }}
 
 You can set it in `config.toml` like `browser_theme_colour = "#087e96"`. If you'd like different colours for dark/light mode, you can set an array of colours with `browser_theme_colour = ["#ffffff", "#000000"]`. The first colour will be used for light mode, the second for dark mode.
 
@@ -168,15 +168,15 @@ This enables two features:
 
 1. `show_remote_source = true` adds a link to the source code of your site (your `remote_repository_url`) will be displayed on the footer:
 
-{{ dual_theme_image(light_src="img/site_source_light.webp", dark_src="img/site_source_dark.webp" alt="Page footer, showing a 'Site source' link") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/site_source_light.webp", dark_src="blog/mastering-tabi-settings/img/site_source_dark.webp" alt="Page footer, showing a 'Site source' link") }}
 
 1. `show_remote_changes = true` adds a "See changes ↗" link to the commit history of updated posts, next to the last updated date [^1]:
 
-{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
 
 Clicking on this link will take you to the commit history of the post, where you can see the changes made to it:
 
-{{ dual_theme_image(light_src="img/commit_history_light.webp", dark_src="img/commit_history_dark.webp" alt="Commit history of a post", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/commit_history_light.webp", dark_src="blog/mastering-tabi-settings/img/commit_history_dark.webp" alt="Commit history of a post", full_width=true) }}
 
 ---
 
@@ -330,14 +330,14 @@ For example, if you set `base_canonical_url = "https://example.com"`, the canoni
 
 Social media cards are the images that are displayed when you share a link on social media:
 
-![A screenshot of WhatsApp showing a link with a social media card](/img/with_social_media_card.webp)
+![A screenshot of WhatsApp showing a link with a social media card](/blog/mastering-tabi-settings/img/with_social_media_card.webp)
 
 You can set the social media image with `social_media_card = "img/social_media_card.png"`.
 
 You can specify both relative and absolute paths.
 
 - **Relative Path**: Place the image in the same folder as your blog post and specify its name. For example, `social_media_card = "relative_image.png"`.
-  
+
 - **Absolute Path**: Put the image in a specific folder and specify the path from the root. For example, `social_media_card = "/img/absolute_image.png"`.
 
 If both relative and absolute paths are valid, the relative path will take precedence.
@@ -376,7 +376,7 @@ menu = [
 
 Quick navigation buttons are the buttons that appear on the bottom right of the screen. You should see them on this page, if you're not on mobile. They look like this:
 
-{{ dual_theme_image(light_src="img/quick_navigation_buttons_light.webp", dark_src="img/quick_navigation_buttons_dark.webp" alt="Quick navigation buttons") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_light.webp", dark_src="blog/mastering-tabi-settings/img/quick_navigation_buttons_dark.webp" alt="Quick navigation buttons") }}
 
 The buttons allow you to quickly navigate through an expandable mini-table of contents, to the comment section (if enabled), as well as to the top of the page.
 
@@ -400,7 +400,7 @@ Read more about the table of contents and how to customise it by reading [the do
 
 Setting `footnote_backlinks = true` will add backlinks to the footnotes of your posts, like this:
 
-{{ dual_theme_image(light_src="img/footnote_backlinks_light.webp", dark_src="img/footnote_backlinks_dark.webp" alt="Footnote backlinks", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/footnote_backlinks_light.webp", dark_src="blog/mastering-tabi-settings/img/footnote_backlinks_dark.webp" alt="Footnote backlinks", full_width=true) }}
 
 When you click on a backlink (the arrow ↩), it will take you back to the text where the footnote was referenced.
 
@@ -416,7 +416,7 @@ When you click on a backlink (the arrow ↩), it will take you back to the text
 
 Setting `copy_button = true` will add a small copy button to the top right of code blocks, like this:
 
-{{ dual_theme_image(light_src="img/copy_button_on_code_blocks_light.webp", dark_src="img/copy_button_on_code_blocks_dark.webp" alt="Copy button on code blocks", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_light.webp", dark_src="blog/mastering-tabi-settings/img/copy_button_on_code_blocks_dark.webp" alt="Copy button on code blocks", full_width=true) }}
 
 ### KaTeX Support
 
@@ -551,7 +551,7 @@ copyright = "© $CURRENT_YEAR Your Name $SEPARATOR Unless otherwise noted, the c
 
 `$CURRENT_YEAR` will be replaced by the current year, and `$SEPARATOR` will be replaced by the [`separator` variable](#custom-separator). Markdown is rendered. The example above:
 
-{{ dual_theme_image(light_src="img/copyright_light.webp", dark_src="img/copyright_dark.webp" alt="Copyright section", full_width=true) }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/copyright_light.webp", dark_src="blog/mastering-tabi-settings/img/copyright_dark.webp" alt="Copyright section", full_width=true) }}
 
 If you have a multilingual site and want to set different copyright notices for different languages, you can:
 
@@ -570,7 +570,7 @@ If you have a multilingual site and want to set different copyright notices for
 
 You can enable or hide the reading time of a post with `show_reading_time`. If you set it to `true`, it will be displayed in the post's metadata, like this:
 
-{{ dual_theme_image(light_src="img/see_changes_light.webp", dark_src="img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/see_changes_light.webp", dark_src="blog/mastering-tabi-settings/img/see_changes_dark.webp" alt="Post title and metadata, showing a 'See changes' link") }}
 
 Since it follows [the hierarchy](#settings-hierarchy), you can enable it or hide it for specific pages or sections. For example, this demo sets `show_reading_time = false` in the [projects](https://welpo.github.io/tabi/projects/) section's [`_index.md`](https://github.com/welpo/tabi/blob/main/content/projects/_index.md?plain=1), so their individual posts don't show the reading time.
 

content/blog/security/index.ca.md

@@ -8,7 +8,7 @@ description = "tabi té una Política de Seguretat de Contingut (CSP) fàcilment
 tags = ["seguretat", "funcionalitat"]
 
 [extra]
-social_media_card = "img/social_cards/ca_blog_security.jpg"
+social_media_card = "social_cards/ca_blog_security.jpg"
 +++
 
 La configuració per defecte del tema obté una puntuació A+ a l'[Observatori de Mozilla](https://observatory.mozilla.org).[^1]
@@ -30,6 +30,6 @@ La llista `allowed_domains` especifica les URLs a les quals el lloc web hauria d
 
 Aquesta funcionalitat permet personalitzar fàcilment les capçaleres de seguretat del lloc web per permetre casos d'ús específics, com ara inserir vídeos de YouTube, carregar scripts o tipografies remotes ([no recomanat](https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/)).
 
-**Nota**: [habilitar els comentaris](@/blog/comments.ca.md) o [les analítiques](@/blog/mastering-tabi-settings.ca.md#analitiques) automàticament permet scripts/frames/estils/connexions en funció del servei habilitat.
+**Nota**: [habilitar els comentaris](@/blog/comments/index.ca.md) o [les analítiques](@/blog/mastering-tabi-settings/index.ca.md#analisi-web) automàticament permet scripts/frames/estils/connexions en funció del servei habilitat.
 
 [^1]: Requereix una configuració adequada del servidor web (p. ex., redirigir el trànsit HTTP a HTTPS).

content/blog/security/index.es.md

@@ -8,7 +8,7 @@ description = "tabi tiene una Política de Seguridad de Contenido (CSP) fácilme
 tags = ["seguridad", "funcionalidad"]
 
 [extra]
-social_media_card = "img/social_cards/es_blog_security.jpg"
+social_media_card = "social_cards/es_blog_security.jpg"
 +++
 
 La configuración predeterminada del tema obtiene una calificación de A+ en [Mozilla Observatory](https://observatory.mozilla.org).[^1]
@@ -30,6 +30,6 @@ La lista `allowed_domains` especifica las URL a las que el sitio web debería po
 
 Esta función permite personalizar fácilmente las cabeceras de seguridad del sitio web para permitir casos de uso específicos, como la incrustación de videos de YouTube, la carga de scripts o  fuentes remotas ([no recomendado](https://www.albertovarela.net/blog/2022/11/stop-using-google-fonts/)).
 
-**Nota**: [habilitar los comentarios](@/blog/comments.es.md) o [las analíticas](@/blog/mastering-tabi-settings.es.md#analisis-web) automáticamente permite scripts/frames/estilos/conexiones en función del servicio habilitado.
+**Nota**: [habilitar los comentarios](@/blog/comments/index.es.md) o [las analíticas](@/blog/mastering-tabi-settings/index.es.md#analisis-web) automáticamente permite scripts/frames/estilos/conexiones en función del servicio habilitado.
 
 [^1]: Requiere una configuración adecuada del servidor web (por ejemplo, redirigir el tráfico HTTP a HTTPS).