Rollout Plan: Move, refactor, and add SDG info and images

[JessicaLucindaCheng]

Dependency

• [x] #4183
• [x] #4159
• [x] #4233
• [x] #4344
• [x] #4187

Issues to fix SDG SVGs being the wrong color

• [x] #4254
• [x] #4255
• [x] #4256
• [x] #4225
• [x] #4257
• [x] #4253
• [x] #4258

Issues to add a yml file for SDGs

• [x] #4450
• [x] #4451
• [ ] #6220
• [x] #4293
• [ ] #6221
• [ ] #6222
• [ ] #6223

Other SDG issues

• [x] #4229
• [ ] #4676
• [x] #6404

Overview

We want to move and refactor the SDG info and images so that they can be more easily reused.

Action Items

Write the following issues and add them to the Dependency section above:

• [x] Issues to fix the SDG SVGs being the wrong color
• [x] Issue to add SDG images' colors using the hex color provided by the United Nations
• [x] Issue to add SDG background color classes
• [x] Issue to fix Lucky Parking's detail info page SDG icon and background not matching
• [ ] Issues to add yml files for each SDG. Use issue #4293 as a template.
• [ ] Issue to refactor the Value card on project detailed info pages
• [ ] After #3328 is completed, issue to refactor the cards on the Citizen Engagement page
• [ ] Update Citizen Engagement page wiki page after removing/refactoring content in the _project Markdown files
• [ ] Write issue(s) to address #6277

Resources/Instructions

• United Nations' SDG guidelines
• United Nations' SDG Communications materials
• United Nations Development Programme Sustainable Development Goals
• HfLA: Projects: SDG and Targets Google Sheet

NOTES FOR MYSELF -- WILL CLARIFY AND ADD TO THE ISSUE ITSELF ABOVE

• [ ] SDGs should be in an internal/data/sdgs or _sdg collection
  • [ ] Images are based on sdg (e.g. 9, 8, 7, etc)
  • [ ] image name should use item.sdg
  • [ ] See https://github.com/hackforla/website/issues/2037#issuecomment-1465302054 for template edits
  • [x] after make issue to change sdg image file names to SDG-#.png (i.e. SDG-17.png)
  • [ ] Make issue to ask team how to move the sdg info out of project markdown

[JessicaLucindaCheng]

• Blocker related to this comment: https://github.com/hackforla/website/issues/4233#issuecomment-1483959603

[JessicaLucindaCheng]

Awaiting approval for issue template: https://github.com/hackforla/website/issues/4293#issuecomment-1493316382

Edit: Bonnie approved it. See https://github.com/hackforla/website/issues/4293#issuecomment-1493716472

[JessicaLucindaCheng]

Roll Out Plan Progress

• Progress: Wrote some of the issues but need to write more issues
• Blockers: None
• Availability: 4 hours
• ETA: For action item "Issues to add yml files for each SDG", Tuesday, October 31, 2023. Will provide ETAs for the other action items once I figure those out.

[ExperimentsInHonesty]

• @JessicaLucindaCheng We should talk again about why we are putting redundant info into the project files when its available in the sdg files. I think we were just doing it temporarily. Can we refactor that out, now that all the issues like this have been finished? https://github.com/hackforla/website/issues/4450

[ExperimentsInHonesty]

@JessicaLucindaCheng I have looked at the lucky-parking page and the about page sustainability section and I see we are using a color name for the background of the lucky parking page background-color-sdg11

And we probably should have used a more generic name, such as color-sdg11 instead of including the word background, because we are going to have to use something for this part of the about page, that uses the same colors, and it doesn't seem to make sense to have two references to the color in the class files

[JessicaLucindaCheng]

Action Items

• [ ] Complete writing
  • [ ] #6220
  • [ ] #6221
  • [ ] #6222
  • [ ] #6223

Address the following

• [ ] This comment from Bonnie

  @JessicaLucindaCheng I have looked at the lucky-parking page and the about page sustainability section and I see we are using a color name for the background of the lucky parking page background-color-sdg11

  

  And we probably should have used a more generic name, such as color-sdg11 instead of including the word background, because we are going to have to use something for this part of the about page, that uses the same colors, and it doesn't seem to make sense to have two references to the color in the class files

  • From Bonnie on Dev/PM agenda on 2024-01-29, "I realize I greenlighted the naming, but I didn't think about the other places we would need the color, when I did."
  • Notes as discussed in Dev/PM on 2024-01-29:
  • SDG colors are defined as variables in https://github.com/hackforla/website/blob/gh-pages/_sass/variables/_colors-sdg.scss
    • Example:
    • https://github.com/hackforla/website/blob/8cfe3d481b67e86d8103b4466f108772f91c58a1/_sass/variables/_colors-sdg.scss#L9
  • The class for background colors uses the CSS style background and is in https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_background-sdg-colors.scss.
    • Example:
    • https://github.com/hackforla/website/blob/8cfe3d481b67e86d8103b4466f108772f91c58a1/_sass/elements/_background-sdg-colors.scss#L8
  • Tasks:
    • Rename the ...background-sdg-colors.scss to be sdg-color-styles.scss
    • The SDG colored text on https://www.hackforla.org/about/#sustainability should be refactored to use the SDG colors
    • The colors in the following should be refactored to separate the font-weight from the color and then the color should live in the SCSS file with the background colors: https://github.com/hackforla/website/blob/8cfe3d481b67e86d8103b4466f108772f91c58a1/_sass/components/_about.scss#L333-L367

• [ ] From Bonnie on Dev/PM agenda on 2024-01-29, "I think we can refactor out a temporary solution that we used."

• [ ] Make an ER for

  • SDG

    ER: Review the project.yml file template and files to fix the section for SDG info

    Issue found in #4187 
    File where problem can be seen https://github.com/hackforla/website/blob/ad2bc55c4cf21e4f3c9abcecb677c08c6389b75f/_projects/lucky-parking.md?plain=1#L80C1-L80C25
    Should not be `# program area card data` instead should be `# SDG info`

• [ ] BW: Also, where are we in the process of deployment of SDG to all projects, and in the future making the project.yml file only reference the SDG for the finding of assets needed (logo, color and alt text)

Other Tasks

• [ ] For https://github.com/hackforla/website/blob/dafe22d086f8470d61f3cbccc98a7efd59588d15/_sass/components/_about.scss#L333-L367
  • [ ] Use an existing class with the font-weight or refactor the font-weight into a new class.
  • [ ] Apply the class to the SDG fonts on the About page that uses it.
  • [ ] Refactor the code and move the following to a file with the SDG background color classes
  • [ ] May need to rename https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_background-sdg-colors.scss file to be more generic. Maybe _sdg-colors.scss or _sdg-color-classes.scss?

[JessicaLucindaCheng]

Title:

Creating a yml file for SDG 11

Labels: Complexity: Small, p-feature: SDGs, role: front end, size: 0.25 pt

Milestone: 05. Know HFLA

Content:

### Prerequisites
1. 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](https://www.hackforla.org/getting-started) and attend an onboarding session.
2. You have already read our [How to Contribute to Hack for LA Guide](https://github.com/hackforla/website/blob/gh-pages/CONTRIBUTING.md).

### Overview
We want to create a yml file for a Sustainable Development Goal (SDG) so that information is not repeated in multiple files.

### Action Items
- [ ] In `_data/internal/sdg`, add a file called `sdg11.yml`
- [ ] In the file you just created, add the following:

The Sustainable Development Goal (SDG) number (e.g. 16)

sdg: 11

The SCSS color variable that matches the color of the SDG image

color-variable: $color-sdg11

The path to the SDG image

image: /assets/images/sdg/sdg11.svg

The alt text for the SDG image

image-alt: 11 Sustainable Cities And Communities targets:

The SDG target (e.g. 1, 2, or a, b, ...)

• target: 1

  The SDG target statement

  statement: By 2030, ensure access for all to adequate, safe and affordable housing and basic services

• target: 2 statement: By 2030, provide access to safe, affordable, accessible and sustainable transport systems for all, improving road safety, notably by expanding public transport, with special attention to the needs of those in vulnerable situations, women, children, persons with disabilities and older persons
• target: 3 statement: By 2030, enhance inclusive and sustainable urbanization and capacity for participatory, integrated and sustainable human settlement planning and management in all countries

Resources/Instructions

• _data/internal/sdgs
• This issue is tracked in epic #4153

[JessicaLucindaCheng]

Questions

• Should there be a logo, color, SDG info file, etc for each SDG? In other words, do we want all 17 SDGs in our codebase or only certain SDGs? Ans from Bonnie: All SDGs but in the SDG repo. So, add the rest after the new repo is made.
• What targets should I add to each SDG info file? The ones in https://docs.google.com/spreadsheets/d/1lV8d8AMSJ5HOiTWlFE7lzbqiKxqMmh8pHADcJMdp7JE/edit#gid=975057205? Or should I just leave the targets blank for now?
  • Note: The targets listed in that spreadsheet are missing ones listed here: https://www.hackforla.org/about/#sustainability
  • Ans: Put the base file in. After we moved the SDG stuff, we will then add the targets later.

[JessicaLucindaCheng]

Tasks

• [ ] In a new ER to make a roll-out plan (or maybe in this roll-out plan), the following needs to be added
  • [x] An issue for Bonnie to create a repo for the SDGs and set the permissions #6404
  • [ ] A medium size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images and all the SDG info files currently
  • [ ] An epic to add any missing SDG images
  • [ ] An epic to add any missing SDG info files
  • [ ] An epic to add any missing targets

[ExperimentsInHonesty]

@JessicaLucindaCheng I made the repo. I think if you make the issue

A medium size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images and all the SDG info files currently

Then this issue can go into the icebox with that issue as a dependency, and then we can have someone else make the epics listed above later.

[JessicaLucindaCheng]

@JessicaLucindaCheng I made the repo. I think if you make the issue

A medium size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images and all the SDG info files currently

Then this issue can go into the icebox with that issue as a dependency, and then we can have someone else make the epics listed above later.

Okay.

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 12, 2024 at 12:06 AM PST.}

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, March 19, 2024 at 12:06 AM PST.}

[JessicaLucindaCheng]

• Progress: Wrote some of the issues but need to write more issues
• Blockers: Water damaged laptop
• Availability: TBD - need to find a solution to my laptop problems
• ETA: TBD - need to find a solution to my laptop problems

Tasks

• [ ] In a new ER to make a roll-out plan (or maybe in this roll-out plan), the following needs to be added
  • [x] An issue for Bonnie to create a repo for the SDGs and set the permissions #6404
  • [ ] A medium size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images and all the SDG info files currently
  • [ ] An epic to add any missing SDG images
  • [ ] An epic to add any missing SDG info files
  • [ ] An epic to add any missing targets

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 2, 2024 at 12:05 AM PST.}

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 9, 2024 at 12:06 AM PST.}

[JessicaLucindaCheng]

• Progress: Wrote some of the issues but need to write more issues
• Blockers: Water damaged laptop but it works now
• Availability: TBD - I need to catch up and prioritize what needs to be done.
• ETA: TBD - I need to catch up and prioritize what needs to be done.

Tasks

• [ ] In a new ER to make a roll-out plan (or maybe in this roll-out plan), the following needs to be added
  • [x] An issue for Bonnie to create a repo for the SDGs and set the permissions #6404
  • [ ] A medium size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images and all the SDG info files currently
  • [ ] An epic to add any missing SDG images
  • [ ] An epic to add any missing SDG info files
  • [ ] An epic to add any missing targets

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 23, 2024 at 12:06 AM PST.}

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, April 30, 2024 at 12:06 AM PST.}

[JessicaLucindaCheng]

• Progress: Wrote some of the issues but need to write more issues
• Blockers: None
• Availability: TBD
• ETA: TBD

Tasks

• [ ] In a new ER to make a roll-out plan (or maybe in this roll-out plan), the following needs to be added
  • [x] An issue for Bonnie to create a repo for the SDGs and set the permissions #6404
  • [ ] A medium size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images and all the SDG info files currently
  • [ ] An epic to add any missing SDG images
  • [ ] An epic to add any missing SDG info files
  • [ ] An epic to add any missing targets

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, May 14, 2024 at 12:06 AM PST.}

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, May 21, 2024 at 12:06 AM PST.}

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, May 28, 2024 at 12:06 AM PST.}

[JessicaLucindaCheng]

• Progress: Wrote some of the issues but need to write more issues
• Blockers: None
• Availability: TBD
• ETA: TBD

Tasks

• [ ] In a new ER to make a roll-out plan (or maybe in this roll-out plan), the following needs to be added
  • [x] An issue for Bonnie to create a repo for the SDGs and set the permissions #6404
  • [ ] A medium size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images and all the SDG info files currently
  • [ ] An epic to add any missing SDG images
  • [ ] An epic to add any missing SDG info files
  • [ ] An epic to add any missing targets

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, June 11, 2024 at 12:06 AM PST.}

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, June 18, 2024 at 12:06 AM PST.}

[github-actions[bot]]

@JessicaLucindaCheng

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Wednesday, June 19, 2024 at 1:48 PM PST.}