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

package/templates/astro-starter/src/pages/partials/nav.astro

@@ -0,0 +1,141 @@
+---
+// src/pages/partials/nav.astro
+export const partial = true; // 🎯 Tells Astro not to wrap this in <html><body>
+
+import { getTree, getTreeId, getChannelId } from "@/lib/cms";
+import type { TreeNode } from "@/lib/cms";
+
+const safeEnv = (Astro.locals as any).safeEnv || {};
+const cmsWorker = safeEnv.CMS_WORKER;
+
+const customFetch = (input: RequestInfo | URL, init?: RequestInit) => {
+  const reqInit = { ...init };
+  delete reqInit.cache;
+
+  let urlStr = input instanceof URL ? input.toString() : String(input);
+  if (urlStr.startsWith("/")) {
+    const baseUrl =
+      import.meta.env.PUBLIC_API_URL ||
+      safeEnv.PUBLIC_API_URL ||
+      "http://127.0.0.1:8787";
+    urlStr = `${baseUrl}${urlStr}`;
+  }
+
+  const req = new Request(urlStr, reqInit);
+  if (cmsWorker && typeof cmsWorker.fetch === "function")
+    return cmsWorker.fetch(req);
+  return fetch(req);
+};
+
+// Fetch fresh tree from CMS
+const channelId = getChannelId() || "website";
+const treeId = getTreeId() || "main-nav";
+let tree: TreeNode[] = [];
+try {
+  tree = (await getTree(treeId, channelId, customFetch)) || [];
+} catch (e) {
+  console.error("[Partials/Nav] Failed to fetch tree:", e);
+}
+
+// Get the current path from the client's fetch request
+const currentPath =
+  (Astro.url.searchParams.get("path") || "/").replace(/\/$/, "") || "/";
+const homeSlug = String(import.meta.env.PUBLIC_HOME_SLUG || "home").trim();
+
+const homeNode = tree.find(
+  item =>
+    item.slug === homeSlug ||
+    item.slug === "" ||
+    item.path === "/" ||
+    item.path === "",
+);
+
+const topLevelNavItems =
+  homeNode?.children && homeNode.children.length > 0
+    ? homeNode.children
+    : tree.filter(
+        item =>
+          item.slug !== homeSlug &&
+          item.slug !== "" &&
+          item.path !== "/" &&
+          item.path !== "",
+      );
+
+const isPathActive = (itemPath?: string) => {
+  const normItem = (itemPath || "").replace(/\/$/, "") || "/";
+  if (normItem === "/") return currentPath === "/";
+  return currentPath === normItem || currentPath.startsWith(`${normItem}/`);
+};
+
+const isExactActive = (itemPath?: string) => {
+  return currentPath === ((itemPath || "").replace(/\/$/, "") || "/");
+};
+---
+
+<ul class="nav-list">
+  {
+    topLevelNavItems.map(item => {
+      const hasChildren = item.children && item.children.length > 0;
+      const isParentActive = isPathActive(item.path);
+
+      if (hasChildren) {
+        return (
+          <li class="nav-item">
+            <details class="nav-details">
+              <summary
+                class:list={[
+                  "nav-button",
+                  "dropdown-summary",
+                  { active: isParentActive },
+                ]}
+              >
+                <span>{item.title}</span>
+                <span class="indicator">▼</span>
+              </summary>
+              <div class="submenu-container">
+                <ul class="dropdown-panel">
+                  <li>
+                    <a
+                      href={item.path}
+                      class:list={[
+                        "dropdown-item",
+                        "overview-item",
+                        { active: isExactActive(item.path) },
+                      ]}
+                    >
+                      {item.title} Overview
+                    </a>
+                  </li>
+                  {item.children?.map(child => (
+                    <li>
+                      <a
+                        href={child.path}
+                        class:list={[
+                          "dropdown-item",
+                          { active: isExactActive(child.path) },
+                        ]}
+                      >
+                        {child.title}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </details>
+          </li>
+        );
+      }
+
+      return (
+        <li class="nav-item">
+          <a
+            href={item.path}
+            class:list={["nav-button", { active: isExactActive(item.path) }]}
+          >
+            {item.title}
+          </a>
+        </li>
+      );
+    })
+  }
+</ul>

package/templates/astro-starter/src/styles/standard-theme.css

@@ -0,0 +1,157 @@
+/* =======================================
+   1. GLOBAL RESETS & TYPOGRAPHY
+   ======================================= */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    border-radius: 0 !important;
+}
+
+html {
+    font-size: 16px;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    font-display: swap;
+    background-color: #ffffff;
+    color: #1e293b;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    line-height: 1.65;
+    letter-spacing: -0.011em;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: #0f172a;
+    font-weight: 700;
+    line-height: 1.25;
+    letter-spacing: -0.022em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+}
+
+h1 {
+    font-size: 2.25rem;
+}
+
+h2 {
+    font-size: 1.65rem;
+}
+
+h3 {
+    font-size: 1.35rem;
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 1.25em;
+    color: #334155;
+    font-size: 1.03rem;
+}
+
+a {
+    color: #0284c7;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+    transition: color 0.15s ease;
+}
+
+a:hover {
+    color: #0369a1;
+}
+
+li>p:last-child {
+    margin-bottom: 0;
+}
+
+/* =======================================
+   2. MAIN LAYOUT SHELL
+   ======================================= */
+.content-block {
+    flex: 1;
+    padding: 40px 0 64px 0;
+}
+
+.content-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 24px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+/* =======================================
+   3. ROUTER REGIONS (from slug.astro)
+   ======================================= */
+.region-header {
+    margin-bottom: 24px;
+}
+
+.breadcrumb-wrapper {
+    margin-bottom: 24px;
+}
+
+.content-layout {
+    width: 100%;
+    display: block;
+}
+
+.main-column {
+    width: 100%;
+    min-width: 0;
+}
+
+@media (min-width: 768px) {
+    .content-layout.has-sidebar {
+        display: grid !important;
+        grid-template-columns: calc(100% - 360px) 310px !important;
+        column-gap: 48px !important;
+        align-items: start !important;
+    }
+
+    .main-column {
+        grid-column: 1 / 2 !important;
+    }
+
+    .sidebar-column {
+        grid-column: 2 / 3 !important;
+        position: sticky;
+        top: 32px;
+    }
+}
+
+.sidebar-column {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 28px;
+    box-sizing: border-box;
+}
+
+@media (max-width: 767px) {
+    .sidebar-column {
+        margin-top: 40px;
+    }
+}
+
+.empty-content {
+    padding: 32px;
+    border: 1px dashed #cbd5e1;
+    background: #f8fafc;
+    color: #64748b;
+    font-size: 0.95rem;
+    text-align: center;
+}

package/templates/astro-starter/src/utils/tiptap.ts

@@ -0,0 +1,113 @@
+// src/utils/tiptap.ts
+
+export interface TiptapNode {
+    type: string;
+    text?: string;
+    attrs?: Record<string, any>;
+    marks?: Array<{ type: string; attrs?: Record<string, any> }>;
+    content?: TiptapNode[];
+}
+
+/**
+ * Traverses a ProseMirror / Tiptap AST node and converts it into HTML.
+ */
+export function renderTiptapNode(node?: TiptapNode | null): string {
+    if (!node) return "";
+    if (typeof node === "string") return node;
+
+    // 1. Text Node Handling (with Marks)
+    if (node.type === "text") {
+        let text = escapeHtml(node.text || "");
+        if (node.marks && Array.isArray(node.marks)) {
+            node.marks.forEach((mark) => {
+                switch (mark.type) {
+                    case "bold":
+                    case "strong":
+                        text = `<strong>${text}</strong>`;
+                        break;
+                    case "italic":
+                    case "em":
+                        text = `<em>${text}</em>`;
+                        break;
+                    case "underline":
+                        text = `<u>${text}</u>`;
+                        break;
+                    case "strike":
+                        text = `<s>${text}</s>`;
+                        break;
+                    case "code":
+                        text = `<code>${text}</code>`;
+                        break;
+                    case "link": {
+                        const href = mark.attrs?.href ? escapeHtml(mark.attrs.href) : "#";
+                        const target = mark.attrs?.target ? ` target="${escapeHtml(mark.attrs.target)}"` : "";
+                        const rel = mark.attrs?.target === "_blank" ? ' rel="noopener noreferrer"' : "";
+                        text = `<a href="${href}"${target}${rel}>${text}</a>`;
+                        break;
+                    }
+                }
+            });
+        }
+        return text;
+    }
+
+    // 2. Traversal of Child Nodes
+    const childrenHtml = Array.isArray(node.content)
+        ? node.content.map(renderTiptapNode).join("")
+        : "";
+
+    // 3. Block Level Mapping
+    switch (node.type) {
+        case "doc":
+            return childrenHtml;
+        case "paragraph":
+            return childrenHtml.trim() ? `<p>${childrenHtml}</p>` : "";
+        case "heading": {
+            const level = Math.min(Math.max(node.attrs?.level || 2, 1), 6);
+            return `<h${level}>${childrenHtml}</h${level}>`;
+        }
+        case "bulletList":
+            return `<ul>${childrenHtml}</ul>`;
+        case "orderedList": {
+            const start = node.attrs?.start ? ` start="${node.attrs.start}"` : "";
+            return `<ol${start}>${childrenHtml}</ol>`;
+        }
+        case "listItem":
+            return `<li>${childrenHtml}</li>`;
+        case "blockquote":
+            return `<blockquote>${childrenHtml}</blockquote>`;
+        case "codeBlock": {
+            const lang = node.attrs?.language ? ` class="language-${escapeHtml(node.attrs.language)}"` : "";
+            return `<pre><code${lang}>${childrenHtml}</code></pre>`;
+        }
+        case "horizontalRule":
+            return "<hr />";
+        case "hardBreak":
+            return "<br />";
+        default:
+            return childrenHtml;
+    }
+}
+
+/**
+ * Universal helper that handles plain strings, legacy objects, and Tiptap ASTs safely.
+ */
+export function extractHtml(value: any): string {
+    if (!value) return "";
+    if (typeof value === "string") return value; // Already HTML/string
+    if (typeof value === "object") {
+        if (value.type === "doc") return renderTiptapNode(value);
+        if (value.html) return value.html;
+        if (value.markup) return value.markup;
+    }
+    return String(value);
+}
+
+function escapeHtml(str: string): string {
+    return str
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+}

package/templates/kama-worker/index.js

@@ -0,0 +1,19 @@
+import kamaWorker from '@brightsideoy/kama';
+import * as localBundle from './bundled-definitions.js';
+
+export default {
+  async fetch(request, env, ctx) {
+    const schemas = localBundle.BUNDLED_DEFINITIONS || localBundle.default || localBundle;
+    const customEnv = { ...env, BUNDLED_DEFINITIONS: schemas, KAMA_RUNTIME: 'cloudflare' };
+
+    if (kamaWorker && typeof kamaWorker.fetch === 'function') {
+      return kamaWorker.fetch(request, customEnv, ctx);
+    }
+    
+    if (kamaWorker && kamaWorker.app && typeof kamaWorker.app.fetch === 'function') {
+      return kamaWorker.app.fetch(request, customEnv, ctx);
+    }
+    
+    return new Response('Kama Engine Worker Ready', { status: 200 });
+  }
+};

package/templates/kama-worker/server.js

@@ -0,0 +1,98 @@
+import { serve } from '@hono/node-server';
+import { serveStatic } from '@hono/node-server/serve-static';
+import { Hono } from 'hono';
+import kamaApp from '@brightsideoy/kama';
+import * as localBundle from './bundled-definitions.js';
+import dotenv from 'dotenv';
+import { readFileSync, existsSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import { pathToFileURL } from 'node:url';
+
+dotenv.config();
+
+const possiblePaths = [
+    './node_modules/@brightsideoy/kama/dist',
+    '../node_modules/@brightsideoy/kama/dist',
+    '../../node_modules/@brightsideoy/kama/dist'
+];
+const distPath = possiblePaths.find(p => existsSync(p));
+
+if (!distPath) {
+    console.warn('⚠️ Could not locate @brightsideoy/kama/dist folder. Admin UI will not load.');
+}
+
+const app = new Hono();
+
+let cachedSchemas = localBundle.BUNDLED_DEFINITIONS || localBundle.default || localBundle;
+let lastModified = 0;
+
+async function getCustomEnv(c) {
+    try {
+        const bundlePath = join(process.cwd(), 'bundled-definitions.js');
+        if (existsSync(bundlePath)) {
+            const mtime = statSync(bundlePath).mtimeMs;
+            if (mtime > lastModified) {
+                if (lastModified !== 0) console.log('🔄 Hot-reloading fresh schema definitions!');
+                const mod = await import(`${pathToFileURL(bundlePath).href}?t=${mtime}`);
+                cachedSchemas = mod.BUNDLED_DEFINITIONS || mod.default || mod;
+                lastModified = mtime;
+            }
+        }
+    } catch (err) { }
+
+    return {
+        ...process.env,
+        ...(c.env || {}),
+        BUNDLED_DEFINITIONS: cachedSchemas,
+        KAMA_RUNTIME: (c.env && c.env.DB) ? 'cloudflare' : 'node'
+    };
+}
+
+app.use('/media/*', serveStatic({ root: './' }));
+if (distPath) {
+    app.use('/assets/*', serveStatic({ root: distPath }));
+}
+
+function resolveExecutionContext(c) {
+    try {
+        if (c.executionCtx) return c.executionCtx;
+    } catch (e) { }
+    return {
+        waitUntil: (promise) => Promise.resolve(promise).catch(console.error),
+        passThroughOnException: () => { }
+    };
+}
+
+app.all('*', async (c) => {
+    const customEnv = await getCustomEnv(c);
+    const execCtx = resolveExecutionContext(c);
+
+    let response;
+    if (typeof kamaApp.fetch === 'function') {
+        response = await kamaApp.fetch(c.req.raw, customEnv, execCtx);
+    } else if (kamaApp.app && typeof kamaApp.app.fetch === 'function') {
+        response = await kamaApp.app.fetch(c.req.raw, customEnv, execCtx);
+    } else {
+        return c.text("Engine not configured correctly", 500);
+    }
+
+    if (response.status === 404 && distPath && !c.req.path.startsWith('/api')) {
+        const indexPath = join(distPath, 'index.html');
+        if (existsSync(indexPath)) {
+            return c.html(readFileSync(indexPath, 'utf-8'));
+        }
+    }
+
+    return response;
+});
+
+export default app;
+
+if (typeof process !== 'undefined' && process.argv && process.argv[1] && process.argv[1].endsWith('server.js')) {
+    const port = process.env.PORT ? parseInt(process.env.PORT, 10) : 8787;
+    serve({ fetch: app.fetch, port }, (info) => {
+        console.log(`\n🔥 KAMA CMS Node Server is running!`);
+        console.log(`┃ Local    http://localhost:${info.port}/`);
+        if (distPath) console.log(`┃ Admin UI Serving from: ${distPath}\n`);
+    });
+}

package/wrangler.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "node_modules/wrangler/config-schema.json",
+  "name": "kama",
+  "main": "server/index.ts",
+  "compatibility_date": "2024-09-23",
+  "compatibility_flags": [
+    "nodejs_compat"
+  ],
+  "d1_databases": [
+    {
+      "binding": "DB",
+      "database_name": "kama-db",
+      "database_id": "local-kama-db"
+    }
+  ],
+  "r2_buckets": [
+    {
+      "binding": "MEDIA_BUCKET",
+      "bucket_name": "kama-media"
+    }
+  ]
+}

package/defaults/definitions/blocks/button.yaml

@@ -1,15 +0,0 @@
-id: button
-label: Button
-group: Content
-description: Button text
-
-fields:
-  - text:
-      label: Text
-      type: richtext
-      editor: button
-      public: true
-
-  - fieldSet: access
-  - hidden:
-      default: false

package/defaults/definitions/blocks/header.yaml

@@ -1,15 +0,0 @@
-id: header
-label: Header
-group: Content
-
-fields:
-  - headline:
-      type: richtext
-      editor: header
-      label: Headline
-      public: true
-      default: "Header here..."
-
-  - fieldSet: access
-  - hidden:
-      default: false

package/defaults/definitions/blocks/header_image.yaml

@@ -1,22 +0,0 @@
-id: header_image
-label: Header Image
-group: Media
-description: Image for page header.
-
-fields:
-  - image:
-      label: Image
-      type: asset
-      required: true
-      multiple: false
-      maxSizeMB: 15
-      allowedTypes: ["image/*"]
-      crops:
-        standard:
-          label: "Page header (21:9)"
-          aspectRatio: 2.333
-      public: true
-
-  - fieldSet: access
-  - hidden:
-      default: false

package/defaults/definitions/blocks/hero.yaml

@@ -1,27 +0,0 @@
-id: hero
-label: Hero
-group: Content
-
-fields:
-  - heroBadge:
-      type: text
-      label: Badge
-      public: true
-  - heroTitle:
-      type: text
-      label: Title
-      public: true
-  - heroSubTitle:
-      type: text
-      label: Sub-Title
-      public: true
-  - headline:
-      type: richtext
-      editor: header
-      label: Headline
-      public: true
-      default: "Header here..."
-
-  - fieldSet: access
-  - hidden:
-      default: false

package/defaults/definitions/blocks/image_card.yaml

@@ -1,57 +0,0 @@
-id: image_card
-label: Image Card
-Group: Content
-description: A versatile card with an image, text, and a CTA button.
-
-fields:
-  - image:
-      label: Card Image
-      showLabel: false
-      type: asset
-      required: true
-      multiple: false
-      maxSizeMB: 15
-      maxPreviewWidth: 300px
-      allowedTypes: ["image/*"]
-      crops:
-        standard:
-          label: "Card Header (16:9)"
-          aspectRatio: 3.0
-      public: true
-
-  - headline:
-      label: Headline
-      type: text
-      required: true
-      public: true
-      default: "Headline..."
-
-  - summary:
-      label: Text
-      description: Keep it brief, 2-3 sentences max.
-      type: richtext
-      editor: minimal
-      public: true
-      default: "Card text content..."
-
-  - link:
-      label: Link
-      type: link
-      allowedLinkTypes:
-        - tree
-        - node
-        - url
-        - file
-        - email
-        - telephone
-
-  - linkText:
-      label: Button Text
-      type: text
-      description: "e.g., 'Read More' or 'Buy Now'"
-      default: "Read More"
-      public: true
-
-  - fieldSet: access
-  - hidden:
-      default: false