@brightsideoy/kama 0.1.0-alpha.170 → 0.1.0-alpha.172

package/dist/schema-compiler.js

@@ -30,7 +30,7 @@ async function f() {
 	if (n(f)) l = (await import(t(f).href)).compileDefinitions;
 	else if (n(p)) l = (await import(t(p).href)).compileDefinitions;
 	else try {
-		l = (await import("./dist-DkBY_SfG.js")).compileDefinitions;
+		l = (await import("./dist-CZH1oldV.js")).compileDefinitions;
 	} catch (e) {
 		console.error("❌ Could not resolve Kama Schema Engine:", e), process.exit(1);
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightsideoy/kama",
-  "version": "0.1.0-alpha.170",
+  "version": "0.1.0-alpha.172",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

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

@@ -1,33 +1,73 @@
 ---
 // src/components/global/Footer.astro
-// Notice: No props needed anymore! It fetches its own data independently.
+
+import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
+import { getChannelId } from "@/lib/cms";
+
+// 🎯 Fetch data natively during the server request
+const safeEnv = (Astro.locals as any).safeEnv || {};
+const cmsWorker = safeEnv.CMS_WORKER;
+const channelId = getChannelId() || "website";
+
+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);
+};
+
+// 🎯 Resolve the Home Page slug
+const homeSlug = String(import.meta.env.PUBLIC_HOME_SLUG || "home").trim();
+
+let footerBlocks: any[] = [];
+let contentMap: Record<string, any[]> = {};
+
+try {
+  const res = await customFetch(
+    `/api/v1/node/${homeSlug}?channelId=${channelId}`,
+  );
+  if (res.ok) {
+    const data = await res.json();
+    const allContent = data.content || {};
+    footerBlocks = allContent.footer || [];
+    contentMap = allContent;
+  }
+} catch (e) {
+  console.error("[Footer] Failed to fetch home page blocks:", e);
+}
 ---
 
 <footer class="site-footer">
-  <div class="footer-container" id="footer-injection-target">
-    <!-- Lightning fast SSR placeholder before the partial loads -->
+  <div class="footer-container">
+    {
+      footerBlocks && footerBlocks.length > 0 ? (
+        <BlockRenderer
+          blocks={footerBlocks}
+          contentMap={contentMap}
+          region="footer"
+        />
+      ) : (
+        <div class="footer-default">
+          <p>&copy; {new Date().getFullYear()} all rights reserved.</p>
+        </div>
+      )
+    }
   </div>
 </footer>
 
-<script>
-  async function initFooter() {
-    const target = document.getElementById("footer-injection-target");
-    if (!target) return;
-
-    try {
-      const res = await fetch(`/partials/footer`);
-      if (res.ok) {
-        target.innerHTML = await res.text();
-      }
-    } catch (e) {
-      console.error("Failed to load footer partial", e);
-    }
-  }
-
-  // Run immediately
-  initFooter();
-</script>
-
 <style>
   .site-footer {
     background: #ffffff;
@@ -41,8 +81,7 @@
     padding: 24px 20px;
   }
 
-  /* 🎯 Use :global() so Astro doesn't strip the CSS for the injected partial */
-  :global(.footer-default p) {
+  .footer-default p {
     margin: 0;
     font-size: 14px;
     color: #64748b;

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

@@ -1,5 +1,45 @@
 ---
 // src/components/global/NavigationMenu.astro
+import type { TreeNode } from "@/lib/cms";
+
+export interface Props {
+  tree?: TreeNode[];
+}
+
+const { tree = [] } = Astro.props;
+
+// 🎯 Grab the current path directly from Astro's server request
+const currentPath = Astro.url.pathname.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(/\/$/, "") || "/");
+};
 ---
 
 <!-- 2-LINE HAMBURGER TOGGLE BUTTON -->
@@ -16,30 +56,78 @@
 
 <!-- NAVIGATION BLOCK & FULLSCREEN CONTAINER -->
 <nav class="nav-block" id="nav-overlay">
-  <!-- 🎯 The partial HTML will be injected into this div -->
-  <div id="nav-injection-target"></div>
-</nav>
+  <ul class="nav-list">
+    {
+      topLevelNavItems.map(item => {
+        const hasChildren = item.children && item.children.length > 0;
+        const isParentActive = isPathActive(item.path);
 
-<script>
-  async function initNav() {
-    const target = document.getElementById("nav-injection-target");
-    if (!target) return;
-
-    try {
-      // 🎯 Fetch the partial and pass the current page URL so it highlights correctly
-      const currentPath = encodeURIComponent(window.location.pathname);
-      const res = await fetch(`/partials/nav?path=${currentPath}`);
+        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>
+          );
+        }
 
-      if (res.ok) {
-        target.innerHTML = await res.text();
-        bindNavEvents();
-      }
-    } catch (e) {
-      console.error("Failed to load nav partial", e);
+        return (
+          <li class="nav-item">
+            <a
+              href={item.path}
+              class:list={["nav-button", { active: isExactActive(item.path) }]}
+            >
+              {item.title}
+            </a>
+          </li>
+        );
+      })
     }
-  }
+  </ul>
+</nav>
 
-  function bindNavEvents() {
+<script>
+  // 🎯 Clean, standard event listeners that run when the HTML is parsed
+  document.addEventListener("DOMContentLoaded", () => {
     const toggleBtn = document.getElementById("menu-toggle");
     const navOverlay = document.getElementById("nav-overlay");
 
@@ -84,10 +172,7 @@
         }
       });
     });
-  }
-
-  // Run on page load
-  initNav();
+  });
 </script>
 
 <style>
@@ -147,8 +232,7 @@
     pointer-events: auto;
   }
 
-  /* 🎯 We target the injected .nav-list using :global so Astro doesn't scope it away */
-  :global(.nav-list) {
+  .nav-list {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -157,11 +241,11 @@
     padding: 0;
     width: 100%;
   }
-  :global(.nav-item) {
+  .nav-item {
     position: relative;
     width: 100%;
   }
-  :global(.nav-button) {
+  .nav-button {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -178,44 +262,44 @@
     cursor: pointer;
     box-sizing: border-box;
   }
-  :global(.nav-button:hover) {
+  .nav-button:hover {
     color: #0f172a;
     background: #f8fafc;
   }
-  :global(.nav-button.active) {
+  .nav-button.active {
     color: #0c4a6e;
     font-weight: 600;
   }
-  :global(.dropdown-summary) {
+  .dropdown-summary {
     list-style: none;
     user-select: none;
   }
-  :global(.dropdown-summary::-webkit-details-marker) {
+  .dropdown-summary::-webkit-details-marker {
     display: none;
   }
-  :global(.indicator) {
+  .indicator {
     font-size: 11px;
     color: #64748b;
     transition: transform 0.2s ease;
   }
-  :global(details[open] .indicator) {
+  details[open] .indicator {
     transform: rotate(180deg);
   }
-  :global(details.nav-details) {
+  details.nav-details {
     border-radius: 6px;
     transition: background-color 0.2s ease;
   }
-  :global(details[open].nav-details) {
+  details[open].nav-details {
     background: #f8fafc;
     padding-bottom: 8px;
   }
-  :global(.submenu-container) {
+  .submenu-container {
     position: relative;
     margin-left: 24px;
     padding-left: 16px;
     border-left: 2px solid #cbd5e1;
   }
-  :global(.dropdown-panel) {
+  .dropdown-panel {
     list-style: none;
     margin: 4px 0 0 0;
     padding: 0;
@@ -223,7 +307,7 @@
     flex-direction: column;
     gap: 4px;
   }
-  :global(.dropdown-item) {
+  .dropdown-item {
     display: block;
     padding: 10px 12px;
     font-size: 16px;
@@ -235,20 +319,20 @@
       background 0.15s ease,
       color 0.15s ease;
   }
-  :global(.overview-item) {
+  .overview-item {
     font-weight: 500;
     color: #334155;
   }
-  :global(.dropdown-item:hover) {
+  .dropdown-item:hover {
     background: #e2e8f0;
     color: #0f172a;
   }
-  :global(.dropdown-item.active) {
+  .dropdown-item.active {
     font-weight: 600;
     color: #0c4a6e;
     background: #e0f2fe;
   }
-  :global(body.menu-lock-scroll) {
+  body.menu-lock-scroll {
     overflow: hidden !important;
   }
 
@@ -268,15 +352,15 @@
       overflow-y: visible;
       display: block;
     }
-    :global(.nav-list) {
+    .nav-list {
       flex-direction: row;
       gap: 4px;
       justify-content: flex-end;
     }
-    :global(.nav-item) {
+    .nav-item {
       width: auto;
     }
-    :global(.nav-button) {
+    .nav-button {
       display: inline-flex;
       justify-content: flex-start;
       gap: 6px;
@@ -286,16 +370,16 @@
       border-radius: 4px;
       margin-top: 4px;
     }
-    :global(details[open].nav-details) {
+    details[open].nav-details {
       background: transparent;
       padding-bottom: 0;
     }
-    :global(.submenu-container) {
+    .submenu-container {
       margin-left: 0;
       padding-left: 0;
       border-left: none;
     }
-    :global(.dropdown-panel) {
+    .dropdown-panel {
       position: absolute;
       top: 100%;
       left: 0;
@@ -308,7 +392,7 @@
       border-radius: 4px;
       padding: 4px;
     }
-    :global(.dropdown-item) {
+    .dropdown-item {
       font-size: 14px;
       padding: 8px 16px;
       border-radius: 4px;

package/templates/astro-starter/src/pages/[...slug].astro

@@ -57,9 +57,7 @@ const homeSlug = String(envHomeSlug || workerHomeSlug || "home").trim();
 
 const envApiUrl = import.meta.env.PUBLIC_API_URL;
 const workerApiUrl = safeEnv.PUBLIC_API_URL;
-const baseApiUrl = String(
-  envApiUrl || workerApiUrl || "https://admin.kamaengine.com",
-);
+const baseApiUrl = String(envApiUrl || workerApiUrl || "http://localhost:8787");
 
 const cleanApiUrl = baseApiUrl.endsWith("/")
   ? baseApiUrl.slice(0, -1)
@@ -175,7 +173,6 @@ const isSkeleton = node?.nodeType === "page-skeleton";
       isHomePage={isHomePage}
     >
       <BlockRenderer blocks={mainBlocks} contentMap={content} region="main" />
-      <KamaLivePreviewListener />
     </SkeletonLayout>
   ) : (
     <StandardLayout
@@ -235,8 +232,6 @@ const isSkeleton = node?.nodeType === "page-skeleton";
           </aside>
         )}
       </div>
-
-      <KamaLivePreviewListener />
     </StandardLayout>
   )
 }