Dynamically Created Pages for each Program Area Using a Layout

[ldaws003]

Fixes #3328

What changes did you make?

• renamed citizen-engagement.html to program-area-pages.html
• moved program-area-pages.html to the _layouts folder
• modified program-area-pages-cards.html to filter for visible projects that are part of the page's program area
• made the title of the header section be the name of the program area for the page
• renamed _citizen_engagement.scss to _program-area-pages.scss
• updated the import of _citizen_engagement.scss in _sass/main.scss to _program-area-pages.scss

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

• citizen-engagement.html was renamed to program-area-pages.html and moved to _layouts to create a reusable layout to generate pages for other program areas
• program-area-pages-cards.html was modified to make it dynamically work for any program areas
• _citizen_engagement.scss was renamed and it's import updated to reflect the name change of the citizen-engagement.html page

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.

• [x] 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

Visuals after changes are applied

[github-actions[bot]]

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 ldaws003-program-area-layout-3328 gh-pages
git pull https://github.com/ldaws003/website.git program-area-layout-3328

[santi-jose]

Review ETA: 8 PM 11/28/25 Availability: 5-8 PM Monday-Friday

[TheManTheMythTheGameDev]

Review ETA: 6 PM 11/28/25 Availability: 11-3 Friday

[myronchen-git]

Review ETA: 12/6/2025 Availability: 1 - 4 PM

[ldaws003]

Hi @myronchen-git,

Thanks for taking a look. I'll bring the issue with the text being cut off in Sustainability Goal with the issue creator. For the visibility property. It does work on my end. For me it the effects of changing that only shows after stopping and restarting docker-compose.