✨ feat: allow inverting previous/next article links (#261)

- Adds next/previous labels for clarity
- Truncated long titles get "…" appended

Co-authored-by: welpo <welpo@users.noreply.github.com>

config.toml

@@ -138,6 +138,12 @@ katex = 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
 show_previous_next_article_links = false
 
+# Invert order of the links to previous and next articles at the bottom of posts.
+# By default, next articles are on the left side of the page and previous articles are on the right side.
+# To reverse the order (next articles on the right and previous articles on the left), set it to true.
+# 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
+invert_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

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

@@ -475,9 +475,12 @@ Mostra enllaços als articles anterior i següent a la part inferior dels posts.
 
 Per activar aquesta funció, estableix `show_previous_next_article_links = true`.
 
+Per defecte, els articles següents estaran al costat esquerre de la pàgina i els articles anteriors al costat dret.
+Per invertir l'ordre (articles següents al costat dret i articles anteriors al costat esquerre), configura `invert_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.
+Totes aquestes configuracions segueixen la jerarquia.
 
 ### Enllaços de retorn a les notes a peu de pàgina
 

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

@@ -475,9 +475,12 @@ Muestra enlaces a los artículos anterior y siguiente en la parte inferior de lo
 
 Para activar esta función, configura `show_previous_next_article_links = true`.
 
+Por defecto, los artículos siguientes estarán en el lado izquierdo de la página y los artículos anteriores en el lado derecho.
+Para invertir el orden (artículos siguientes en el lado derecho y artículos anteriores en el lado izquierdo), establece `invert_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.
+Todas estas configuraciones siguen la jerarquía.
 
 ### Enlaces de retorno en notas al pie
 

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

@@ -477,9 +477,13 @@ Displays links to the previous and next articles at the bottom of posts. It look
 
 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`.
+By default, next articles will be on the left side of the page and previous articles will be on the right side.
+To reverse the order (next articles on the right and previous articles on the left), set `invert_previous_next_article_links = true`.
 
-This setting also follows the hierarchy.
+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`.
+
+All of these settings follow the hierarchy.
 
 ### Footnote Backlinks
 

sass/parts/_misc.scss

@@ -196,6 +196,14 @@ details summary {
         text-align: right;
     }
 
+    div p {
+        color: var(--meta-color);
+        font-weight: 300;
+        line-height: 1.2rem;
+        font-family: var(--sans-serif-font);
+        letter-spacing: -0.4px;
+    }
+
     @media (max-width: 600px) {
         flex-direction: column;
 

templates/page.html

@@ -23,6 +23,7 @@
     "show_remote_changes",
     "toc",
     "show_previous_next_article_links",
+    "invert_previous_next_article_links",
     "previous_next_article_links_full_width",
 ] %}
 
@@ -133,18 +134,45 @@
 
         {% 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 -%}
+                {% set next_label = macros_translate::translate(key="next", default="Next", language_strings=language_strings) %}
+                {% set prev_label = macros_translate::translate(key="prev", default="Prev", language_strings=language_strings) %}
+                {% if macros_settings::evaluate_setting_priority(setting="invert_previous_next_article_links", page=page, default_global_value=true) == "true" %}
+                    {% if page.higher %}
+                        {% set left_link = page.higher.permalink %}
+                        {% set left_label = prev_label %}
+                        {% set left_title = page.higher.title %}
+                    {% endif %}
+                    {% if page.lower %}
+                        {% set right_link = page.lower.permalink %}
+                        {% set right_label = next_label %}
+                        {% set right_title = page.lower.title %}
+                    {% endif %}
+                {% else %}
+                    {% if page.lower %}
+                        {% set left_link = page.lower.permalink %}
+                        {% set left_label = next_label %}
+                        {% set left_title = page.lower.title %}
+                    {% endif %}
+                    {% if page.higher %}
+                        {% set right_link = page.higher.permalink %}
+                        {% set right_label = prev_label %}
+                        {% set right_title = page.higher.title %}
+                    {% endif %}
+                {% endif %}
                 {% 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 -%}
+                {%- if left_link and left_label and left_title -%}
-                <a href="{{ page.lower.permalink | safe }}">&#8249; {{ page.lower.title | truncate(length=100) }}</a>
+                <a href="{{ left_link | safe }}" aria-label="{{ left_label }}" aria-describedby="left_title">← {{ left_label }}</a>
+                <p aria-hidden="true" id="left_title">{{ left_title | truncate(length=100, end="…") }}</p>
                 {%- endif -%}
                 </div>
                 <div>
-                {%- if page.higher -%}
+                {%- if right_link and right_label and right_title -%}
-                <a href="{{ page.higher.permalink | safe }}"> {{ page.higher.title | truncate(length=100) }} &#8250;</a>
+                <a href="{{ right_link | safe }}" aria-label="{{ right_label }}" aria-describedby="right_title">{{ right_label }} →</a>
+                <p aria-hidden="true" id="right_title">{{ right_title | truncate(length=100, end="…") }}</p>
                 {%- endif -%}
                 </div>
             </nav>

theme.toml

@@ -99,6 +99,12 @@ katex = 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
 show_previous_next_article_links = false
 
+# Invert order of the links to previous and next articles at the bottom of posts.
+# By default, next articles are on the left side of the page and previous articles are on the right side.
+# To reverse the order (next articles on the right and previous articles on the left), set it to true.
+# 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
+invert_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