fix: hot-patch broken 404

fix: horizontal overflow on some devices fix: make background fading animation smoother
Fabric-Development · Dec 28, 2024 · 2f29660 · 2f29660
1 parent bb799ed
commit 2f29660
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 68 deletions.
diff --git a/src/components/HeroBackground.astro b/src/components/HeroBackground.astro
@@ -20,6 +20,7 @@ const {} = Astro.props;
     defaultUniforms: {} | undefined;
     darkUniforms: {} | undefined;
     lightUniforms: {} | undefined;
+    speed: number;
 
     clock: Three.Clock;
     canvas: HTMLElement;
@@ -32,7 +33,12 @@ const {} = Astro.props;
     mesh: Three.Mesh | undefined;
     uniforms: {};
 
-    constructor(defaultUniforms?: {}, darkUniforms?: {}, lightUniforms?: {}) {
+    constructor(
+      defaultUniforms?: {},
+      darkUniforms?: {},
+      lightUniforms?: {},
+      speed?: number
+    ) {
       const canvas = document.querySelector("canvas");
       if (!canvas) {
         throw new Error("couldn't query the canvas");
@@ -41,6 +47,7 @@ const {} = Astro.props;
       this.defaultUniforms = defaultUniforms;
       this.darkUniforms = darkUniforms;
       this.lightUniforms = lightUniforms;
+      this.speed = speed || 1;
 
       const loader = new Three.TextureLoader();
       this.uniforms =
@@ -95,23 +102,9 @@ const {} = Astro.props;
       this.resize();
       this.addObjects();
       this.render();
-      this.setUpResize();
       this.animate();
       this.updateColor(null);
-      const observer = new MutationObserver((mutations) => {
-        for (let mutation of mutations) {
-          if (
-            mutation.type === "attributes" &&
-            mutation.attributeName === "data-theme"
-          ) {
-            // @ts-ignore
-            const { theme } = mutation.target.dataset;
-            this.updateColor(theme);
-            break;
-          }
-        }
-      });
-      observer.observe(document.documentElement, { attributes: true });
+      this.setupEventHooks();
     }
 
     updateColor(theme: string | null) {
@@ -142,21 +135,22 @@ const {} = Astro.props;
       this.geometry = new Three.PlaneGeometry(2, 2);
       this.mesh = new Three.Mesh(this.geometry, this.material);
       this.scene.add(this.mesh);
-      this.canvasParent && this.canvasParent.classList.add("ready");
+
+      this.canvas.classList.add("ready");
     }
 
     animate() {
-      // TODO: parallex mouse movement
+      // TODO: parallax mouse movement
       // window.onmousemove = console.log;
     }
 
     render() {
-      this.material.uniforms.uTime.value = this.clock.getElapsedTime() * 0.4;
+      this.material.uniforms.uTime.value = this.clock.getElapsedTime() * this.speed;
 
       this.renderer.render(this.scene, this.camera);
 
       // wait for next frame
-      requestAnimationFrame(this.render.bind(this));
+      window.requestAnimationFrame(this.render.bind(this));
     }
 
     calculateSize() {
@@ -178,11 +172,28 @@ const {} = Astro.props;
       this.renderer.render(this.scene, this.camera);
     }
 
-    setUpResize() {
+    setupEventHooks() {
+      // resize events
       (window || this.canvasParent || this.canvas).addEventListener(
         "resize",
         this.resize.bind(this)
       );
+
+      // theme changing
+      const observer = new MutationObserver((mutations) => {
+        for (let mutation of mutations) {
+          if (
+            mutation.type === "attributes" &&
+            mutation.attributeName === "data-theme"
+          ) {
+            // @ts-ignore
+            const { theme } = mutation.target.dataset;
+            this.updateColor(theme);
+            break;
+          }
+        }
+      });
+      observer.observe(document.documentElement, { attributes: true });
     }
   }
 
@@ -195,8 +206,9 @@ const {} = Astro.props;
       },
       {
         uLightness: { value: 0.6 },
-        uColor: { value: new Three.Vector3(0.1, 0.1, 0.1) },
-      }
+        uColor: { value: new Three.Vector3(0.12, 0.12, 0.12) },
+      },
+      0.4
     );
   });
 </script>
@@ -206,23 +218,12 @@ const {} = Astro.props;
     transition: unset !important;
   }
 
-  @keyframes animate-opacity {
-    from {
-      opacity: 0.1;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-
-  div {
-    opacity: 0.1;
+  canvas {
+    opacity: 0;
+    transition: opacity 2s ease !important;
   }
 
-  div.ready {
-    animation-name: animate-opacity;
-    animation-duration: 1s;
-    animation-fill-mode: forwards;
-    animation-timing-function: linear;
+  canvas.ready {
+    opacity: 1;
   }
 </style>
diff --git a/src/components/NotFoundView.astro b/src/components/NotFoundView.astro
@@ -4,7 +4,7 @@ import ParticleLogo from "./ParticleLogo.astro";
 import { LinkButton } from "@astrojs/starlight/components";
 import { CardGrid } from "@astrojs/starlight/components";
 
-const baseUrl = import.meta.env.BASE_URL;
+const BASE_URL = import.meta.env.BASE_URL;
 ---
 
 <div class="mt-[-3rem] min-[800px]:mt-[-14rem]">
@@ -13,15 +13,17 @@ const baseUrl = import.meta.env.BASE_URL;
       class="404-container overflow-hidden flex flex-nowrap flex-col gap-8 content-center items-start justify-center pt-[0rem] min-[800px]:py-[8rem]"
     >
       <div>
-        <h1 class="text-[6rem] min-[800px]:text-[8rem] mb-[-2rem]"><b>404</b></h1>
+        <h1 class="text-[6rem] min-[800px]:text-[8rem] mb-[-2rem]">
+          <b>404</b>
+        </h1>
         <h4>Page not found. Check the URL or try using the search bar.</h4>
       </div>
-      <LinkButton href={ baseUrl || "/" } icon="right-arrow">Lets Go Home?</LinkButton>
+      <LinkButton href={BASE_URL || "/"} icon="right-arrow">
+        Let's Go Home?
+      </LinkButton>
     </div>
     <div style="filter: drop-shadow(0 0 12rem var(--overlay-white));">
-      <ParticleLogo/>
+      <ParticleLogo />
     </div>
   </CardGrid>
 </div>
-
-<style></style>
diff --git a/src/components/ParticleLogo.astro b/src/components/ParticleLogo.astro
@@ -631,5 +631,3 @@ const {} = Astro.props;
     ? window.addEventListener("load", onLoaded, false)
     : (window.onload = onLoaded);
 </script>
-
-<style></style>
diff --git a/src/components/ShowcaseCard.astro b/src/components/ShowcaseCard.astro
@@ -7,15 +7,17 @@ export interface Props {
   author: string;
   description?: string;
   imageSrc: string;
-  src?: string
+  src?: string;
 }
 
 const { name, author, description, imageSrc, src } = Astro.props;
 const BASE_URL = import.meta.env.BASE_URL;
-
 ---
+
 <article class="card mx-auto rounded-xl overflow-hidden">
-  <div class="card-text-container absolute inset-0 flex flex-col justify-between items-stretch m-0">
+  <div
+    class="card-text-container absolute inset-0 flex flex-col justify-between items-stretch m-0"
+  >
     <div class="card-upper-section">
       <h2 class="card-text card-name text-4xl font-black">{name}</h2>
       <h6 class="card-text card-description">{description}</h6>
@@ -25,18 +27,22 @@ const BASE_URL = import.meta.env.BASE_URL;
       <h6 class="card-text card-author">
         Author: <b>{author}</b>
       </h6>
-      {src && (
-        <LinkButton
-          target={"_blank"}
-          class="card-source-button"
-          icon="external"
-          href={src}
-        />
-      )}
+      {
+        src && (
+          <LinkButton
+            target={"_blank"}
+            class="card-source-button"
+            icon="external"
+            href={src}
+          />
+        )
+      }
     </div>
   </div>
   <Image
-    src={imageSrc.startsWith("/") ? ((BASE_URL == "/" ? "" : BASE_URL) + imageSrc) : imageSrc}
+    src={imageSrc.startsWith("/")
+      ? (BASE_URL == "/" ? "" : BASE_URL) + imageSrc
+      : imageSrc}
     alt={"a showcase image with " +
       ("a description that reads: " + description || "no description")}
     width={512}
@@ -65,7 +71,11 @@ const BASE_URL = import.meta.env.BASE_URL;
 
   .card-text-container {
     opacity: 0;
-    background: linear-gradient(349deg, rgba(0, 0, 0, 0) 0%, var(--sl-color-black) 100%);
+    background: linear-gradient(
+      349deg,
+      rgba(0, 0, 0, 0) 0%,
+      var(--sl-color-black) 100%
+    );
     transition: opacity 0.3s ease;
   }
 
@@ -83,7 +93,8 @@ const BASE_URL = import.meta.env.BASE_URL;
     max-width: 90%;
   }
 
-  .card-author, .card-description {
+  .card-author,
+  .card-description {
     font-size: clamp(0.8rem, 1.5vw, 1rem) !important;
     color: var(--sl-color-gray-2) !important;
   }

diff --git a/src/styles/custom.css b/src/styles/custom.css
@@ -2,6 +2,10 @@
 	transition: ease-in-out 0.1s;
 }
 
+:body {
+	overflow-x: clip
+}
+
 :root {
 	--sl-font: "Jost", "Readex Pro", sans-serif;
 }
@@ -24,7 +28,7 @@
 }
 
 /* Light mode colors. */
-:root[data-theme='light'] {
+:root[data-theme="light"] {
 	--bg-glare-hsl: 0, 0%, 0%;
 	--sl-color-accent-low: #f5f5f5;
 	--sl-color-accent: #000000;
@@ -47,10 +51,6 @@
 		radial-gradient(var(--overlay-white), transparent 65%) no-repeat 50% calc(100% + 20rem) / 60rem 30rem;
 } */
 
-[data-has-hero] .hero {
-	min-height: 90vh;
-}
-
 [data-has-hero] header {
 	border-bottom: 1px solid transparent;
 	background-color: transparent;
@@ -69,10 +69,11 @@
 }
 
 .site-title span {
+	color: var(--sl-color-white);
 	font-weight: 900;
-	/* Fabric's logo has it's text in ALL CAPS */
+
+	/* Our logo's text is in all caps */
 	font-variant-caps: all-petite-caps;
-	color: var(--sl-color-white);
 }
 
 .glare-wrapper {