From f973aec4b9826081e0e240643324bbd3e3140a16 Mon Sep 17 00:00:00 2001
From: btav <brian.ft.mit@gmail.com>
Date: Wed, 18 Jun 2025 11:07:12 -0400
Subject: [PATCH] initial commit

---
 src/components/Footer.astro      | 101 +++++++++---------
 src/components/SponsorLink.astro |  45 ++++----
 src/components/Sponsors.astro    | 172 ++++++++++++++++---------------
 3 files changed, 170 insertions(+), 148 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 8e87cfb..15d2e4f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -3,54 +3,63 @@ import Icon from "./icons/Icon.astro";
 ---
 
 <footer>
-  <div class="container">
-    <span>Built with ❤️ in Ottawa 🇨🇦</span>
-    <ul class="links">
-      <li>
-        <a href="https://discord.gg/XMqZZtpPSK">
-          <Icon name="discord" inverted />
-        </a>
-      </li>
-      <li>
-        <a href="https://www.meetup.com/ottawa-forwardjs-meetup/">
-          <Icon name="meetup" size={20} inverted /></a
-        >
-      </li>
-      <li>
-        <a href="https://github.com/OttawaReactJS/forwardjs.com">
-          <Icon name="github" size={20} inverted />
-        </a>
-      </li>
-    </ul>
-  </div>
+    <div class="container">
+        <span>Built with ❤️ in Ottawa 🇨🇦</span>
+        <ul class="links">
+            <li>
+                <a
+                    href="https://discord.gg/XMqZZtpPSK"
+                    aria-label="Join our Discord server"
+                >
+                    <Icon name="discord" inverted />
+                </a>
+            </li>
+            <li>
+                <a
+                    href="https://www.meetup.com/ottawa-forwardjs-meetup/"
+                    aria-label="Join our Meetup group"
+                >
+                    <Icon name="meetup" size={20} inverted /></a
+                >
+            </li>
+            <li>
+                <a
+                    href="https://github.com/OttawaReactJS/forwardjs.com"
+                    aria-label="View our GitHub repository"
+                >
+                    <Icon name="github" size={20} inverted />
+                </a>
+            </li>
+        </ul>
+    </div>
 </footer>
 
 <style>
-  footer {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 200px;
-    width: 100%;
-    background-color: #000;
-    color: #fff;
-    font-weight: 500;
-  }
-  .container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 1000px;
-    padding: 0 2rem;
-    @media screen and (max-width: 1000px) {
-      width: 100%;
+    footer {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 200px;
+        width: 100%;
+        background-color: #000;
+        color: #fff;
+        font-weight: 500;
+    }
+    .container {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 1000px;
+        padding: 0 2rem;
+        @media screen and (max-width: 1000px) {
+            width: 100%;
+        }
+    }
+    .links {
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
     }
-  }
-  .links {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: 8px;
-  }
 </style>
diff --git a/src/components/SponsorLink.astro b/src/components/SponsorLink.astro
index 0f3deb8..2e6ceea 100644
--- a/src/components/SponsorLink.astro
+++ b/src/components/SponsorLink.astro
@@ -1,26 +1,33 @@
 ---
-const { href } = Astro.props;
+const { href, hidden } = Astro.props;
 ---
 
-<a href={href} class="button" target="_blank"><slot /></a>
+<a
+    href={href}
+    class="button"
+    target="_blank"
+    aria-label={hidden ? "Sponsor" : undefined}
+    tabindex={hidden ? -1 : 0}
+    role={hidden ? undefined : "button"}><slot /></a
+>
 
 <style>
-  .button {
-    display: inline-block;
-    padding: 0.75rem 1.5rem;
-    font-size: 1rem;
-    text-align: center;
-    text-decoration: none;
-    color: #000;
-    background-color: #fff;
-    border: 2px solid #000;
-    box-shadow: 4px 4px 0 #000;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-radius: 8px;
-  }
+    .button {
+        display: inline-block;
+        padding: 0.75rem 1.5rem;
+        font-size: 1rem;
+        text-align: center;
+        text-decoration: none;
+        color: #000;
+        background-color: #fff;
+        border: 2px solid #000;
+        box-shadow: 4px 4px 0 #000;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        border-radius: 8px;
+    }
 
-  .button:hover {
-    box-shadow: 8px 8px 0 #000;
-  }
+    .button:hover {
+        box-shadow: 8px 8px 0 #000;
+    }
 </style>
diff --git a/src/components/Sponsors.astro b/src/components/Sponsors.astro
index 4df7c5d..6eacbda 100644
--- a/src/components/Sponsors.astro
+++ b/src/components/Sponsors.astro
@@ -38,103 +38,109 @@ const sponsors = [
 ---
 
 <section>
-  <div class="sponsors">
-    <h2>PARTNERS</h2>
+    <div class="sponsors">
+        <h2>PARTNERS</h2>
 
-    <div class="marquee">
-      <ul>
-        {
-          sponsors.map((sponsor) => (
-            <li>
-              <SponsorLink href={sponsor.href}>
-                <Image src={sponsor.logo} alt={`${sponsor.name} Logo`} />
-              </SponsorLink>
-            </li>
-          ))
-        }
-      </ul>
-      <!-- these items are hidden unless the marquee is active -->
-      <ul aria-hidden="true" class="marquee__hidden">
-        {
-          sponsors.map((sponsor) => (
-            <li>
-              <SponsorLink href={sponsor.href}>
-                <Image src={sponsor.logo} alt={`${sponsor.name} Logo`} />
-              </SponsorLink>
-            </li>
-          ))
-        }
-      </ul>
+        <div class="marquee">
+            <ul>
+                {
+                    sponsors.map((sponsor) => (
+                        <li>
+                            <SponsorLink href={sponsor.href}>
+                                <Image
+                                    src={sponsor.logo}
+                                    alt={`${sponsor.name} Logo`}
+                                />
+                            </SponsorLink>
+                        </li>
+                    ))
+                }
+            </ul>
+            <!-- these items are hidden unless the marquee is active -->
+            <ul aria-hidden="true" class="marquee__hidden">
+                {
+                    sponsors.map((sponsor) => (
+                        <li>
+                            <SponsorLink href={sponsor.href} hidden>
+                                <Image
+                                    src={sponsor.logo}
+                                    alt={`${sponsor.name} Logo`}
+                                />
+                            </SponsorLink>
+                        </li>
+                    ))
+                }
+            </ul>
+        </div>
     </div>
-  </div>
 </section>
 
 <style>
-  section {
-    display: flex;
-    width: 100%;
-    background: linear-gradient(90deg, var(--purple), var(--blue));
-    color: #fff;
-    padding: 2rem 1rem;
-    border: 4px solid #000;
-    border-width: 4px 0;
-    overflow-x: hidden;
-  }
+    section {
+        display: flex;
+        width: 100%;
+        background: linear-gradient(90deg, var(--purple), var(--blue));
+        color: #fff;
+        padding: 2rem 1rem;
+        border: 4px solid #000;
+        border-width: 4px 0;
+        overflow-x: hidden;
+    }
 
-  .sponsors {
-    --gap: 16px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--gap);
-    max-width: 1440px;
-    margin: auto;
-  }
+    .sponsors {
+        --gap: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap);
+        max-width: 1440px;
+        margin: auto;
+    }
 
-  .marquee {
-    display: flex;
-    flex-direction: row;
-    gap: var(--gap);
-  }
+    .marquee {
+        display: flex;
+        flex-direction: row;
+        gap: var(--gap);
+    }
 
-  .marquee__hidden {
-    display: none;
-    @media screen and (max-width: 1440px) {
-      display: flex;
+    .marquee__hidden {
+        display: none;
+        @media screen and (max-width: 1440px) {
+            display: flex;
+        }
     }
-  }
 
-  ul {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    gap: 16px;
-    animation: none;
+    ul {
+        list-style: none;
+        display: flex;
+        flex-direction: row;
+        list-style: none;
+        gap: 16px;
+        animation: none;
 
-    @media screen and (max-width: 1440px) {
-      animation: scroll 12s linear infinite;
+        @media screen and (max-width: 1440px) {
+            animation: scroll 12s linear infinite;
+        }
     }
-  }
-
-  img {
-    width: 100%;
-    height: 100%;
-    min-height: 60px;
-    min-width: 135px;
-    object-fit: contain;
-  }
 
-  li {
-    display: flex;
-    width: 186px;
-  }
+    img {
+        width: 100%;
+        height: 100%;
+        min-height: 60px;
+        min-width: 135px;
+        object-fit: contain;
+    }
 
-  @keyframes scroll {
-    from {
-      transform: translateX(0);
+    li {
+        display: flex;
+        width: 186px;
     }
-    to {
-      transform: translateX(calc(-100% - var(--gap)));
+
+    @keyframes scroll {
+        from {
+            transform: translateX(0);
+        }
+        to {
+            transform: translateX(calc(-100% - var(--gap)));
+        }
     }
-  }
 </style>