Create a new page to navigate existing members and non-members how to join Slack channels

[siyunfeng]

Overview

To enhance user experience for existing members and non-members, we need a dedicated page that directs existing members to join Slack channels from the Communities of Practice page, while guiding non-members to join HfLA before accessing the Slack channels.

Action Items

• Create a new file join-slack-channel.html inside the directory pages in your IDE

• Use the file pages/communities-of-practice.html¹ as reference, and add the following content in the file join-slack-channel.html:

  The link below goes to a Slack channel inside Hack for LA's Slack Workspace. 
  If you are already a member of our community, selecting the link below will take you to the channel. 
  [INCLUDE A BUTTON TO REDIRECT TO THE CORRESPONDING SLACK CHANNEL]
  If you are not yet a member of our community, please see our [Getting Started](https://www.hackforla.org/getting-started) page to join.
  
  

• Open the file pages/communities-of-practice.html in your IDE

• Replace the following code:

   <a href="{{ community[1].links[0].url }}" class="btn btn-primary btn-md btn--default cop-btn" target="_blank" title="{{community[1].name}} Slack channel" rel="noopener noreferrer">
  

  with

  <a href="./join-slack-channel.html" id="{{ community[1].links[0].url }}" class="btn btn-primary btn-md btn--default cop-btn slack-link" target="_blank" title="{{community[1].name}} Slack channel" rel="noopener noreferrer">
  

• Open the file assets/js/communities-of-practice.js in your IDE

• In the file assets/js/communities-of-practice.js, create a function to save the corresponding Slack channels URL (the value we saved in the element attribute: id="{{ community[1].links[0].url }}") to localStorage when users click on the Join Slack Channel button in communities-of-practice.html below:

  setMeetingTimes();
  

• In the file assets/js/communities-of-practice.js, create a function to get the corresponding Slack channel URL we saved in the localStorage, and redirect the users to the correct Slack Channel when users click on the Join Slack Channel button in join-slack-channel.html below the function you created from the previous step

• In your IDE, run Docker to test the features below:

  • Test the Join Slack Channel buttons in the Communities of Practice page, ensure all the buttons will redirect the users to the new page Join Slack Channel you created in join-slack-channel.html
  • Test the Join Slack Channel buttons in the Join Slack Channel page, ensure the button will redirect the users to the correct URL to join the corresponding team Slack channel
  • Test the Getting Started link in the Join Slack Channel page, ensure the link will redirect the users to the Getting Started² page

• Submit your PR

Resources/Instructions

• This issue was initiated by ER: Issue with Public Facing Slack Channel Links for Non members #6129

Footnotes

1. pages/communities-of-practice.html ↩

2. Getting Started page ↩