✨ feat(tags): add `compact_tags` option (#232)

Co-authored-by: arichtman <10679234+arichtman@users.noreply.github.com>

config.toml

@@ -129,6 +129,11 @@ short_date_format = ""
 # Custom separator used in title tag and posts metadata (between date, time to read, and tags).
 separator = "•"
 
+# Use a shorter layout for All tags listing.
+# Default: tag_name – n post[s]
+# Compact: tag_name^n (superscript number)
+compact_tags = false
+
 # Invert the order of the site title and page title in the browser tab.
 # Example: true => "Blog • ~/tabi", false => "~/tabi • Blog"
 invert_title_order = false

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-04
+updated = 2023-12-30
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -142,6 +142,20 @@ Pots establir-ho a `config.toml` com a `browser_theme_colour = "#087e96"`. Si vo
 
 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)`).
 
+### Etiquetes compactes
+
+| Pàgina | Secció | `config.toml` | Segueix la jerarquia | Requereix JavaScript |
+|:------:|:------:|:-------------:|:-----------------:|:--------------------:|
+|   ❌   |   ❌   |      ✅       |         ❌        |          ❌          |
+
+Per defecte, la [pàgina d'etiquetes](/tags) mostra les etiquetes com:
+
+[NomEtiqueta](#) — n entrada[es]
+
+Establir `compact_tags = true` les mostrarà com:
+
+[NomEtiqueta](#) <sup>n</sup>
+
 ---
 
 ## Integració amb repositoris Git

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-04
+updated = 2023-12-30
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -140,6 +140,20 @@ Puedes establecerlo en `config.toml` como `browser_theme_colour = "#087e96"`. Si
 
 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)`).
 
+### Etiquetas compactas
+
+| Página | Sección | `config.toml` | Sigue la jerarquía | Requiere JavaScript |
+|:------:|:-------:|:-------------:|:---------------:|:-------------------:|
+|   ❌   |   ❌    |      ✅       |        ❌        |         ❌          |
+
+Por defecto, la [página de etiquetas](/es/tags) muestra las etiquetas así:
+
+[NombreEtiqueta](#) — n publicación[es]
+
+Establecer `compact_tags = true` mostrará las mismas de este modo:
+
+[NombreEtiqueta](#) <sup>n</sup>
+
 ---
 
 ## Integración con repositorios Git

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-04
+updated = 2023-12-30
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -142,6 +142,20 @@ You can set it in `config.toml` like `browser_theme_colour = "#087e96"`. If you'
 
 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)`).
 
+### Compact Tags
+
+| Page | Section | `config.toml` | Follows Hierarchy | Requires JavaScript |
+|:----:|:-------:|:-------------:|:-----------------:|:-------------------:|
+|  ❌  |   ❌    |      ✅       |         ❌        |         ❌          |
+
+By default, the [tags page](/tags) displays tags as:
+
+[TagName](#) — n post[s]
+
+Setting `compact_tags = true` will display them as:
+
+[TagName](#) <sup>n</sup>
+
 ---
 
 ## Git Repository Integration

templates/tags/list.html

@@ -9,15 +9,30 @@
 <div class="tag-cloud">
     <ul class="tags">
         {%- for term in terms -%}
-            <li class="tags-item"><a href="{{ term.permalink | safe }}">
-                {{ term.name }}</a>
-                – {{ term.pages | length }}{%- if term.pages | length == 1 %}
-                {# Only one post. Singular. #}
-                    {{- macros_translate::translate(key="post", default="post", language_strings=language_strings) -}}
-                {% elif term.pages | length > 1 %}
-                {# More than one post per tag. Plural. #}
-                    {{- macros_translate::translate(key="posts", default="posts", language_strings=language_strings) -}}
-                {%- endif -%}
+            <li class="tags-item">
+                {% if config.extra.compact_tags %}
+                    {# Shows the number of posts per tag as a superscript #}
+                    <a href="{{ term.permalink | safe }}"
+                       aria-label="{{ term.name }} – 
+                        {{ term.pages | length }} 
+                        {% if term.pages | length == 1 -%}
+                            {{- macros_translate::translate(key="post", default="post", language_strings=language_strings) -}}
+                        {%- else -%}
+                            {{- macros_translate::translate(key="posts", default="posts", language_strings=language_strings) -}}
+                        {%- endif -%}">
+                        {{ term.name }}
+                    </a> <sup>{{ term.pages | length }}</sup>
+                {% else %}
+                    <a href="{{ term.permalink | safe }}">
+                        {{ term.name }}</a>
+                        – {{ term.pages | length }}{%- if term.pages | length == 1 %}
+                        {# Only one post. Singular. #}
+                            {{- macros_translate::translate(key="post", default="post", language_strings=language_strings) -}}
+                        {% elif term.pages | length > 1 %}
+                        {# More than one post per tag. Plural. #}
+                            {{- macros_translate::translate(key="posts", default="posts", language_strings=language_strings) -}}
+                        {%- endif -%}
+                {% endif %}
             </li>
         {%- endfor -%}
     </ul>

theme.toml

@@ -108,6 +108,11 @@ short_date_format = ""
 # Custom separator used in title tag and posts metadata (between date, time to read, and tags).
 separator = "•"
 
+# Use a shorter layout for All tags listing.
+# Default: tag_name – n post[s]
+# Compact: tag_name^n (superscript number)
+compact_tags = false
+
 # Invert the order of the site title and page title in the browser tab.
 # Example: true => "Blog • ~/tabi", false => "~/tabi • Blog"
 invert_title_order = false