@brightsideoy/kama 1.0.0-alpha.8 → 1.0.0-alpha.9

package/templates/astro-starter/src/components/ui/KamaImage.astro

@@ -20,7 +20,7 @@ interface Props {
 const {
   image = {},
   sizes = "100vw",
-  desktopWidths = [768, 1352],
+  desktopWidths = [768, 1352, 1920, 2560],
   idealWidth = 1352,
   class: className = "",
   loading = "lazy",
@@ -90,18 +90,26 @@ function buildAgnosticSrcset(
     .join(", ");
 }
 
-// Generate srcsets only for raster images
+// 🎯 High-DPI / Retina Optimization:
+// - Mobile: Includes 320, 640, 768 (covers 2x and 3x Retina mobile displays)
+// - Tablet: Includes 768, 1024, 1352 (covers iPad Pro Retina density)
+// - Desktop: Uses desktopWidths (defaults to 768, 1352, 1920, 2560 for 1440p and 4K)
 const mobileSrcset =
-  !isSvg && rawMobileUrl ? buildAgnosticSrcset(rawMobileUrl, [400, 768]) : null;
+  !isSvg && rawMobileUrl
+    ? buildAgnosticSrcset(rawMobileUrl, [320, 640, 768])
+    : null;
 
 const tabletSrcset =
   !isSvg && rawTabletUrl
-    ? buildAgnosticSrcset(rawTabletUrl, [768, 1024])
+    ? buildAgnosticSrcset(rawTabletUrl, [768, 1024, 1352])
     : null;
 
 const desktopSrcset =
   !isSvg && rawDesktopUrl
-    ? buildAgnosticSrcset(rawDesktopUrl, desktopWidths)
+    ? buildAgnosticSrcset(
+        rawDesktopUrl,
+        desktopWidths.length ? desktopWidths : [768, 1352, 1920, 2560],
+      )
     : null;
 
 const fallbackUrl =

package/templates/astro-starter/src/lib/media/kama-image-service.ts

@@ -28,10 +28,21 @@ const kamaImageService: LocalImageService = {
 
                 const url = new URL(src, 'http://localhost');
 
-                if (options.width) url.searchParams.set('w', Math.round(options.width).toString());
-                if (options.height) url.searchParams.set('h', Math.round(options.height).toString());
-                if (options.quality) url.searchParams.set('q', options.quality.toString());
-                if (options.format) url.searchParams.set('f', options.format.toString());
+                // 🎯 Pass width if defined (snapped on backend by assets.ts)
+                if (options.width && !isNaN(options.width)) {
+                    url.searchParams.set('w', Math.round(options.width).toString());
+                }
+
+                // 🎯 Pass height only if explicitly provided to maintain intrinsic aspect ratios
+                if (options.height && !isNaN(options.height)) {
+                    url.searchParams.set('h', Math.round(options.height).toString());
+                }
+
+                // 🎯 Default quality to 75 if unsupplied
+                url.searchParams.set('q', (options.quality || 75).toString());
+
+                // 🎯 Default format to 'auto' for backend WebP/AVIF negotiation
+                url.searchParams.set('f', options.format ? options.format.toString() : 'auto');
 
                 return src.startsWith('http') ? url.toString() : (url.pathname + url.search);
             } catch (e) {

package/templates/astro-starter/src/lib/media/media-proxy.ts

@@ -28,12 +28,31 @@ export async function handleMediaProxy({ request, params, url, locals }: APICont
     // 🎯 Detect if Astro is requesting a resized variant
     const hasResizeParams = url.searchParams.has('w') || url.searchParams.has('h') || url.searchParams.has('q') || url.searchParams.has('f');
 
+    // 🎯 Resolve Negotiated Format for Edge Cache Key
+    const acceptHeader = request.headers.get('Accept') || '';
+    const fParam = url.searchParams.get('f');
+    let resolvedFormat = fParam && fParam !== 'auto' ? fParam : '';
+
+    if (!resolvedFormat && hasResizeParams) {
+        if (acceptHeader.includes('image/avif')) resolvedFormat = 'avif';
+        else if (acceptHeader.includes('image/webp')) resolvedFormat = 'webp';
+    }
+
+    // 🎯 Construct a safe Cache Key that accounts for format negotiation
+    let cacheKeyUrl = request.url;
+    if (hasResizeParams && resolvedFormat && !fParam) {
+        const cacheUrlObj = new URL(cacheKeyUrl);
+        cacheUrlObj.searchParams.set('_resolvedFormat', resolvedFormat);
+        cacheKeyUrl = cacheUrlObj.toString();
+    }
+    const cacheKey = new Request(cacheKeyUrl, request);
+
     // 1. Cloudflare Edge Cache API
     let edgeCache: Cache | null = null;
     try {
         if (typeof caches !== "undefined" && caches.default) {
             edgeCache = caches.default;
-            const cachedResponse = await edgeCache.match(request);
+            const cachedResponse = await edgeCache.match(cacheKey);
             if (cachedResponse) return cachedResponse;
         }
     } catch (err) {
@@ -67,7 +86,7 @@ export async function handleMediaProxy({ request, params, url, locals }: APICont
                 const r2Response = new Response(r2Object.body, { status: 200, headers });
 
                 if (edgeCache) {
-                    const cachePromise = edgeCache.put(request, r2Response.clone());
+                    const cachePromise = edgeCache.put(cacheKey, r2Response.clone());
                     if (cfContext?.waitUntil) cfContext.waitUntil(cachePromise);
                     else cachePromise.catch(e => console.warn(e));
                 }
@@ -112,7 +131,7 @@ export async function handleMediaProxy({ request, params, url, locals }: APICont
             });
 
             if (edgeCache) {
-                const cachePromise = edgeCache.put(request, proxyResponse.clone());
+                const cachePromise = edgeCache.put(cacheKey, proxyResponse.clone());
                 if (cfContext?.waitUntil) cfContext.waitUntil(cachePromise);
                 else cachePromise.catch(e => console.warn(e));
             }

package/templates/astro-starter/src/lib/media/media-url.ts

@@ -1,11 +1,22 @@
 // src/lib/media/media-url.ts
 
+/**
+ * Normalizes absolute CMS URLs into clean relative /media/... paths.
+ * Ensures CSP compliance by routing requests through the Astro frontend proxy.
+ */
 export function toRelativeMediaPath(rawUrl: string): string {
     if (!rawUrl) return "";
 
-    let clean = String(rawUrl);
-    clean = clean.replace(/^https?:\/\/[^/]+/, "");
-    clean = clean.split("?")[0].split("#")[0];
+    let clean = String(rawUrl).trim();
+
+    try {
+        // Parse absolute or relative URLs safely using a dummy origin fallback
+        const urlObj = new URL(clean, "http://localhost");
+        clean = urlObj.pathname;
+    } catch {
+        // Fallback cleanup for malformed strings
+        clean = clean.replace(/^https?:\/\/[^/]+/, "").split("?")[0].split("#")[0];
+    }
 
     const mediaIndex = clean.indexOf("/media/");
     if (mediaIndex !== -1) {
@@ -26,6 +37,9 @@ export function isSvgImage(urlOrMime: string): boolean {
     return lower.endsWith('.svg') || lower.includes('image/svg+xml') || lower.includes('.svg?');
 }
 
+/**
+ * Constructs an agnostic /media/... URL with standard optimization query parameters.
+ */
 export function buildAgnosticImageUrl(
     url: string,
     width: number,

package/templates/astro-starter/src/pages/[...slug].astro

@@ -187,6 +187,46 @@ const hasSidebar = sidebarBlocks.length > 0;
 
 // Detect if this node is a standalone Page Skeleton
 const isSkeleton = node?.nodeType === "page-skeleton";
+
+// 🎯 HTML-OVER-THE-WIRE HOT SWAP LOGIC
+// Isolated as a string so we don't violate DRY when injecting into multiple layouts
+const hotSwapScript = `
+  if (window !== window.top) {
+    window.addEventListener("message", async event => {
+      if (event.data && event.data.type === "kama-preview-update") {
+        try {
+          const currentScrollY = window.scrollY;
+          const res = await fetch(event.data.url);
+          const newHtml = await res.text();
+          const newDoc = new DOMParser().parseFromString(newHtml, "text/html");
+
+          newDoc.body
+            .querySelectorAll("script, style, link, meta, noscript")
+            .forEach(el => el.remove());
+
+          const preserveTags = ["SCRIPT", "STYLE", "LINK", "META", "NOSCRIPT"];
+
+          Array.from(document.body.children).forEach(child => {
+            if (!preserveTags.includes(child.tagName.toUpperCase())) {
+              child.remove();
+            }
+          });
+
+          const referenceNode = document.body.firstChild;
+          Array.from(newDoc.body.children).forEach(child => {
+            if (!preserveTags.includes(child.tagName.toUpperCase())) {
+              document.body.insertBefore(child.cloneNode(true), referenceNode);
+            }
+          });
+
+          window.scrollTo(0, currentScrollY);
+        } catch (err) {
+          console.error("[KAMA Preview] Failed to hot-swap HTML:", err);
+        }
+      }
+    });
+  }
+`;
 ---
 
 {
@@ -199,6 +239,9 @@ const isSkeleton = node?.nodeType === "page-skeleton";
       isHomePage={isHomePage}
     >
       <BlockRenderer blocks={mainBlocks} contentMap={content} region="main" />
+
+      {/* 🎯 FIX: Script injected securely inside the layout ONLY during preview mode */}
+      {isPreview && <script is:inline set:html={hotSwapScript} />}
     </SkeletonLayout>
   ) : (
     <StandardLayout
@@ -258,53 +301,9 @@ const isSkeleton = node?.nodeType === "page-skeleton";
           </aside>
         )}
       </div>
+
+      {/* 🎯 FIX: Script injected securely inside the layout ONLY during preview mode */}
+      {isPreview && <script is:inline set:html={hotSwapScript} />}
     </StandardLayout>
   )
 }
-<script is:inline>
-  // 🎯 HTML-Over-The-Wire Hot-Swap Logic (Vite & Astro Safe)
-  if (window !== window.top) {
-    window.addEventListener("message", async event => {
-      if (event.data && event.data.type === "kama-preview-update") {
-        try {
-          // 1. Remember scroll position
-          const currentScrollY = window.scrollY;
-
-          // 2. Fetch the newly saved draft HTML in the background
-          const res = await fetch(event.data.url);
-          const newHtml = await res.text();
-          const newDoc = new DOMParser().parseFromString(newHtml, "text/html");
-
-          // 🎯 CORE FIX: Strip all embedded scripts, styles, and Vite client links
-          // from the NEW document before they ever touch the live DOM.
-          // This stops the browser from aggressively re-fetching them and throwing ERR_ABORTED.
-          newDoc.body
-            .querySelectorAll("script, style, link, meta, noscript")
-            .forEach(el => el.remove());
-
-          const preserveTags = ["SCRIPT", "STYLE", "LINK", "META", "NOSCRIPT"];
-
-          // 3. Safely wipe the current body EXCEPT for our preserved assets
-          Array.from(document.body.children).forEach(child => {
-            if (!preserveTags.includes(child.tagName.toUpperCase())) {
-              child.remove();
-            }
-          });
-
-          // 4. Inject the clean structural content
-          const referenceNode = document.body.firstChild;
-          Array.from(newDoc.body.children).forEach(child => {
-            if (!preserveTags.includes(child.tagName.toUpperCase())) {
-              document.body.insertBefore(child.cloneNode(true), referenceNode);
-            }
-          });
-
-          // 5. Restore scroll position instantly
-          window.scrollTo(0, currentScrollY);
-        } catch (err) {
-          console.error("[KAMA Preview] Failed to hot-swap HTML:", err);
-        }
-      }
-    });
-  }
-</script>