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

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

@@ -0,0 +1,143 @@
+---
+// src/components/blocks/BlockRenderer.astro
+
+import ImageBlock from "@/components/blocks/ImageBlock.astro";
+import HeaderImage from "@/components/blocks/HeaderImage.astro";
+import ColumnLayout from "@/components/blocks/ColumnLayout.astro";
+import HtmlBlock from "@/components/blocks/HtmlBlock.astro";
+import NodeList from "@/components/blocks/NodeList.astro"; // 🎯 NEW IMPORT
+import { extractHtml } from "@/utils/tiptap";
+
+interface Block {
+  instanceId: number;
+  blockId?: string;
+  componentId: string;
+  data: Record<string, any>;
+}
+
+interface Props {
+  blocks?: Block[];
+  contentMap?: Record<string, any[]>;
+  region?: string;
+}
+
+const { blocks = [], contentMap = {}, region = "main" } = Astro.props;
+const safeBlocks = Array.isArray(blocks) ? blocks : [];
+
+const visibleBlocks = safeBlocks.filter(b => {
+  if (!b || (!b.data && !b.componentId?.includes("column"))) return false;
+
+  const blockData = b.data || {};
+  if (
+    blockData.hidden === true ||
+    blockData.hidden === 1 ||
+    String(blockData.hidden) === "true"
+  ) {
+    return false;
+  }
+
+  const now = new Date();
+  if (blockData.startShowingAt) {
+    const start = new Date(blockData.startShowingAt);
+    if (!isNaN(start.getTime()) && now < start) return false;
+  }
+  if (blockData.stopShowingAt) {
+    const stop = new Date(blockData.stopShowingAt);
+    if (!isNaN(stop.getTime()) && now > stop) return false;
+  }
+
+  return true;
+});
+---
+
+{
+  visibleBlocks.map((block, index) => {
+    const data = block.data || {};
+    const blockId = block.blockId || data.blockId || "";
+    const componentId = (block.componentId || "").toLowerCase();
+
+    // Check for any column layout ending in column or two-column
+    if (componentId.includes("column")) {
+      return <ColumnLayout blockId={blockId} contentMap={contentMap} />;
+    }
+
+    switch (componentId) {
+      // 🎯 ADDED NODE LIST CASES
+      case "node-list":
+      case "nodelist":
+      case "article-list":
+      case "content-feed": {
+        return <NodeList data={data} />;
+      }
+
+      case "header":
+      case "headline":
+      case "header-block":
+      case "header_block": {
+        const headline = extractHtml(data.headline || data.title);
+        const subhead = extractHtml(data.subhead || data.body);
+        return (
+          <header class="cms-block cms-block-header">
+            {headline && <Fragment set:html={headline} />}
+            {subhead && <Fragment set:html={subhead} />}
+          </header>
+        );
+      }
+
+      case "text":
+      case "text-block":
+      case "text_block": {
+        const bodyText = extractHtml(data.body || data.text || data.content);
+        return (
+          <div class="cms-block cms-block-text">
+            <Fragment set:html={bodyText} />
+          </div>
+        );
+      }
+
+      case "html":
+      case "html-block":
+      case "html_block":
+      case "raw-html": {
+        return <HtmlBlock data={data} />;
+      }
+
+      case "header-image":
+      case "header_image": {
+        return (
+          <HeaderImage data={data} region={region} isFirst={index === 0} />
+        );
+      }
+
+      case "image":
+      case "image-block":
+      case "image_block":
+      case "single_image":
+      case "single-image": {
+        return <ImageBlock data={data} region={region} isFirst={index === 0} />;
+      }
+
+      default:
+        return import.meta.env.DEV ? (
+          <div class="unhandled-block">
+            <p>Unhandled component: {block.componentId}</p>
+          </div>
+        ) : null;
+    }
+  })
+}
+
+<style>
+  .cms-block {
+    margin-bottom: 1.5rem;
+  }
+
+  .unhandled-block {
+    padding: 12px 16px;
+    border: 1px dashed #cbd5e1;
+    background: #f8fafc;
+    color: #64748b;
+    font-size: 13px;
+    margin-bottom: 1.5rem;
+  }
+</style>

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,126 @@
+---
+// 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 (aligned to backend CDN buckets).
+ */
+let maxWidth = "1352";
+let targetColumnWidth = 1352;
+
+// 1-col: 1x/2x desktop and retina buckets
+let optimizedWidths = [768, 1352, 1920, 2560];
+let sizes = "(max-width: 1399px) calc(100vw - 48px), 1352px";
+
+/**
+ * Two-column layout.
+ */
+if (columnCount === 2) {
+  maxWidth = "660";
+  targetColumnWidth = 660;
+
+  optimizedWidths = [640, 768, 1024, 1352];
+  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;
+
+  optimizedWidths = [320, 640, 768, 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;
+
+  optimizedWidths = [320, 640, 768];
+  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}
+    class="responsive-header-image"
+    loading={isLcp ? "eager" : "lazy"}
+    fetchpriority={isLcp ? "high" : "auto"}
+  />
+</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,91 @@
+---
+// 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 (Target width, aligned CDN breakpoint widths, sizes)
+const COLUMN_CONFIGS: Record<
+  number,
+  { targetWidth: number; widths: number[]; sizes: string }
+> = {
+  1: {
+    targetWidth: 1352,
+    widths: [768, 1352, 1920, 2560],
+    sizes: "(max-width: 1399px) calc(100vw - 48px), 1352px",
+  },
+  2: {
+    targetWidth: 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: [320, 640, 768, 1024],
+    sizes:
+      "(max-width: 767px) calc(100vw - 48px), (max-width: 1399px) calc((100vw - 112px) / 3), 429px",
+  },
+  4: {
+    targetWidth: 314,
+    widths: [320, 640, 768],
+    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}
+        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>