Update toolkit yml files to include a new fields

[ExperimentsInHonesty]

Overview

We need to add new fields and change a field to the Internal and External Resources files for the toolkit, so that we can have filters similar to what exists on the homepage.

Action Items

• [x] Add the field to all files listed below
• [x] identify which files need info for the new fields and add them to a comment on this issue, so that the Guides team can provide the information. Bring this to Sunday meeting with product.
• [x] Change the name of category and update the code that displays the toolkit page results when you click on Development on the ribbon menu
• [x] update wiki template example (created this one)

Resources/Instructions

Additional Fields needed

tools (Figma, GitHub, Miro, etc.) contributors (for internal guides all contributors will be listed) source (Hack for LA, Code for America, Other)

Change the name of these fields

from category to practice-area

Current Fields for items showing up on the https://www.hackforla.org/toolkit/ as External Resources

title: Figma
  description: Our design team uses Figma to create wireframes and mockups.
  svg: svg/icon-figma.svg
  link-svg: svg/outer-link.svg
  provider-link: 'https://www.figma.com/'
  display: true

Current Fields for items showing up on the https://www.hackforla.org/toolkit/ as Guides

title: 2FA Guide
description: Hack for LA requires two-factor authentication (2FA) in GitHub for all project contributors.
short-description: Hack for LA requires two-factor authentication (2FA) in GitHub for all project contributors.
in-this-guide:
  - name: To Enable 2FA
    link: '#To-Enable-2FA'
  - name: FAQ
    link: '#FAQ'
card-type: guide-page
status: active
display: true
category: Development
svg: svg/2FA.svg
provider-link: '/guide-pages/2FA'

• https://www.hackforla.org/toolkit/
• https://github.com/hackforla/website/blob/gh-pages/_data/internal/toolkitresources.yml
• https://github.com/hackforla/website/tree/gh-pages/_guide-pages
• spreadsheet from guides team

[github-actions[bot]]

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

[tunglinn]

Availability: M-Th 6 hours/day ETA: 7/21

[tunglinn]

2FA

• Tools
  • GitHub
• Contributors
  • Danielle Nedivi
  • Ruben Sanchez
• Source: Hack for LA?
• Recommended By:

Creating Kanban projects - "Create a Guide/Template: Agile Development/Scrum/Kanban"

• Tools
  • Kanban
• Contributors
  • Qiqi Zheng
• Source: Hack for LA
• Recommended By:

Figma for open source projects - "Creating a Figma account for your project"

• Tools
  • Figma
• Contributors
• Source: Hack for LA
• Recommended By:

Found some other guides that can fall in this category too? Effective practices, For teams

GitHub issues (Guide in HfLA Google Drive)

• Tools
  • GitHub
• Contributors
  • Danielle Nedivi
  • Bonnie Wolfe
• Source: Hack for LA
• Recommended By:

Responsible use of images in open source projects (Guide in HfLA Google Drive)

• Tools
  • Unsplash, Pexels, Creative Commons Google Image List <- replace dog with what you are searching for, Wikimedia Commons
• Contributors
  • Danielle Nedivi
• Source: Hack for LA
• Recommended By:

Setting up 1password on open source projects

• Tools
  • 1Password
• Contributors
  • Jessica Cheng
• Source: Hack for LA
• Recommended By:

Showing civic tech experience on linkedin

• Tools
  • LinkedIn
• Contributors
  • Ibraheem Agbaje
  • Bonnie Wolfe
• Source: Hack for LA
• Recommended By:

Survey reporting dashboard guide

• Tools
  • Google Data Studio
• Contributors
  • Harish Lingam
  • Danielle Nedivi
  • Hannah Livnat
• Source: Hack for LA
• Recommended By:

Update teams page on hfla site

• Tools
  • GitHub
  • VSCode
• Contributors
• Source: Hack for LA
• Recommended By:

Using Kanban project (https://github.com/hackforla/knowledgebase-content/issues/16)

• Tools

  • Kanban

• Contributors Alexandra Stubbs, Alabi Kayode, Bonnie Wolfe, Leroy Tung, Tarang Gupta, Pawan Murthy, Ahdithan Uthayakumar Tarang Gupta, Ashley Lin, Dani N, Johan Suh, Liyang Chen

• Source: Hack for LA

• Recommended By:

[tunglinn]

Finding guides information:

• https://github.com/orgs/hackforla/projects/3
• https://github.com/hackforla/product-management/issues/128
• Or track down last changes of those .yml files.

[tunglinn]

Here are the guides that need to be checked/clarified.

2FA: source? HfLA or Other (GitHub)

Creating Kanban projects - "Create a Guide/Template: Agile Development/Scrum/Kanban" VS Using Kanban project (https://github.com/hackforla/knowledgebase-content/issues/16)

Figma for open source projects Is this the right link? Because I found some other guides that could fall in this category too? Effective practices, For teams, Creating account

Responsible use of images in open source projects (Guide in HfLA Google Drive)

• Tools
  • Unsplash, Pexels, Creative Commons Google Image List <- replace dog with what you are searching for, Wikimedia Commons
• Contributors
  • Danielle Nedivi

[ExperimentsInHonesty]

delete the following fields and content from the files in this folder: https://github.com/hackforla/website/tree/gh-pages/_guide-pages

"short description"

In the file: https://github.com/hackforla/website/blob/gh-pages/_includes/guide-card.html

change from

            {%- if guide.short-description -%}
            <p>{{ guide.short-description }}</p>
            {%- endif -%}

change to

            {%- if guide.description -%}
            <p>{{ guide.description }}</p>
            {%- endif -%}

[ExperimentsInHonesty]

change the status of all coming soon's to be Work in Progress, change the active to be Completed in the files in this folder: https://github.com/hackforla/website/tree/gh-pages/_guide-pages

In the file: https://github.com/hackforla/website/blob/gh-pages/_includes/guide-card.html

change from

        {%- if guide.status == 'coming-soon' -%}
            <span class="toolkit-flex-item-status">coming soon</span>
        {%- endif -%}  

to

[your code here]

---

This code will have to check for status==completed and give the link if it is completed and not if its not.

       {%- if guide.status == 'coming-soon' -%}
                <h3>{{ guide.title }}</h3>
            {%- else -%}  
                {%- if guide.title -%}
                <h3><a href={{ item.provider-link }}>{{ guide.title }}</a></h3>
                {%- endif -%}
            {%- endif -%}

[ExperimentsInHonesty]

• change the word provider-link to resource-url in the files
• [x] in this folder: https://github.com/hackforla/website/tree/gh-pages/_guide-pages
• [x] https://github.com/hackforla/website/blob/gh-pages/_data/internal/toolkitresources.yml
• [x] https://github.com/hackforla/website/blob/gh-pages/pages/toolkit.html
• [x] https://github.com/hackforla/website/blob/gh-pages/_includes/guide-card.html

[ExperimentsInHonesty]

Here is the complete list of fields that should be available when done (replacement name is in parens)

title: description: image: provider-link (resource-url) display: card-type: category (practice-areas): status:

recommended-by tools contributors source

[tunglinn]

Also, figure out svg vs link-svg.

link-svg is the bottom right icon for external resources.

Action items:

• deleted link-svg from toolkitresources.yml
• every external resource will have the same bottom right icon (made this change in toolkit.html

[tunglinn]

New Wiki Template page can be found here: https://github.com/hackforla/website/wiki/Toolkit-files-template

[tunglinn]

All changes are done.

One little blocker: I've changed the code so the practice area also filters for External Resources. However, the External Resource cards are in a special container (guides don't have one), that centers the External Resource card.

Take a look.

While the guide cards on top are shifted left.

[tunglinn]

Removed container (external-resource-container) that shifted External Resources to the left.

According to PR #1999, the container was created to match the design in Figma.

When I checked Figma, that design no longer exists. Also, the current design team has been reworking the toolkit page.

I also consulted Bonnie for the decision to remove external-resource-container.

[tunglinn]

Add resource-url-completed: resource-url-wip: resource-url-depreciated:

resource-url-wip link at "work in progress" if status is work-in-progress.

Other details will be settled at Friday's guide meeting (8/12/2022)

[tunglinn]

Revert changes with description and short-description in each guide file. The variable description is currently being used on the actually guide page, but the new system will have it all in the markdown file from the converter.

Create new system that will use description if short enough (will have to define this), otherwise use short-description. The guide card adjusts to the size of the description, so I decided to cap it at 210 characters. This can be changed in guide-card.html.

We should also have a system that reminds us that the short-description is missing. However, since it seems like right now, guide cards are being created manually, I'll just mention it in the wiki template page.

[tunglinn]

On the current Toolkit page, the titles of completed vs in progress guide cards are not aligned.