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

package/templates/astro-starter/old_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/old_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/old_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>

package/templates/astro-starter/old_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/old_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>