💥 feat!: add tag filtering for projects (#431)

- Card (project) images no longer require manual top/bottom margin
adjustments for proper spacing. Action needed: Review existing card
images as previous manual margin adjustments may now be
unnecessary/excessive.
- Sites using `cards.html` with tags will now load JavaScript by
default when tags are present. To maintain no-JS behaviour, explicitly
set `enable_cards_tag_filtering = false` in either `config.toml` or the
`_index.md` file where `cards.html` is used.

config.toml

@@ -231,6 +231,12 @@ compact_tags = false
 # Default: "name".
 tag_sorting = "name"
 
+# Show clickable tags above cards.html template (e.g. projects/) to filter the displayed items.
+# Loads JS to filter. If JS is disabled, the buttons are links to the tag's page.
+# Can be set at the section or config.toml level, following the hierarchy: section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
+# Default: true
+enable_cards_tag_filtering = true
+
 # 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/javascript/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Sense JavaScript obligatori"
 date = 2023-01-06
-updated = 2024-08-28
+updated = 2024-11-16
 description = "JavaScript només s'utilitza quan HTML i CSS no són suficients."
 
 [taxonomies]
@@ -29,6 +29,7 @@ Les següents opcions es poden especificar per a publicacions, seccions i global
 - [**Diagrames de Mermaid**](@/blog/shortcodes/index.ca.md#diagrames-de-mermaid). Habilitat configurant `mermaid = true` (~2.5 MB).
 - [**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)
 - [**Mostrar ruta/URL a blocs de codi**](@/blog/shortcodes/index.ca.md#mostrar-ruta-o-url). S'activa configurant `add_src_to_code_block = true`. (~400 bytes)
+- [**Filtratge per etiquetes** per a graelles de targetes](@/blog/mastering-tabi-settings/index.ca.md#filtrar-projectes) (p. ex. [projectes](@/projects/_index.ca.md)) (~2KB). S'habilita configurant `enable_cards_tag_filtering = true`.
 
 Per especificar aquestes opcions:
 

content/blog/javascript/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Sin JavaScript obligatorio"
 date = 2023-01-06
-updated = 2024-08-28
+updated = 2024-11-16
 description = "JavaScript solo se utiliza cuando HTML y CSS no son suficientes."
 
 [taxonomies]
@@ -29,6 +29,7 @@ Las siguientes opciones pueden especificarse para publicaciones, secciones y a n
 - [**Diagramas de Mermaid**](@/blog/shortcodes/index.es.md#diagramas-de-mermaid). Habilitado al configurar `mermaid = true` (~2.5 MB).
 - [**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).
 - [**Mostrar ruta/URL en bloques de código**](@/blog/shortcodes/index.es.md#mostrar-ruta-o-url). Se activa configurando `add_src_to_code_block = true`. (~400 bytes)
+- [**Filtraje por etiquetas** para cuadrículas de tarjetas](@/blog/mastering-tabi-settings/index.es.md#filtrar-proyectos) (p. ej. [proyectos](@/projects/_index.es.md)) (~2KB). Habilitado al configurar `enable_cards_tag_filtering = true`.
 
 Para especificar estas opciones:
 

content/blog/javascript/index.md

@@ -1,7 +1,7 @@
 +++
 title = "No mandatory JavaScript"
 date = 2023-01-06
-updated = 2024-08-28
+updated = 2024-11-16
 description = "JavaScript is only used when HTML and CSS aren't enough."
 
 [taxonomies]
@@ -29,6 +29,7 @@ The following settings can be specified for posts, sections and globally, follow
 - [**Mermaid diagrams**](@/blog/shortcodes/index.md#mermaid-diagrams). Enabled by setting `mermaid = true` (~2.5 MB).
 - [**One-click copy of code blocks**](@/blog/markdown/index.md#code-block). Enabled by setting `copy_button = true`. (~700 bytes)
 - [**Showing source (path or URL) in code blocks**](@/blog/shortcodes/index.md#show-source-or-path). Enabled by setting `add_src_to_code_block = true`. (~300 bytes)
+- [**Tag filtering** for card grids](@/blog/mastering-tabi-settings/index.md#filtering-projects) (e.g. [projects](@/projects/_index.md)) (~2KB). Enabled by setting `enable_cards_tag_filtering = true`.
 
 To specify these settings:
 

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 = 2024-11-14
+updated = 2024-11-16
 description = "Descobreix les múltiples maneres en què pots personalitzar tabi."
 
 [taxonomies]
@@ -391,6 +391,33 @@ 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"`.
 
+#### Filtrar projectes
+
+Si afegeixes etiquetes als teus projectes, veuràs un filtre d'etiquetes:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Pàgina de projectes amb filtre d'etiquetes", full_width=true) }}
+
+El sistema de filtratge d'etiquetes utilitza millora progressiva:
+
+- Sense JavaScript: Les etiquetes enllacen directament a pàgines d'etiquetes dedicades (per exemple, `/tags/nom-de-l-etiqueta`).
+- Amb JavaScript: Filtratge instantani, sincronització d'URL (#nom-etiqueta) i navegació amb el teclat.
+
+Per desactivar aquesta funció, estableix `enable_cards_tag_filtering = false` a la secció `[extra]` del fitxer `projects/_index.md` o a `config.toml`.
+
+{% admonition(type="tip") %}
+
+Per filtrar projectes per etiquetes, necessites establir etiquetes a la front matter de cada projecte. Per exemple:
+
+```toml
+title = "nom del projecte"
+weight = 40
+
+[taxonomies]
+tags = ["etiqueta", "etiqueta 2", "tercera etiqueta"]
+```
+
+{% end %}
+
 ### Arxiu
 
 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:

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 = 2024-11-14
+updated = 2024-11-16
 description = "Descubre las múltiples maneras en que puedes personalizar tabi."
 
 [taxonomies]
@@ -391,6 +391,33 @@ Cuando un usuario haga clic en la imagen o el título de un proyecto, será llev
 
 La página del proyecto individual se renderiza con la plantilla predeterminada, a menos que establezcas otra, por ejemplo, `template = "info-page.html"`.
 
+#### Filtrar proyectos
+
+Si agregas etiquetas a tus proyectos, verás un filtro de etiquetas:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Página de proyectos con filtro de etiquetas", full_width=true) }}
+
+El sistema de filtrado de etiquetas utiliza mejora progresiva:
+
+- Sin JavaScript: Las etiquetas enlazan directamente a páginas de etiquetas dedicadas (por ejemplo, `/tags/nombre-etiqueta`).
+- Con JavaScript: Filtrado instantáneo, sincronización de URL (#nombre-etiqueta) y navegación por teclado.
+
+Para desactivar esta función, establece `enable_cards_tag_filtering = false` en la sección `[extra]` del archivo `projects/_index.md` o en `config.toml`.
+
+{% admonition(type="tip") %}
+
+Para filtrar proyectos por etiquetas, necesitas establecer etiquetas en el front matter de cada proyecto. Por ejemplo:
+
+```toml
+title = "nombre del proyecto"
+weight = 40
+
+[taxonomies]
+tags = ["etiqueta uno", "etiqueta 2", "tercera etiqueta"]
+```
+
+{% end %}
+
 ### 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 encabezado:

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

@@ -1,7 +1,7 @@
 +++
 title = "Mastering tabi Settings: A Comprehensive Guide"
 date = 2023-09-18
-updated = 2024-11-14
+updated = 2024-11-16
 description = "Discover the many ways you can customise your tabi site."
 
 [taxonomies]
@@ -356,7 +356,7 @@ Clicking on this link will take you to the commit history of the post, where you
 
 ### Projects
 
-tabi has a built-in projects template. To enable it, you can create a directory in `content/projects/`. There, you can create a `_index.md` file with the following front matter:
+tabi has a built-in projects (cards) template. To enable it, you can create a directory in `content/projects/`. There, you can create a `_index.md` file with the following front matter:
 
 ```toml
 title = "Projects"
@@ -396,6 +396,33 @@ When a user clicks on the image or title of a project, they will be taken to the
 
 The individual project's page is rendered with the default template, unless you set another one, e.g. `template = "info-page.html"`.
 
+#### Filtering Projects
+
+If you add tags to your projects, you will see a tag filter:
+
+{{ dual_theme_image(light_src="blog/mastering-tabi-settings/img/projects_tag_filter_light.webp", dark_src="blog/mastering-tabi-settings/img/projects_tag_filter_dark.webp", alt="Projects page with tag filter", full_width=true) }}
+
+The tag filtering system uses progressive enhancement:
+
+- Without JavaScript: Tags link directly to dedicated tag pages (e.g. `/tags/tag-name`)
+- With JavaScript: Instant filtering, URL syncing (#tag-name), and keyboard navigation
+
+To disable this feature, set `enable_cards_tag_filtering = false` in the `[extra]` section of the `projects/_index.md` file or in `config.toml`.
+
+{% admonition(type="tip") %}
+
+To filter projects by tags, you need to set tags in the front matter of each project. For example:
+
+```toml
+title = "project name"
+weight = 40
+
+[taxonomies]
+tags = ["tag one", "tag 2", "third tag"]
+```
+
+{% end %}
+
 ### Archive
 
 Adding an archive page is similar to adding a projects page. You can create a directory in `content/archive/`. There, you can create a `_index.md` file with the following front matter:

content/projects/doteki/index.ca.md

@@ -3,6 +3,9 @@ title = "dōteki"
 description = "Afegeix contingut dinàmic al teu perfil de GitHub amb un sistema intuïtiu de plugins."
 weight = 30
 
+[taxonomies]
+tags = ["GitHub Actions", "automatització", "Python"]
+
 [extra]
 local_image = "projects/doteki/doteki_logo.webp"
 social_media_card = "social_cards/projects_doteki.jpg"

content/projects/doteki/index.es.md

@@ -3,6 +3,9 @@ title = "dōteki"
 description = "Añade contenido dinámico a tu perfil de GitHub con un sistema intuitivo de plugins."
 weight = 30
 
+[taxonomies]
+tags = ["GitHub Actions", "automatización", "Python"]
+
 [extra]
 local_image = "projects/doteki/doteki_logo.webp"
 social_media_card = "social_cards/projects_doteki.jpg"

content/projects/doteki/index.md

@@ -3,6 +3,9 @@ title = "dōteki"
 description = "Add dynamic content to your GitHub profile through an intuitive plugin system."
 weight = 30
 
+[taxonomies]
+tags = ["GitHub Actions", "automation", "Python"]
+
 [extra]
 local_image = "projects/doteki/doteki_logo.webp"
 social_media_card = "social_cards/projects_doteki.jpg"

content/projects/git-sumi/index.ca.md

@@ -3,6 +3,9 @@ title = "git-sumi"
 description = "El linter de missatges de commit no opinat basat en Rust."
 weight = 10
 
+[taxonomies]
+tags = ["Git", "Rust", "Continuous Integration", "GitHub Actions", "CLI", "automatització"]
+
 [extra]
 local_image = "projects/git-sumi/git-sumi_logo.webp"
 social_media_card = "social_cards/projects_git-sumi.jpg"

content/projects/git-sumi/index.es.md

@@ -3,6 +3,9 @@ title = "git-sumi"
 description = "El linter de mensajes de commit no opinado basado en Rust."
 weight = 10
 
+[taxonomies]
+tags = ["Git", "Rust", "Continuous Integration", "GitHub Actions", "CLI", "automatización"]
+
 [extra]
 local_image = "projects/git-sumi/git-sumi_logo.webp"
 social_media_card = "social_cards/projects_git-sumi.jpg"

content/projects/git-sumi/index.md

@@ -3,6 +3,9 @@ title = "git-sumi"
 description = "The non-opinionated Rust-based commit message linter."
 weight = 10
 
+[taxonomies]
+tags = ["Git", "Rust", "Continuous Integration", "GitHub Actions", "CLI", "automation"]
+
 [extra]
 local_image = "projects/git-sumi/git-sumi_logo.webp"
 social_media_card = "social_cards/projects_git-sumi.jpg"

content/projects/nani/index.ca.md

@@ -3,6 +3,9 @@ title = "nani"
 description = "Script Bash per crear URLs públiques a partir d'arxius o text en servidors remots."
 weight = 50
 
+[taxonomies]
+tags = ["bash", "CLI"]
+
 [extra]
 local_image = "projects/nani/nani_logo.webp"
 canonical_url = "https://osc.garden/ca/projects/tabi/"

content/projects/nani/index.es.md

@@ -3,6 +3,9 @@ title = "nani"
 description = "Script Bash para crear URLs públicas a partir de archivos o texto en servidores remotos."
 weight = 50
 
+[taxonomies]
+tags = ["bash", "CLI"]
+
 [extra]
 local_image = "projects/nani/nani_logo.webp"
 canonical_url = "https://osc.garden/es/projects/tabi/"

content/projects/nani/index.md

@@ -3,6 +3,9 @@ title = "nani"
 description = "Bash script to create public URLs from files or text on remote servers."
 weight = 50
 
+[taxonomies]
+tags = ["bash", "CLI"]
+
 [extra]
 local_image = "projects/nani/nani_logo.webp"
 canonical_url = "https://osc.garden/projects/tabi/"

content/projects/ramu/index.ca.md

@@ -3,8 +3,11 @@ title = "ラム (ramu)"
 description = "Una aplicació web per practicar la lectura i comprensió auditiva de nombres en japonès."
 weight = 30
 
+[taxonomies]
+tags = ["Japonès", "interactiu", "web app", "web", "PWA", "JavaScript"]
+
 [extra]
-local_image = "projects/ramu/ramu_logo.png"
+local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/ca/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
 +++

content/projects/ramu/index.es.md

@@ -3,8 +3,11 @@ title = "ラム (ramu)"
 description = "Una aplicación web para practicar la lectura y comprensión auditiva de números en japonés."
 weight = 30
 
+[taxonomies]
+tags = ["Japonés", "interactivo", "web app", "web", "PWA", "JavaScript"]
+
 [extra]
-local_image = "projects/ramu/ramu_logo.png"
+local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/es/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
 +++

content/projects/ramu/index.md

@@ -3,8 +3,11 @@ title = "ラム (ramu)"
 description = "A web app to practice reading and listening to Japanese numbers."
 weight = 30
 
+[taxonomies]
+tags = ["Japanese", "interactive", "web app", "web", "PWA", "JavaScript"]
+
 [extra]
-local_image = "projects/ramu/ramu_logo.png"
+local_image = "projects/ramu/ramu_logo.webp"
 canonical_url = "https://osc.garden/projects/ramu/"
 social_media_card = "social_cards/projects_ramu.jpg"
 +++

content/projects/streaming-royalties-calculator/index.ca.md

@@ -3,6 +3,9 @@ title = "Calculadora de royalties de streaming"
 description = "Una eina per calcular els royalties de streaming per a músics."
 weight = 45
 
+[taxonomies]
+tags = ["música", "web app", "web", "JavaScript", "anàlisi de dades"]
+
 [extra]
 local_image = "projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp"
 canonical_url = "https://osc.garden/ca/projects/streaming-royalties-calculator/"

content/projects/streaming-royalties-calculator/index.es.md

@@ -3,6 +3,9 @@ title = "Calculadora de royalties de streaming"
 description = "Una herramienta para calcular los royalties de streaming para músicos."
 weight = 45
 
+[taxonomies]
+tags = ["música", "web app", "web", "JavaScript", "análisis de datos"]
+
 [extra]
 local_image = "projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp"
 canonical_url = "https://osc.garden/es/projects/streaming-royalties-calculator/"

content/projects/streaming-royalties-calculator/index.md

@@ -3,6 +3,9 @@ title = "Streaming Royalties Calculator"
 description = "A tool to calculate streaming royalties for musicians."
 weight = 45
 
+[taxonomies]
+tags = ["music", "web app", "web", "JavaScript", "data analysis"]
+
 [extra]
 local_image = "projects/streaming-royalties-calculator/streaming-royalties-calculator_logo.webp"
 canonical_url = "https://osc.garden/projects/streaming-royalties-calculator/"

content/projects/tabi/index.ca.md

@@ -3,6 +3,9 @@ title = "tabi"
 description = "Un tema de Zola ràpid, lleuger i modern amb suport multilingüe."
 weight = 40
 
+[taxonomies]
+tags = ["web", "JavaScript"]
+
 [extra]
 local_image = "projects/tabi/tabi.webp"
 canonical_url = "https://osc.garden/ca/projects/tabi/"
@@ -11,7 +14,7 @@ social_media_card = "social_cards/ca_projects_tabi.jpg"
 
 [**tabi**](https://github.com/welpo/tabi) és un tema modern i ric en funcionalitat per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics molt ràpid.
 
-{{ full_width_image(src="light_dark_tabi.webp", alt="Modes clar i fosc de tabi") }}
+{{ full_width_image(src="https://cdn.jsdelivr.net/gh/welpo/tabi@main/light_dark_screenshot.png", alt="Modes clar i fosc de tabi") }}
 
 #### [Veure a GitHub](https://github.com/welpo/tabi) • [Demo i documentación](https://welpo.github.io/tabi/ca/) {.centered-text}
 

content/projects/tabi/index.es.md

@@ -3,6 +3,9 @@ title = "tabi"
 description = "Un tema de Zola rápido, ligero y moderno con soporte multilingüe."
 weight = 40
 
+[taxonomies]
+tags = ["web", "JavaScript"]
+
 [extra]
 local_image = "projects/tabi/tabi.webp"
 canonical_url = "https://osc.garden/es/projects/tabi/"
@@ -11,7 +14,7 @@ social_media_card = "social_cards/es_projects_tabi.jpg"
 
 [**tabi**](https://github.com/welpo/tabi) es un tema moderno y rico en funcionalidad para [Zola](https://www.getzola.org/), un generador de sitios web estáticos muy rápido.
 
-{{ full_width_image(src="light_dark_tabi.webp", alt="Modos claro y oscuro de tabi") }}
+{{ full_width_image(src="https://cdn.jsdelivr.net/gh/welpo/tabi@main/light_dark_screenshot.png", alt="Modos claro y oscuro de tabi") }}
 
 #### [Ver en GitHub](https://github.com/welpo/tabi) • [Demo y documentación](https://welpo.github.io/tabi/es/) {.centered-text}