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

• [x] 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.
• [x] 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.
  • [x] On the current webpage, make sure each of the red project headers redirects to its respective project's detailed information page.
  • [x] 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.
• [x] Once your pull request has been merged,
  • [x] 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.
  • [x] Use the GoFullPage Chrome extension [5] to screenshot the whole webpage at once.

Product Manager

• [x] Once the pull request associated with this issue is merged, go to issue #3756 and check if all the issues listed under the Dependency section are closed. If they are all closed, move that issue (#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 #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 #3592
  • [x] Then write a wiki about it
  • This might be helpful for figuring it out: https://jekyllrb.com/docs/permalinks/
  • See if explanation in pr #3692 is good
• [x] Then add an Action Item referencing the wiki about it
• [x] Confirm with Bonnie whether she wants underlined header links or not

[JessicaLucindaCheng]

@ExperimentsInHonesty I know previously you said the header should match the Figma design and not be underlined even though it will be a link. However, would that be confusing for people because the rest of the site has links as underlined red text? Ans: From Dev/PM on Mon, Jan 30, Bonnie said it was okay to have it underlined.

Here is how a title would look as a link:

[github-actions[bot]]

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

[Thinking-Panda]

i. Availability: M-F 10AM-3 PM ii. ETA: 2/22/23

[Thinking-Panda]

The pull request has been merged. I will update the screen shots by 2/27 12 pm.