Add filtering to external resources on toolkit page

[Tomomi-K1]

Fixes #8558

What changes did you make?

• External Resource on toolkit page can be now filtered with Project Area and Tools ( other categories are not added according to the issue)

• Added data-project-Tools to div for the resource card in [‎_includes/current-guides.html]

• Added toolkit-resource-card class to div for resource card ( issue originally instructed to add resource-card but resource-card is used in sass to format resource card in the different page which changes the current looks of external resource card shown in toolkit page.

• Changed data-article-type to data-practice-Areas to match with .guide-card.html since filtering works with _include/.guide-card.html it makes sense to use data-practice-Areas instead of data-article-type since both are getting data from practice-area. Also this makes filtering function much more simple. I didn’t see any where in the code base articleType dataset was used.

• Removed | downcase | remove: ' ' from data-article-type={{ item.practice-area | downcase | remove: ' ' }}. In _include/guide-card.html, data-project-area shows as it is shown in the front matter like “ Project Management”, to keep the dataset data consistent with .gude-card.html, removing downcase | remove: ‘’ makes sense here.

• Before the change, [data-article-type=“development”] was used to style the GitHub logo image. But since I replaced data-article-type with data-practice-Areas I also updated this sass file to .toolkit-resource-card[data-project-tools="GitHub”].

• Included External Resource Cards into counts shown next to the each filter item by updating updateFilterFrequency function.

• updated toggleNoResultMsgIfNoMatch to avoid showing no results found message when we have no guide card but we still have a external card showing like below image (in this case, I believe we do not want to show no results found message:
  

• I found an existing bug on message that shows when results are not found (mentioned in the issue here. I did not address that bug in this PR.

Why did you make the changes (we will use this info to test)?

• 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.

CodeQL Alerts

After the PR has been submitted and the resulting GitHub actions/checks have been completed, developers should check the PR for CodeQL alert annotations.

Check the PR's comments. If present on your PR, the CodeQL alert looks similar as shown

Please let us know that you have checked for CodeQL alerts. Please do not dismiss alerts.

• I have checked this PR for CodeQL alerts and none were found.
• I found CodeQL alert(s), and (select one):
  • I have resolved the CodeQL alert(s) as noted
  • I believe the CodeQL alert(s) is a false positive (Merge Team will evaluate)
  • I have followed the Instructions below, but I am still stuck (Merge Team will evaluate)

Instructions for resolving CodeQL alerts

If CodeQL alert/annotations appear, refer to How to Resolve CodeQL alerts.

In general, CodeQL alerts should be resolved prior to PR reviews and merging

Screenshots of Proposed Changes To The Website (if any, please do not include screenshots of code changes)

Visuals before changes are applied

-Take a look at the count for each items in Filters column (Project Area & Tools Only)

• Filter not working on External Resources

Visuals after changes are applied

-Take a look at the count for each items in Filters column (Project Area & Tools Only)( now count includes external resource cards )

• Filter working on External Resources

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

---

From your project repository, check out a new branch and test the changes.

git checkout -b Tomomi-K1-add-filtering-to-external-resources-on-toolkit-page-8558 gh-pages
git pull https://github.com/Tomomi-K1/website.git add-filtering-to-external-resources-on-toolkit-page-8558

[Tomomi-K1]

I'm getting data from _data/internal/toolkitresources.yml

[castillios]

1. Availablity: Saturday 10/3 all day / variable, Tuesday 10/6 after 11am, Wednesday 10/7 after 11am
2. ETA: By Wed 10/7 EOD, but aiming for sooner

[castillios]

Hi @Tomomi-K1 thanks for your work on this large issue! In terms of PR logistics, everything looks great.

I tested the page locally and the new filter functionality works as expected! Good catch accounting for External Resources in the filter counts too. I noted that you made an ER for the "Undefined" filter bug when no matches are returned so I accounted for that in this review.

However, I noticed a UI bug. The leftmost filter sidebar shifts to the right when no results are found. I believe this may be because the "External Resources" filters (fortunately) work now, but the newly empty space causes the shift. I attached visual differences below.

No matching results on Hack for LA Site (before changes)

No matching results on local build (contains this PR's changes)

Once this bug is fixed, I'll be happy to re-review and approve :)

[Tomomi-K1]

@castillios Thank you for catching the UI bug!! I will fix that and re-request review!
ETA: 10/9/2026 18:00