Merge branch 'main' into feat/search

README.md

@@ -35,8 +35,8 @@ tabi has a perfect score on Google's Lighthouse audit:
 - [X] [Quick navigation buttons](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#quick-navigation-buttons).
 - [X] [Custom copyright notice](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#copyright).
 - [X] [Custom canonical URLs](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#canonical-url).
-- [X] [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/).
 - [X] [Custom shortcodes](https://welpo.github.io/tabi/blog/shortcodes/).
+- [X] [Customizable skins](https://welpo.github.io/tabi/blog/customise-tabi/).
 - [X] [Footnote backlinks](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#footnote-backlinks).
 - [X] [Social media cards](https://welpo.github.io/tabi/blog/mastering-tabi-settings/#social-media-cards).
 - [X] Responsive design.

config.toml

@@ -127,6 +127,14 @@ footnote_backlinks = false
 # 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
 katex = false
 
+# Show links to previous and next articles at the bottom of posts.
+# 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
+show_previous_next_article_links = false
+
+# Whether the navigation for previous/next article should match the full width of the site (same as the navigation bar at the top) or the article width.
+# To match the navigation bar at the top, set it to true.
+previous_next_article_links_full_width = true
+
 # Quick navigation buttons.
 # Adds "go up" and "go to comments" buttons on the bottom right (hidden for mobile).
 # 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

content/blog/_index.ca.md

@@ -8,4 +8,5 @@ insert_anchor_links = "left"
 
 [extra]
 social_media_card = "blog/social_cards/ca_blog.jpg"
+show_previous_next_article_links = true
 +++

content/blog/_index.es.md

@@ -8,4 +8,5 @@ insert_anchor_links = "left"
 
 [extra]
 social_media_card = "blog/social_cards/es_blog.jpg"
+show_previous_next_article_links = true
 +++

content/blog/_index.md

@@ -8,4 +8,5 @@ insert_anchor_links = "left"
 
 [extra]
 social_media_card = "blog/social_cards/blog.jpg"
+show_previous_next_article_links = true
 +++

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

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuració de tabi: guia completa"
 date = 2023-09-18
-updated = 2023-12-31
+updated = 2024-01-06
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -135,9 +135,9 @@ 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="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") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_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.
+Pots establir-ho a `config.toml` com a `browser_theme_color = "#087e96"`. Si vols diferents colors per als modes clar/obscur, pots establir un conjunt de colors amb `browser_theme_color = ["#ffffff", "#000000"]`. El primer color és per al mode clar, el segon per al fosc.
 
 Aquesta variable accepta qualsevol color CSS vàlid, així que pots utilitzar paraules clau (per exemple, `blue`), codis hexadecimals (per exemple, `#087e96`) o valors RGB/HSL (per exemple, `rgb(8, 126, 150)`).
 
@@ -235,16 +235,27 @@ Quan un usuari faci clic a la imatge o al títol d'un projecte, serà portat a l
 
 La pàgina del projecte individual es renderitza amb la plantilla predeterminada, tret que estableixis una altra, per exemple, `template = "info-page.html"`.
 
-### Archivo
+### Arxiu
 
-Agregar una página de archivo es similar a agregar una página de proyectos. Puedes crear un directorio en `content/archive/`. Allí, puedes crear un archivo `_index.md` con el siguiente bloque de metadatos:
+Afegir una pàgina d'arxiu és similar a afegir una pàgina de projectes. Pots crear un directori a `content/archive/`. Allà, pots crear un fitxer `_index.md` amb el següent encapçalament:
 
 ```toml
-title = "Archivo"
+title = "Arxiu"
 template = "archive.html"
 ```
 
-De forma predeterminada, el archivo listará las publicaciones ubicadas en `/blog/`. Si deseas cambiar esto, puedes establecer `section_path = "/otra-ruta/"` en la sección `[extra]` del archivo `_index.md`. Asegúrate de incluir la barra inclinada al final.
+Per defecte, l'arxiu llistarà les publicacions situades a `blog/`. Per personalitzar això, pots modificar la secció `[extra]` de l'arxiu `_index.md`:
+
+- **Per a un sol directori**: Estableix `section_path = "directori/"` per llistar publicacions d'un directori específic. Assegura't d'incloure la barra inclinada al final.
+
+- **Per a múltiples directoris**: Si vols agregar publicacions de diversos directoris, especifica la llista a `section_path`. Per exemple:
+
+  ```toml
+  [extra]
+  section_path = ["blog/", "notes/", "camí-tres/"]
+  ```
+
+**Nota**: la pàgina d'arxiu només llistarà publicacions que tinguin una data al seu encapçalament.
 
 ### Etiquetes
 
@@ -401,6 +412,22 @@ Activa l'índex de continguts just sota del títol i metadades de l'article amb
 
 Per saber més sobre com personalitzar-ho, consulta [la documentació sobre la Taula de continguts](/ca/blog/toc/).
 
+### Enllaços als articles anterior i següent
+
+| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
+|:------:|:------:|:-------------:|:--------------------:|:--------------------:|
+|   ✅   |   ✅   |      ✅       |          ✅          |         ❌          |
+
+Mostra enllaços als articles anterior i següent a la part inferior dels posts. Es veu així:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enllaços als articles anterior i següent", full_width=true) }}
+
+Per activar aquesta funció, estableix `show_previous_next_article_links = true`.
+
+Per defecte, aquesta secció de navegació tindrà l'amplada completa del lloc (igual que la barra de navegació de la part superior). Per fer-la més estreta, coincidint amb l'amplada de l'article, configura `previous_next_article_links_full_width = false`.
+
+Aquesta configuració també segueix la jerarquia.
+
 ### Enllaços de retorn a les notes a peu de pàgina
 
 | Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |

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

@@ -1,7 +1,7 @@
 +++
 title = "Domina la configuración de tabi: guía completa"
 date = 2023-09-18
-updated = 2023-12-31
+updated = 2024-01-06
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -133,9 +133,9 @@ 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="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") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_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.
+Puedes establecerlo en `config.toml` como `browser_theme_color = "#087e96"`. Si deseas diferentes colores para los modos oscuro/claro, puedes establecer un conjunto de colores con `browser_theme_color = ["#ffffff", "#000000"]`. El primer color es para el modo claro, el segundo para el oscuro.
 
 Esta variable acepta cualquier color CSS válido, así que puedes usar palabras clave (por ejemplo, `blue`), códigos hexadecimales (por ejemplo, `#087e96`) o valores RGB/HSL (por ejemplo, `rgb(8, 126, 150)`).
 
@@ -235,14 +235,25 @@ La página del proyecto individual se renderiza con la plantilla predeterminada,
 
 ### Archivo
 
-Agregar una página de archivo es similar a agregar una página de proyectos. Puedes crear un directorio en `content/archive/`. Allí, puedes crear un archivo `_index.md` con el siguiente bloque de metadatos:
+Agregar una página de archivo es similar a agregar una página de proyectos. Puedes crear un directorio en `content/archive/`. Allí, puedes crear un archivo `_index.md` con el siguiente encabezado:
 
 ```toml
 title = "Archivo"
 template = "archive.html"
 ```
 
-De forma predeterminada, el archivo listará las publicaciones ubicadas en `/blog/`. Si deseas cambiar esto, puedes establecer `section_path = "/otra-ruta/"` en la sección `[extra]` del archivo `_index.md`. Asegúrate de incluir la barra inclinada al final.
+Por defecto, el archivo mostrará las publicaciones ubicadas en `blog/`. Para personalizar esto, puedes modificar la sección `[extra]` del archivo `_index.md`:
+
+- **Para una sola ruta**: Establece `section_path = "tu-ruta/"` para listar publicaciones de un directorio específico. Asegúrate de incluir la barra inclinada al final.
+
+- **Para múltiples rutas**: Si deseas agregar publicaciones de varios directorios, `section_path` puede especificarse como una lista de rutas. Por ejemplo:
+
+  ```toml
+  [extra]
+  section_path = ["blog/", "notas/", "ruta-tres/"]
+  ```
+
+**Nota**: la página de Archivo sólo listará publicaciones con fecha.
 
 ### Etiquetas
 
@@ -399,6 +410,22 @@ Habilita el índice de contenidos justo debajo del título y metadatos del artí
 
 Para saber más sobre cómo personalizarlo, consulta [la documentación sobre la Tabla de contenido](/es/blog/toc/).
 
+### Enlace a los artículos anterior y siguiente
+
+| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
+|:------:|:-------:|:-------------:|:------------------:|:-------------------:|
+|   ✅   |   ✅   |      ✅       |         ✅         |         ❌         |
+
+Muestra enlaces a los artículos anterior y siguiente en la parte inferior de los posts. Se ve así:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp", alt="Enlaces a los artículos anterior y siguiente", full_width=true) }}
+
+Para activar esta función, configura `show_previous_next_article_links = true`.
+
+Por defecto, esta sección de navegación tendrá el ancho completo del sitio (igual que la barra de navegación de la parte superior). Para hacerla más estrecha, coincidiendo con el ancho del artículo, establece `previous_next_article_links_full_width = false`.
+
+Esta opción también sigue la jerarquía.
+
 ### Enlaces de retorno en notas al pie
 
 | Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |

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

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2023-12-31
+updated = 2024-01-06
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -135,9 +135,9 @@ 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="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") }}
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/browser_theme_color_light.webp", dark_src="blog/mastering-tabi-settings/img/browser_theme_color_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.
+You can set it in `config.toml` like `browser_theme_color = "#087e96"`. If you'd like different colours for dark/light mode, you can set an array of colours with `browser_theme_color = ["#ffffff", "#000000"]`. The first colour will be used for light mode, the second for dark mode.
 
 This variable accepts any valid CSS colour, so you can use keywords (e.g. `blue`), hex codes (e.g. `#087e96`) or RGB/HSL values (e.g. `rgb(8, 126, 150)`).
 
@@ -244,7 +244,18 @@ title = "Archive"
 template = "archive.html"
 ```
 
-By default, the archive will list posts located in `/blog/`. If you'd like to change this, you can set `section_path = "/another-path/"` in the `[extra]` section of the `_index.md` file. Make sure to include the trailing slash.
+By default, the archive will list posts located in `blog/`. To customise this, you can modify the `[extra]` section of the `_index.md` file:
+
+- **For a single source path**: Set `section_path = "your-path/"` to list posts from a specific directory. Make sure to include the trailing slash.
+
+- **For multiple source paths**: If you want to aggregate posts from various directories, `section_path` can be specified as a list of paths. For example:
+
+  ```toml
+  [extra]
+  section_path = ["blog/", "notes/", "path-three/"]
+  ```
+
+**Note**: the Archive page will only list posts that have a date in their front matter.
 
 ### Tags
 
@@ -403,6 +414,22 @@ Enable the table of contents right below the post's title and metadata with `toc
 
 Read more about the table of contents and how to customise it by reading [the docs](/blog/toc/).
 
+### Previous and Next Article Links
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
+|  ✅  |   ✅    |      ✅       |         ✅        |         ❌          |
+
+Displays links to the previous and next articles at the bottom of posts. It looks like this:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_light.webp", dark_src="blog/mastering-tabi-settings/img/show_previous_next_article_links_dark.webp" alt="Previous and next article links", full_width=true) }}
+
+To activate this feature, set `show_previous_next_article_links = true`.
+
+By default, this navigation section will have the full width of the site (same as the navigation bar at the top). To make it narrower, matching the article width, set `previous_next_article_links_full_width = false`.
+
+This setting also follows the hierarchy.
+
 ### Footnote Backlinks
 
 | Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |

sass/parts/_misc.scss

@@ -87,7 +87,7 @@ a:not(.no-hover-padding):hover::after {
     left: -0.15em;
     z-index: -1;
     background-color: var(--primary-color);
-    max-width: 105%;  // This fixes multi-line links (see #225)
+    max-width: 105%; // This fixes multi-line links (see #225)
     content: "";
 }
 
@@ -170,6 +170,7 @@ details summary {
 
 .interactive-icon {
     cursor: pointer;
+
     path {
         fill: var(--text-color);
     }
@@ -178,3 +179,28 @@ details summary {
         fill: var(--meta-color);
     }
 }
+
+.article-navigation {
+    display: flex;
+    margin-top: 2rem;
+    border-top: var(--divider-color) solid 0.5px;
+    padding-top: 2rem;
+
+    div:first-child {
+        flex: 1;
+        text-align: left;
+    }
+
+    div:last-child {
+        flex: 1;
+        text-align: right;
+    }
+
+    @media (max-width: 600px) {
+        flex-direction: column;
+
+        div {
+            text-align: center !important;
+        }
+    }
+}

templates/archive.html

@@ -9,16 +9,24 @@
 
 <div class="archive">
     <ul class="list-with-title">
-        {%- set section_path = section.extra.section_path | default(value="blog/") -%}
-        {%- if lang == config.default_language %}
-            {%- set section_item = get_section(path=section_path ~ "_index.md") %}
-        {%- else %}
-            {%- set section_item = get_section(path=section_path ~ "_index." ~ lang ~ ".md") %}
+        {%- set source_paths = section.extra.section_path | default(value="blog/") -%}
+        {%- if source_paths is iterable -%}
+            {%- set paths = source_paths -%}
+        {%- else -%}
+            {%- set paths = [source_paths] -%}
         {%- endif %}
+        {%- set all_posts = [] -%}
+        {%- for path in paths -%}
+            {%- if lang == config.default_language %}
+                {%- set section_item = get_section(path=path ~ "_index.md") -%}
+            {%- else %}
+                {%- set section_item = get_section(path=path ~ "_index." ~ lang ~ ".md") -%}
+            {%- endif %}
+            {%- set_global all_posts = all_posts | concat(with=section_item.pages) -%}
+        {%- endfor %}
 
-        {% for year, posts in
-        section_item.pages | group_by(attribute="year") %} {% if posts | length > 0
-        %}
+        {% for year, posts in all_posts | group_by(attribute="year") %}
+        {% if posts | length > 0 %}
         <li>
             <h2 class="listing-title">{{ year }}</h2>
             <ul class="listing">
@@ -29,13 +37,13 @@ <h2 class="listing-title">{{ year }}</h2>
                             {{ post.date | date(format="%d %b", locale=date_locale) }}
                         </span>
                     </div>
-                    <a href="{{ post.permalink }}" title="{{ post.title }}"
-                        >{{ post.title }}</a>
+                    <a href="{{ post.permalink }}" title="{{ post.title }}">{{ post.title }}</a>
                 </li>
                 {% endfor %}
             </ul>
-            {% endif %} {% endfor %}
         </li>
+        {% endif %}
+        {% endfor %}
     </ul>
 </div>
 

templates/page.html

@@ -22,6 +22,8 @@
     "show_reading_time",
     "show_remote_changes",
     "toc",
+    "show_previous_next_article_links",
+    "previous_next_article_links_full_width",
 ] %}
 
 <table>
@@ -129,6 +131,27 @@ <h3>TL;DR:</h3>
             {{ throw(message="ERROR: Multiple comment systems have been enabled for the same page. Check your config.toml and individual page settings to ensure only one comment system is activated at a time.") }}
         {% endif %}
 
+        {% if macros_settings::evaluate_setting_priority(setting="show_previous_next_article_links", page=page, default_global_value=true) == "true" %}
+            {%- if page.lower or page.higher -%}
+                {% if macros_settings::evaluate_setting_priority(setting="previous_next_article_links_full_width", page=page, default_global_value=true) == "true" %}
+                    {%- set full_width_class = "full-width" -%}
+                {% endif %}
+            <nav class="{{ full_width_class | default(value="") }} article-navigation">
+                <div>
+                {%- if page.lower -%}
+                <a href="{{ page.lower.permalink | safe }}">&#8249; {{ page.lower.title | truncate(length=100) }}</a>
+                {%- endif -%}
+                </div>
+                <div>
+                {%- if page.higher -%}
+                <a href="{{ page.higher.permalink | safe }}"> {{ page.higher.title | truncate(length=100) }} &#8250;</a>
+                {%- endif -%}
+                </div>
+            </nav>
+            {%- endif -%}
+        {%- endif -%}
+
+        {# Comments #}
         {% if comment_system %}
             {% include "partials/comments.html" %}
         {% endif %}