From 1ea3d2dfd61148a41cf1f39270656e45fcc625f6 Mon Sep 17 00:00:00 2001
From: wires <benaultowski@proton.me>
Date: Mon, 11 May 2026 22:28:14 -0400
Subject: [PATCH] Add ResponsiveGraphic utility function to better interface
 with Astro.

---
 .../FeaturePhoto/FeaturePhoto.svelte          | 12 ++++----
 src/lib/Parse.svelte                          |  3 +-
 src/pages/stories/one/index.astro             | 13 ++++++--
 src/utils/graphics/ResponsiveGraphic.astro    | 30 -------------------
 src/utils/graphics/ResponsiveGraphic.ts       |  9 ++++++
 5 files changed, 28 insertions(+), 39 deletions(-)
 delete mode 100644 src/utils/graphics/ResponsiveGraphic.astro
 create mode 100644 src/utils/graphics/ResponsiveGraphic.ts

diff --git a/src/components/FeaturePhoto/FeaturePhoto.svelte b/src/components/FeaturePhoto/FeaturePhoto.svelte
index a750d23..df229fe 100644
--- a/src/components/FeaturePhoto/FeaturePhoto.svelte
+++ b/src/components/FeaturePhoto/FeaturePhoto.svelte
@@ -11,6 +11,10 @@
      * Photo source
      */
     src: string;
+    /**
+     * Photo srcset for responsive images
+     */
+    srcset?: string;
     /**
      * Photo altText
      */
@@ -63,6 +67,7 @@
 
   let {
     src,
+    srcset,
     altText,
     id = '',
     class: cls = '',
@@ -107,15 +112,10 @@
 
 <Block {width} class="photo fmy-6 {cls}" {id}>
   <figure
-    bind:this={container}
     aria-label="media"
     class="w-full flex flex-col relative"
   >
-    {#if !lazy || (intersectable && intersecting)}
-      <img class="w-full my-0" {src} alt={altText} />
-    {:else}
-      <div class="placeholder w-full" style={`height: ${height}px;`}></div>
-    {/if}
+    <img class="w-full my-0" {src} {srcset} alt={altText} loading={lazy ? 'lazy' : 'eager'} />
     {#if caption}
       <PaddingReset containerIsFluid={width === 'fluid'}>
         <Block width={textWidth} class="notes w-full fmy-0">
diff --git a/src/lib/Parse.svelte b/src/lib/Parse.svelte
index f668bc1..9d6e1a9 100644
--- a/src/lib/Parse.svelte
+++ b/src/lib/Parse.svelte
@@ -103,7 +103,8 @@
     {:else if block.type === 'photo'}
       <FeaturePhoto
         width={block.width}
-        src={photos[block.src] ?? block.src}
+        src={typeof photos[block.src] === 'object' ? photos[block.src].src : (photos[block.src] ?? block.src)}
+        srcset={typeof photos[block.src] === 'object' ? photos[block.src].srcset : undefined}
         altText={block.altText}
         caption={block.caption}
       />
diff --git a/src/pages/stories/one/index.astro b/src/pages/stories/one/index.astro
index 57ef147..c008bec 100644
--- a/src/pages/stories/one/index.astro
+++ b/src/pages/stories/one/index.astro
@@ -4,6 +4,7 @@ import Layout from '../../../layouts/Layout.astro';
 import Parse from '@lib/Parse.svelte';
 import { parse } from '@rferl/veronica';
 import ArchieML from './story.aml?raw';
+import { getResponsiveGraphic} from '@utils/graphics/ResponsiveGraphic'
 
 
 const content = parse(ArchieML);
@@ -14,9 +15,17 @@ import AiMap2 from './ai-scroller-2.svelte';
 import AiMap3 from './ai-scroller-3.svelte';
 
 //photos
-import { getImage } from "astro:assets";
 import photoOne from './Photo-4439.jpg';
-const photos = { 'Photo-4439.jpg': photoOne.src };
+
+// Await the optimized response. (You may need to cast it or update getResponsiveGraphic's type to accept ImageMetadata)
+const optimizedPhotoOne = await getResponsiveGraphic(photoOne as any);
+
+const photos = { 
+  'Photo-4439.jpg': {
+    src: optimizedPhotoOne.src,
+    srcset: optimizedPhotoOne.srcSet?.attribute
+  }
+};
 
 // ai2svelte foreground
 import AiForeground from './ai-foreground.svelte';
diff --git a/src/utils/graphics/ResponsiveGraphic.astro b/src/utils/graphics/ResponsiveGraphic.astro
deleted file mode 100644
index afcbd10..0000000
--- a/src/utils/graphics/ResponsiveGraphic.astro
+++ /dev/null
@@ -1,30 +0,0 @@
----
-import type { ImageMetadata } from "astro";
-import { getImage } from "astro:assets";
-
-interface Props {
-    width: string | ImageMetadata;
-}
-
-const { width } = Astro.props;
-
-const mobileImg = await getImage({
-    src: mobileImgUrl,
-    format: "webp",
-    width: 200,
-    height: 200,
-});
-
-const desktopImg = await getImage({
-    src: desktopImgUrl,
-    format: "webp",
-    width: 800,
-    height: 200,
-});
----
-
-<picture>
-    <source media="(max-width: 799px)" srcset={mobileImg.src} />
-    <source media="(min-width: 800px)" srcset={desktopImg.src} />
-    <img src={desktopImg.src} alt={alt} />
-</picture>
\ No newline at end of file
diff --git a/src/utils/graphics/ResponsiveGraphic.ts b/src/utils/graphics/ResponsiveGraphic.ts
new file mode 100644
index 0000000..c107526
--- /dev/null
+++ b/src/utils/graphics/ResponsiveGraphic.ts
@@ -0,0 +1,9 @@
+import { getImage } from "astro:assets";
+
+export async function getResponsiveGraphic(src: ImageMetadata, format = 'jpeg') {
+  return await getImage({
+    src,
+    format,
+    widths: [330, 510, 660, 930, 1200, 1600], 
+  });
+}