From f3bf68863706fe1c65bdd3a0db5ac32d38270719 Mon Sep 17 00:00:00 2001
From: Siyun Feng <siyunf21@gmail.com>
Date: Fri, 7 Mar 2025 11:34:54 -0500
Subject: [PATCH] [DRAFT/DO NOT MERGE]Testing creating a new page to navigate
 member and non-member to join slack channel

---
 assets/js/communities-of-practice.js |  8 +++++++-
 pages/communities-of-practice.html   |  3 ++-
 pages/join-slack-channel.html        | 27 +++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)
 create mode 100644 pages/join-slack-channel.html

diff --git a/assets/js/communities-of-practice.js b/assets/js/communities-of-practice.js
index 2500c5639b..4553fc1a98 100644
--- a/assets/js/communities-of-practice.js
+++ b/assets/js/communities-of-practice.js
@@ -57,4 +57,10 @@ document.addEventListener("DOMContentLoaded", function() {
     }
 
     setMeetingTimes();
-});
\ No newline at end of file
+});
+
+function setSlackLink(slackLink) {
+    console.log("before:", slackLink);
+    localStorage.setItem("slackLink", slackLink);
+    console.log('after:', localStorage.getItem("slackLink"));
+}
\ No newline at end of file
diff --git a/pages/communities-of-practice.html b/pages/communities-of-practice.html
index cb03a5f279..bceaa826e5 100644
--- a/pages/communities-of-practice.html
+++ b/pages/communities-of-practice.html
@@ -71,7 +71,8 @@ <h3 class = "Title4">{{ community[1].name}}</h3>
 
                 {% if community[1].links[0].url %}
                     {% assign url_links = true %}
-                    <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">
+                    <a href="./join-slack-channel.html" onclick="setSlackLink(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">
+                        <!-- <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"> -->
                         {% include svg/icon-slack.svg %}
                         Join Slack Channel
                     </a>
diff --git a/pages/join-slack-channel.html b/pages/join-slack-channel.html
new file mode 100644
index 0000000000..95c6a92649
--- /dev/null
+++ b/pages/join-slack-channel.html
@@ -0,0 +1,27 @@
+---
+layout: default
+title: Join Our Slack Channel
+permalink: /join-slack-channel
+---
+
+<!-- Header banner -->
+<div class="header-container flex-container">
+    <div class="header-text ">
+        <p>
+            The link below goes to a Slack channel inside Hack for LA's Slack Workspace. 
+            If you are a member of our community already, selecting the link below will take to the channel. 
+        </p>
+        {% assign slackLink = localStorage.getItem('slackLink') %}
+        <a href="{{slackLink}}" class="btn btn-primary btn-md btn--default cop-btn" target="_blank" title="{{community[1].name}} Slack channel" rel="noopener noreferrer">
+            {% include svg/icon-slack.svg %}
+            Join Slack Channel
+        </a>
+        <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.
+        </p>
+    </div>
+</div>
+
+<script type="module" src="assets/js/communities-of-practice.js"></script>
\ No newline at end of file