@brightsideoy/kama 0.1.0-alpha.113 → 0.1.0-alpha.115

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightsideoy/kama",
-  "version": "0.1.0-alpha.113",
+  "version": "0.1.0-alpha.115",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,15 +15,14 @@
     "create-kama": "bin/cli.js"
   },
   "scripts": {
-    "predev": "npm run build:schema && npm run bundle:definitions",
-    "dev": "concurrently \"vite\" \"tsx watch server/dev.ts\"",
-    "bundle:definitions": "node scripts/bundle-definitions.js",
     "build:schema": "tsx src/db/generate-schema.ts",
-    "build:server": "npm run bundle:definitions && vite build",
+    "build:server": "vite build",
     "build:ui": "vite build --config vite.config.ui.ts",
     "build": "npm run build:schema && npm run build:server && npm run build:ui",
     "build:cms": "npm run build",
-    "prepublishOnly": "npm run build",
+    "predev": "npm run build:schema",
+    "dev": "concurrently \"vite\" \"tsx watch server/dev.ts\"",
+    "prepack": "npm run build",
     "serve": "tsx server/dev.ts"
   },
   "publishConfig": {

package/schema.sql

@@ -205,17 +205,9 @@ CREATE INDEX IF NOT EXISTS idx_assets_deleted ON assets(deletedAt);
 CREATE INDEX IF NOT EXISTS idx_assets_parent ON assets(parentAssetId);
 
 -- System Defaults
-INSERT OR IGNORE INTO channels (id, key, label, channelType, defaultLanguage, isHidden, dataJson) VALUES (1, 'default-channel', 'Default Channel', 'website', 'en', 0, '{}');
-INSERT OR IGNORE INTO trees (id, key, label, treeType, channelId, isHidden, dataJson) VALUES (1, 'default-tree', 'Default Navigation', 'navigation', 1, 0, '{}');
+INSERT OR IGNORE INTO channels (id, key, label, channelType, defaultLanguage, isHidden, dataJson) VALUES (1, 'website', 'Website', 'website', 'en', 0, '{}');
+INSERT OR IGNORE INTO trees (id, key, label, treeType, channelId, isHidden, dataJson) VALUES (1, 'main-navigation', 'Main Navigation', 'navigation', 1, 0, '{}');
 INSERT OR IGNORE INTO channel_trees (channelId, treeId, key) VALUES (1, 1, 'main');
-
-
--- Native Columns
-CREATE INDEX IF NOT EXISTS idx_content_nodes_slug ON content_nodes (slug);
-CREATE INDEX IF NOT EXISTS idx_content_nodes_contentType ON content_nodes (contentType);
-CREATE INDEX IF NOT EXISTS idx_content_nodes_updatedAt ON content_nodes (updatedAt);
-
--- JSON Custom Fields
-CREATE INDEX IF NOT EXISTS idx_content_nodes_articleDate ON content_nodes (json_extract(dataJson, '$.articleDate'));
-CREATE INDEX IF NOT EXISTS idx_content_nodes_startTime ON content_nodes (json_extract(dataJson, '$.startTime'));
-CREATE INDEX IF NOT EXISTS idx_content_nodes_endTime ON content_nodes (json_extract(dataJson, '$.endTime'));
+INSERT OR IGNORE INTO content_nodes (id, contentType, title, slug, language, status, dataJson, draftDataJson, publishedDataJson, publishedAt) VALUES (1, 'page', 'Global Content Delivery at the Edge', 'home', 'en', 'published', '{"titleSuffix":"– KAMA"}', '{"titleSuffix":"– KAMA"}', '{"titleSuffix":"– KAMA"}', CURRENT_TIMESTAMP);
+INSERT OR IGNORE INTO node_channels (nodeId, channelId) VALUES (1, 1);
+INSERT OR IGNORE INTO tree_nodes (id, treeId, contentId, parentId, sortOrder) VALUES (1, 1, 1, NULL, 0);

package/templates/astro-starter/astro.config.mjs

@@ -0,0 +1,40 @@
+// templates/astro-starter/astro.config.mjs
+import { defineConfig } from 'astro/config';
+import cloudflare from '@astrojs/cloudflare';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export default defineConfig({
+    output: 'server',
+    trailingSlash: 'ignore',
+
+    // 🎯 Use Kama Image Service
+    image: {
+        service: {
+            entrypoint: './src/kama-image-service.ts',
+        }
+    },
+
+    // 🎯 Passthrough allows Kama proxy to take 100% control
+    adapter: cloudflare({
+        imageService: 'passthrough',
+    }),
+
+    vite: {
+        resolve: {
+            alias: {
+                '@': path.resolve(__dirname, './src')
+            }
+        },
+        optimizeDeps: {
+            exclude: ['cloudflare:workers', '@astrojs/cloudflare', 'astro']
+        },
+        ssr: {
+            target: 'webworker',
+            noExternal: true,
+            external: ['cloudflare:workers', 'node:process']
+        }
+    }
+});

package/templates/astro-starter/package.json.template

@@ -0,0 +1,20 @@
+{
+  "name": "{{SITE_NAME}}",
+  "type": "module",
+  "version": "0.0.1",
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "deploy": "astro build && wrangler deploy"
+  },
+  "dependencies": {
+    "@astrojs/cloudflare": "^14.2.5",
+    "@brightsideoy/kama": "{{KAMA_VERSION}}",
+    "astro": "^7.2.0",
+    "wrangler": "^4.0.0"
+  }
+}

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

@@ -0,0 +1,125 @@
+---
+// 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";
+
+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) {
+      case "header":
+      case "headline":
+      case "header-block":
+      case "header_block": {
+        const headline = data.headline || data.title || "";
+        const subhead = 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 = data.body || data.text || data.content || "";
+        return (
+          <div class="cms-block cms-block-text">
+            <Fragment set:html={bodyText} />
+          </div>
+        );
+      }
+
+      case "header-image":
+      case "header_image": {
+        return (
+          <HeaderImage data={data} region={region} isFirst={index === 0} />
+        );
+      }
+
+      // 🎯 Handles all image component identifiers from the payload
+      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,66 @@
+---
+// 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,131 @@
+---
+// 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>