website icon indicating copy to clipboard operation
website copied to clipboard
verified publisher icon hackforla

Create each program area page automatically using a layout

Open JessicaLucindaCheng opened this issue 3 years ago • 33 comments

Dependencies

  • [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
  • [x] hackforla/website/issues/7425
  • [x] hackforla/website/issues/8202

Overview

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

Action Items

For Developer

  • [x] 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.
  • [x] In _config.yml,

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

      From:

        program-areas:
    output: false

      To:

        program-areas:
    output: true

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

        - scope:
      path: "_program-areas"
      type: "program-areas"
    values:
      layout: "program-area-pages"
  • [x] In the pages directory, make the following changes to the citizen-engagement.html file
    • [x] Rename the file to program-area-pages.html.
    • [x] Move program-area-pages.html to the _layouts directory.
  • [x] 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.
    • [x] In the Resources/Instructions section below, see Program Area files to get started for some files and links.
    • [x] Do not make any changes to the following files: program-area-pages-cards-example.html and citizen-engagement-example.html.
    • [x] Make sure the layout does the following:

      • [x] 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.

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

      • [x] 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.

      • [x] 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).

        • [x] 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.

      • [x] 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.
  • [x] Once the program-area-pages.html layout works,
    • [x] In _sass/components, change the filename _citizen_engagement.scss to _program-area-pages.scss
    • [x] Then, in _sass/main.scss change 
      @import 'components/citizen_engagement.scss';
      to 
      @import 'components/program-area-pages.scss';
  • [x] Using Docker, check the following:
    • [x] 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
    • [x] 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
    • [x] Check there is a dynamically generated page for each program area:
      • [x] Citizen Engagement (localhost:4000/program-areas/citizen-engagement)
      • [x] Civic Tech Infrastructure (localhost:4000/program-areas/civic-tech-infrastructure)
      • [x] Diversity, Equity & Inclusion (localhost:4000/program-areas/diversity-equity-inclusion)
      • [x] Environment (localhost:4000/program-areas/environment)
      • [x] Justice (localhost:4000/program-areas/justice)
      • [x] Social Safety Net (localhost:4000/program-areas/social-safety-net)
      • [x] Vote / Representation (localhost:4000/program-areas/vote-representation)
      • [x] Workforce Development (localhost:4000/program-areas/workforce-development)
    • [x] Check that nothing breaks on the website in both desktop, tablet, and mobile views

Resources/Instructions

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

JessicaLucindaCheng avatar Jul 03 '22 17:07 JessicaLucindaCheng

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:

github-actions[bot] avatar Jul 03 '22 17:07 github-actions[bot]

@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: Screenshot 2022-09-19 135838

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

JessicaLucindaCheng avatar Sep 19 '22 20:09 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: Screenshot 2022-09-19 135838

  • 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 avatar Sep 19 '22 23:09 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 avatar Sep 26 '22 21:09 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 avatar Oct 26 '22 09:10 JessicaLucindaCheng

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

JessicaLucindaCheng avatar Nov 09 '22 10:11 JessicaLucindaCheng

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

ExperimentsInHonesty avatar Nov 28 '22 17:11 ExperimentsInHonesty

@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 avatar Nov 28 '22 23:11 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 avatar Nov 29 '22 01:11 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 avatar Jan 08 '23 08:01 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.

JessicaLucindaCheng avatar Mar 06 '23 23:03 JessicaLucindaCheng

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] avatar Nov 28 '23 02:11 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 :)

github-actions[bot] avatar Feb 11 '24 20:02 github-actions[bot]

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

roslynwythe avatar Feb 11 '24 20:02 roslynwythe

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] avatar Feb 11 '24 21:02 github-actions[bot]

@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 avatar Feb 11 '24 21:02 JessicaLucindaCheng

Issue Writing

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

JessicaLucindaCheng avatar Feb 11 '24 21:02 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
  • [x] Edit this issue and add more instructions

JessicaLucindaCheng avatar Feb 20 '24 01:02 JessicaLucindaCheng

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

t-will-gillis avatar Mar 04 '24 01:03 t-will-gillis

@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 avatar Sep 03 '24 01:09 ExperimentsInHonesty

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

ExperimentsInHonesty avatar Sep 03 '24 01:09 ExperimentsInHonesty

@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 separate from this, which I have created here: #7425.

JessicaLucindaCheng avatar Sep 09 '24 23:09 JessicaLucindaCheng

Issue Writing

  • Progress: Need to complete #7424 and add it to the dependency section
  • Blockers: None
  • Availability: 6 hours
  • ETA: Monday, September 30, 2024

Tasks

  • [ ] Finish writing #7425
  • [ ] See what the header should be on the Citizen Engagement page: https://github.com/hackforla/website/issues/7424#issuecomment-2339395291.
    • [ ] 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 [email protected].

Answer:

  • See what the header should be on the Citizen Engagement page: https://github.com/hackforla/website/issues/7424#issuecomment-2339395291.
  • 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 avatar Sep 10 '24 00:09 JessicaLucindaCheng

Issue Writing

  • Progress: Done
  • Blockers: None
  • Availability: 6 hours
  • ETA: Monday, June 2, 2025

Tasks

  • [x] Finish writing #7425
  • [x] See what the header should be on the Citizen Engagement page: https://github.com/hackforla/website/issues/7424#issuecomment-2339395291.
    • 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. --> Moved this task to here: https://github.com/hackforla/website/issues/8167#issuecomment-2932857400
    • [x] 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 [email protected].

Answer:

  • See what the header should be on the Citizen Engagement page: https://github.com/hackforla/website/issues/7424#issuecomment-2339395291.
  • 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 avatar Jun 02 '25 23:06 JessicaLucindaCheng

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

HackforLABot avatar Jun 21 '25 07:06 HackforLABot

  • Progress: Almost done. I need to make some edits as discussed at the Dev/PM meeting on Mon, Jun 16.
  • Blockers: None
  • Availability: 6 hours
  • ETA: Thursday, June 26, 2025

JessicaLucindaCheng avatar Jun 21 '25 07:06 JessicaLucindaCheng

I have finished making edits to this issue. It is ready for prioritization.

JessicaLucindaCheng avatar Aug 04 '25 23:08 JessicaLucindaCheng

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

HackforLABot avatar Nov 23 '25 08:11 HackforLABot

i. Availability: 5pm to 8pm 11/23/25, Monday - Friday 6pm to 7pm ii. ETA: Tuesday

ldaws003 avatar Nov 23 '25 08:11 ldaws003

I have a blocker. I am not sure what title is being referred to when making sure that the dynamically created pages uses the name of the program area name. Is it referring to the the title in the header section or the title tag, the one that shows in the web page's tab? Also at the bottom of the citizen-engagement.html page there's this:

<script src="{{ '/assets/js/citizen-engagement.js' | absolute_url }}"></script>

I don't see any corresponding js file for any of the other program areas but it doesn't seem specific to it. I am not sure what to do with this or if any changes need to be made to that line in the citizen-engagement.html file.

The branch I am working on is program-area-layout-3328, and I have renamed the citizen-engagement.html file to program-area-pages.html and moved it to _layouts/ .

ldaws003 avatar Nov 24 '25 16:11 ldaws003