Update the Program Areas page so the projects are dynamically rendered

[macho-catt]

Overview

The Program Areas page mini cards need to be rendered dynamically so they match the results from the project filters.

Details

Currently, the program-areas.html file use liquid to loop through each program area yml file under _data/internal/program-areas/. Projects for each program area are declared in the yml file. However, if we add a new project under the _projects collection and declare their program area, we also need to update the proper program area yml file. Additionally, if we ever need to change a project's program area, we need to ensure that the program area yml files are updated as well.

Since this becomes unmaintainable in the long run, it would be smarter if the program-areas.html file renders the mini page cards for each project by referencing the _projects collection instead of the program area yml files.

Action Items

• Notice how the program-areas.html file currently loop through the yml files to render the mini page cards for each project
• Change the for loop under line 42 so that the liquid references the _projects collection instead of the program area yml files
  • If the current program-area property is equal to the program-area property of the project, render it
• Ensure that after the changes, the webpage still looks and functions the same

Resources/Instructions

program-areas.html
_data/internal/program-areas/
_projects collection
Liquid in Jekyll
Iteration in Liquid

[github-actions]

Hi @macho-catt.

Good job adding the required labels to this issue.

Additional Resources:
Wiki: How to add status labels to issues (WIP. Link will be updated when the wiki is done)
Wiki: How to create issues (WIP. Link will be updated when the wiki is done)

[ghost]

Progress: Currently I have created a branch and am now going to look into how to solve the issue
Blockers: currently there are no blockers
Availability: This week I have 4 hours to work on this issue
ETA: either tomorrow or next Tuesday
Pictures: No visuals so far

[macho-catt]

Hi @amnak1284, just wanted to see what your progress on this issue is?

[macho-catt]

@amnak1284 since this has been inactive for a while, I will unassign you. Please feel free to pick up this issue again when you have the time. Thanks

[aricforrest]

As I said on the call, the changes in 311-data.md didn't work because jekyll was not rebuilding the files so it still treated the project.program-area as the original array. I discovered if you run jekyll clean it will delete the full _site directory and jekyl metadata. The jekyll serve command (docker-compose.yml runs this) will then rebuild all files ensuring you have the latest version.

I created issue #3587 to have docker-compose updated to do this on it's own before building and serving. Until this is merged you can simply run jekyll clean before docker-compose up.

[jdingeman]

Awesome, thanks so much for the explanation and insight!

[jdingeman]

@kathrynsilvaconway @blulady @arpitapandya I am almost ready to open a pull request, however I wanted to propose a possible list of "good second issues".
The current page has hyperlinks for each project leading to their hackforla.org/projects/[project name] page, but the md files do not have those links. I am fine with going through and adding them to the files, but I wanted to run this by you all to see what you think. For example, citizen-engagement-card.yml shows

projects:
  - id: 190321758
    name: 311 Data
    image: /assets/images/projects/311_data.png
    image_alt: 311 data logo.
    link: https://www.hackforla.org/projects/311-data

whereas 311-data.md shows

links:
  - name: GitHub
    url: 'https://github.com/hackforla/311-data'
  - name: Slack
    url: 'https://hackforla.slack.com/archives/CJY4R382X'
  - name: Wiki
    url: 'https://github.com/hackforla/311-data/wiki'
  - name: Join Us
    url: 'https://github.com/hackforla/311-data/wiki/Joining-the-311-Team'
  - name: Site
    url: 'https://www.311-data.org/'

[blulady]

@kathrynsilvaconway @blulady @arpitapandya I am almost ready to open a pull request, however I wanted to propose a possible list of "good second issues". The current page has hyperlinks for each project leading to their hackforla.org/projects/[project name] page, but the md files do not have those links. I am fine with going through and adding them to the files, but I wanted to run this by you all to see what you think. For example, citizen-engagement-card.yml shows

projects:
  - id: 190321758
    name: 311 Data
    image: /assets/images/projects/311_data.png
    image_alt: 311 data logo.
    link: https://www.hackforla.org/projects/311-data

whereas 311-data.md shows

links:
  - name: GitHub
    url: 'https://github.com/hackforla/311-data'
  - name: Slack
    url: 'https://hackforla.slack.com/archives/CJY4R382X'
  - name: Wiki
    url: 'https://github.com/hackforla/311-data/wiki'
  - name: Join Us
    url: 'https://github.com/hackforla/311-data/wiki/Joining-the-311-Team'
  - name: Site
    url: 'https://www.311-data.org/'

This is a great idea, let's chat about it tonight and see what Kathryn thinks.

[ExperimentsInHonesty]

Hi Devs, and specifically @jdingeman After we had a conversation at one of our meeting about how to do it, a different approach was taken than is mentioned above. I want to make sure that an explanation of that method is documented in the wiki. If it is not, please make an issue for that to be done.

[jdingeman]

@ExperimentsInHonesty - this method written has now been written into the wiki. See page here

[ExperimentsInHonesty]

@hackforla/website-merge I think the wiki page that @jdingeman made is perfect. We need to make sure a link to it is added to the future content that will be here https://github.com/hackforla/website/wiki/Pages-on-Hack-for-LA-website, or temporarily add it to https://github.com/hackforla/website/wiki/Hack-for-LA's-Site-Architecture#pages

https://github.com/hackforla/website/wiki/DR:-Updated-Program-Areas-so-Projects-are-Linked-to-Project-Pages

[jdingeman]

@ExperimentsInHonesty - link has been added under "Program Areas" https://github.com/hackforla/website/wiki/Pages-on-Hack-for-LA-website