Create each program area page automatically using a layout

[JessicaLucindaCheng]

Dependencies

• Move program-areas directory and refactor program-areas.html #6323
• Logo getting cutoff on smaller screens on Citizen Engagement page #4226
• img Tag Refactor: Citizen Engagement page #4449
• Rename citizen-engagement-cards.html #3756
• Fix Program Areas filter for Diversity, Equity & Inclusion #4120
• Citizen Engagement page: Use image instead of card-image-src #4159
• Update the Organization images list under the Citizen Engagement page so it's dynamic #2475
• Citizen Engagement (desktop): Update padding/margins and SDG image size #3738
• Citizen Engagement page: Display a message if missing program area detailed info #3757
• Citizen Engagement page: Add links to each red project header #3802
• Make Diversity program area field uniform #4118
• img Tag Refactor: Citizen Engagement page #4446
• img Tag Refactor: Citizen Engagement page #4447
• img Tag Refactor: Citizen Engagement page #4448
• Change _program-areas Files From -card.yml to .md #7425
• Make a Citizen Engagement Example Page for Future Reference #8202

Overview

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

Action Items

For Developer

• 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 pages directory, make the following changes to the citizen-engagement.html file
  • Rename the file to program-area-pages.html.
  • Move program-area-pages.html to the _layouts directory.
• 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.
  • Do not make any changes to the following files: program-area-pages-cards-example.html and citizen-engagement-example.html.
  • Make sure the layout does the following:

    • Each dynamically created webpage's title should match the contents of the name variable in each of the files in _program-areas. For example, in the vote-representation.md file, the contents of the name variable is Vote / Representation, which is what the title should be in the webpage's header section.

    • Note: Currently, the header paragraphs will not make sense for each program area's webpage. This will be changed in a future issue. You will not need to make changes to these header paragraphs, so leave them as is.

      Click here to see the header paragraphs

      

    • 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 example page (note the URL to check it in Docker will be localhost:4000/citizen-engagement-example) 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 the Citizen Engagement page (note the new URL to check it in Docker will be 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:
    • Citizen Engagement (localhost:4000/program-areas/citizen-engagement)
    • Civic Tech Infrastructure (localhost:4000/program-areas/civic-tech-infrastructure)
    • Diversity, Equity & Inclusion (localhost:4000/program-areas/diversity-equity-inclusion)
    • Environment (localhost:4000/program-areas/environment)
    • Justice (localhost:4000/program-areas/justice)
    • Social Safety Net (localhost:4000/program-areas/social-safety-net)
    • Vote / Representation (localhost:4000/program-areas/vote-representation)
    • Workforce Development (localhost:4000/program-areas/workforce-development)
  • Check that nothing breaks on the website in both desktop, tablet, and mobile views

Resources/Instructions

• Example of what Citizen Engagement page will look like
• Individual project page files to get started with understanding how layouts work
  • Examples of individual project pages: 100 Automations, Lucky Parking, Food Oasis
  • Each project's information Markdown files in _projects directory
    • Example: _projects/100-automations.md
    • Another example: _projects/website.md
  • 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
  • _program-areas
• _sass/main.scss.

For QA

When this issue is done,

• The old/original Citizen Engagement page is now at https://www.hackforla.org/citizen-engagement-example
• The following links will be created automatically:
  • Citizen Engagement https://www.hackforla.org/program-areas/citizen-engagement
  • Civic Tech Infrastructure https://www.hackforla.org/program-areas/civic-tech-infrastructure
  • Diversity, Equity & Inclusion https://www.hackforla.org/program-areas/diversity-equity-inclusion
  • Environment https://www.hackforla.org/program-areas/environment
  • Justice https://www.hackforla.org/program-areas/justice
  • Social Safety Net https://www.hackforla.org/program-areas/social-safety-net
  • Vote / Representation https://www.hackforla.org/program-areas/vote-representation
  • Workforce Development https://www.hackforla.org/program-areas/workforce-development

[github-actions]

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.