Skip to content

Add Filtering to External Resources on Toolkit Page #8558

Description

@santi-jose

Prerequisite

  1. Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our Getting Started page and attend an onboarding session.
  2. Before you claim or start working on an issue, please make sure you have read our How to Contribute to Hack for LA Guide.

Overview

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.

Details

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

Filters are currently generated only from Guide Page card attributes and are applied only to Guide Page cards. This functionality should be preserved for the Guide Page cards, and expanded so External Resource cards can also be filtered by 'Practice Area' and 'Tools' selections. This issue requires the following changes:

  1. Update the External Resource card HTML to add a new "tools" data attribute in addition to the existing "practice area" attribute for storing card info, and add a new class to help JS querying these cards.
  2. Update the filter generation JS to include External Resource card attributes, and update the filtering to apply to the External Resource 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.

Resources/Instructions

Activity

  1. added
    ready for merge teamneeds a senior review either to do some re writing or to approve it for ready for prioritization
    on Mar 17, 2026
  2. added and removed
    ready for merge teamneeds a senior review either to do some re writing or to approve it for ready for prioritization
    on Mar 22, 2026
  3. moved this from New Issue Approval to Ready for Prioritization in P: HfLA Website: Project Boardon Mar 22, 2026
  4. moved this from Ready for Prioritization to Prioritized backlog in P: HfLA Website: Project Boardon Apr 28, 2026
  5. moved this from Prioritized backlog to In progress (actively working) in P: HfLA Website: Project Boardon May 26, 2026
  6. 10 remaining items

  7. moved this from Ready for Prioritization to Prioritized backlog in P: HfLA Website: Project Boardon Sep 15, 2026
  8. self-assigned this
    on Sep 23, 2026
  9. HackforLABot commented on Sep 23, 2026

    @HackforLABot
    Contributor

    Hi @Tomomi-K1, 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 :)

  10. moved this from Prioritized backlog to In progress (actively working) in P: HfLA Website: Project Boardon Sep 23, 2026
  11. Tomomi-K1 commented on Sep 23, 2026

    @Tomomi-K1
    Member

    i. Availability: Weekday 10am - 7pm
    ii. ETA: 9/29/2026

  12. Tomomi-K1 commented on Sep 25, 2026

    @Tomomi-K1
    Member

    @daras-cu I have a question, not sure who to ask. Currently External Resources are not included in the count ( take a look at under Tools in Filter section, we see Zoom (0)).

    Image

    When we include the external resources, do we want to update these count also to include the external resource card data? I am assuming that's probably what we want but I wanted to confirm.

  13. daras-cu commented on Sep 26, 2026

    @daras-cu
    Member

    @Tomomi-K1 yes, we do want to include the external resources in this count. If it ends up being overly complex to add that functionality as part of this issue, let me know and we can split it off into an additional issue.

  14. Tomomi-K1 commented on Sep 29, 2026

    @Tomomi-K1
    Member

    @Tomomi-K1 yes, we do want to include the external resources in this count. If it ends up being overly complex to add that functionality as part of this issue, let me know and we can split it off into an additional issue.

    Thank you @daras-cu for the response! I will update the code to include the count 👍

  15. Tomomi-K1 commented on Sep 30, 2026

    @Tomomi-K1
    Member

    @daras-cu I have another question. Do we want to remove text "External Resources" when filter removes all resources cad like below? or in this issue I don't need to worry about that?

    Image
  16. Tomomi-K1 commented on Sep 30, 2026

    @Tomomi-K1
    Member

    @daras-cu I have another question. Do we want to remove text "External Resources" when filter removes all resources cad like below? or in this issue I don't need to worry about that?

    Image

    Discussed in the dev meeting 9/29/2026 -> we can leave "External Resources" text even if resource cards are not shown due to filter.

  17. Tomomi-K1 commented on Oct 1, 2026

    @Tomomi-K1
    Member

    @daras-cu I found existing bug on filtering no result found message. It shows undefined: Github but I believe the undefined supposed to be filter category name? I didn't fix that with my issue. If we need to make an issue let me know. I may need the instruction on how to make it tho 😄

    Image
  18. daras-cu commented on Oct 2, 2026

    @daras-cu
    Member

    @Tomomi-K1 good catch, we definitely need an issue to fix that. The first step is writing an ER, you can just fill in the ER template with the basic info about the problem and your screenshot. It can be pretty simple, one or two sentences explaining the problem and why it needs to be resolved. If you have any ideas about how to fix it, you can add them under "Potential solutions", but this is optional.
    You can find some more info about the ER process in this comment

  19. Tomomi-K1 commented on Oct 3, 2026

    @Tomomi-K1
    Member

    @daras-cu I created a ER for the bug #8819 let me know if I need to update something!

  20. daras-cu commented on Oct 4, 2026

    @daras-cu
    Member

    @Tomomi-K1 thanks for writing the ER, it looks good at first glance so I marked it ready for merge team. We will review it and let you know if it needs any changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Relationships

None yet

Development

No branches or pull requests

Issue actions