From a346bd8064737f82be4dfe1817cf55d0abbf1aa0 Mon Sep 17 00:00:00 2001
From: Nathan Cummins <nathan@nathancummins.com.au>
Date: Thu, 15 Oct 2026 17:29:35 +1030
Subject: [PATCH] Slim carousel page weight, with stable per-instance slide IDs

---
 src/components/ImageCarousel.astro     | 26 +++++++++++++-------------
 src/pages/404.astro                    |  1 +
 src/pages/index.astro                  |  3 +++
 src/pages/projects/[type]/[slug].astro |  1 +
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/components/ImageCarousel.astro b/src/components/ImageCarousel.astro
index 175c74e..725f7cd 100644
--- a/src/components/ImageCarousel.astro
+++ b/src/components/ImageCarousel.astro
@@ -6,6 +6,7 @@ import { shuffleArray } from "@lib/utils";
 
 interface Props {
   images: Array<ImageMetadata>;
+  id?: string;
   class: string;
   altText?: string | ((index: number) => string);
   interval?: number;
@@ -23,6 +24,7 @@ interface Props {
 
 const {
   images,
+  id = "carousel",
   class: className,
   altText = null,
   interval = 5000,
@@ -38,8 +40,6 @@ const {
   shuffle = false
 } = Astro.props as Props;
 
-const IDs: string[] = [];
-
 const imagesArray = shuffle ? shuffleArray(images) : images;
 ---
 
@@ -50,12 +50,9 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
 
     {
       imagesArray.map((image, index) => {
-        const ID = `image-carousel-${Math.random().toString(36)}`;
-        IDs.push(ID);
-
         return (
           <Image
-            data-id={`${ID}`}
+            data-id={`${id}-${index}`}
             class:list={[
               "absolute !h-full w-full object-cover object-center transition-opacity",
               transitionStyle,
@@ -89,16 +86,19 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
   <slot />
 </div>
 
-<script define:vars={{ imagesArray, interval, IDs }}>
+<script
+  define:vars={{ imageCount: imagesArray.length, carouselId: id, interval }}
+>
   let currentIndex = 0;
 
   setInterval(() => {
-    const total = imagesArray.length;
     const current = document.querySelectorAll(
-      `[data-id="${IDs[currentIndex]}"]`
+      `[data-id="${carouselId}-${currentIndex}"]`
+    )[0];
+    const nextIndex = (currentIndex + 1) % imageCount;
+    const next = document.querySelectorAll(
+      `[data-id="${carouselId}-${nextIndex}"]`
     )[0];
-    const nextIndex = (currentIndex + 1) % total;
-    const next = document.querySelectorAll(`[data-id="${IDs[nextIndex]}"]`)[0];
 
     if (!current || !next) return;
 
@@ -109,9 +109,9 @@ const imagesArray = shuffle ? shuffleArray(images) : images;
     next.classList.remove("opacity-0", "hidden");
     next.setAttribute("aria-hidden", "false");
 
-    const preloadIndex = (nextIndex + 1) % total;
+    const preloadIndex = (nextIndex + 1) % imageCount;
     const preloadImage = document.querySelectorAll(
-      `[data-id="${IDs[preloadIndex]}"]`
+      `[data-id="${carouselId}-${preloadIndex}"]`
     )[0];
     if (preloadImage) {
       preloadImage.classList.add("opacity-0");
diff --git a/src/pages/404.astro b/src/pages/404.astro
index f9c52e9..c7c6ca0 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -14,6 +14,7 @@ const heroImagesArray = await convertEagerImagesImportGlobToArray(heroImages);
 <MainLayout title="Oops! 404" navbarDisplay="transparent">
   <div class="absolute inset-0 h-full w-full bg-black">
     <ImageCarousel
+      id="not-found"
       images={heroImagesArray}
       class="h-full w-full"
       foreground={true}
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e78fdca..9282bec 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -56,6 +56,7 @@ const tracks = (
   <div class="h-screen w-full flex-row">
     <div class="absolute inset-0 h-full w-full bg-black">
       <ImageCarousel
+        id="hero"
         images={heroImagesArray}
         class="h-full w-full"
         foreground={true}
@@ -108,6 +109,7 @@ const tracks = (
     <section id="cta" class="text-white">
       <div class="flex h-48 w-full items-center justify-center">
         <ImageCarousel
+          id="cta"
           images={imagesForCTAArray}
           class="h-full w-full"
           foreground={true}
@@ -192,6 +194,7 @@ const tracks = (
     <section id="fillerUntilServicesIsComplete" class="text-white">
       <div class="flex h-96 w-full items-center justify-center">
         <ImageCarousel
+          id="filler"
           images={imagesForCTAArray}
           class="h-full w-full"
           foreground={true}
diff --git a/src/pages/projects/[type]/[slug].astro b/src/pages/projects/[type]/[slug].astro
index 4203e8c..9cf32d7 100644
--- a/src/pages/projects/[type]/[slug].astro
+++ b/src/pages/projects/[type]/[slug].astro
@@ -65,6 +65,7 @@ import P from "@components/MDX/P.astro";
     <section id="title" class="text-white">
       <div class="flex h-100 w-full items-center justify-center">
         <ImageCarousel
+          id="project-hero"
           images={images}
           class="h-full w-full"
           foreground={true}