@brightsideoy/kama 0.1.0-alpha.98 → 1.0.0-alpha.2

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

@@ -0,0 +1,67 @@
+---
+// src/components/blocks/ColumnLayout.astro
+
+import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
+
+interface Props {
+  blockId: string;
+  contentMap: Record<string, any[]>;
+}
+
+const { blockId, contentMap } = Astro.props;
+
+const order = ["left", "middle", "right", "col1", "col2", "col3", "col4"];
+
+// 1. Find all sub-regions belonging to this specific layout instance
+const regionKeys = Object.keys(contentMap).filter(
+  key => blockId && key.startsWith(`${blockId}_`),
+);
+
+// 2. Sort keys logically (left -> middle -> right or col1 -> col2 -> col3)
+const sortedKeys = regionKeys.sort((a, b) => {
+  const suffixA = a.replace(`${blockId}_`, "");
+  const suffixB = b.replace(`${blockId}_`, "");
+  const idxA = order.indexOf(suffixA);
+  const idxB = order.indexOf(suffixB);
+
+  if (idxA === -1 && idxB === -1) return a.localeCompare(b);
+  if (idxA === -1) return 1;
+  if (idxB === -1) return -1;
+  return idxA - idxB;
+});
+
+const columnCount = Math.max(sortedKeys.length, 1);
+---
+
+<div class="cms-column-layout" style={`--col-count: ${columnCount}`}>
+  {
+    sortedKeys.map(key => {
+      const columnBlocks = contentMap[key] || [];
+      return (
+        <div class="column">
+          <!-- 🎯 Passes region={key} down to BlockRenderer -->
+          <BlockRenderer 
+            blocks={columnBlocks} 
+            contentMap={contentMap} 
+            region={key} 
+          />
+        </div>
+      );
+    })
+  }
+</div>
+
+<style>
+  .cms-column-layout {
+    display: grid;
+    gap: 2rem;
+    margin-bottom: 1.5rem;
+    grid-template-columns: 1fr;
+  }
+
+  @media (min-width: 768px) {
+    .cms-column-layout {
+      grid-template-columns: repeat(var(--col-count, 1), 1fr);
+    }
+  }
+</style>

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

@@ -0,0 +1,132 @@
+---
+// src/components/blocks/HeaderImage.astro
+
+import KamaImage from "@/components/ui/KamaImage.astro";
+
+interface Props {
+  data: {
+    image?: any;
+    image_meta?: any;
+    width?: number | string;
+    height?: number | string;
+  };
+  region?: string;
+  isFirst?: boolean;
+}
+
+const { data, region = "main", isFirst = false } = Astro.props;
+
+const img = data?.image;
+
+if (!img) {
+  return null;
+}
+
+/**
+ * Determine if this image is likely to be the Largest Contentful Paint.
+ */
+const isLcp = region === "header" || (region === "main" && isFirst);
+
+/**
+ * Determine grid column count from the region name.
+ */
+let columnCount = 1;
+
+if (region.includes("_")) {
+  columnCount = 2;
+
+  if (region.includes("_middle") || region.includes("_col3")) {
+    columnCount = 3;
+  }
+
+  if (region.includes("_col4")) {
+    columnCount = 4;
+  }
+}
+
+/**
+ * Default single-column layout.
+ */
+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];
+let sizes = "(max-width: 1399px) calc(100vw - 48px), 1352px";
+
+/**
+ * Two-column layout.
+ */
+if (columnCount === 2) {
+  maxWidth = "660";
+  targetColumnWidth = 660;
+
+  // 2-col: 1x desktop (660), 2x mobile stacked (~800), 2x desktop (1320)
+  optimizedWidths = [400, 660, 800, 1320];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 80px) / 2), " +
+    "660px";
+}
+
+/**
+ * Three-column layout.
+ */
+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];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 112px) / 3), " +
+    "429px";
+}
+
+/**
+ * Four-column layout.
+ */
+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];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 144px) / 4), " +
+    "314px";
+}
+---
+
+<div class="cms-block cms-block-header-image" style={`--max-w: ${maxWidth}px;`}>
+  <KamaImage
+    image={img}
+    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>
+
+<style>
+  .cms-block-header-image {
+    width: 100%;
+    max-width: var(--max-w, 1352px);
+    margin: 0 auto 1.5rem auto;
+  }
+
+  :global(.responsive-header-image) {
+    width: 100%;
+    height: auto;
+    display: block;
+    border-radius: var(--cms-radius-md, 0.5rem);
+    max-width: 100%;
+  }
+</style>

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

@@ -0,0 +1,218 @@
+---
+// src/components/blocks/Hero.astro
+---
+
+<section class="hero-container">
+  <div class="hero-content">
+    <!-- Sub-badge -->
+    <div class="hero-badge">
+      <span class="badge-dot"></span>
+      Freeware for Education & NGOs
+    </div>
+
+    <!-- H1 Title with Slogan -->
+    <h1 class="hero-title">KAMA – Headless CMS on Edge</h1>
+
+    <!-- Subtitle -->
+    <p class="hero-subtitle">
+      Deploy sub-millisecond corporate web experiences with zero infrastructure
+      overhead. Built natively on Astro, Hono, and Cloudflare Workers (D1/R2).
+    </p>
+
+    <!-- Call to Action Buttons -->
+    <div class="hero-actions">
+      <a href="/docs/quick-start" class="btn btn-primary">
+        Get Started
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="btn-icon"
+          ><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg
+        >
+      </a>
+      <a
+        href="https://github.com/brightside-ou/kama"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="btn btn-secondary"
+      >
+        View on GitHub
+      </a>
+    </div>
+
+    <!-- Tech Stack Highlights -->
+    <div class="hero-stack">
+      <span class="stack-label">Powered by edge infrastructure:</span>
+      <div class="stack-tags">
+        <span class="tag">Cloudflare Workers</span>
+        <span class="tag">D1 SQL</span>
+        <span class="tag">R2 Storage</span>
+        <span class="tag">Astro</span>
+        <span class="tag">Hono</span>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .hero-container {
+    padding: 64px 0 48px;
+    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .hero-content {
+    max-width: 860px;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 14px;
+    background-color: #f0f9ff;
+    border: 1px solid #bae6fd;
+    color: #0369a1;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-bottom: 24px;
+  }
+
+  .badge-dot {
+    width: 8px;
+    height: 8px;
+    background-color: #0284c7;
+    border-radius: 50% !important;
+  }
+
+  .hero-title {
+    font-size: 3rem;
+    font-weight: 800;
+    line-height: 1.15;
+    color: #0f172a;
+    letter-spacing: -0.03em;
+    margin-top: 0;
+    margin-bottom: 20px;
+  }
+
+  .hero-subtitle {
+    font-size: 1.25rem;
+    line-height: 1.6;
+    color: #475569;
+    max-width: 720px;
+    margin: 0 auto 36px;
+  }
+
+  .hero-actions {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    margin-bottom: 48px;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 12px 28px;
+    font-size: 1rem;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.15s ease-in-out;
+  }
+
+  .btn-primary {
+    background-color: #0284c7;
+    color: #ffffff;
+  }
+
+  .btn-primary:hover {
+    background-color: #0369a1;
+    color: #ffffff;
+  }
+
+  .btn-secondary {
+    background-color: #ffffff;
+    color: #334155;
+    border: 1px solid #cbd5e1;
+  }
+
+  .btn-secondary:hover {
+    background-color: #f8fafc;
+    color: #0f172a;
+    border-color: #94a3b8;
+  }
+
+  .btn-icon {
+    transition: transform 0.15s ease;
+  }
+
+  .btn-primary:hover .btn-icon {
+    transform: translateX(4px);
+  }
+
+  .hero-stack {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .stack-label {
+    font-size: 0.8125rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #64748b;
+    font-weight: 600;
+  }
+
+  .stack-tags {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 8px;
+  }
+
+  .tag {
+    padding: 4px 10px;
+    background-color: #f1f5f9;
+    color: #334155;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    border: 1px solid #e2e8f0;
+  }
+
+  @media (max-width: 768px) {
+    .hero-container {
+      padding: 40px 0 32px;
+    }
+
+    .hero-title {
+      font-size: 2.125rem;
+    }
+
+    .hero-subtitle {
+      font-size: 1.05rem;
+    }
+
+    .hero-actions {
+      flex-direction: column;
+      width: 100%;
+    }
+
+    .btn {
+      width: 100%;
+    }
+  }
+</style>

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

@@ -0,0 +1,25 @@
+---
+// src/components/blocks/HtmlBlock.astro
+
+interface Props {
+  data: {
+    body?: string;
+    html?: string;
+    content?: string;
+    text?: string;
+  };
+}
+
+const { data } = Astro.props;
+
+// Fallback chain matching your schema's HTML field key ('body') and legacy aliases
+const rawHtml = data?.body || data?.html || data?.content || data?.text || "";
+---
+
+{
+  rawHtml && (
+    <div class="cms-block cms-block-html">
+      <Fragment set:html={rawHtml} />
+    </div>
+  )
+}

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

@@ -0,0 +1,92 @@
+---
+// src/components/blocks/ImageBlock.astro
+
+import KamaImage from "@/components/ui/KamaImage.astro";
+
+interface Props {
+  data: {
+    image?: any;
+    width?: number | string;
+    height?: number | string;
+  };
+  region?: string;
+  isFirst?: boolean;
+}
+
+const { data, region = "main", isFirst = false } = Astro.props;
+
+const img = data?.image;
+const isLcp = region === "header" || (region === "main" && isFirst);
+
+// 🎯 Detect column layout based on CMS region names
+let columnCount = 1;
+if (region.includes("_")) {
+  columnCount = 2;
+  if (region.includes("_middle") || region.includes("_col3")) columnCount = 3;
+  if (region.includes("_col4")) columnCount = 4;
+}
+
+// 🎯 Column Config Lookup (Max width, breakpoint widths, sizes)
+const COLUMN_CONFIGS: Record<
+  number,
+  { targetWidth: number; widths: number[]; sizes: string }
+> = {
+  1: {
+    targetWidth: 1352,
+    widths: [768, 1352],
+    sizes: "(max-width: 1399px) calc(100vw - 48px), 1352px",
+  },
+  2: {
+    targetWidth: 660,
+    widths: [400, 660],
+    sizes:
+      "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 80px) / 2), 660px",
+  },
+  3: {
+    targetWidth: 429,
+    widths: [300, 429],
+    sizes:
+      "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 112px) / 3), 429px",
+  },
+  4: {
+    targetWidth: 314,
+    widths: [264, 314],
+    sizes:
+      "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 144px) / 4), 314px",
+  },
+};
+
+const layout = COLUMN_CONFIGS[columnCount] || COLUMN_CONFIGS[1];
+---
+
+{
+  img && (
+    <div class="cms-block cms-block-image">
+      <KamaImage
+        image={img}
+        sizes={layout.sizes}
+        desktopWidths={layout.widths}
+        idealWidth={layout.targetWidth}
+        maxWidth={layout.targetWidth}
+        class="free-crop-image"
+        loading={isLcp ? "eager" : "lazy"}
+        fetchpriority={isLcp ? "high" : "auto"}
+      />
+    </div>
+  )
+}
+
+<style>
+  .cms-block-image {
+    width: 100%;
+    margin: 0 auto 1.5rem auto;
+  }
+
+  :global(.free-crop-image) {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    display: block;
+    border-radius: var(--cms-radius-md, 0.5rem);
+  }
+</style>

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

@@ -0,0 +1,15 @@
+---
+// src/components/blocks/TextBlock.astro
+
+interface Props {
+  data: {
+    text?: string;
+    content?: string;
+  };
+}
+const { data } = Astro.props;
+---
+
+<div class="block-text">
+  <Fragment set:html={data.text || data.content || ""} />
+</div>

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

@@ -0,0 +1,67 @@
+---
+// src/components/global/Breadcrumb.astro
+
+interface Props {
+  title: string;
+  slug?: string;
+  isHomePage?: boolean;
+}
+
+const { title, slug, isHomePage } = Astro.props;
+
+// 🎯 Detect home page via URL pathname or explicit flag
+const isHome = isHomePage || Astro.url.pathname === "/" || !slug || slug === "";
+---
+
+<nav class="breadcrumb-nav" aria-label="Breadcrumb">
+  <ol class="breadcrumb-list">
+    <li class="breadcrumb-item">
+      <a href="/">Home</a>
+    </li>
+    {
+      !isHome && (
+        <li class="breadcrumb-item active" aria-current="page">
+          <span class="separator">/</span>
+          <span>{title}</span>
+        </li>
+      )
+    }
+  </ol>
+</nav>
+
+<style>
+  .breadcrumb-nav {
+    margin-bottom: 16px;
+  }
+
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 13px;
+    color: #64748b;
+  }
+
+  .breadcrumb-item a {
+    color: #334155;
+    text-decoration: none;
+  }
+
+  .breadcrumb-item a:hover {
+    color: #0f172a;
+    text-decoration: underline;
+  }
+
+  .breadcrumb-item.active {
+    color: #0f172a;
+    font-weight: 500;
+  }
+
+  .separator {
+    margin-right: 8px;
+    color: #94a3b8;
+  }
+</style>

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

@@ -0,0 +1,89 @@
+---
+// 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);
+}
+---
+
+<footer class="site-footer">
+  <div class="footer-container">
+    {
+      footerBlocks && footerBlocks.length > 0 ? (
+        <BlockRenderer
+          blocks={footerBlocks}
+          contentMap={contentMap}
+          region="footer"
+        />
+      ) : (
+        <div class="footer-default">
+          <p>&copy; {new Date().getFullYear()} all rights reserved.</p>
+        </div>
+      )
+    }
+  </div>
+</footer>
+
+<style>
+  .site-footer {
+    background: #ffffff;
+    border-top: 1px solid #e2e8f0;
+    margin-top: auto;
+  }
+
+  .footer-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 24px 20px;
+  }
+
+  .footer-default p {
+    margin: 0;
+    font-size: 14px;
+    color: #64748b;
+  }
+</style>