ER: Add filtering to External Resources on Toolkit page

[daras-cu]

Emergent Requirement - Problem

We need to add filtering functionality to the Toolkit page so that selected filters are applied to the External Resources cards in addition to the Guide Pages cards.

Issue you discovered this emergent requirement in

• Remove trailing '?' on path /toolkit/ #7636

Date discovered

2026-1-12

Did you have to do something temporarily

• YES
• NO

Who was involved

@daras-cu
@ExperimentsInHonesty

What happens if this is not addressed

Irrelevant items will remain visible under External Resources when users apply filters.

Resources

• Toolkit Page: https://www.hackforla.org/toolkit/
• JS file containing filtering function: assets/js/toolkit.js
• HTML file template for toolkit cards: includes/current-guides.html
• YAML file with External Resource card data: data/internal/toolkitresources.yml
• HTML template for Guide Page cards: /includes/guide-card.html

Recommended Action Items

• Make a new issue
• Discuss with team
• Let a Team Lead know

Potential solutions [draft]

Additional Information:

Currently, the Toolkit page includes two types of cards:

• Guide Pages cards, e.g. 2FA Guide, Building a Survey Reporting Dashboard
• External Resources cards, e.g. Figma, GitHub

The filters on the Toolkit page work correctly on the Guide Pages cards, and this functionality should not be changed. The purpose of this issue is to add filtering to the External Resources cards.

Action Items:

• In /assets/js/toolkit.js, examine the applyFilters and retrieveFilterCategories functions to understand how filters are currently generated and applied to the Guide Page cards. The following files will also be helpful to view to understand how the External Resource cards are created:
  • includes/current-guides.html
  • data/internal/toolkitresources.yml
  • includes/guide-card.html
• In current-guides.html, make the following changes:
  • External Resource card div elements should have an attribute data-project-Tools alongside the data-article-type attribute. data-project-Tools should be populated from the tools listed in toolkitresources.yml.
  • Each External Resource card div should have the class resource-card.
• In toolkit.js, edit the retrieveFilterCategories function to add Practice Area and Tools categories from External Resource cards to the filters list, using the attributes you added in the previous steps.
• Edit the applyFilters function to filter the External Resources cards when a Practice Area or Tools filter is selected. The other filter categories Status, Source, and Contributors will not apply to External Resources, so if one of them is selected, all External Resource cards should be hidden.
• Test that the filters work as expected to filter both Guide Cards and External Resource cards.
• Verify that the URL parameters are still updated when filters are selected and deselected.
• If it was necessary to make changes to other functions or files in the course of this issue, make note of these additional changes in your PR.

[HackforLABot]

Hi @santi-jose, thank you for taking up this issue! Hfla appreciates you :)

Do let fellow developers know about your:-
i. Availability: (When are you available to work on the issue/answer questions other programmers might have about your issue?)
ii. ETA: (When do you expect this issue to be completed?)

You're awesome!

P.S. - You may not take up another issue until this issue gets merged (or closed). Thanks again :)