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

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

@@ -1,218 +0,0 @@
----
-// 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

@@ -1,25 +0,0 @@
----
-// 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

@@ -1,91 +0,0 @@
----
-// 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

@@ -1,274 +0,0 @@
----
-// 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

@@ -1,15 +0,0 @@
----
-// 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>