Create each program area page automatically using a layout

[JessicaLucindaCheng]

Dependency

• [x] #6323
• [x] #4226
• [x] #4449
• [x] #3756
• [x] #4120
• [x] #4159
• [x] #2475
• [x] #3738
• [x] #3757
• [x] #3802
• [x] #4118
• [x] #4446
• [x] #4447
• [x] #4448

Overview

We want each program area page created dynamically so we don't have to manually code each page.

Action Items

• [ ] Take a look at the code and familiarize yourself with how the current individual project pages are created. This will give you an idea of how to approach this issue for dynamically creating the program area pages. In the Resources/Instructions section below, see Individual project page files to get started with understanding how layouts work for some files and links. You may need to look at additional code files and other resources to help with your understanding.

• [ ] In _config.yml,

  • [ ] Find the collections variable and change the following:

  From:

    program-areas:
      output: false

  To:

    program-areas:
      output: true

  • [ ] Find the defaults variable and add the following:

    - scope:
      path: "_program-areas"
      type: "program-areas"
    values:
      layout: "program-area-pages"

• [ ] In the _program-areas directory, rename each file without -card. For example, citizen-engagement-card.yml should be renamed to citizen-engagement.yml.
• [ ] Move citizen-engagement.html from the pages directory to the _layouts directory.
  • [ ] Then, rename the citizen-engagement.html to program-area-pages.html
• [ ] Each project's Markdown file (located in the _projects directory) has a program-area field, which indicates what program area(s) a project falls under (e.g., Citizen Engagement, Workforce Development, etc.). A project can have 1 or more program areas. In the program-area-pages.html file, use the current code in that file as a starting point and convert/modify the code so it becomes a reusable layout that will be used to dynamically render all the individual program area pages based on the program-area field in each project's Markdown file. You may need to add or edit other files.
  • [ ] In the Resources/Instructions section below, see Program Area files to get started for some files and links.
  • [ ] Make sure the layout does the following:
  • [ ] 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.
  • [ ] When you check the program area pages that are dynamically generated, you will see some of the project cards show the project's name and the following message: We are currently drafting the Problem, Solution and Impact statements for this project. The message is only shown for the projects that are missing program area info (problem, solution, impact, sdg, card-image-src, sdg-image-src).
    • [ ] For example, _projects/100-automations.md has

      program-area:
      - Civic Tech Infrastructure

      but doesn't have any information for the program area (problem, solution, impact, sdg, card-image-src, sdg-image-src). Thus, this project's card should show up on the Civic Tech Infrastructure program area page and the card will have the project's name (100 Automations) and the following message: We are currently drafting the Problem, Solution and Impact statements for this project.

  • [ ] If a project has multiple program areas, the problem, solution, sdg, etc info will be the same on the cards for each project. The same card/program area info will just show up on multiple program area pages.
    • For example, the Hackforla.org Website project's Markdown file (located in _projects/website.md) has

      program-area:
      - Workforce Development
      - Civic Tech Infrastructure

      So, the same card for the Hackforla.org Website project should show up on the Workforce Development program area page and the Civic Tech Infrastructure program area page.

• [ ] Once the program-area-pages.html layout works,
  • [ ] In _sass/components, change the filename _citizen_engagement.scss to _program-area-pages.scss
  • [ ] Then, in _sass/main.scss change

    @import 'components/citizen_engagement.scss';

    to

    @import 'components/program-area-pages.scss';

• [ ] Using Docker, check the following:
  • [ ] Check the Citizen Engagement page (note the new URL to check it in Docker will be https://localhost:4000/program-areas/citizen-engagement) still looks the same and all the links work the same as the one on the live website: https://www.hackforla.org/citizen-engagement
  • [ ] Check there is a dynamically generated page for each program area:
  • [ ] https://www.hackforla.org/program-areas/citizen-engagement
  • [ ] https://www.hackforla.org/program-areas/civic-tech-infrastructure
  • [ ] https://www.hackforla.org/program-areas/diversity-equity-inclusion
  • [ ] https://www.hackforla.org/program-areas/environment
  • [ ] https://www.hackforla.org/program-areas/justice
  • [ ] https://www.hackforla.org/program-areas/social-safety-net
  • [ ] https://www.hackforla.org/program-areas/vote-representation
  • [ ] https://www.hackforla.org/program-areas/workforce-development
  • [ ] Check that nothing breaks on the website in both desktop, tablet, and mobile views
• [ ] We are currently in the process of moving the old wiki to the new website-wiki repo, so we will not be making any changes or additions to the old wiki at this time. Thus, we will be adding wiki content through a different process now. Read How to Contribute to the Wiki and follow the instructions in the Editing a Wiki page section
  • [ ] Update the Citizen Engagement wiki content's GitHub locations (includes any relevant html, css, yml, md, js files) under Technical Details, including what file(s) had their name changed and what the new file name is.
  • [ ] If there are any additional notes that future developers should know about the program area pages layout and its web pages, please add your notes under the Technical Details section
  • [ ] As part of your pull request, please mention updating the Citizen Engagement wiki content as part of the changes you made and add a link to the comment where you edited the content
  • [ ] Remember to add a link to the comment where you edited the Citizen Engagement wiki content in the Content to be Added/Edited in the New website-wiki Repo

Resources/Instructions

• Citizen Engagement page
• Individual project page files to get started with understanding how layouts work
  • Examples of individual project pages: 100 Automations, Lucky Parking, Food Oasis
  • Layout for the individual project pages: https://github.com/hackforla/website/blob/gh-pages/_layouts/project.html
  • Guide to the Project Layout File wiki page
  • Hack for LA's Site Architecture
  • _config.yml
  • Info about Jekyll
  • Collections
• Program Area files to get started
  • You can use the Program Areas filter on the Projects page as a tool to see what all the program areas are currently and to see what projects fall under what program area(s).
  • See Citizen Engagement wiki page for additional files and links
• Each project's information Markdown files in _projects directory
  • Example: _projects/100-automations.md
  • Another example: _projects/website.md
• _sass/main.scss.

[github-actions[bot]]

Hi @JessicaLucindaCheng.

Good job adding the required labels for this issue. The merge team will review the issue and add a "Ready for Milestone" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels

[JessicaLucindaCheng]

@ExperimentsInHonesty For this issue, should projects without Program Area information (such as problem, solution, impact, etc) just show a card with those information fields blank or should it say, "TBD"?

For example, 100 Automations doesn't have Program Area info:

Answer from Bonnie: It's okay if they are blank.

[JessicaLucindaCheng]

@ExperimentsInHonesty For this issue, should projects without Program Area information (such as problem, solution, impact, etc) just show a card with those information fields blank or should it say, "TBD"?

For example, 100 Automations doesn't have Program Area info:

• From Dev/PM meeting on September 19, 2022, Bonnie said

  • If there is no info, it should be blank similar to how it is seen in that image.

• [x] Add the info about blank image to the issue. Note: I decided against it being blank because I want to take into consideration that there could be blank fields in the future when the page is live. Thus, in order to maintain a professional looking website, I think we should take into consider blank fields as part of this issue.

• [x] Add this info to the issue: If a project has multiple program areas, the problem, solution, sdg, etc info will be the same on the cards for each project. The same card/program area info will just show up on multiple pages.

[JessicaLucindaCheng]

• citizen engagement card data comment should be changed to program area card data in the project md files
• Then update the wiki for the project md file templates
• If a project has multiple program areas, the problem, solution, sdg, etc info will be the same on the cards for each project. The same card/program area info will just show up on multiple pages.

[JessicaLucindaCheng]

Availability for editing issue: Not sure. Dependent on when I get my computer's Internet fixed. ETA for completing edits: Friday, November 5, 2022 (if I am able to get my computer's Internet issue fixed by then)

[JessicaLucindaCheng]

Issue writing update Availability for editing issue: 6 hours ETA for completing edits: November 22, 2022

[ExperimentsInHonesty]

@JessicaLucindaCheng where you have the instructions :

For another example, _projects/100-automations.md has

Instead of it leaving the project off the display, let's have it give some default text instead

We are currently drafting the Problem, Solution and Impact statements for this project.

[JessicaLucindaCheng]

@ExperimentsInHonesty

@JessicaLucindaCheng where you have the instructions :

For another example, _projects/100-automations.md has

Instead of it leaving the project off the display, let's have it give some default text instead

We are currently drafting the Problem, Solution and Impact statements for this project.

I updated the action item with your requested change.

[JessicaLucindaCheng]

From Dev/PM with Bonnie, the following changes need to be made:

• [ ] Write a small issue (add to dependency section in 3328) - Rename citizen-engagement-cards.html to something relevant program-area-page-card-layout.html and figure out where the name is calling it and change it there
• [ ] Write a Medium issue (add to dependency section in 3328) - Change the logic: if it doesn't have the program area info, show the wording
  • Developer can temporarily change curbmap and ArtWatcher to visible to see what the card will look like but then turn it back off when done testing so the temporary change doesn't end up in their pr
• [ ] change any checkboxes to dash/bullet points if it is a note and not an actionable item
  • [ ] or preferably add them to the wiki page when possible
• [ ] Change to "When you change scss file name" instead of saying "if you change scss file name"

[JessicaLucindaCheng]

Issue writing

• Availability: I'm going to work on breaking up this issue into smaller issues, so my availability for finishing just this issue will be dependent on writing those issues.
• ETA: Not sure as I need to break up this issue

Tasks

From Dev/PM with Bonnie, the following changes need to be made:

• [x] Write a small issue (add to dependency section in 3328) - Rename citizen-engagement-cards.html to something relevant program-area-page-card-layout.html and figure out where the name is calling it and change it there
• [x] Write a Medium issue (add to dependency section in 3328) - Change the logic: if it doesn't have the program area info, show the wording: We are currently drafting the Problem, Solution and Impact statements for this project.
  • Developer can temporarily change curbmap and ArtWatcher to visible to see what the card will look like but then turn it back off when done testing so the temporary change doesn't end up in their pr
• [x] change any checkboxes to dash/bullet points if it is a note and not an actionable item
  • [x] or preferably add them to the wiki page when possible

[JessicaLucindaCheng]

Once this issue is in the New Issue Approval column, a dev lead needs to review the issue and determine if it is ready for a PM to add a milestone and prioritize it. If it isn't ready, a dev lead will need to edit this issue so that it is ready for a PM to add a milestone and prioritize it.

[github-actions[bot]]

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

[github-actions[bot]]

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

[roslynwythe]

@JessicaLucindaCheng I was wondering, do we need an Action Item for updating config.yml to use the new layout? Thanks

[github-actions[bot]]

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

[JessicaLucindaCheng]

@roslynwythe

@JessicaLucindaCheng I was wondering, do we need an Action Item for updating config.yml to use the new layout? Thanks.

Yes. Since it is a Large issue, I was trying to be less descriptive and have the developer figure out a lot of it by themselves but it looks like I wasn't descriptive enough in this issue and need to add more details. So, I'm going to put a "Draft" label on this issue and have to do some coding to figure out how the moving of _data/internal/program-areas files into a collection will impact other files, such as possibly pages/program-areas.html.

[JessicaLucindaCheng]

Issue Writing

• Availability: 6 hours
• ETA: Monday, February 19, 2024

[JessicaLucindaCheng]

Issue Writing

• Progress: Figured out some more refactoring needs to be done with the moving _data/internal/program-areas and _pages/program-areas.html before this issue can be completed. Will need to make a new issue and add it to the Dependency of this issue.
• Blockers: None
• Availability: 6 hours
• ETA: Monday, March 4, 2024

Tasks

• [x] Make a new issue to move _data/internal/program-areas and _pages/program-areas.html
• [x] Add the new issue to the Dependency section of this issue
• [ ] Edit this issue and add more instructions

[t-will-gillis]

Hey @JessicaLucindaCheng - only an FYI that the dependencies are completed

[ExperimentsInHonesty]

@JessicaLucindaCheng Is there are reason to take the word card off the file in the https://github.com/hackforla/website/tree/gh-pages/_program-areas directory? Seems like that is part of refactoring the program-areas.html page not making the 8 program area pages dynamic.

• [ ] In the _program-areas directory, rename each file without -card. For example, citizen-engagement-card.yml should be renamed to citizen-engagement.yml.

[ExperimentsInHonesty]

p.s. except for that, I would like to prioritize this. Please let me know.