@brightsideoy/kama 0.1.0-alpha.158 → 0.1.0-alpha.159

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

@@ -1,6 +1,5 @@
-// templates/astro-starter/astro.config.mjs
 import { defineConfig } from 'astro/config';
-import cloudflare from '@astrojs/cloudflare';
+import node from '@astrojs/node';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -9,32 +8,17 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 export default defineConfig({
     output: 'server',
     trailingSlash: 'ignore',
-
-    // 🎯 FIX: Point to the new folder location!
-    image: {
-        service: {
-            entrypoint: './src/lib/media/kama-image-service.ts',
-        }
-    },
-
-    // 🎯 Passthrough allows Kama proxy to take 100% control
-    adapter: cloudflare({
-        imageService: 'passthrough',
-    }),
-
+    image: { service: { entrypoint: './src/lib/media/kama-image-service.ts' } },
+    adapter: node({ mode: "standalone" }),
     vite: {
-        resolve: {
-            alias: {
-                '@': path.resolve(__dirname, './src')
-            }
-        },
-        optimizeDeps: {
-            exclude: ['cloudflare:workers', '@astrojs/cloudflare', 'astro']
-        },
+        resolve: { alias: { '@': path.resolve(__dirname, './src') } },
         ssr: {
-            target: 'webworker',
-            noExternal: true,
-            external: ['cloudflare:workers', 'node:process']
+            external: ['cloudflare:workers', 'tinyexec', 'node:child_process', 'node:fs', 'node:url', 'node:path', 'node:stream', 'node:readline', 'node:stream/promises']
+        },
+        environments: {
+            ssr: {
+                external: ['cloudflare:workers', 'tinyexec', 'node:child_process', 'node:fs', 'node:url', 'node:path', 'node:stream', 'node:readline', 'node:stream/promises']
+            }
         }
     }
 });

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

@@ -1,34 +1,33 @@
 ---
 // src/components/global/Footer.astro
-
-import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
-
-interface Props {
-  blocks?: any[];
-  contentMap?: Record<string, any[]>;
-}
-
-const { blocks = [], contentMap = {} } = Astro.props;
+// Notice: No props needed anymore! It fetches its own data independently.
 ---
 
 <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 class="footer-container" id="footer-injection-target">
+    <!-- Lightning fast SSR placeholder before the partial loads -->
   </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;
@@ -42,7 +41,8 @@ const { blocks = [], contentMap = {} } = Astro.props;
     padding: 24px 20px;
   }
 
-  .footer-default p {
+  /* 🎯 Use :global() so Astro doesn't strip the CSS for the injected partial */
+  :global(.footer-default p) {
     margin: 0;
     font-size: 14px;
     color: #64748b;

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

@@ -1,59 +1,5 @@
 ---
 // src/components/global/NavigationMenu.astro
-
-import type { TreeNode } from "@/lib/cms";
-
-interface Props {
-  tree: TreeNode[];
-}
-
-const { tree = [] } = Astro.props;
-
-// 1. Get current path from Astro context
-const currentPath = Astro.url.pathname.replace(/\/$/, "") || "/";
-
-// 🎯 Extract configurable fallback home slug
-const homeSlug = String(import.meta.env.PUBLIC_HOME_SLUG || "home").trim();
-
-// 2. Locate Home Node (either root item, slug matching homeSlug, or path === "/")
-const homeNode = tree.find(
-  (item: TreeNode) =>
-    item.slug === homeSlug ||
-    item.slug === "" ||
-    item.path === "/" ||
-    item.path === "",
-);
-
-// 3. Determine top-level navigation items
-// If home node has children (e.g. nested navigation), render its children; otherwise filter out the home node.
-const topLevelNavItems =
-  homeNode?.children && homeNode.children.length > 0
-    ? homeNode.children
-    : tree.filter(
-        (item: TreeNode) =>
-          item.slug !== homeSlug &&
-          item.slug !== "" &&
-          item.path !== "/" &&
-          item.path !== "",
-      );
-
-// Normalize path comparison helper
-const normalizePath = (path?: string) => {
-  if (!path) return "";
-  return path.replace(/\/$/, "") || "/";
-};
-
-// Active trail check (parent active when on a child page)
-const isPathActive = (itemPath?: string) => {
-  const normItem = normalizePath(itemPath);
-  if (normItem === "/") return currentPath === "/";
-  return currentPath === normItem || currentPath.startsWith(`${normItem}/`);
-};
-
-// Exact path check
-const isExactActive = (itemPath?: string) => {
-  return currentPath === normalizePath(itemPath);
-};
 ---
 
 <!-- 2-LINE HAMBURGER TOGGLE BUTTON -->
@@ -70,139 +16,82 @@ const isExactActive = (itemPath?: string) => {
 
 <!-- NAVIGATION BLOCK & FULLSCREEN CONTAINER -->
 <nav class="nav-block" id="nav-overlay">
-  <ul class="nav-list">
-    {
-      topLevelNavItems.map((item: TreeNode) => {
-        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: TreeNode) => (
-                      <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>
+  <!-- 🎯 The partial HTML will be injected into this div -->
+  <div id="nav-injection-target"></div>
 </nav>
+
 <script>
-  const toggleBtn = document.getElementById("menu-toggle");
-  const navOverlay = document.getElementById("nav-overlay");
+  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 (res.ok) {
+        target.innerHTML = await res.text();
+        bindNavEvents();
+      }
+    } catch (e) {
+      console.error("Failed to load nav partial", e);
+    }
+  }
+
+  function bindNavEvents() {
+    const toggleBtn = document.getElementById("menu-toggle");
+    const navOverlay = document.getElementById("nav-overlay");
+
+    const closeMenu = () => {
+      if (toggleBtn && navOverlay) {
+        toggleBtn.setAttribute("aria-expanded", "false");
+        toggleBtn.classList.remove("is-open");
+        navOverlay.classList.remove("is-open");
+        document.body.classList.remove("menu-lock-scroll");
+      }
+    };
 
-  const closeMenu = () => {
     if (toggleBtn && navOverlay) {
-      toggleBtn.setAttribute("aria-expanded", "false");
-      toggleBtn.classList.remove("is-open");
-      navOverlay.classList.remove("is-open");
-      document.body.classList.remove("menu-lock-scroll");
-    }
-  };
+      toggleBtn.addEventListener("click", () => {
+        const isOpen = toggleBtn.getAttribute("aria-expanded") === "true";
+        toggleBtn.setAttribute("aria-expanded", (!isOpen).toString());
+        toggleBtn.classList.toggle("is-open");
+        navOverlay.classList.toggle("is-open");
+        document.body.classList.toggle("menu-lock-scroll");
+      });
 
-  if (toggleBtn && navOverlay) {
-    // Toggle Menu
-    toggleBtn.addEventListener("click", () => {
-      const isOpen = toggleBtn.getAttribute("aria-expanded") === "true";
-      toggleBtn.setAttribute("aria-expanded", (!isOpen).toString());
-      toggleBtn.classList.toggle("is-open");
-      navOverlay.classList.toggle("is-open");
-      document.body.classList.toggle("menu-lock-scroll");
-    });
+      const navLinks = navOverlay.querySelectorAll("a");
+      navLinks.forEach(link => {
+        link.addEventListener("click", () => {
+          const targetUrl = new URL(link.href);
+          const currentUrl = new window.URL(window.location.href);
+          if (targetUrl.pathname === currentUrl.pathname) closeMenu();
+        });
+      });
+    }
 
-    // 🎯 UPDATED LINK CLICK LOGIC
-    const navLinks = navOverlay.querySelectorAll("a");
-    navLinks.forEach(link => {
-      link.addEventListener("click", e => {
-        // Check where the link is going
-        const targetUrl = new URL(link.href);
-        const currentUrl = new window.URL(window.location.href);
+    window.addEventListener("pageshow", closeMenu);
 
-        // If it's a link to the exact page we are already on (like a #hash anchor),
-        // close the menu so the user can see the page.
-        if (targetUrl.pathname === currentUrl.pathname) {
-          closeMenu();
+    document.addEventListener("click", event => {
+      const allDetails = document.querySelectorAll("details.nav-details");
+      allDetails.forEach(details => {
+        if (
+          details.hasAttribute("open") &&
+          !details.contains(event.target as Node)
+        ) {
+          details.removeAttribute("open");
         }
-        // If it's a new page, DO NOTHING. The menu stays visually open,
-        // acting as a loading screen until the browser paints the new page!
       });
     });
   }
 
-  // Close menu on back/forward browser navigation (bfcache)
-  window.addEventListener("pageshow", () => {
-    closeMenu();
-  });
-
-  // Close desktop dropdowns when clicking outside
-  document.addEventListener("click", event => {
-    const allDetails = document.querySelectorAll("details.nav-details");
-    allDetails.forEach(details => {
-      if (
-        details.hasAttribute("open") &&
-        !details.contains(event.target as Node)
-      ) {
-        details.removeAttribute("open");
-      }
-    });
-  });
+  // Run on page load
+  initNav();
 </script>
 
 <style>
-  /* -------------------------------------------------------------
-     MOBILE HAMBURGER BUTTON (2-LINE TRANSFORMING TO X)
-  ------------------------------------------------------------- */
+  /* Keeps all of your exact original CSS styles intact! */
   .mobile-toggle {
     display: flex;
     flex-direction: column;
@@ -217,7 +106,6 @@ const isExactActive = (itemPath?: string) => {
     padding: 0;
     z-index: 1001;
   }
-
   .mobile-toggle .line {
     width: 22px;
     height: 2px;
@@ -227,18 +115,12 @@ const isExactActive = (itemPath?: string) => {
       opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
     transform-origin: center;
   }
-
   .mobile-toggle.is-open .line-1 {
     transform: translateY(4px) rotate(45deg);
   }
-
   .mobile-toggle.is-open .line-2 {
     transform: translateY(-4px) rotate(-45deg);
   }
-
-  /* -------------------------------------------------------------
-     MOBILE FULLSCREEN OVERLAY (DEFAULT MOBILE VIEW < 768px)
-  ------------------------------------------------------------- */
   .nav-block {
     position: fixed;
     top: 0;
@@ -259,14 +141,14 @@ const isExactActive = (itemPath?: string) => {
       visibility 0.3s ease;
     z-index: 1000;
   }
-
   .nav-block.is-open {
     opacity: 1;
     visibility: visible;
     pointer-events: auto;
   }
 
-  .nav-list {
+  /* 🎯 We target the injected .nav-list using :global so Astro doesn't scope it away */
+  :global(.nav-list) {
     display: flex;
     flex-direction: column;
     gap: 8px;
@@ -275,13 +157,11 @@ const isExactActive = (itemPath?: string) => {
     padding: 0;
     width: 100%;
   }
-
-  .nav-item {
+  :global(.nav-item) {
     position: relative;
     width: 100%;
   }
-
-  .nav-button {
+  :global(.nav-button) {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -298,56 +178,44 @@ const isExactActive = (itemPath?: string) => {
     cursor: pointer;
     box-sizing: border-box;
   }
-
-  .nav-button:hover {
+  :global(.nav-button:hover) {
     color: #0f172a;
     background: #f8fafc;
   }
-
-  .nav-button.active {
+  :global(.nav-button.active) {
     color: #0c4a6e;
     font-weight: 600;
   }
-
-  .dropdown-summary {
+  :global(.dropdown-summary) {
     list-style: none;
     user-select: none;
   }
-
-  .dropdown-summary::-webkit-details-marker {
+  :global(.dropdown-summary::-webkit-details-marker) {
     display: none;
   }
-
-  .indicator {
+  :global(.indicator) {
     font-size: 11px;
     color: #64748b;
     transition: transform 0.2s ease;
   }
-
-  details[open] .indicator {
+  :global(details[open] .indicator) {
     transform: rotate(180deg);
   }
-
-  /* OPEN DROPDOWN SINGLE BLOCK WITH CONNECTING LINE & INDENTATION */
-  details.nav-details {
+  :global(details.nav-details) {
     border-radius: 6px;
     transition: background-color 0.2s ease;
   }
-
-  details[open].nav-details {
+  :global(details[open].nav-details) {
     background: #f8fafc;
     padding-bottom: 8px;
   }
-
-  /* Left vertical accent line connecting parent item and sub-levels */
-  .submenu-container {
+  :global(.submenu-container) {
     position: relative;
     margin-left: 24px;
     padding-left: 16px;
     border-left: 2px solid #cbd5e1;
   }
-
-  .dropdown-panel {
+  :global(.dropdown-panel) {
     list-style: none;
     margin: 4px 0 0 0;
     padding: 0;
@@ -355,8 +223,7 @@ const isExactActive = (itemPath?: string) => {
     flex-direction: column;
     gap: 4px;
   }
-
-  .dropdown-item {
+  :global(.dropdown-item) {
     display: block;
     padding: 10px 12px;
     font-size: 16px;
@@ -368,36 +235,27 @@ const isExactActive = (itemPath?: string) => {
       background 0.15s ease,
       color 0.15s ease;
   }
-
-  .overview-item {
+  :global(.overview-item) {
     font-weight: 500;
     color: #334155;
   }
-
-  .dropdown-item:hover {
+  :global(.dropdown-item:hover) {
     background: #e2e8f0;
     color: #0f172a;
   }
-
-  .dropdown-item.active {
+  :global(.dropdown-item.active) {
     font-weight: 600;
     color: #0c4a6e;
     background: #e0f2fe;
   }
-
-  /* Prevent body scrolling when menu open */
   :global(body.menu-lock-scroll) {
     overflow: hidden !important;
   }
 
-  /* -------------------------------------------------------------
-     DESKTOP MEDIA QUERY (>= 768px)
-  ------------------------------------------------------------- */
   @media (min-width: 768px) {
     .mobile-toggle {
       display: none;
     }
-
     .nav-block {
       position: static;
       width: 100%;
@@ -410,18 +268,15 @@ const isExactActive = (itemPath?: string) => {
       overflow-y: visible;
       display: block;
     }
-
-    .nav-list {
+    :global(.nav-list) {
       flex-direction: row;
       gap: 4px;
       justify-content: flex-end;
     }
-
-    .nav-item {
+    :global(.nav-item) {
       width: auto;
     }
-
-    .nav-button {
+    :global(.nav-button) {
       display: inline-flex;
       justify-content: flex-start;
       gap: 6px;
@@ -431,19 +286,16 @@ const isExactActive = (itemPath?: string) => {
       border-radius: 4px;
       margin-top: 4px;
     }
-
-    details[open].nav-details {
+    :global(details[open].nav-details) {
       background: transparent;
       padding-bottom: 0;
     }
-
-    .submenu-container {
+    :global(.submenu-container) {
       margin-left: 0;
       padding-left: 0;
       border-left: none;
     }
-
-    .dropdown-panel {
+    :global(.dropdown-panel) {
       position: absolute;
       top: 100%;
       left: 0;
@@ -456,8 +308,7 @@ const isExactActive = (itemPath?: string) => {
       border-radius: 4px;
       padding: 4px;
     }
-
-    .dropdown-item {
+    :global(.dropdown-item) {
       font-size: 14px;
       padding: 8px 16px;
       border-radius: 4px;

package/templates/astro-starter/src/layouts/StandardLayout.astro

@@ -32,7 +32,8 @@ const {
 // (MetaHead will resolve channel.defaultLanguage if this remains undefined)
 const pageLang = language || node?.language || undefined;
 
-const footerBlocks = content?.footer || [];
+// ❌ Removed: const footerBlocks = content?.footer || [];
+// (The new Footer component handles its own data now!)
 ---
 
 <!doctype html>
@@ -56,6 +57,6 @@ const footerBlocks = content?.footer || [];
       </div>
     </main>
 
-    <Footer blocks={footerBlocks} contentMap={content} />
+    <Footer />
   </body>
 </html>

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

@@ -0,0 +1,69 @@
+---
+// src/pages/partials/footer.astro
+export const partial = true;
+
+import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
+import { getChannelId } from "@/lib/cms";
+
+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 {
+  // 🎯 Fetch the Home Page node from Kama CMS Public API
+  const res = await customFetch(
+    `/api/v1/node/${homeSlug}?channelId=${channelId}`,
+  );
+  if (res.ok) {
+    const data = await res.json();
+
+    // Kama CMS public node endpoints usually organize blocks inside a 'content' object mapped by region
+    const allContent = data.content || {};
+
+    // Extract specifically the footer region from the Home page
+    footerBlocks = allContent.footer || [];
+    contentMap = allContent;
+  }
+} catch (e) {
+  console.error("[Partials/Footer] Failed to fetch home page blocks:", e);
+}
+---
+
+{
+  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>
+  )
+}