@brightsideoy/kama 0.1.0-alpha.12 → 0.1.0-alpha.121

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,24 @@
+---
+// 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,160 @@
+---
+// src/components/blocks/ImageBlock.astro
+import KamaImage from "@/components/ui/KamaImage.astro";
+
+interface CropVariant {
+  id?: string;
+  url?: string;
+  cropCoordinates?: {
+    width?: number;
+    height?: number;
+  };
+}
+
+interface Props {
+  data: {
+    image?: {
+      id?: string;
+      url?: string;
+      path?: string;
+      filename?: string;
+      alt?: string;
+      width?: number | string;
+      height?: number | string;
+      cropCoordinates?: {
+        width?: number;
+        height?: number;
+      };
+      variants?: {
+        standard?: CropVariant;
+        tablet?: CropVariant;
+        mobile?: CropVariant;
+        [key: string]: CropVariant | undefined;
+      };
+    };
+
+    image_meta?: {
+      cropCoordinates?: {
+        width?: number;
+        height?: number;
+      };
+    };
+
+    width?: number | string;
+    height?: number | string;
+  };
+
+  region?: string;
+  isFirst?: boolean;
+}
+
+const { data, region = "main", isFirst = false } = Astro.props;
+
+const img = data?.image;
+
+if (!img || (!img.url && !img.path && !img.variants)) {
+  return null;
+}
+
+/**
+ * Determine whether this is likely to be LCP.
+ */
+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;
+let optimizedWidths = [768, 1352];
+let sizes = "(max-width: 1399px) calc(100vw - 48px), 1352px";
+
+/**
+ * Two-column layout.
+ */
+if (columnCount === 2) {
+  maxWidth = "660";
+  targetColumnWidth = 660;
+  optimizedWidths = [400, 660];
+  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 = [300, 429];
+  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 = [264, 314];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 144px) / 4), " +
+    "314px";
+}
+---
+
+<div class="cms-block cms-block-image" style={`--max-w: ${maxWidth}px;`}>
+  <KamaImage
+    image={img}
+    sizes={sizes}
+    desktopWidths={optimizedWidths}
+    idealWidth={targetColumnWidth}
+    width={data.width || data.image_meta?.cropCoordinates?.width || img.width}
+    height={data.height ||
+      data.image_meta?.cropCoordinates?.height ||
+      img.height}
+    class="free-crop-image"
+    loading={isLcp ? "eager" : "lazy"}
+    fetchpriority={isLcp ? "high" : "auto"}
+    decoding={isLcp ? "sync" : "async"}
+  />
+</div>
+
+<style>
+  .cms-block-image {
+    width: 100%;
+    max-width: var(--max-w, 1352px);
+    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,13 @@
+---
+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,62 @@
+---
+interface Props {
+  title: string;
+  slug?: string;
+}
+
+const { title, slug } = Astro.props;
+const isHome = !slug || slug === "home";
+---
+
+<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,48 @@
+---
+import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
+
+interface Props {
+  blocks?: any[];
+  contentMap?: Record<string, any[]>;
+}
+
+const { blocks = [], contentMap = {} } = Astro.props;
+---
+
+<footer class="site-footer">
+  <div class="footer-container">
+    {
+      blocks && blocks.length > 0 ? (
+        <BlockRenderer
+          blocks={blocks}
+          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>

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

@@ -0,0 +1,92 @@
+---
+// src/components/global/Header.astro
+import NavigationMenu from "@/components/global/NavigationMenu.astro";
+import { getTree, getTreeId, getChannelId } from "@/lib/cms";
+import type { TreeNode } from "@/lib/cms";
+
+interface Props {
+  node?: Record<string, any>;
+  tree?: TreeNode[];
+}
+
+const { node, tree } = Astro.props;
+
+let rawTree = tree;
+
+// Fallback: If the layout didn't pass the tree, fetch it directly
+if (!rawTree || rawTree.length === 0) {
+  const locals = (Astro.locals as any) || {};
+  const runtimeEnv = (locals.runtime?.env as any) || {};
+  const cmsWorker = runtimeEnv.CMS_WORKER;
+
+  // Safely wrap the fetcher for Service Bindings
+  const customFetch = (input: RequestInfo | URL, init?: RequestInit) => {
+    if (cmsWorker && typeof cmsWorker.fetch === "function") {
+      return cmsWorker.fetch(new Request(input, init));
+    }
+    return fetch(input, init);
+  };
+
+  rawTree = await getTree(getTreeId(), getChannelId(), customFetch);
+}
+
+// Automatically use the configured site name for the text logo
+const siteName = import.meta.env.PUBLIC_SITE_NAME || "KAMA";
+---
+
+<header class="site-header">
+  <div class="header-container main-header-row">
+    <a href="/" class="logo-block">
+      <span class="logo-text">{siteName}</span>
+    </a>
+    <NavigationMenu tree={rawTree} />
+  </div>
+</header>
+
+<style>
+  .site-header {
+    background: #ffffff;
+    color: #1e293b;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .header-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .main-header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+  }
+
+  .logo-block {
+    text-decoration: none;
+    color: #0f172a;
+    font-weight: 700;
+    font-size: 20px;
+    display: inline-flex;
+    align-items: center;
+    z-index: 1001;
+  }
+
+  .logo-text {
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    .main-header-row {
+      height: 64px;
+      justify-content: space-between;
+      gap: 32px;
+    }
+  }
+</style>