Dependencies

[ ] #3328

Prerequisites

Be a member of Hack for LA. (There are no fees to join.) If you have not joined yet, please follow the steps on our Getting Started page and attend an onboarding session.
You have already read our How to Contribute to Hack for LA Guide.

Overview

We want to update the description in the header of the program area pages so that the page can be converted in the future to create a template that works for all our program areas.

Action Items

[ ] In your IDE, under the pages directory, open the _layouts/program-area-pages.html [^1].
[ ] Delete

            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 <a href="mailto: [email protected]">[email protected].</a>

[ ] Delete

        <p class="bottom-header-paragraph">
            Read more about <a href="https://sdg.lamayor.org/about/global-goals">LA’s Sustainable Development Goals</a>.
        </p>

[ ] Under _sass/components, open program-area-pages.scss [^2].
[ ] Change the following from

// This contains the image and three paragraphs within the header. I added (bottom-header-paragraph)
// to help align it with other paragraph elements in the header. It is not typical throughout the site
// to have more than two paragraph elements.

to

// This contains the image and two paragraphs within the header.

[ ] Delete

    .bottom-header-paragraph {
        max-width:100%;
        margin-top: 1rem;
    }

[ ] Using Docker, check the following:
- [ ] 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

Issue created from this comment [^1]: _layouts/program-area-pages.html [^2]: _sass/components/program-area-pages.scss

Jun 01 '25 20:06 JessicaLucindaCheng

Hi @JessicaLucindaCheng, we notice that you are assigned to an issue that you authored. Please remember to add the Draft label to this issue while you are working on it.

Jun 01 '25 21:06 HackforLABot

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

Jun 02 '25 23:06 HackforLABot

This is a copied and a continuation of contents from this comment: https://github.com/hackforla/website/issues/3328#issuecomment-2932854450

Issue Writing

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

Tasks

[ ] See what the header should be on the Citizen Engagement page: https://github.com/hackforla/website/issues/7424#issuecomment-2339395291.
- [ ] Then, after issue #3328, 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.
[ ] Ask if the image should be refactored to become program-areas and not just citizen-engagement in _layouts/program-area-pages.html

    <img class="header-hero-image" src="/assets/images/citizen-engagement/citizen-engagement-header.svg"
        alt="">

[ ] After #3328 is completed ask if want the cards in alphabetical order of name of project or okay as is (i.e. Hack for LA Site, which filename is website.md).

[ ] Write an issue to update https://github.com/hackforla/website/wiki/Citizen-Engagement-page based on changes made in these issues

- [ ] We are currently in the process of moving the old wiki to the new [website-wiki repo](https://github.com/hackforla/website-wiki), 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](https://github.com/hackforla/website/wiki/How-to-Contribute-to-the-Wiki) and follow the instructions in the [Editing a Wiki page section](https://github.com/hackforla/website/wiki/How-to-Contribute-to-the-Wiki#editing-a-wiki-page)
  - [ ] 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](https://github.com/hackforla/website/wiki/How-to-Contribute-to-the-Wiki#content-to-be-addededited-in-the-new-website-wiki-repo)

[ ] Need to add the _program-areas folder
[ ] https://github.com/hackforla/website/issues/7425
[ ] https://github.com/hackforla/website/issues/3328

[ ] Also, need to write an issue to delete pages/citizen-engagement-example.html
[ ] In another issue, change name variable in _program-area files to title variable so that the title matches
- [ ] in each webpage's tab and title in the header
  - [ ] _layouts/program-area-pages.html
  - [ ] _includes/program-area-pages-cards.html
  - [ ] _includes/program-area-pages-cards-example.html
  - [ ] Using Docker, check the following:
  - [ ] 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)
- [ ] https://www.hackforla.org/program-areas
- [ ] Anywhere else that uses name variable. Check the following:
  - [ ]assets/js/about.js
  - [ ] assets/js/current-projects.js
  - [ ] pages/program-areas.html
  - [ ] pages/citizen-engagement-example.html
[ ] Each program area needs to be linked on https://www.hackforla.org/program-areas

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.

Jun 02 '25 23:06 JessicaLucindaCheng

Change Citizen Engagement Page Description in Header Section

Dependencies

Prerequisites

Overview

Action Items

Resources/Instructions

Issue Writing

Tasks

Question

Answer: