@brightsideoy/kama 0.1.0-alpha.155 → 0.1.0-alpha.157

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

@@ -1,7 +1,11 @@
 ---
 // src/components/ui/KamaImage.astro
-import { getMediaUrl } from "@/lib/cms";
-import { buildAgnosticImageUrl } from "@/lib/media/media-url";
+
+import {
+  buildAgnosticImageUrl,
+  isSvgImage,
+  getImageUri,
+} from "@/lib/media/media-url";
 
 interface Props {
   image: any;
@@ -23,16 +27,35 @@ const {
   fetchpriority = "auto",
 } = Astro.props;
 
+// Unpack array wrappers if passed
+const targetImage = Array.isArray(image) ? image[0] : image;
+
+// 🎯 FIX 1: Support string paths in addition to object payloads
 const isValidImage = Boolean(
-  image && (image.url || image.path || image.variants),
+  targetImage &&
+  (typeof targetImage === "string" ||
+    targetImage.url ||
+    targetImage.path ||
+    targetImage.variants),
 );
 
-const variants = image?.variants || {};
-
-const rawMobileUrl = getMediaUrl(variants.mobile?.url);
-const rawTabletUrl = getMediaUrl(variants.tablet?.url);
-const rawDesktopUrl = getMediaUrl(
-  variants.standard?.url || image?.url || image?.path,
+// Detect if this asset is a vector SVG
+const isSvg =
+  isSvgImage(targetImage?.mimeType || "") ||
+  isSvgImage(targetImage?.filename || "") ||
+  isSvgImage(targetImage?.url || targetImage?.path || "") ||
+  (typeof targetImage === "string" && isSvgImage(targetImage));
+
+const variants = targetImage?.variants || {};
+
+// Resolve base paths using getImageUri to ensure CSP compliance & relativity
+const rawMobileUrl = getImageUri(variants.mobile?.url);
+const rawTabletUrl = getImageUri(variants.tablet?.url);
+const rawDesktopUrl = getImageUri(
+  variants.standard?.url ||
+    targetImage?.url ||
+    targetImage?.path ||
+    targetImage,
 );
 
 const mobileW = Number(variants.mobile?.cropCoordinates?.width || 768);
@@ -41,15 +64,21 @@ const mobileH = Number(variants.mobile?.cropCoordinates?.height || 576);
 const tabletW = Number(variants.tablet?.cropCoordinates?.width || 1024);
 const tabletH = Number(variants.tablet?.cropCoordinates?.height || 512);
 
-const baseWidth = Number(
-  variants.standard?.cropCoordinates?.width || image?.width || idealWidth,
+// 🎯 FIX 2: Omit explicit width/height attributes on SVGs if intrinsic dimensions are missing/0
+const rawWidth = Number(
+  variants.standard?.cropCoordinates?.width || targetImage?.width,
 );
-const baseHeight = Number(
-  variants.standard?.cropCoordinates?.height ||
-    image?.height ||
-    Math.round(idealWidth * 0.5),
+const rawHeight = Number(
+  variants.standard?.cropCoordinates?.height || targetImage?.height,
 );
 
+const baseWidth =
+  rawWidth && !isNaN(rawWidth) && rawWidth > 0 ? rawWidth : idealWidth;
+const baseHeight =
+  rawHeight && !isNaN(rawHeight) && rawHeight > 0
+    ? rawHeight
+    : Math.round(idealWidth * 0.5);
+
 function buildAgnosticSrcset(
   url: string,
   targetWidths: number[],
@@ -61,65 +90,83 @@ function buildAgnosticSrcset(
     .join(", ");
 }
 
-const mobileSrcset = rawMobileUrl
-  ? buildAgnosticSrcset(rawMobileUrl, [400, 768])
-  : null;
-
-const tabletSrcset = rawTabletUrl
-  ? buildAgnosticSrcset(rawTabletUrl, [768, 1024])
-  : null;
-
-const desktopSrcset = rawDesktopUrl
-  ? buildAgnosticSrcset(rawDesktopUrl, desktopWidths)
-  : null;
-
-const absoluteFallback = rawDesktopUrl
-  ? buildAgnosticImageUrl(rawDesktopUrl, idealWidth, 75)
-  : "";
+// Generate srcsets only for raster images
+const mobileSrcset =
+  !isSvg && rawMobileUrl ? buildAgnosticSrcset(rawMobileUrl, [400, 768]) : null;
+
+const tabletSrcset =
+  !isSvg && rawTabletUrl
+    ? buildAgnosticSrcset(rawTabletUrl, [768, 1024])
+    : null;
+
+const desktopSrcset =
+  !isSvg && rawDesktopUrl
+    ? buildAgnosticSrcset(rawDesktopUrl, desktopWidths)
+    : null;
+
+const fallbackUrl =
+  getImageUri(rawDesktopUrl, {
+    width: isSvg ? undefined : baseWidth,
+    quality: 75,
+  }) || "";
 ---
 
 {
-  isValidImage && (
-    <picture>
-      {Boolean(mobileSrcset) && (
-        <source
-          media="(max-width: 767px)"
-          srcset={mobileSrcset as string}
-          sizes="(max-width: 767px) calc(100vw - 48px), 768px"
-          width={mobileW}
-          height={mobileH}
-        />
-      )}
-
-      {Boolean(tabletSrcset) && (
-        <source
-          media="(min-width: 768px) and (max-width: 1024px)"
-          srcset={tabletSrcset as string}
-          sizes="(max-width: 1024px) calc(100vw - 48px), 1024px"
-          width={tabletW}
-          height={tabletH}
-        />
-      )}
-
-      {Boolean(desktopSrcset) && (
-        <source
-          srcset={desktopSrcset as string}
-          sizes={sizes}
-          width={baseWidth}
-          height={baseHeight}
-        />
-      )}
-
+  isValidImage &&
+    (isSvg ? (
+      /* 🎯 Clean single <img> for SVG Vectors */
       <img
-        src={absoluteFallback}
-        alt={image.alt || image.filename || ""}
-        width={baseWidth}
-        height={baseHeight}
+        src={fallbackUrl}
+        alt={targetImage.alt || targetImage.filename || ""}
+        width={rawWidth > 0 ? rawWidth : undefined}
+        height={rawHeight > 0 ? rawHeight : undefined}
         loading={loading}
         fetchpriority={fetchpriority}
         decoding={loading === "eager" ? "sync" : "async"}
         class={className}
       />
-    </picture>
-  )
+    ) : (
+      /* 🎯 Responsive <picture> for Raster Images (.png, .jpg, .webp) */
+      <picture>
+        {Boolean(mobileSrcset) && (
+          <source
+            media="(max-width: 767px)"
+            srcset={mobileSrcset as string}
+            sizes="(max-width: 767px) calc(100vw - 48px), 768px"
+            width={mobileW}
+            height={mobileH}
+          />
+        )}
+
+        {Boolean(tabletSrcset) && (
+          <source
+            media="(min-width: 768px) and (max-width: 1024px)"
+            srcset={tabletSrcset as string}
+            sizes="(max-width: 1024px) calc(100vw - 48px), 1024px"
+            width={tabletW}
+            height={tabletH}
+          />
+        )}
+
+        {Boolean(desktopSrcset) && (
+          <source
+            srcset={desktopSrcset as string}
+            sizes={sizes}
+            width={baseWidth}
+            height={baseHeight}
+          />
+        )}
+
+        <img
+          src={fallbackUrl}
+          alt={targetImage.alt || targetImage.filename || ""}
+          width={baseWidth}
+          height={baseHeight}
+          loading={loading}
+          fetchpriority={fetchpriority}
+          decoding={loading === "eager" ? "sync" : "async"}
+          class={className}
+        />
+      </picture>
+    ))
 }

package/templates/astro-starter/src/layouts/SkeletonLayout.astro

@@ -1,6 +1,7 @@
 ---
 // src/layouts/SkeletonLayout.astro
-import SeoHead from "@/components/seo/SeoHead.astro";
+
+import MetaHead from "@/components/global/MetaHead.astro";
 
 interface Props {
   node: Record<string, any>;
@@ -15,13 +16,14 @@ const { node = {}, content = {}, normalizedSlug, isHomePage } = Astro.props;
 const customCss = node.css || "";
 const customJsHeader = node.jsHeader || "";
 const customJsFooter = node.jsFooter || "";
+const pageLang = language || node?.language || "en";
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang={pageLang}>
   <head>
     <!-- 🎯 1. SEO & Meta Tags -->
-    <SeoHead
+    <MetaHead
       node={node}
       content={content}
       normalizedSlug={normalizedSlug}

package/templates/astro-starter/src/layouts/StandardLayout.astro

@@ -1,7 +1,10 @@
 ---
+// src/layouts/StandardLayout.astro
+
+import "@/styles/standard-theme.css";
 import Header from "@/components/global/Header.astro";
 import Footer from "@/components/global/Footer.astro";
-import SeoHead from "@/components/seo/SeoHead.astro";
+import MetaHead from "@/components/global/MetaHead.astro";
 import type { TreeNode, ContentBlock } from "@/lib/cms";
 
 interface Props {
@@ -12,6 +15,7 @@ interface Props {
   hasSidebar?: boolean;
   headerBlocks?: ContentBlock[];
   tree?: TreeNode[];
+  language?: string;
 }
 
 const {
@@ -21,22 +25,27 @@ const {
   isHomePage,
   headerBlocks = [],
   tree,
+  language,
 } = Astro.props;
 
+// 🎯 Language Cascade: explicit prop -> node language -> fallback undefined
+// (MetaHead will resolve channel.defaultLanguage if this remains undefined)
+const pageLang = language || node?.language || undefined;
+
 const footerBlocks = content?.footer || [];
 ---
 
-<html lang="en">
+<!doctype html>
+<html lang={pageLang}>
   <head>
-    <SeoHead
+    <MetaHead
       node={node}
       content={content}
       normalizedSlug={normalizedSlug}
       isHomePage={isHomePage}
       headerBlocks={headerBlocks}
+      resolvedLanguage={pageLang}
     />
-    <!-- 🎯 Standard CSS is decoupled from the bundler -->
-    <link rel="stylesheet" href="/css/standard-theme.css" />
   </head>
   <body>
     <Header node={node} tree={tree} />

package/templates/astro-starter/src/lib/cms.ts

@@ -13,18 +13,21 @@ export interface TreeNode {
     url?: string;
     target?: string;
     children?: TreeNode[];
+    [key: string]: any;
 }
 
 export interface ContentBlock {
     instanceId: number;
     componentId: string;
     data: Record<string, any>;
+    [key: string]: any;
 }
 
 export interface RegionMeta {
     isInherited: boolean;
     inheritedFromId?: string | number;
     inheritedFromTitle?: string;
+    [key: string]: any;
 }
 
 export interface NodeResponse {
@@ -45,6 +48,24 @@ export interface NodeResponse {
     };
     content: Record<string, ContentBlock[]>;
     regionMeta?: Record<string, RegionMeta>;
+    [key: string]: any;
+}
+
+export interface ChannelResponse {
+    id: number;
+    key: string;
+    label: string;
+    channelType: string;
+    defaultLanguage: string;
+    // Core branding & SEO properties typed for IDE auto-complete:
+    logo?: string;
+    logoText?: string;
+    favicon?: string;
+    siteTitle?: string;
+    titleSuffix?: string;
+    defaultSeoImage?: string;
+    // 🎯 Dynamically captures all public fields defined in YAML channel schemas:
+    [key: string]: any;
 }
 
 /**
@@ -72,6 +93,33 @@ export function getTreeId(): string {
     return import.meta.env.PUBLIC_TREE_ID || 'navigation';
 }
 
+/**
+ * Fetch channel metadata by key/ID.
+ * Serves global site branding, logos, favicons, and schema-defined public fields.
+ */
+export async function getChannel(
+    channelKeyOrId: string = getChannelId(),
+    customFetch: typeof fetch = fetch
+): Promise<ChannelResponse | null> {
+    const baseUrl = getCmsUrl();
+    const requestUrl = `${baseUrl}/api/v1/channel/${channelKeyOrId}`;
+
+    try {
+        const res = await customFetch(requestUrl, {
+            headers: {
+                Accept: 'application/json',
+            },
+        });
+
+        if (!res.ok) return null;
+
+        return (await res.json()) as ChannelResponse;
+    } catch (err) {
+        console.error('[CMS Client] Failed to fetch public channel:', err);
+        return null;
+    }
+}
+
 /**
  * Fetch tree navigation hierarchy by tree key/ID and channel.
  * Supports passing Cloudflare Service Bindings (e.g. env.CMS_WORKER.fetch)

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

@@ -1,6 +1,16 @@
-// src/kama-image-service.ts
+// src/lib/media/kama-image-service.ts
+
 import type { LocalImageService } from "astro";
 
+/**
+ * Checks whether a given path or URL represents a vector SVG image.
+ */
+function isSvgImage(src: string): boolean {
+    if (!src) return false;
+    const lower = src.toLowerCase();
+    return lower.endsWith('.svg') || lower.includes('image/svg+xml') || lower.includes('.svg?');
+}
+
 const kamaImageService: LocalImageService = {
     getURL(options) {
         let src = options.src;
@@ -11,6 +21,11 @@ const kamaImageService: LocalImageService = {
 
         if (typeof src === 'string') {
             try {
+                // 🎯 SVG Guard: Bypass raster query params for vector graphics
+                if (isSvgImage(src)) {
+                    return src;
+                }
+
                 const url = new URL(src, 'http://localhost');
 
                 if (options.width) url.searchParams.set('w', Math.round(options.width).toString());

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

@@ -1,6 +1,6 @@
 // src/lib/media/media-proxy.ts
+
 import type { APIContext } from "astro";
-import { env } from "cloudflare:workers";
 
 export function getMimeType(filePath: string): string {
     const ext = filePath.split(".").pop()?.toLowerCase();
@@ -20,8 +20,10 @@ export function getMimeType(filePath: string): string {
 }
 
 export async function handleMediaProxy({ request, params, url, locals }: APIContext): Promise<Response> {
-    // Safely extract Cloudflare context from Astro locals (fixes the Hono "c." typo)
-    const cfContext = (locals as any).cfContext || (locals as any).runtime?.ctx;
+    // 🎯 Safely extract Cloudflare context from Astro locals dual-environment
+    const runtime = locals.runtime || (locals as any).cfContext;
+    const workerEnv = runtime?.env || {};
+    const cfContext = runtime?.ctx || {};
 
     // 🎯 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');
@@ -42,7 +44,7 @@ export async function handleMediaProxy({ request, params, url, locals }: APICont
     const cleanPath = rawPath.replace(/^\/+|\/+$/g, "");
 
     // 2. Direct R2 Lookup (ONLY IF NO RESIZING PARAMS ARE PRESENT AND WE ARE IN PROD)
-    const mediaBucket = env.MEDIA_BUCKET;
+    const mediaBucket = workerEnv.MEDIA_BUCKET;
     if (mediaBucket && cleanPath && !hasResizeParams) {
         try {
             let r2Object = await mediaBucket.get(cleanPath);
@@ -82,8 +84,8 @@ export async function handleMediaProxy({ request, params, url, locals }: APICont
         let backendResponse: Response;
 
         // A. Production Mode (Cloudflare Service Binding)
-        if (env.CMS_WORKER) {
-            backendResponse = await env.CMS_WORKER.fetch(request);
+        if (workerEnv.CMS_WORKER) {
+            backendResponse = await workerEnv.CMS_WORKER.fetch(request);
         }
         // B. Local Dev Mode (Standard HTTP Fetch to local Hono Server)
         else {

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

@@ -1,4 +1,4 @@
-// src/lib/media-url.ts
+// src/lib/media/media-url.ts
 
 export function toRelativeMediaPath(rawUrl: string): string {
     if (!rawUrl) return "";
@@ -17,6 +17,15 @@ export function toRelativeMediaPath(rawUrl: string): string {
     return clean.startsWith("/") ? clean : `/${clean}`;
 }
 
+/**
+ * Checks whether a given path or MIME type represents a vector SVG image.
+ */
+export function isSvgImage(urlOrMime: string): boolean {
+    if (!urlOrMime) return false;
+    const lower = urlOrMime.toLowerCase();
+    return lower.endsWith('.svg') || lower.includes('image/svg+xml') || lower.includes('.svg?');
+}
+
 export function buildAgnosticImageUrl(
     url: string,
     width: number,
@@ -25,10 +34,65 @@ export function buildAgnosticImageUrl(
     const cleanPath = toRelativeMediaPath(url);
     if (!cleanPath) return "";
 
+    // 🎯 Vector Guard: Return pristine path for SVGs without width/quality query parameters
+    if (isSvgImage(cleanPath)) {
+        return cleanPath;
+    }
+
     const urlObj = new URL(cleanPath, "http://localhost");
     urlObj.searchParams.set("w", String(width));
     urlObj.searchParams.set("q", String(quality));
     urlObj.searchParams.set("f", "auto");
 
     return urlObj.pathname + urlObj.search;
+}
+
+export interface GetImageUriOptions {
+    width?: number;
+    quality?: number;
+    fallback?: string;
+    absoluteOrigin?: string; // e.g. siteOrigin for OG/Twitter tags or JSON-LD
+}
+
+/**
+ * Universal CMS Image Helper
+ * Safely resolves strings, asset objects, and array-wrapped media into relative or absolute CSP-compliant URLs.
+ */
+export function getImageUri(
+    imgObj: any,
+    options: GetImageUriOptions = {}
+): string | null {
+    const { width, quality = 75, fallback = null, absoluteOrigin } = options;
+
+    if (!imgObj) return fallback;
+
+    // 1. Unpack arrays (e.g. favicon: [{ url: '/media/...' }])
+    const target = Array.isArray(imgObj) ? imgObj[0] : imgObj;
+    if (!target) return fallback;
+
+    // 2. Detect mimeType if present on asset object
+    const isSvgAsset = isSvgImage(target?.mimeType || "") || isSvgImage(target?.filename || "");
+
+    // 3. Extract raw URL path across standard CMS field variations
+    const rawPath =
+        typeof target === "string"
+            ? target
+            : target?.variants?.standard?.url || target?.url || target?.path || null;
+
+    if (!rawPath) return fallback;
+
+    // 4. Process URL through buildAgnosticImageUrl (SVGs bypass raster params automatically)
+    let finalPath = (width && !isSvgAsset && !isSvgImage(rawPath))
+        ? buildAgnosticImageUrl(rawPath, width, quality)
+        : toRelativeMediaPath(rawPath);
+
+    if (!finalPath) return fallback;
+
+    // 5. Prepend absolute origin if requested (for Open Graph, Twitter cards, or JSON-LD)
+    if (absoluteOrigin) {
+        const cleanOrigin = absoluteOrigin.replace(/\/+$/, "");
+        return `${cleanOrigin}${finalPath.startsWith("/") ? "" : "/"}${finalPath}`;
+    }
+
+    return finalPath;
 }