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.

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

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

[TheManTheMythTheGameDev]

Hello @ldaws003! Great job on this PR:

• Branches are correct
• Changes look great -- all the new pages are accurate and complete
• Changes are clean and effective

I will say I was a little surprised to see that the problem/solution text does not appear for any projects outside of Citizen Engagement -- but upon closer inspection, this was not an issue with your implementation, and the text remains to be written.
The program area page template makes references to the citizen engagement header SVG and the citizen engagement JS logic, but it seems like these should remain constant for all program area pages, so I think it's fine.
Great job -- approved!

[santi-jose]

Good job working on this issue @ldaws003 !
What you did well:

1. Made pull request with correct branches
2. Linked your issue
3. Made code changes requested by issue
4. Maintained integrity of website with changes in code
5. Program area pages properly render

Great work! I have no changes to suggest and approve this PR.

[myronchen-git]

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

[myronchen-git]

Done Well

• Good detailed explanations of changes.
• Good job on asking questions for clarification.

---

Things to Address

• There is a bug when viewing the program areas webpages in smaller widths. For example, on the Citizen Engagement webpage, the Sustainable Development Goal components for the project cards have their texts cut off in mobile widths and have their texts in narrow columns in tablet widths.

  
  

  This issue might be out of scope, but I would like to see at least a resolution or clarification with the issue author. Ideally, you could create an Emergent Request to have this fixed.

• Under the todo item

  In each project's Markdown file in _projects directory, there is a field called visible. If visible is true, then the project should show up on the program area page(s) it falls under. If visible is false, then the project should not show up.

  , changing the visible properties do not do anything. For example, changing 311 Data's or Open Community Survey's visibilities do not do anything.

  I assume this action item is outdated or inaccurate as the visible property might have some other purpose, but this should be clarified with the issue author. Else, you would need to do some digging to figure this out.

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

[myronchen-git]

Thanks for addressing my two points. And thanks for the explanation on stopping and starting Docker. That got the visibility to work. Everything else is in order and you followed the instructions well.