From 0f654cd18c214f1952396687f7aaad7704f2fc53 Mon Sep 17 00:00:00 2001
From: wires <benaultowski@proton.me>
Date: Mon, 11 May 2026 23:01:13 -0400
Subject: [PATCH] Consolidate and use ResponsiveGraphic

---
 src/pages/Squash.svelte | 73 ++++++++++++++++++++++-------------------
 src/pages/index.astro   | 30 ++++++++---------
 2 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/src/pages/Squash.svelte b/src/pages/Squash.svelte
index d6db042..2e5054f 100644
--- a/src/pages/Squash.svelte
+++ b/src/pages/Squash.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import ScrollerBase from '../components/ScrollerBase/ScrollerBase.svelte';
+  import { getResponsiveSizes } from '../utils/propValidators';
   
 
   // Types
@@ -8,6 +9,7 @@
     ForegroundPosition,
     ScrollerStep,
   } from '../components/@types/global';
+    import Article from '@components/Article/Article.svelte';
 
   type Graphic = {
     src: string;
@@ -65,42 +67,47 @@
   });
 </script>
 
-<ScrollerBase
-  bind:count
-  bind:index
-  bind:offset
-  bind:progress
-  query="div.step-foreground-container"
+<Article
+  columnWidths="normal"
 >
-  {#snippet backgroundSnippet()}
-    <div
-      class="background min-h-screen relative p-0 flex justify-center"
-      class:right={foregroundPosition === 'left opposite'}
-      class:left={foregroundPosition === 'right opposite'}
-      aria-hidden="true"
-    >
-      <img
-        bind:this={imgEl}
-        class="graphic"
-        style="--animation-time: {animationDuration}ms"
-        src={graphics[displayedIndex].src}
-        srcset={graphics[displayedIndex].srcset}
-        sizes="(min-width: 690px) 660px, calc(100vw - 30px)"
-        alt={graphics[displayedIndex].alt}
-      />
-    </div>
-  {/snippet}
 
-  {#snippet foregroundSnippet()}
-    {#each graphics as graphic, i}
-      <div class="step-foreground-container">
-        {#if graphic.title}<h2>{graphic.title}</h2>{/if}
-        {#if graphic.description}<p>{graphic.description}</p>{/if}
-        {#if graphic.notes}<aside>{graphic.notes}</aside>{/if}
+  <ScrollerBase
+    bind:count
+    bind:index
+    bind:offset
+    bind:progress
+    query="div.step-foreground-container"
+  >
+    {#snippet backgroundSnippet()}
+      <div
+        class="background min-h-screen relative p-0 flex justify-center"
+        class:right={foregroundPosition === 'left opposite'}
+        class:left={foregroundPosition === 'right opposite'}
+        aria-hidden="true"
+      >
+        <img
+          bind:this={imgEl}
+          class="graphic"
+          style="--animation-time: {animationDuration}ms"
+          src={graphics[displayedIndex].src}
+          srcset={graphics[displayedIndex].srcset}
+          sizes={getResponsiveSizes(backgroundWidth)}
+          alt={graphics[displayedIndex].alt}
+        />
       </div>
-    {/each}
-  {/snippet}
-</ScrollerBase>
+    {/snippet}
+
+    {#snippet foregroundSnippet()}
+      {#each graphics as graphic, i}
+        <div class="step-foreground-container">
+          {#if graphic.title}<h2>{graphic.title}</h2>{/if}
+          {#if graphic.description}<p>{graphic.description}</p>{/if}
+          {#if graphic.notes}<aside>{graphic.notes}</aside>{/if}
+        </div>
+      {/each}
+    {/snippet}
+  </ScrollerBase>
+</Article>
 
 <style lang="scss">
   @use 'mixins' as mixins;
diff --git a/src/pages/index.astro b/src/pages/index.astro
index e852b07..4cf14db 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,33 +8,29 @@ import graphicOne from '../assets/Photo-3468.jpg';
 import graphicTwo from '../assets/Photo-3471.jpg';
 import graphicThree from '../assets/Photo-3515.jpg';
 import graphicFour from '../assets/Photo-3585.jpg';
+import { getResponsiveGraphic } from '../utils/graphics/ResponsiveGraphic';
 
-const widths = [330, 510, 660, 930, 1200];
 
-import type { ContainerWidth } from '../components/@types/global';
 
-async function buildSrcset(srcImg: ImageMetadata) {
-  const images = await Promise.all(
-    widths.map((w) => getImage({ src: srcImg, width: w, format: 'jpeg' }))
-  );
+const graphics = await Promise.all([
+  { srcImg: graphicOne, alt: 'Photo one', title: 'Graphic One', description: 'a caption', notes: '', width: 'normal' as const },
+  { srcImg: graphicTwo, alt: 'Photo two', title: 'Graphic Two', description: 'a description', notes: 'noted', width: 'normal' as const },
+  { srcImg: graphicThree, alt: 'Photo three', title: 'Graphic Three', description: 'an observation', notes: '', width: 'normal' as const },
+  { srcImg: graphicFour, alt: 'Photo four', title: 'Graphic Four', description: 'blah', notes: 'note here', width: 'normal' as const },
+].map(async ({ srcImg, ...rest }) => {
+  const images = await getResponsiveGraphic(srcImg as any);
   return {
-    src: images[images.length - 1].src,
-    srcset: images.map((img, i) => `${img.src} ${widths[i]}w`).join(', '),
+    ...rest,
+    src: images.src,
+    srcset: images.srcSet?.attribute,
   };
-}
-
-const graphics = [
-  { ...(await buildSrcset(graphicOne)), alt: 'Photo one', title: 'Graphic One', description: 'a caption', notes: '', width: 'normal' as const },
-  { ...(await buildSrcset(graphicTwo)), alt: 'Photo two', title: 'Graphic Two', description: 'a description', notes: 'noted', width: 'normal' as const },
-  { ...(await buildSrcset(graphicThree)), alt: 'Photo three', title: 'Graphic Three', description: 'an observation', notes: '', width: 'normal' as const },
-  { ...(await buildSrcset(graphicFour)), alt: 'Photo four', title: 'Graphic Four', description: 'blah', notes: 'note here', width: 'normal' as const },
-];
+}));
 ---
 
 <Layout>
   <Article>
     <BodyText text="Cras eu consectetur justo, eu luctus felis. Suspendisse lectus enim, bibendum vitae euismod et, condimentum quis tortor. Donec sit amet orci nibh. Vivamus facilisis nunc quis nunc feugiat placerat. Nunc ut augue vitae metus fermentum venenatis vel at dui. Nulla aliquet nibh porttitor odio imperdiet, in ullamcorper augue bibendum. Cras ornare nunc ut sollicitudin egestas. Suspendisse neque ipsum, faucibus eu hendrerit porttitor, tincidunt a tortor. Aliquam at facilisis diam, a ullamcorper lacus. Suspendisse pharetra faucibus venenatis. Donec efficitur condimentum neque ut vehicula." />
-    <Squash client:only="svelte" {graphics} />
+    <Squash client:only="svelte" {graphics} backgroundWidth="normal" />
     <BodyText text="Sed feugiat, lacus id elementum tristique, urna elit consectetur mauris, in commodo ipsum neque sed turpis. Ut elit ex, pharetra laoreet leo vitae, rhoncus condimentum ligula. Morbi et sagittis tellus. Proin sed felis euismod ipsum lacinia feugiat. Donec finibus pretium dignissim. Integer ornare egestas scelerisque. Donec purus elit, viverra vitae felis at, volutpat sollicitudin tellus. Vivamus fermentum dictum dapibus. Phasellus non ligula ac augue efficitur ultrices sit amet at quam. Fusce dapibus luctus ex, non semper massa commodo eget." />
   </Article>
 </Layout>