@brightsideoy/kama 1.0.0-alpha.2 → 1.0.0-alpha.20

package/templates/astro-starter/src/components/blocks/Form.astro

@@ -0,0 +1,143 @@
+---
+// src/components/blocks/Form.astro
+interface Props {
+  data: {
+    formId: string;
+  };
+}
+
+const { data } = Astro.props;
+const formId = data?.formId;
+
+const kamaApiUrl = import.meta.env.KAMA_API_URL || 'http://localhost:8787';
+const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY;
+
+// Fetch form YAML schema at render time
+let schema = null;
+if (formId) {
+  try {
+    const res = await fetch(`${kamaApiUrl}/api/ext/kama-forms/render/${formId}`);
+    if (res.ok) schema = await res.json();
+  } catch (err) {
+    console.error(`Failed to fetch schema for ${formId}`);
+  }
+}
+
+const requiresTurnstile = schema?.settings?.requireTurnstile === true;
+---
+
+{schema ? (
+  <div class="kama-form-wrapper" data-form-id={formId} data-api-url={kamaApiUrl}>
+    
+    <!-- 🎯 Conditionally load Cloudflare Turnstile Script -->
+    {requiresTurnstile && (
+      <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+    )}
+
+    <div class="form-header">
+      <h3>{schema.title}</h3>
+      {schema.description && <p>{schema.description}</p>}
+    </div>
+
+    <div class="form-alert success" style="display: none;"></div>
+    <div class="form-alert error" style="display: none;"></div>
+
+    <form class="kama-public-form">
+      {schema.fields?.map((field: any) => (
+        <div class="form-group">
+          <label for={`field-${field.name}`}>
+            {field.label}
+            {field.required && <span class="required">*</span>}
+          </label>
+
+          {field.type === 'textarea' ? (
+            <textarea id={`field-${field.name}`} name={field.name} placeholder={field.placeholder || ''} required={field.required} rows="4" />
+          ) : field.type === 'select' ? (
+            <select id={`field-${field.name}`} name={field.name} required={field.required}>
+              <option value="" disabled selected>{field.placeholder || 'Select...'}</option>
+              {field.options?.map((opt: any) => (
+                <option value={opt.value}>{opt.label}</option>
+              ))}
+            </select>
+          ) : (
+            <input type={field.type || 'text'} id={`field-${field.name}`} name={field.name} placeholder={field.placeholder || ''} required={field.required} />
+          )}
+        </div>
+      ))}
+
+      <!-- 🎯 Turnstile Widget renders here -->
+      {requiresTurnstile && turnstileSiteKey && (
+        <div class="form-group turnstile-container">
+          <div class="cf-turnstile" data-sitekey={turnstileSiteKey}></div>
+        </div>
+      )}
+
+      <button type="submit" class="submit-btn">Submit</button>
+    </form>
+  </div>
+) : (
+  <p class="form-error">Form definition "{formId}" could not be loaded.</p>
+)}
+
+<script>
+  document.querySelectorAll('.kama-form-wrapper').forEach((container) => {
+    const form = container.querySelector<HTMLFormElement>('.kama-public-form');
+    const formId = container.getAttribute('data-form-id');
+    const apiUrl = container.getAttribute('data-api-url');
+    const successBox = container.querySelector<HTMLDivElement>('.form-alert.success');
+    const errorBox = container.querySelector<HTMLDivElement>('.form-alert.error');
+    const submitBtn = container.querySelector<HTMLButtonElement>('.submit-btn');
+
+    if (!form || !formId || !apiUrl) return;
+
+    form.addEventListener('submit', async (e) => {
+      e.preventDefault();
+      if (submitBtn) submitBtn.disabled = true;
+      if (successBox) successBox.style.display = 'none';
+      if (errorBox) errorBox.style.display = 'none';
+
+      // FormData automatically picks up the hidden "cf-turnstile-response" input
+      const formData = new FormData(form);
+      const payload = Object.fromEntries(formData.entries());
+
+      try {
+        const res = await fetch(`${apiUrl}/api/ext/kama-forms/submit/${formId}`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(payload)
+        });
+
+        const result = await res.json();
+
+        if (res.ok && result.success) {
+          if (successBox) {
+            successBox.textContent = result.message || 'Form submitted successfully!';
+            successBox.style.display = 'block';
+          }
+          form.reset();
+          
+          // 🎯 Reset Turnstile after successful submission if the user wants to submit again
+          if (window.turnstile) {
+            window.turnstile.reset();
+          }
+        } else {
+          if (errorBox) {
+            errorBox.textContent = result.error || 'Form submission failed.';
+            errorBox.style.display = 'block';
+          }
+          // 🎯 Reset Turnstile on failure so they get a fresh token
+          if (window.turnstile) {
+            window.turnstile.reset();
+          }
+        }
+      } catch (err) {
+        if (errorBox) {
+          errorBox.textContent = 'Server connection error.';
+          errorBox.style.display = 'block';
+        }
+      } finally {
+        if (submitBtn) submitBtn.disabled = false;
+      }
+    });
+  });
+</script>

package/templates/astro-starter/src/components/blocks/HeaderImage.astro

@@ -45,13 +45,13 @@ if (region.includes("_")) {
 }
 
 /**
- * Default single-column layout.
+ * Default single-column layout (aligned to backend CDN buckets).
  */
 let maxWidth = "1352";
 let targetColumnWidth = 1352;
 
-// 1-col: Base mobile (~400), 2x mobile/tablet (~800), 1x desktop (1352), 2x desktop (2704)
-let optimizedWidths = [400, 800, 1352, 2048, 2704];
+// 1-col: 1x/2x desktop and retina buckets
+let optimizedWidths = [768, 1352, 1920, 2560];
 let sizes = "(max-width: 1399px) calc(100vw - 48px), 1352px";
 
 /**
@@ -61,8 +61,7 @@ if (columnCount === 2) {
   maxWidth = "660";
   targetColumnWidth = 660;
 
-  // 2-col: 1x desktop (660), 2x mobile stacked (~800), 2x desktop (1320)
-  optimizedWidths = [400, 660, 800, 1320];
+  optimizedWidths = [640, 768, 1024, 1352];
   sizes =
     "(max-width: 767px) calc(100vw - 48px), " +
     "(max-width: 1399px) calc((100vw - 80px) / 2), " +
@@ -76,8 +75,7 @@ else if (columnCount === 3) {
   maxWidth = "429";
   targetColumnWidth = 429;
 
-  // 3-col: 1x desktop (429), 2x desktop/tablet (~858), 2x/3x mobile stacked (~1000)
-  optimizedWidths = [300, 429, 858, 1024];
+  optimizedWidths = [320, 640, 768, 1024];
   sizes =
     "(max-width: 767px) calc(100vw - 48px), " +
     "(max-width: 1399px) calc((100vw - 112px) / 3), " +
@@ -91,8 +89,7 @@ else if (columnCount === 4) {
   maxWidth = "314";
   targetColumnWidth = 314;
 
-  // 4-col: 1x desktop (314), 2x desktop (628), 2x/3x mobile stacked (~1000)
-  optimizedWidths = [264, 314, 628, 1024];
+  optimizedWidths = [320, 640, 768];
   sizes =
     "(max-width: 767px) calc(100vw - 48px), " +
     "(max-width: 1399px) calc((100vw - 144px) / 4), " +
@@ -106,12 +103,9 @@ else if (columnCount === 4) {
     sizes={sizes}
     desktopWidths={optimizedWidths}
     idealWidth={targetColumnWidth}
-    width={data.width || data.image_meta?.width}
-    height={data.height || data.image_meta?.height}
     class="responsive-header-image"
     loading={isLcp ? "eager" : "lazy"}
     fetchpriority={isLcp ? "high" : "auto"}
-    decoding={isLcp ? "sync" : "async"}
   />
 </div>
 

package/templates/astro-starter/src/components/blocks/ImageBlock.astro

@@ -26,31 +26,31 @@ if (region.includes("_")) {
   if (region.includes("_col4")) columnCount = 4;
 }
 
-// 🎯 Column Config Lookup (Max width, breakpoint widths, sizes)
+// 🎯 Column Config Lookup (Target width, aligned CDN breakpoint widths, sizes)
 const COLUMN_CONFIGS: Record<
   number,
   { targetWidth: number; widths: number[]; sizes: string }
 > = {
   1: {
     targetWidth: 1352,
-    widths: [768, 1352],
+    widths: [768, 1352, 1920, 2560],
     sizes: "(max-width: 1399px) calc(100vw - 48px), 1352px",
   },
   2: {
     targetWidth: 660,
-    widths: [400, 660],
+    widths: [640, 768, 1024, 1352],
     sizes:
       "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 80px) / 2), 660px",
   },
   3: {
     targetWidth: 429,
-    widths: [300, 429],
+    widths: [320, 640, 768, 1024],
     sizes:
       "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 112px) / 3), 429px",
   },
   4: {
     targetWidth: 314,
-    widths: [264, 314],
+    widths: [320, 640, 768],
     sizes:
       "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 144px) / 4), 314px",
   },
@@ -67,7 +67,6 @@ const layout = COLUMN_CONFIGS[columnCount] || COLUMN_CONFIGS[1];
         sizes={layout.sizes}
         desktopWidths={layout.widths}
         idealWidth={layout.targetWidth}
-        maxWidth={layout.targetWidth}
         class="free-crop-image"
         loading={isLcp ? "eager" : "lazy"}
         fetchpriority={isLcp ? "high" : "auto"}

package/templates/astro-starter/src/components/blocks/NodeList.astro

@@ -0,0 +1,274 @@
+---
+// src/components/blocks/NodeList.astro
+import KamaImage from "@/components/ui/KamaImage.astro";
+
+interface Props {
+  data: Record<string, any>;
+}
+
+const { data } = Astro.props;
+const items = data.initialItems || [];
+const listTitle = data.listTitle || "";
+---
+
+<div class="cms-block node-list-wrapper">
+  {listTitle && <h2 class="node-list-title">{listTitle}</h2>}
+
+  {
+    items.length === 0 ? (
+      <p class="empty-state">No items found.</p>
+    ) : (
+      <div class="node-grid" id={`grid-${data.blockId}`}>
+        {items.map((item: any) => (
+          <article class="node-card">
+            <a href={`/${item.slug}`} class="node-card-link">
+              {/* 🎯 ARCHITECTURAL FIX: Use KamaImage for initial load optimization */}
+              {item.image ? (
+                <KamaImage
+                  image={item.image}
+                  sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
+                  desktopWidths={[320, 640, 768, 1024]}
+                  idealWidth={429}
+                  loading="lazy"
+                />
+              ) : (
+                <div class="image-placeholder" />
+              )}
+              <div class="node-card-content">
+                <h3 class="node-card-title">{item.title}</h3>
+                {item.createdAt && (
+                  <time datetime={item.createdAt} class="node-card-date">
+                    {new Date(item.createdAt).toLocaleDateString("en-GB", {
+                      day: "numeric",
+                      month: "short",
+                      year: "numeric",
+                    })}
+                  </time>
+                )}
+                {item.excerpt && (
+                  <p class="node-card-excerpt">{item.excerpt}</p>
+                )}
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+    )
+  }
+
+  {
+    data.loadMoreUrl && (
+      <div class="load-more-container">
+        <button
+          class="load-more-btn"
+          data-url={data.loadMoreUrl}
+          data-target={`grid-${data.blockId}`}
+        >
+          Load More
+        </button>
+      </div>
+    )
+  }
+</div>
+
+<style is:global>
+  .node-list-wrapper {
+    margin: 2rem 0;
+  }
+
+  .node-list-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: #1e293b;
+  }
+
+  .node-list-wrapper .empty-state {
+    color: #64748b;
+    font-style: italic;
+  }
+
+  .node-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 640px) {
+    .node-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .node-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .node-card {
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #fff;
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .node-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  .node-card-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  /* 🎯 Because of is:global, this styling will automatically apply to <KamaImage> outputs! */
+  .node-card img,
+  .node-card .image-placeholder {
+    width: 100%;
+    height: auto; /* 🎯 FIX: Allows tall images to display their natural height */
+    object-fit: cover;
+    background: #f1f5f9;
+  }
+
+  .node-card .image-placeholder {
+    aspect-ratio: 16 / 9; /* Keep the placeholder a rectangle if there is no image at all */
+  }
+  .node-card-content {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .node-card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: #0f172a;
+    line-height: 1.4;
+  }
+
+  .node-card-date {
+    font-size: 0.875rem;
+    color: #64748b;
+    margin-bottom: 0.75rem;
+  }
+
+  .node-card-excerpt {
+    font-size: 0.9375rem;
+    color: #475569;
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .load-more-container {
+    margin-top: 2rem;
+    text-align: center;
+  }
+
+  .load-more-btn {
+    padding: 0.75rem 1.5rem;
+    background: #0f172a;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .load-more-btn:hover {
+    background: #334155;
+  }
+</style>
+
+<script>
+  function initLoadMoreButtons() {
+    const buttons = document.querySelectorAll(".load-more-btn:not(.is-bound)");
+
+    buttons.forEach(btn => {
+      btn.classList.add("is-bound");
+
+      btn.addEventListener("click", async e => {
+        const targetBtn = e.currentTarget as HTMLButtonElement;
+        const urlString = targetBtn.getAttribute("data-url");
+        const targetId = targetBtn.getAttribute("data-target");
+
+        if (!urlString || !targetId) return;
+
+        const grid = document.getElementById(targetId);
+        if (!grid) return;
+
+        const urlObj = new URL(urlString, window.location.origin);
+        // 🎯 ARCHITECTURAL FIX: Route to the new HTML Partial Endpoint
+        const proxyUrl = `/api/partials/node-cards${urlObj.search}`;
+
+        targetBtn.textContent = "Loading...";
+        targetBtn.disabled = true;
+
+        try {
+          const res = await fetch(proxyUrl);
+
+          if (!res.ok) {
+            throw new Error(`HTTP error! status: ${res.status}`);
+          }
+
+          // 1. Read metadata from headers sent by our partial endpoint
+          const rawCountStr = res.headers.get("X-Consumed-Rows");
+          const limitStr = res.headers.get("X-Limit");
+          const consumedRows = parseInt(rawCountStr || "0", 10);
+          const limit = parseInt(limitStr || "12", 10);
+
+          // 2. Extract and render the raw HTML
+          const htmlSnippet = await res.text();
+
+          if (htmlSnippet.trim().length > 0) {
+            grid.insertAdjacentHTML("beforeend", htmlSnippet);
+          }
+
+          // 3. Handle Pagination
+          if (consumedRows >= limit && limit > 0) {
+            const currentOffset = parseInt(
+              urlObj.searchParams.get("offset") || "0",
+              10,
+            );
+            urlObj.searchParams.set(
+              "offset",
+              (currentOffset + limit).toString(),
+            );
+
+            targetBtn.setAttribute("data-url", urlObj.pathname + urlObj.search);
+            targetBtn.textContent = "Load More";
+            targetBtn.disabled = false;
+          } else {
+            if (targetBtn.parentElement)
+              targetBtn.parentElement.style.display = "none";
+          }
+        } catch (err) {
+          console.error("Failed to load more items:", err);
+          targetBtn.textContent = "Error. Try again";
+          targetBtn.disabled = false;
+        }
+      });
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initLoadMoreButtons);
+  } else {
+    initLoadMoreButtons();
+  }
+  document.addEventListener("astro:page-load", initLoadMoreButtons);
+</script>

package/templates/astro-starter/src/components/global/Breadcrumb.astro

@@ -7,24 +7,60 @@ interface Props {
   isHomePage?: boolean;
 }
 
-const { title, slug, isHomePage } = Astro.props;
+const { title, isHomePage } = Astro.props;
 
-// 🎯 Detect home page via URL pathname or explicit flag
-const isHome = isHomePage || Astro.url.pathname === "/" || !slug || slug === "";
+const currentPath = Astro.url.pathname;
+
+// Extract non-empty path segments
+const rawSegments = currentPath.split("/").filter(Boolean);
+
+// Detect homepage
+const isHome = isHomePage || currentPath === "/" || rawSegments.length === 0;
+
+function formatSegmentTitle(segment: string): string {
+  return segment
+    .split("-")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+// Build progressive paths: /some-page, /some-page/child-page, etc.
+let runningPath = "";
+const breadcrumbItems = rawSegments.map((segment, index) => {
+  runningPath += `/${segment}`;
+  const isLast = index === rawSegments.length - 1;
+
+  return {
+    label: isLast ? title : formatSegmentTitle(segment),
+    href: runningPath,
+    isCurrent: isLast,
+  };
+});
 ---
 
 <nav class="breadcrumb-nav" aria-label="Breadcrumb">
   <ol class="breadcrumb-list">
+    <!-- Home Link -->
     <li class="breadcrumb-item">
       <a href="/">Home</a>
     </li>
+
+    <!-- Subpage Breadcrumbs -->
     {
-      !isHome && (
-        <li class="breadcrumb-item active" aria-current="page">
-          <span class="separator">/</span>
-          <span>{title}</span>
-        </li>
-      )
+      !isHome &&
+        breadcrumbItems.map(item => (
+          <li
+            class={`breadcrumb-item ${item.isCurrent ? "active" : ""}`}
+            aria-current={item.isCurrent ? "page" : undefined}
+          >
+            <span class="separator">/</span>
+            {item.isCurrent ? (
+              <span>{item.label}</span>
+            ) : (
+              <a href={item.href}>{item.label}</a>
+            )}
+          </li>
+        ))
     }
   </ol>
 </nav>
@@ -45,6 +81,11 @@ const isHome = isHomePage || Astro.url.pathname === "/" || !slug || slug === "";
     color: #64748b;
   }
 
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+  }
+
   .breadcrumb-item a {
     color: #334155;
     text-decoration: none;

package/templates/astro-starter/src/components/global/Footer.astro

@@ -2,60 +2,21 @@
 // src/components/global/Footer.astro
 
 import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
-import { getChannelId } from "@/lib/cms";
 
-// 🎯 Fetch data natively during the server request
-const safeEnv = (Astro.locals as any).safeEnv || {};
-const cmsWorker = safeEnv.CMS_WORKER;
-const channelId = getChannelId() || "website";
-
-const customFetch = (input: RequestInfo | URL, init?: RequestInit) => {
-  const reqInit = { ...init };
-  delete reqInit.cache;
-
-  let urlStr = input instanceof URL ? input.toString() : String(input);
-  if (urlStr.startsWith("/")) {
-    const baseUrl =
-      import.meta.env.PUBLIC_API_URL ||
-      safeEnv.PUBLIC_API_URL ||
-      "http://127.0.0.1:8787";
-    urlStr = `${baseUrl}${urlStr}`;
-  }
-
-  const req = new Request(urlStr, reqInit);
-  if (cmsWorker && typeof cmsWorker.fetch === "function") {
-    return cmsWorker.fetch(req);
-  }
-  return fetch(req);
-};
-
-// 🎯 Resolve the Home Page slug
-const homeSlug = String(import.meta.env.PUBLIC_HOME_SLUG || "home").trim();
-
-let footerBlocks: any[] = [];
-let contentMap: Record<string, any[]> = {};
-
-try {
-  const res = await customFetch(
-    `/api/v1/node/${homeSlug}?channelId=${channelId}`,
-  );
-  if (res.ok) {
-    const data = await res.json();
-    const allContent = data.content || {};
-    footerBlocks = allContent.footer || [];
-    contentMap = allContent;
-  }
-} catch (e) {
-  console.error("[Footer] Failed to fetch home page blocks:", e);
+interface Props {
+  blocks?: any[];
+  contentMap?: Record<string, any[]>;
 }
+
+const { blocks = [], contentMap = {} } = Astro.props;
 ---
 
 <footer class="site-footer">
   <div class="footer-container">
     {
-      footerBlocks && footerBlocks.length > 0 ? (
+      blocks && blocks.length > 0 ? (
         <BlockRenderer
-          blocks={footerBlocks}
+          blocks={blocks}
           contentMap={contentMap}
           region="footer"
         />