Create each program area page automatically using a layout #3328

JessicaLucindaCheng · 2022-07-03T17:00:45Z

Dependency

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"

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

The text was updated successfully, but these errors were encountered:

ExperimentsInHonesty · 2024-09-03T01:07:56Z

@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 · 2024-09-03T01:08:51Z

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

JessicaLucindaCheng · 2024-09-09T23:35:13Z

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

Yes, the reason for taking the word card off the file is I planned for the files in _program-areas directory to be used for both the Program Areas page and the individual program area pages, such as the Citizen Engagement page. Also, the extension will need to change to Markdown in order to use collections in Jekyll to generate the individual program areas using an HTML layout. The webpages' URL is based on the name of the Markdown file.
- For example, a webpage generated from citizen-engagement.md will have a URL of https://www.hackforla.org/program-areas/citizen-engagement.
However, this can be in a separate epic from this, which I have created here: Epic: Change _program-area Files From -card.yml to .md #7424.

JessicaLucindaCheng · 2024-09-10T00:19:52Z

Issue Writing

Progress: Need to complete Epic: Change _program-area Files From -card.yml to .md #7424 and add it to the dependency section
Blockers: None
Availability: 6 hours
ETA: Monday, September 30, 2024

Tasks

Finish writing
- Epic: Change _program-area Files From -card.yml to .md #7424
  - Write Issues to Change _program-area Files From -card.yml to .md #7383
  - Change a _program-areas File From -card.yml to .md for citizen-engagement-card.yml #7425
  - If needed, an issue to delete a template
- Add Epic: Change _program-area Files From -card.yml to .md #7424 as a dependency to this issue
See what the header should be on the Citizen Engagement page: Epic: Change _program-area Files From -card.yml to .md #7424 (comment).
- Complete this issue. Then, after this issue, issue 1) change the descriptor in the Citizen Engagement Markdown file to the desired header and issue 2) make the header dynamic.
- Add an action item/note to this issue to leave the header as is because we will update that later.

Question

I plan to move the first 2 header paragraphs on the Citizen Engagement to the (future) /_program-area/citizen-engagement.md page. Should this occur as part of this issue? Or after this issue (because we don't have header paragraphs for each of the program area pages yet)?

We at Hack for LA are volunteers that believe in building technology and analyzing data to make it easier to participate effectively in your community.

Below are our products that are making that happen. If you have a new idea, want to submit feedback that will guide the next iteration of an existing tool, or want to start working on a project team with us, please contact us at citizenengagement@hackforla.org.

Answer:

See what the header should be on the Citizen Engagement page: Epic: Change _program-area Files From -card.yml to .md #7424 (comment).
Complete this issue. Then, after this issue, issue 1) change the descriptor in the Citizen Engagement Markdown file to the desired header and issue 2) make the header dynamic.
Add an action item/note to this issue to leave the header as is because we will update that later.

JessicaLucindaCheng added role: front end Tasks for front end developers Complexity: Large Feature: Refactor HTML P-Feature: Citizen Engagement https://www.hackforla.org/citizen-engagement size: 3pt Can be done in 13-18 hours Draft Issue is still in the process of being created labels Jul 3, 2022