Update toolkit yml files to include a new fields

[tunglinn]

Fixes #3357

What changes did you make and why did you make them ?

In all the files in /_guide-pages and in the file /_data/internal/toolkitresources.yml

• changed category to practice-area, provider-link to resource-url
• added tools, contributors, recommended-by
• deleted short-description, link-svg (this also required some changes in /pages/toolkit.html)
• for _guide-pages, changed status to work in progress, completed, or depreciated

In /_includes/guide-card.html

• changed logic for displaying guide cards links
• changed "coming soon" to "work in progress"

In /pages/toolkit.html

• removed external-resource-container (otherwise the external resource cards would be centered, take a look at this comment)

In /_sass/components/_toolkit.scss

• deleted external-resource-container

Overall, changes were made to add/update card fields and make sure the website does not change unless specified. For the field information, check this comment and others in the issue.

The wiki templates can be found under File Templates in the Wiki.

Purpose is to implement new design/features for the Toolkit page.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Visuals after changes are applied

[github-actions[bot]]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b tunglinn-update-toolkit-yml-3357 gh-pages
git pull https://github.com/tunglinn/website.git update-toolkit-yml-3357

[poorvi4]

Availability: 7/28-7/30 ETA: 6 hours

[Zak234]

ETA:7/27 Availability: Anytime

[Zak234]

I seem to be having some issues with VS Code which will delay my review.

[arpitapandya]

Availability: 6 Hours ETA: EOD 2022-07-29

[tunglinn]

Reverted the last commit. The branch should look normal now. I'll have to fix the lint errors, but don't know how without causing those weird formatting issue.

[poorvi4]

Yup, the text formatting looks normal now. Can't say much on how to resolve the lint issues as I'm not too familiar with it.

[tunglinn]

@Zak234 How do you test for other types (i.e. tablet, phone, etc)?

[Zak234]

Right click the page and click inspect. Then in the inspect window click the toggle device toolbar button, it looks like this: and is in the top left corner of the inspect screen. Then go to the new toolbar and click dimensions. There should be a dropdown menu with a bunch of different device's screen dimensions. We usually use IPhone 12 for mobile and Ipad mini for tablet.

[tunglinn]

I might have to ask the design team how they want the tablet "External Resources" title to be formatted because right now, it is the same as guides.

Like this

The changes I made makes External Resources filterable by practice areas (Development, Design, etc). If there's only 1 resource, you get there undesirable formatting. The current site doesn't filter for External Resources, so all three were being shown on each practice area tab which never causes the odd formatting.

[Zak234]

I'm not sure exactly what is causing the issue. I think it may just be due to there only being one project card as opposed to two under the External Resources which messes with the spacing. I'm pretty sure this is the case as when put into mobile view, which only has one project card under External Resources, the HFLA site has the same weird formatting.

[tunglinn]

Talked to Bonnie. The Guides and External Resources heading on tablet should not be centered. I will adjust the code for that.

More additions to this issue will be discussed on Friday at Guides meeting and commented in #3357.

[tunglinn]

I'll be MIA for the next 3 days, picked up some extra shifts. I'll add the additional functionalities and fix the lint issues on Monday.

[tunglinn]

I've updated the first pull request comment to reflect the new changes. Pushed new commits, will fix lint issues after.

[kathrynsilvaconway]

ETA: End of Day on 8/31 Availability: 2 Hours

[tunglinn]

@kathrynsilvaconway I don't see this visual when I run the branch locally. I'll be at tonight's meeting to hopefully resolve this with you.

[arpitapandya]

ETA: EOD 2022-09-05 Availability: 6hrs

[tunglinn]

I fixed the merge conflict, which was due to a recent refactoring of the toolkit.html file.

@arpitapandya I fixed the Lint issue before and the check is successful. Which Lint issue were you referring to?

[arpitapandya]

I fixed the merge conflict, which was due to a recent refactoring of the toolkit.html file.

@arpitapandya I fixed the Lint issue before and the check is successful. Which Lint issue were you referring to?

When I picked up this PR to review there was a merge conflict in toolkit.html, and I found there was the lines of which @kathrynsilvaconway mentioned with the red markers. I think those were because of few lines were overwritten because somebody might have worked on the same file. I was seeing 143 lines of code in that file when I was reviewing but now that you just pushed commit, Everything seems to be fixed and there's 91 lines of code in toolkit.html. I also don't see the console error with .js which I was seeing earlier. Everything looks clean now and doesn't break anything now so I would approve this.