💥 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.
This commit is contained in:
welpo 2024-11-17 00:38:32 +01:00
parent f93def0692
commit a7833299ff
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
46 changed files with 421 additions and 40 deletions

View file

@ -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: