Update wins.js so the Wins page uses icon-github.svg

[roslynwythe]

Overview

We need to update the code that renders the GitHub icon on the Wins page, to display _includes/svg/icon-github.svg instead of /assets/images/wins-page/icon-github-small.svg, in order to reduce the number of duplicate images.

Action Items

• Update the makeCards function in assets/js/wins.js and the HTML template in _includes/wins-page/wins-card-template.html/wins-card-template.html so that the reference to /assets/images/wins-page/icon-github-small.svg in the wins cards are changed to _includes/svg/icon-github.svg. The icon will be displayed using an svg html element instead of an img element.
• This issue does not include replacing the references to /assets/images/wins-page/icon-github-small.svg in the overlay (in the function updateOverlay)
• Note that svg tags do not support an alt attribute for accessibility. Read making SVGs WCAG compliant to understand how an SVG can be made accessible. Select a method described in the section "Use an ARIA label in the div HTML tag wrapping the SVG" or the section "Use an outer SVG with aria-label or aria-labelledby". Again this will require updates to assets/js/wins.jsand_includes/wins-page/wins-card-template.html/wins-card-template.html'
• Read Create wiki page: how to change the fill color of an svg #6654 to learn how to style svgs
• In this issue we will not modify the GitHub icon in the badge section which is /assets/images/wins-page/wins-badges/github.svg
• Remove the file currently used graphic file /assets/images/wins-page/icon-github-small.svg
• Use Docker to preview the Wins page (/wins) to ensure that the appearance and behavior of the Wins page is unchanged both in mobile and desktop views.

Resources/Instructions

• Wins webpage
• making SVGs WCAG compliant
• Create wiki page: how to change the fill color of an svg #6654
• This issue resulted from ER: duplicate GitHub icons and inconsistent locations #6903
• https://github.com/hackforla/website/blob/gh-pages/assets/js/wins.js
• HTML Template for wins card

[HackforLABot]

Hi @izma-mujeeb, 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 :)

[izma-mujeeb]

Availability: Mon-Fri 5PM - 9PM
ETA: Wednesday, October 2

[izma-mujeeb]

I have a blocker.
I am trying to change the icon to include the svg file, however, every time I change the file, I get this error:
ERROR '/wins/_includes/svg/icon-github.svg' not found.
I am not sure why this error is coming up as the above is not a path that I am including in the JavaScript file. As well, since the svg file is under the _includes folder, I don't think these images can be used with an img tag, as these files are treated as static assets.

[DrAcula27]

@izma-mujeeb @t-will-gillis
I have tried prepending the file path, _includes/svg/icon-github.svg, with each of: /wins/, /, and ../../ and none resolved the issue. All still give the same error message:

ERROR `/wins/_includes/svg/icon-github.svg' not found.

Update

After prepending the file path with ../../ and using tab completion to finish the path, I get a new error:

`/_includes/svg/icon-github.svg' not found.

[izma-mujeeb]

At the office hour today, we looked through other files that use svg images in a JavaScript file, and tested to see if the following URL would work: {% include svg/icon-github.svg %}. Unfortunately, this link did not work and the Github icon is not being displayed on the Wins page.

[ExperimentsInHonesty]

These are the svgs that are in _includes folders
https://github.com/hackforla/website/tree/gh-pages/_includes/svg

Here is the search I used

• https://github.com/search?q=repo%3Ahackforla%2F[REPLACE WITH NAME OF FILE]+language%3AJavaScript+&type=code
• example of not found: https://github.com/search?q=repo%3Ahackforla%2Fwebsite+toolkit-hero.svg+language%3AJavaScript+&type=code
• example of file found in a JavaScript file: https://github.com/search?q=repo%3Ahackforla%2Fwebsite+icon-hamburger-nav.svg+language%3AJavaScript+&type=code

Here is the JavaScript file that has references to svgs that are in the _includes folder
https://github.com/hackforla/website/blob/gh-pages/assets/js/hamburger-nav.js

website/assets/js/hamburger-nav.js

Lines 14 to 16 in 9115924

	//Retrieve svg string from _includes
	const burgerImage = `{% include svg/icon-hamburger-nav.svg %}`;
	const burgerImageX = `{% include svg/icon-hamburger-nav-x.svg %}`;

website/assets/js/hamburger-nav.js

Lines 34 to 39 in 9115924

	function swapIcons(icon_id){
	//Create dictionary for swap
	const hamburger = {
	'hamburger-nav': {"el":burgerImage,'opposite':burgerImageX},
	'hamburger-nav-x':{'el':burgerImageX,'opposite':burgerImage}
	}

[roslynwythe]

At the office hour today, we looked through other files that use svg images in a JavaScript file, and tested to see if the following URL would work: {% include svg/icon-github.svg %}. Unfortunately, this link did not work and the Github icon is not being displayed on the Wins page.

• @izma-mujeeb I believe that {% include svg/icon-github.svg %} is the correct liquid statement to reference the svg. If it is not working, I'll need to see the surrounding js and html code. Previously the HTML was using an img tag and that will have to be changed. For the purposes of styling and accessibility, we will probably want to wrap the svg in an outer svg. You can find sample code for that in Update wiki page with another method for making SVGs WCAG compliant #6653 (comment) which is listed as a resource item in this issue. If you wish, you can create a Draft PR so that I can see your code.

[ExperimentsInHonesty]

@izma-mujeeb please submit a draft pr. You submit a PR as normal and then change it to draft by clicking on the link that looks like this, under the assignees. Once you done that, stick this issue back into the questions column with a ready for dev lead label

[izma-mujeeb]

@ExperimentsInHonesty @roslynwythe I submitted a PR and have moved this issue back into questions column with the ready for dev lead label.
#7569

[ExperimentsInHonesty]

@roslynwythe spoke with @izma-mujeeb and revised the issue to make it clearer and reduce scope. See details in PR