Citizen Engagement page: Add links to each red project header

[JessicaLucindaCheng]

Overview

On the Citizen Engagement webpage [1], we want each red project header to redirect to its project's information webpage when clicked so that visitors to our website can easily get more information about the project they are interested in.

Details

Currently on the Citizen Engagement webpage

Click here to see a couple of examples of red project headers, which I have circled in blue

Desired result
When the red project header is clicked, it should redirect to its project's information webpage.

• Note: When using an anchor tag <a></a> around the header, it will automatically underline it. This is expected and is fine.

Click here to see a couple of examples of the desired red project headers

Action Items

Developer

• Read the How to Link to a Project's Detailed Info Page wiki article [2]
  • You will be using slug to implement the code for this issue.
• In _includes/citizen-engagement-cards.html [3], make it so that when a user clicks on a red project header, they are redirected to the project's detailed information page.
  • For example, when the Open Community Survey red header is clicked, it should redirect to https://www.hackforla.org/projects/open-community-survey.
  • Note: When using an anchor tag <a></a> around the header, it will automatically underline it. This is expected and is fine.
  • On the current webpage, make sure each of the red project headers redirects to its respective project's detailed information page.
  • Make sure that the code you implement is dynamic and will work for any future projects that will be added to the Citizen Engagement page.
• Once your pull request has been merged,
  • Please update the Page screenshot (current version) section in the Citizen Engagement page wiki article [4] with an updated desktop and mobile screenshot from the website, and update the date.
    • Use the GoFullPage Chrome extension [5] to screenshot the whole webpage at once.

Product Manager

• Once the pull request associated with this issue is merged, go to issue Rename citizen-engagement-cards.html #3756 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (Rename citizen-engagement-cards.html #3756) into the New Issue Approval column, remove the Dependency label on it, and add a ready for dev lead label to it.

Resources/Instructions

1. Citizen Engagement webpage
2. How to Link to a Project's Detailed Info Page
3. _includes/citizen-engagement-cards.html: HTML file that provides the layout/format for each card on the Citizen Engagement page
4. Citizen Engagement page wiki article: Contains additional information about the Citizen Engagement webpage
5. GoFullPage Chrome extension
6. Issue Rename citizen-engagement-cards.html #3756 is dependent on this issue being completed.

[JessicaLucindaCheng]

@ExperimentsInHonesty Is it okay that I just have a link to Citizen Engagement wiki page that states the following or do you want me to copy and paste that into the issue itself?

_projects: The directory for each project's Markdown file, which contain Sustainable Development Goal info (problem, solution, impact, sdg, card-image-src, card-image-alt, sdg-image-src, sdg-image-alt). (Note: Not all of the projects have this information yet.)

I'm trying to reduce repeating information that is available in the wiki page but I'm not sure if you prefer me to repeat it in the issue anyways.

Ans:

• Reach out to Derek to ask if Derek can explain how Derek got it to work for Link projects in program areas page to project page #3592
  • Then write a wiki about it
  • This might be helpful for figuring it out: https://jekyllrb.com/docs/permalinks/
  • See if explanation in pr making program-areas project cards point towards respective project links #3692 is good
• Then add an Action Item referencing the wiki about it
• Confirm with Bonnie whether she wants underlined header links or not