Filter project cards by tags

[noeddl]

Feature Request

Summary

I would like to have a list of tags on the "Projects" page that are associated with my projects. When a user clicks on one of these tags, only the project cards with that specific tag would be displayed.

Motivation

This feature would give visitors a quick overview of the types of projects I’ve done and allow them to filter projects based on category. It could improve navigation and make it easier for users to find relevant projects.

[welpo]

Hi!

Thanks for requesting this feature. Are you picturing a UX similar to this https://tailwind-nextjs-starter-blog.vercel.app/tags/tailwind ?

(I'd move the tags to the top, and instead of posts, we'd show projects)

[noeddl]

Yes, similar to this but with the tags at the top of the page, as you said.

[welpo]

I like the idea! Hopefully it's possible with pure CSS+HTML.

I'll look into it soon~

[welpo]

Hi! I looked into it:

• It's not possible to do with pure HTML+CSS. For that to work, we'd need either:
  • Zola being able to template CSS files
  • (default) CSP allowing inline styles

So it looks like it'll need JS. Not ideal, but it should only be a few lines.

Now, some questions:

• Would you expect the tags to be shown on the project cards? Below the image, for example
• If so, would they be clickable? What would happen upon clicking? Same as clicking on the tag at the top (full list), i.e. filter the page?
• Would you use a different taxonomy for the project tags, or re-use tags (for blog posts)? (assuming you use tags in posts). In my tests, I used tags. This meant projects were shown on the tag page (e.g. https://welpo.github.io/tabi/tags/). Not sure how I felt about this.

Would love some thoughts before thinking about implementation :)

[noeddl]

Hi, and thanks for looking into this!

Would you expect the tags to be shown on the project cards? Below the image, for example?

In my original idea, I envisioned only a tag list at the top, without additional tags on each card. I think that alone would work well and keep the page less cluttered. 🙂

If so, would they be clickable? What would happen upon clicking? Same as clicking on the tag at the top (full list), i.e., filter the page?

I'm not entirely sure. I looked again at the Tailwind blog example you mentioned above, where tags below the post titles filter the page when clicked. I think that works well there, so it could be a nice addition here too. Alternatively, clicking a tag on a project card could lead to that tag's dedicated page, though I wonder if that might be confusing for users. 🤔

Would you use a different taxonomy for the project tags or re-use tags (for blog posts)?

I've thought about this, and for now, I'd lean towards re-using tags for projects. Although I don't have blog posts yet, I imagine they'd have similar tags, which would make it convenient to have projects and posts listed together on tag pages. That said, there may be cases where separate taxonomies would be beneficial.

Thanks again! Let me know if you need more input.

[welpo]

Alright, I've got something. Care you give it a test and share your thoughts? Here's the demo: https://deploy-preview-431--tabi-demo.netlify.app/projects/

There are some details regarding functionality in the PR #431.

[noeddl]

Wow, this is really cool, thank you! 😍 And the details you describe in the PR seem really well thought out. 👍

[welpo]

Done! I made some little changes to the projects (cards) layout and some more stuff and now it's merged.

Let me know if you encounter any issues!

[noeddl]

Awesome, I will try it out. Thanks for implementing this so quickly!