highlight the current page on the navbar

README.md

@@ -1 +1,43 @@
-# hello friends !
+# hello friends !
+
+
+# To Run the Website Locally
+
+### Prerequisites
+
+- [Node.js](https://nodejs.org/) version 18.17.1 or higher (we recommend using NVM to manage Node versions)
+- [pnpm](https://pnpm.io/) (optional but recommended)
+
+### Step 1: Install correct Node.js version
+
+If you have NVM (Node Version Manager) installed:
+
+```bash
+nvm install 18.17.1
+nvm use 18.17.1
+```
+
+Verify your Node.js version:
+
+```bash
+node -v
+```
+
+### Step 2: Install dependencies
+
+```bash
+npm install
+```
+
+### Step 3: Start the development server
+
+```bash
+npx astro dev
+```
+
+## Tech Stack
+
+- [Astro](https://astro.build/) - The core framework
+- [React](https://reactjs.org/) - For interactive components
+- [Tailwind CSS](https://tailwindcss.com/) - For styling (find docs [here](https://tailwindcss.com/docs/installation/using-vite))
+- [TypeScript](https://www.typescriptlang.org/) - For type safety

src/components/Navbar.tsx

@@ -1,32 +1,57 @@
 import { cn } from "@/lib/utils";
+import { useEffect, useState } from "react";
+
+interface NavbarProps {
+  currentPath?: string;
+}
+
+export default function Navbar({ currentPath: initialPath = "" }: NavbarProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath);
+
+  useEffect(() => {
+    // Get current path on client-side if not provided or for client-side navigation
+    if (!initialPath) {
+      setCurrentPath(window.location.pathname);
+    }
+  }, [initialPath]);
 
-export default function Navbar() {
   return (
     <>
       <div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
         <div>
           <strong className={cn("sm:text-2xl md:text-4xl")}>
+            <a href="/">
             Resist Tech Monopolies
+            </a>
           </strong>
         </div>
         <strong className={cn("sm:text-1xl flex gap-4 md:text-4xl")}>
           <a
-            href="/src/pages/GetInvolved.astro"
-            className={cn("text-blue-500")}
+            href="/GetInvolved/"
+            className={cn(
+              "text-blue-500",
+              currentPath.includes("GetInvolved") && "border-b-2 border-blue-500"
+            )}
           >
             Get Involved
           </a>
           {/* <Separator orientation="vertical" className="w-5" /> */}
           <a
-            href="/src/pages/PointsOfUnity.astro"
-            className={cn("text-green-500")}
+            href="/PointsOfUnity/"
+            className={cn(
+              "text-green-500",
+              currentPath.includes("PointsOfUnity") && "border-b-2 border-green-500"
+            )}
           >
             Points of Unity
           </a>
           {/* <Separator orientation="vertical" className="w-5" /> */}
           <a
-            href="/src/pages/WhatWereWorkingOn.astro"
-            className={cn("text-red-500")}
+            href="/WhatWereWorkingOn/"
+            className={cn(
+              "text-red-500",
+              currentPath.includes("WhatWereWorkingOn") && "border-b-2 border-red-500"
+            )}
           >
             What We're Working On
           </a>
@@ -36,8 +61,8 @@ export default function Navbar() {
       <div className={cn("flex flex-row justify-between pb-8")}>
         {[
           1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
-        ].map(() => (
-          <>
+        ].map((key) => (
+          <div key={key}>
             <a
               href="https://www.flaticon.com/free-icons/computer"
               title="computer icons"
@@ -56,7 +81,7 @@ export default function Navbar() {
             >
               <img src="/people.png" alt="people icon" width="30" height="30" />
             </a>
-          </>
+          </div>
         ))}
       </div>
     </>

src/pages/GetInvolved.astro

@@ -1,17 +1,32 @@
 ---
-import Footer from "@/components/Footer";
-import Navbar from "@/components/Navbar";
-import Layout from "@/layouts/Layout.astro";
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Layout from "../layouts/Layout.astro";
+import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
-
-      <div class="pl-4">get involved!</div>
+      <Navbar client:load currentPath={currentPath} />
+      <div class="pl-4 pr-4">
+        <h1 class="text-3xl font-semibold">Get Involved</h1>
+        
+        <div class="my-8">
+          <a 
+            href="https://shlink.resisttechmonopolies.online/HNrZG" 
+            class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Sign Up Here
+          </a>
+        </div>
+      </div>
     </div>
-
     <Footer />
   </main>
 </Layout>

src/pages/PointsOfUnity.astro

@@ -1,24 +1,46 @@
-<h1>Points of Unity</h1>
-<p>
-  We situate ourselves in our context - as Seattle residents and as users and
-  creators of the technologies we aim to resist. We are seeing long-spanning
-  rise of fascism within all levels of governance, from Seattle city council to
-  national governments here and abroad. In parallel is the increasing power of
-  tech companies over our lives through surveillance and the provisioning of
-  everyday needs, from employment to how we get our internet utilities in the
-  first place. There are rising income disparities across the nation, but also
-  more specifically across everyone who can be considered a "tech worker": from
-  a CEO to a software engineer to a contractor to a child slave mining cobalt in
-  the Congo. Technology contributes to gentrification both through the
-  tech-enabled financialization of real estate as well as the gentrifying waves
-  of tech workers moving into cities. Increased technical sophisication of
-  militaries and carceral systems have created the first "AI genocide" in
-  Palestine; increased militarization of borders such as the US-Mexico and the
-  surveillance of migrants; increased police brutality worldwide, all
-  disparately impacting people of the global majority. All of these crises are
-  enabled and worsened by technology companies. As tech workers of various kinds
-  living in the imperial core, on stolen Coast Salish land covered by the broken
-  Treaty of Point Elliot of 1855, we understand how our labor is contributing -
-  directly or indirectly - to these oppressions, and seek to use our skills
-  towards more liberatory ends.
-</p>
+---
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Layout from "../layouts/Layout.astro";
+import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load currentPath={currentPath} />
+      <div class="pl-4 pr-4">
+        <h1 class="text-3xl font-semibold">Points of Unity</h1>
+        <p>
+          We situate ourselves in our context - as Seattle residents and as
+          users and creators of the technologies we aim to resist. We are seeing
+          long-spanning rise of fascism within all levels of governance, from
+          Seattle city council to national governments here and abroad. In
+          parallel is the increasing power of tech companies over our lives
+          through surveillance and the provisioning of everyday needs, from
+          employment to how we get our internet utilities in the first place.
+          There are rising income disparities across the nation, but also more
+          specifically across everyone who can be considered a "tech worker":
+          from a CEO to a software engineer to a contractor to a child slave
+          mining cobalt in the Congo. Technology contributes to gentrification
+          both through the tech-enabled financialization of real estate as well
+          as the gentrifying waves of tech workers moving into cities. Increased
+          technical sophisication of militaries and carceral systems have
+          created the first "AI genocide" in Palestine; increased militarization
+          of borders such as the US-Mexico and the surveillance of migrants;
+          increased police brutality worldwide, all disparately impacting people
+          of the global majority. All of these crises are enabled and worsened
+          by technology companies. As tech workers of various kinds living in
+          the imperial core, on stolen Coast Salish land covered by the broken
+          Treaty of Point Elliot of 1855, we understand how our labor is
+          contributing - directly or indirectly - to these oppressions, and seek
+          to use our skills towards more liberatory ends.
+        </p>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>

src/pages/WhatWereWorkingOn.astro

@@ -1,2 +1,22 @@
-<h1>What We're Working On</h1>
-<p>Pihole Workshop</p>
+---
+import Navbar from "../components/Navbar";
+import Footer from "../components/Footer";
+import Layout from "../layouts/Layout.astro";
+import "../styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load currentPath={currentPath} />
+      <div class="pl-4 pr-4">
+        <h1 class="text-3xl font-semibold">What We're Working On</h1>
+        <p>Pihole Workshop</p>
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>

src/pages/index.astro

@@ -3,12 +3,15 @@ import Navbar from "@/components/Navbar";
 import Footer from "@/components/Footer";
 import Layout from "@/layouts/Layout.astro";
 import "@/styles/globals.css";
+
+// Get current path from Astro
+const currentPath = Astro.url.pathname;
 ---
 
 <Layout>
   <main class="flex min-h-screen flex-col justify-between">
     <div>
-      <Navbar />
+      <Navbar client:load currentPath={currentPath} />
 
       <div class="pl-4 pr-4">
         <p>