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

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

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

[x] Use the file pages/communities-of-practice.html[^1] 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.

[x] Open the file pages/communities-of-practice.html in your IDE

[x] 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">

[x] 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[^2] page
[ ] Submit your PR

Resources/Instructions

This issue was initiated by #6129 [^1]: pages/communities-of-practice.html [^2]: Getting Started page

Mar 12 '25 21:03 siyunfeng

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

May 19 '25 02:05 HackforLABot

Availability: Mon-Sun after 1pm (pacific) ETA: 5/25

May 19 '25 02:05 kdaca19xx

I have no idea how to make the button, and I'm stumped on the JS function business.

This is what I understand so far

when an existing member clicks a specific button on the join-slack-channel.html page, they are directed to a page for joining Slack channels on the Communities of Practice page.
when a non-member clicks the "Getting Started" link, they are directed to a page for joining HfLA.
I'm supposed to make a button in Liquid.
I'm supposed to make two functions in setMeetingTimes();.

I wasn't sure if I should commit my changes, so I pasted everything below, but my comments after "layout: default" aren't showing up (Apologies in advance for everything, and thx in advance for your help):

layout: default title: Join Slack Channel permalink: /join-slack-channel

<div class="header-text ">
    <h1 class="title1">Join Slack Channel</h1>
        <p>
            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.
        </p>

        <div class="align-center link-buttons"><!--I copied this <div> from lines 69-78 of communities-of-practice.html. I knew to remove the href, but I wasn't sure what else to remove.-->
           {% assign url_links = false %}

            {% if community[1].links[0].url %}
                {% assign url_links = true %}
                <a href=" " 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">
                    <!--INCLUDE A BUTTON TO REDIRECT TO THE CORRESPONDING SLACK CHANNEL-->
                    {% include svg/icon-slack.svg %}
                    Join Slack Channel
                </a>
            {% endif %}

        </div>

        <div>
        <p>
            If you are not yet a member of our community, please see our <a href="https://www.hackforla.org/getting-started" target="_blank"> Getting Started</a> page to join. <!--I copied the href from communities-of-practice.html-->
        </p>
        </div>

</div>

May 25 '25 18:05 kdaca19xx

@kdaca19xx

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, June 3, 2025 at 12:05 AM PST.}

Jun 06 '25 07:06 HackforLABot

Progress: I haven't given up yet.

Blockers: Almost everything. @t-will-gillis is helping me. I'm helping myself by studying up on Jekyll and Liquid.

Availability: I can put in 30 minutes/day between the 8th and the 13th

ETA: 6/??

Jun 07 '25 04:06 kdaca19xx

Hi @kdaca19xx Here are some comments. I apologize if I might be saying things you already know- I am partially writing this for my own understanding too:

Regarding Liquid: We talked in the meeting about why we would want to use Liquid. So for the communities-of-practice.html page, we have the section of code from Line 27 – 97 that gives a framework for a generic project (in Communities of Practice). On Line 27, const sorted_communities is defined as the content of _data/internal/communities (the files that are in this folder). Then we doing a for loop to populate the generic framework with specific data from each project: i.e. data-science.yml, engineering.yml, ops.yml, project-management.yml,, and ui-ux.yml`.
For the existing button, currently the href is applied for each separate project from the info in its .yml file. For example, for the Data Science Slack button, the URL is being pulled from Line 30 of _data/internal/communities/data-science.yml .
Issue 7988 wants you to replace the existing button for each project and send the user to the new page you created. So far so good.
But we want to save the previous href (which is “community[1].links[0].url” which in turn refers to Line 30 of the .yml file for Data Science, and similar for the other projects). This previous href info needs to be carried over to the button on the new page, so that the button on the new page has an href that points to “community[1].links[0].url”.
An Action Item is recommending that somehow upon a user’s click on the “Join Slack Channel” button on the COP page, the appropriate URL for the project (“community[1].links[0].url”) is saved to the localStorage variable, which is used as the href on the button on the new page.
One of the “Action Items" mentions to add functionality (I think?) to setMeetingTimes() function. I don’t think that this function is related. If it were me, I would probably not try to force what you are doing into setMeetingTimes(). But you can decide that.

About your existing code:

On the join-slack-channel.html page, I could be wrong but I don’t believe that you need the ‘for loop’ or the ‘if statement’- I think you only need Lines 20-24.
so the next step would be figuring out how to populate the href with the localStorage value that was saved when the user clicked the button within the corresponding project on the previous page. That is, each project’s appropriate “community[1].links[0].url”.

Hopefully this gets you farther along

Jun 08 '25 22:06 t-will-gillis

@t-will-gillis This is making more sense now, especially how variables can be assigned in Liquid (I kept mentioning JavaScript in yesterday's mtg.).

Using your notes (and Jekyll's tutorials), I'm now able to read the communities-of-practice.html and the five yml files, understand how {% for community in sorted_communities %} works, and understand why I can't find anything in communities-of-practice.js.

For now I've removed the following from join-slack-channel.html, and the page renders normally:

{% if community[1].links[0].url %}
    {% assign url_links = true %}
    {% endif %}

Many thanks to you, Mugdh, and Kevin!

The rest of bullet points from your notes are slowly sinking in. I'll work more on this tomorrow. Thx for reading!

Jun 10 '25 00:06 kdaca19xx

@kdaca19xx

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, June 17, 2025 at 12:05 AM PST.}

Jun 20 '25 07:06 HackforLABot

Progress:

The JS functions are working for the most part.

Blockers:

When I test http://localhost:4000/communities-of-practice.html, the Data Science section has a "Return to Communities" button that I remember originally saying "Join Slack Channel" like the other left-sided buttons in the sections below it. When I click "Return to Communities", http://localhost:4000/communities-of-practice - without ".html" - is rendered and "Return to Communities" button turns into "Join Slack Channel". This is one of two or three wrinkles, all of which have to do with this one button and/or what happens on the join-slack-channel.html page when the user is redirected after clicking this button. There's too much to write out. I'll be sure to come to the 6/22 mtg with detailed notes about what's going on, but I've planned on making time to debug between now and before the 6/22 mtg.

Availability

I should be able to make a pull request by 6/25.

ETA

I'll move what I've done to my repo by tomorrow and msg @t-will-gillis
by 6/?? (I msg'd will-t-gillis on 6/27 to touch base.)

Pictures (optional)

n/a

Jun 20 '25 21:06 kdaca19xx

@kdaca19xx

Please add update using the below template (even if you have a pull request). Afterwards, remove the '2 weeks inactive' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, July 29, 2025 at 12:09 AM PST.}

Aug 01 '25 07:08 HackforLABot

Progress

None

Blockers

The same snags remain. Two teams leads are in the loop.

Availability

Mon-Sun after 11am (pacific)

ETA

???

Pictures (optional)

n/a

Aug 10 '25 18:08 kdaca19xx

@kdaca19xx

Please add update using the below template (even if you have a pull request). Afterwards, remove the 'To Update !' label and add the 'Status: Updated' label.

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures (optional): "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) place your issue in the Questions/In Review column of the Project Board and ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel. Please note that including your questions in the issue comments- along with screenshots, if applicable- will help us to help you. Here and here are examples of well-formed questions.

_{You are receiving this comment because your last comment was before Tuesday, August 19, 2025 at 12:05 AM PST.}

Aug 22 '25 07:08 HackforLABot