Refactor current-projects file to fix any formatting issue with new tools data format

[ronaldpaek]

Overview

The purpose of this issue is to refactor the code in the current-project file to handle a list of strings(tools), instead of a single one. This change will maintain consistent formatting and resolve problems introduced by the recent change in data format.

Action Items

• Refer to current-projects.js and locate where tools is being referenced
• Refactor this code so tools can work as a comma separated String or an Array

{%- if project.tools -%},
"tools": `{{ project.tools }}`
{%- endif -%}

to:

{%- if project.tools -%},
"tools": {{ project.tools | jsonify }}
{%- endif -%}

• Refactor this code to map over tools since tools will be an Array now and not a String

${project.tools ?
`
<div class="project-tools">
<strong>Tools: </strong>
${ project.tools }
</div>
`:""
}

to:

${project.tools ?
`
<div class="project-tools">
<strong>Tools: </strong>
${(Array.isArray(project.tools) ? project.tools : project.tools.split(','))
    .map(tool => `<p class='project-card-field-inline'> ${tool}</p>`)
    .join(", ")
}
</div>
`: ""
}

After completing both changes this should allow us to make changes to tools without effecting the functionality of the website

• Confirm that the Tools data is rendering correctly/ as before on the Projects page.

Merge team:

• Once this issue is merged, release its dependency on Create new issues to refactor Tools data in project md files  #4777

Resources/Instructions

• Projects page
• Liquid template language
• This issue is part of an epic: Add a Tools filter to the projects check page #4427

[t-will-gillis]

@ExperimentsInHonesty I confirmed that @ronaldpaek's changes will render the Tools data correctly before, during, and after the transition from the string to the list/array datatype. I have deleted the image since it is no longer relevant to the issue, and I will hide the comments.

[github-actions]

Hi @t-will-gillis, 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 :)

[ronaldpaek]

Did you end up doing this?