💥 feat!: add tag filtering for projects

[welpo]

💥 BREAKING CHANGE

• 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 behavior, explicitly set enable_cards_tag_filtering = false in either config.toml or the _index.md file where cards.html is used.

Summary

Adds interactive tag filtering for card grid layouts (e.g., projects/). Visitors can filter displayed items by clicking tags, with the current filter reflected in the URL (e.g., /projects#javascript).

Related issue

Resolves #422.

Details

Some neat features:

• 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
  • "All projects" button appears only when JS is available

• URL integration:

  • Share filtered views via URL hash (e.g., /projects#javascript)
  • Browser history syncs with filter state
  • Direct links to filtered views work on page load

• Smart UX touches:

  • Visual feedback on filter changes
  • Preserves scroll position during filtering
  • Responsive design adapts to mobile views
  • Clear active state indicators

• Full keyboard support:

  • Space/Enter to toggle filters
  • Tab navigation between filters

Changes

• Post listing now incldues extra images used in cards (local_image or remote_image), below the metadata (if present)
• Added enable_cards_tag_filtering setting (defaults to true)
• New partial filter_card_tags.html for tag filter buttons
• Added filterCards.min.js for interactive filtering behavior
• Added data attributes to cards for tag filtering
• Added styling for filter buttons and states
• Implemented URL-based filtering with browser history support

Accessibility

• Filter buttons use proper ARIA attributes (role="button", aria-pressed)
• Keyboard navigation support (Tab between filters, Space/Enter to toggle)
• Preserves semantic HTML with progressive enhancement
• Maintains no-JS fallback (links to tag pages)

Screenshots

With JS

Filtering projects with automation tag:

Without JS

Links to a tag page. No "All projects" button, as it'd do nothing.

---

Post listing with project image

---

BEFORE: with square images

To add some spacing, you'd need to modify the image and add blank space.

AFTER: with square images

Feels more balanced, no?

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this change
• I have updated theme.toml with a sane default for the feature
• I have made corresponding changes to the documentation:
  • Updated config.toml comments
  • Updated theme.toml comments
  • Updated "Mastering tabi" post in English
  • (Optional) Updated "Mastering tabi" post in Spanish
  • (Optional) Updated "Mastering tabi" post in Catalan

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	0e5e0e0
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/6738e345212bdd0008ec9344
😎 Deploy Preview	https://deploy-preview-431--tabi-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.