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

[JessicaLucindaCheng]

Dependency

• Move and rename sdg-elements directory and refactor associated code #4183
• Citizen Engagement page: Use image instead of card-image-src #4159
• Add SDG color variables: 2-5, 8-11, 13, 16, 17 #4233
• Add SDG background color classes: 2-5, 8-11, 13, 16, 17 #4344
• Fix SDG background color on project pages so that it matches the SDG icons #4187

Issues to fix SDG SVGs being the wrong color

• SDG 2: Rename and replace image with correct color one #4254
• SDG 5: Rename and replace image with correct color one #4255
• SDG 8: Rename and replace image with correct color one #4256
• SDG 11: Rename and replace image with correct color one #4225
• SDG 13: Rename and replace image with correct color one #4257
• SDG 16: Rename and replace image with correct color one #4253
• SDG 17: Rename and replace image with correct color one #4258

Issues to add a yml file for SDGs

• Creating a yml file for SDG 2 #4450
• Creating a yml file for SDG 3 #4451
• Creating a yml file for SDG 8 #6220
• Creating a yml file for SDG 11 #4293
• Creating a yml file for SDG 13 #6221
• Creating a yml file for SDG 16 #6222
• Creating a yml file for SDG 17 #6223

Other SDG issues

• Epic: Fix size of SDG icons to match Figma design #4229
• Write a SDGs wiki page #4676
• Create a new repo for SDGs and set permissions and branch protections to match website repo #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:

• Issues to fix the SDG SVGs being the wrong color
• Issue to add SDG images' colors using the hex color provided by the United Nations
• Issue to add SDG background color classes
• Issue to fix Lucky Parking's detail info page SDG icon and background not matching
• Ask Bonnie to create a repo for the SDGs and set the permissions Create a new repo for SDGs and set permissions and branch protections to match website repo #6404

---

• Audit all SDG images, SDG info files, and SCSS SDG info files and put a link to it in the "Resources/Instructions" section below.
• A large size issue for a dev to cherry-pick (the way I did it to move the Bigram file) all the SDG images, all the SDG info files, and all the SCSS 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
• Rewire where SDG info is referenced and called
• Once rewiring is done, delete SDG images, SDG info files, and all the SCSS SDG info files

---

• Issues to add yml files for each SDG. Use issue Creating a yml file for SDG 11 #4293 as a template.
• Issue to refactor the Value card on project detailed info pages
• After Create each program area page automatically using a layout #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 ER: Review the project.yml file template and files to fix the section for SDG info #6277
• Write epic issue to write small issues: to add sdg target and sdg indicator to each project's yml file
  • SDGs will show up on the following webpages: Program Areas page, Individual Project Profile pages, Citizen Engagement page (and future program area pages)
  • See the Program Area Audit spreadsheet for the SDG info
  • See how it is implemented already in this file: https://github.com/hackforla/website/blob/gh-pages/_projects/311-data.md?plain=1

Resources/Instructions

Resources

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

Audit

• Results of the audit in this comment:

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 Create issues for new project impact content to be added to project md files #2037 (comment) for template edits
• 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