fix: site various fixes (#3223)

unionlabs · Nov 8, 2024 · 77bd0dd · 77bd0dd
2 parents c1c1dc4 + 8a4c64a
commit 77bd0dd
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 31 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -24,8 +24,6 @@
     "@contentful/rich-text-types": "^17.0.0",
     "@splinetool/runtime": "^1.9.36",
     "@splinetool/viewer": "^1.9.36",
-    "@types/gl-matrix": "^3.2.0",
-    "@types/webgl2": "^0.0.11",
     "astro": "^5.0.0-beta.7",
     "astro-capo": "^0.0.1",
     "astro-font": "^0.1.81",
@@ -54,6 +52,8 @@
     "@iconify-json/fa6-brands": "^1.2.1",
     "@iconify-json/fa6-solid": "^1.2.1",
     "@iconify-json/line-md": "^1.2.2",
+    "@types/gl-matrix": "^3.2.0",
+    "@types/webgl2": "^0.0.11",
     "@iconify-json/logos": "^1.2.3",
     "@iconify-json/lucide": "^1.2.11",
     "@iconify-json/mdi": "^1.2.1",

diff --git a/site/site.nix b/site/site.nix
@@ -18,7 +18,7 @@ _: {
       packages = {
         site = mkCi false (
           unstablePkgs.buildNpmPackage {
-            npmDepsHash = "sha256-wOqePds2J9QK7tAF2ndFJQ/pWusSrEvFmm6VDLPKPDE=";
+            npmDepsHash = "sha256-Q9HbeXkrLI3aomqLxcpIAk+f72KWHOusQdQjRoz/tj4=";
             src = ./.;
             sourceRoot = "site";
             pname = packageJSON.name;

diff --git a/site/src/components/Footer.astro b/site/src/components/Footer.astro
@@ -82,12 +82,12 @@ function isInternal(menuItem: { url: string }): boolean {
   <ul class="grid grid-cols-2 sm:grid-cols-4 gap-12 list-none py-4">
     {
       menuSections.map((menuSection) => (
-        <section>
+        <li>
           <h3 class="font-supermolot text-lg font-bold uppercase !m-0 !p-0">
             {menuSection.title}
           </h3>
           {menuSection.items.map((menuItem) => (
-            <li>
+            <div>
               <a
                 href={menuItem.url}
                 target={isInternal(menuItem) ? "" : "_blank"}
@@ -96,9 +96,9 @@ function isInternal(menuItem: { url: string }): boolean {
               >
                 {menuItem.name}
               </a>
-            </li>
+            </div>
           ))}
-        </section>
+        </li>
       ))
     }
   </ul>

diff --git a/site/src/components/Header.astro b/site/src/components/Header.astro
@@ -180,9 +180,10 @@ const menuItems = [
     <a
       href="/"
       id="union-logo"
+      aria-label="Union logo"
       class="flex items-center gap-2 decoration-transparent visited:text-white"
     >
-      <img class="h-12 py-1" src="/logo-full.svg" />
+      <img class="h-12 py-1" src="/logo-full.svg" alt="Union logo" />
     </a>
 
     <div
@@ -232,7 +233,7 @@ const menuItems = [
             rel="noopener noreferrer"
             href="https://github.com/unionlabs/union"
           >
-            <Icon name="tabler:brand-github-filled" color="#fff" size="20px" />
+            <Icon name="fa6-brands:github" color="#fff" size="20px" />
             <span class="sr-only">GitHub</span>
           </a>
         </li>

diff --git a/site/src/components/sections/MarqueeSection.astro b/site/src/components/sections/MarqueeSection.astro
@@ -1,6 +1,6 @@
 ---
-import "../../styles/marquee.css"
-import type { NamedImage } from "../../lib/types.ts"
+import "#/styles/marquee.css"
+import type { NamedImage } from "#/lib/types.ts"
 
 interface Props {
   title: string
@@ -16,25 +16,33 @@ const { title, data, reverse } = Astro.props
   <div class="absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-black to-black/0 z-10"></div>
   <div class="absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-black to-black/0 z-10"></div>
 
-  <div class:list={[
-    'marquee',
-    {'marquee--reverse': reverse}
-  ]}>
+  <div class:list={["marquee", { "marquee--reverse": reverse }]}>
     <div class="marquee__group">
       {
-        data.map(item =>
-                <img src={item.logo.src} class="grayscale" alt={item.name}></img>
-        )
+        data.map(item => (
+          <img
+            src={item.logo.src}
+            class="grayscale"
+            alt={item.name}
+            loading="lazy"
+            decoding="async"
+          />
+        ))
       }
     </div>
 
     <div aria-hidden="true" class="marquee__group">
       {
         data.map(item => (
-                <img src={item.logo.src} class="grayscale" alt={item.name}></img>
+          <img
+            src={item.logo.src}
+            class="grayscale"
+            alt={item.name}
+            loading="lazy"
+            decoding="async"
+          />
         ))
       }
     </div>
   </div>
 </section>
-
diff --git a/site/src/lib/constants/env.ts b/site/src/lib/constants/env.ts
@@ -16,7 +16,9 @@ function getEnvVariable<T extends keyof ImportMetaEnv>(
 ): ImportMetaEnv[T] {
   const value = import.meta.env[name]
   if (optional && value === undefined) {
-    console.warn(`Missing environment variable ${name}`)
+    if (import.meta.env.MODE === "development") {
+      console.warn(`Missing environment variable ${name}`)
+    }
     return undefined
   }
   return value ?? raise(`Missing environment variable ${name}`)

diff --git a/site/src/pages/index.astro b/site/src/pages/index.astro
@@ -1,13 +1,13 @@
 ---
-import { contentfulClient } from "../lib/contentful/client.ts"
-import type { LandingPageSkeleton, LandingPageFields } from "../lib/contentful/types.ts"
+import { contentfulClient } from "#/lib/contentful/client.ts"
+import type { LandingPageSkeleton, LandingPageFields } from "#/lib/contentful/types.ts"
 
 import SectionsContainer from "#/components/SectionsContainer.astro"
-import ContainedSection from "../components//ContainedSection.astro"
-import ConsensusSection from "../components/sections/landing/ConsensusSection.astro"
-import ZkSection from "../components/sections/landing/ZkSection.astro"
-import ExecutionSection from "../components/sections/landing/ExecutionSection.astro"
-import MarqueeSection from "../components/sections/MarqueeSection.astro"
+import ContainedSection from "#/components//ContainedSection.astro"
+import ConsensusSection from "#/components/sections/landing/ConsensusSection.astro"
+import ZkSection from "#/components/sections/landing/ZkSection.astro"
+import ExecutionSection from "#/components/sections/landing/ExecutionSection.astro"
+import MarqueeSection from "#/components/sections/MarqueeSection.astro"
 
 import pod_polygon from "#/assets/images/marquee/pods/polygon.png"
 import pod_lightshift from "#/assets/images/marquee/pods/lightshift.png"
@@ -30,7 +30,7 @@ import partner_polygon from "#/assets/images/marquee/partners/polygon.png"
 import partner_movement from "#/assets/images/marquee/partners/movement.png"
 import partner_bera from "#/assets/images/marquee/partners/bera.png"
 import partner_arbitrum from "#/assets/images/marquee/partners/arbitrum.png"
-import AnimationLayout from "../layouts/AnimationLayout.astro"
+import AnimationLayout from "#/layouts/AnimationLayout.astro"
 
 export const prerender = false