@brightsideoy/kama 1.0.0-alpha.2 → 1.0.0-alpha.21

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

@@ -0,0 +1,274 @@
+---
+// src/components/blocks/NodeList.astro
+import KamaImage from "@/components/ui/KamaImage.astro";
+
+interface Props {
+  data: Record<string, any>;
+}
+
+const { data } = Astro.props;
+const items = data.initialItems || [];
+const listTitle = data.listTitle || "";
+---
+
+<div class="cms-block node-list-wrapper">
+  {listTitle && <h2 class="node-list-title">{listTitle}</h2>}
+
+  {
+    items.length === 0 ? (
+      <p class="empty-state">No items found.</p>
+    ) : (
+      <div class="node-grid" id={`grid-${data.blockId}`}>
+        {items.map((item: any) => (
+          <article class="node-card">
+            <a href={`/${item.slug}`} class="node-card-link">
+              {/* 🎯 ARCHITECTURAL FIX: Use KamaImage for initial load optimization */}
+              {item.image ? (
+                <KamaImage
+                  image={item.image}
+                  sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
+                  desktopWidths={[320, 640, 768, 1024]}
+                  idealWidth={429}
+                  loading="lazy"
+                />
+              ) : (
+                <div class="image-placeholder" />
+              )}
+              <div class="node-card-content">
+                <h3 class="node-card-title">{item.title}</h3>
+                {item.createdAt && (
+                  <time datetime={item.createdAt} class="node-card-date">
+                    {new Date(item.createdAt).toLocaleDateString("en-GB", {
+                      day: "numeric",
+                      month: "short",
+                      year: "numeric",
+                    })}
+                  </time>
+                )}
+                {item.excerpt && (
+                  <p class="node-card-excerpt">{item.excerpt}</p>
+                )}
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+    )
+  }
+
+  {
+    data.loadMoreUrl && (
+      <div class="load-more-container">
+        <button
+          class="load-more-btn"
+          data-url={data.loadMoreUrl}
+          data-target={`grid-${data.blockId}`}
+        >
+          Load More
+        </button>
+      </div>
+    )
+  }
+</div>
+
+<style is:global>
+  .node-list-wrapper {
+    margin: 2rem 0;
+  }
+
+  .node-list-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: #1e293b;
+  }
+
+  .node-list-wrapper .empty-state {
+    color: #64748b;
+    font-style: italic;
+  }
+
+  .node-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 640px) {
+    .node-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .node-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .node-card {
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #fff;
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .node-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  .node-card-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  /* 🎯 Because of is:global, this styling will automatically apply to <KamaImage> outputs! */
+  .node-card img,
+  .node-card .image-placeholder {
+    width: 100%;
+    height: auto; /* 🎯 FIX: Allows tall images to display their natural height */
+    object-fit: cover;
+    background: #f1f5f9;
+  }
+
+  .node-card .image-placeholder {
+    aspect-ratio: 16 / 9; /* Keep the placeholder a rectangle if there is no image at all */
+  }
+  .node-card-content {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .node-card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: #0f172a;
+    line-height: 1.4;
+  }
+
+  .node-card-date {
+    font-size: 0.875rem;
+    color: #64748b;
+    margin-bottom: 0.75rem;
+  }
+
+  .node-card-excerpt {
+    font-size: 0.9375rem;
+    color: #475569;
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .load-more-container {
+    margin-top: 2rem;
+    text-align: center;
+  }
+
+  .load-more-btn {
+    padding: 0.75rem 1.5rem;
+    background: #0f172a;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .load-more-btn:hover {
+    background: #334155;
+  }
+</style>
+
+<script>
+  function initLoadMoreButtons() {
+    const buttons = document.querySelectorAll(".load-more-btn:not(.is-bound)");
+
+    buttons.forEach(btn => {
+      btn.classList.add("is-bound");
+
+      btn.addEventListener("click", async e => {
+        const targetBtn = e.currentTarget as HTMLButtonElement;
+        const urlString = targetBtn.getAttribute("data-url");
+        const targetId = targetBtn.getAttribute("data-target");
+
+        if (!urlString || !targetId) return;
+
+        const grid = document.getElementById(targetId);
+        if (!grid) return;
+
+        const urlObj = new URL(urlString, window.location.origin);
+        // 🎯 ARCHITECTURAL FIX: Route to the new HTML Partial Endpoint
+        const proxyUrl = `/api/partials/node-cards${urlObj.search}`;
+
+        targetBtn.textContent = "Loading...";
+        targetBtn.disabled = true;
+
+        try {
+          const res = await fetch(proxyUrl);
+
+          if (!res.ok) {
+            throw new Error(`HTTP error! status: ${res.status}`);
+          }
+
+          // 1. Read metadata from headers sent by our partial endpoint
+          const rawCountStr = res.headers.get("X-Consumed-Rows");
+          const limitStr = res.headers.get("X-Limit");
+          const consumedRows = parseInt(rawCountStr || "0", 10);
+          const limit = parseInt(limitStr || "12", 10);
+
+          // 2. Extract and render the raw HTML
+          const htmlSnippet = await res.text();
+
+          if (htmlSnippet.trim().length > 0) {
+            grid.insertAdjacentHTML("beforeend", htmlSnippet);
+          }
+
+          // 3. Handle Pagination
+          if (consumedRows >= limit && limit > 0) {
+            const currentOffset = parseInt(
+              urlObj.searchParams.get("offset") || "0",
+              10,
+            );
+            urlObj.searchParams.set(
+              "offset",
+              (currentOffset + limit).toString(),
+            );
+
+            targetBtn.setAttribute("data-url", urlObj.pathname + urlObj.search);
+            targetBtn.textContent = "Load More";
+            targetBtn.disabled = false;
+          } else {
+            if (targetBtn.parentElement)
+              targetBtn.parentElement.style.display = "none";
+          }
+        } catch (err) {
+          console.error("Failed to load more items:", err);
+          targetBtn.textContent = "Error. Try again";
+          targetBtn.disabled = false;
+        }
+      });
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initLoadMoreButtons);
+  } else {
+    initLoadMoreButtons();
+  }
+  document.addEventListener("astro:page-load", initLoadMoreButtons);
+</script>

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

@@ -7,24 +7,60 @@ interface Props {
   isHomePage?: boolean;
 }
 
-const { title, slug, isHomePage } = Astro.props;
+const { title, isHomePage } = Astro.props;
 
-// 🎯 Detect home page via URL pathname or explicit flag
-const isHome = isHomePage || Astro.url.pathname === "/" || !slug || slug === "";
+const currentPath = Astro.url.pathname;
+
+// Extract non-empty path segments
+const rawSegments = currentPath.split("/").filter(Boolean);
+
+// Detect homepage
+const isHome = isHomePage || currentPath === "/" || rawSegments.length === 0;
+
+function formatSegmentTitle(segment: string): string {
+  return segment
+    .split("-")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+// Build progressive paths: /some-page, /some-page/child-page, etc.
+let runningPath = "";
+const breadcrumbItems = rawSegments.map((segment, index) => {
+  runningPath += `/${segment}`;
+  const isLast = index === rawSegments.length - 1;
+
+  return {
+    label: isLast ? title : formatSegmentTitle(segment),
+    href: runningPath,
+    isCurrent: isLast,
+  };
+});
 ---
 
 <nav class="breadcrumb-nav" aria-label="Breadcrumb">
   <ol class="breadcrumb-list">
+    <!-- Home Link -->
     <li class="breadcrumb-item">
       <a href="/">Home</a>
     </li>
+
+    <!-- Subpage Breadcrumbs -->
     {
-      !isHome && (
-        <li class="breadcrumb-item active" aria-current="page">
-          <span class="separator">/</span>
-          <span>{title}</span>
-        </li>
-      )
+      !isHome &&
+        breadcrumbItems.map(item => (
+          <li
+            class={`breadcrumb-item ${item.isCurrent ? "active" : ""}`}
+            aria-current={item.isCurrent ? "page" : undefined}
+          >
+            <span class="separator">/</span>
+            {item.isCurrent ? (
+              <span>{item.label}</span>
+            ) : (
+              <a href={item.href}>{item.label}</a>
+            )}
+          </li>
+        ))
     }
   </ol>
 </nav>
@@ -45,6 +81,11 @@ const isHome = isHomePage || Astro.url.pathname === "/" || !slug || slug === "";
     color: #64748b;
   }
 
+  .breadcrumb-item {
+    display: flex;
+    align-items: center;
+  }
+
   .breadcrumb-item a {
     color: #334155;
     text-decoration: none;

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

@@ -2,60 +2,21 @@
 // src/components/global/Footer.astro
 
 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);
+interface Props {
+  blocks?: any[];
+  contentMap?: Record<string, any[]>;
 }
+
+const { blocks = [], contentMap = {} } = Astro.props;
 ---
 
 <footer class="site-footer">
   <div class="footer-container">
     {
-      footerBlocks && footerBlocks.length > 0 ? (
+      blocks && blocks.length > 0 ? (
         <BlockRenderer
-          blocks={footerBlocks}
+          blocks={blocks}
           contentMap={contentMap}
           region="footer"
         />

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

@@ -15,7 +15,6 @@ const props = Astro.props as Props;
 const currentPropsNode = props.node || {};
 let rawTree: TreeNode[] = props.tree || [];
 
-// 🎯 Read the safely extracted environment from middleware (Fixes Astro 7 crash)
 const safeEnv = (Astro.locals as any).safeEnv || {};
 const cmsWorker = safeEnv.CMS_WORKER;
 
@@ -41,29 +40,27 @@ const customFetch = (input: RequestInfo | URL, init?: RequestInit) => {
   return fetch(req);
 };
 
-// 🎯 Fetch Global Channel Metadata and Nav Tree in Parallel
-const channelId = getChannelId() || "website";
-const treeId = getTreeId() || "main-nav";
+// 🎯 Resolve Channel ID dynamically from env/lib without hardcoding "website"
+const channelId = getChannelId();
+const treeId = getTreeId();
 
 let channelData: Record<string, any> | null = null;
 
 try {
-  const [fetchedChannel, fetchedTree] = await Promise.all([
-    getChannel(channelId, customFetch),
-    !rawTree || rawTree.length === 0
-      ? getTree(treeId, channelId, customFetch)
-      : Promise.resolve(rawTree),
-  ]);
-
-  channelData = fetchedChannel;
   if (!rawTree || rawTree.length === 0) {
+    const [fetchedChannel, fetchedTree] = await Promise.all([
+      getChannel(channelId, customFetch),
+      getTree(treeId, channelId, customFetch),
+    ]);
+    channelData = fetchedChannel;
     rawTree = fetchedTree || [];
+  } else {
+    channelData = await getChannel(channelId, customFetch);
   }
 } catch (e) {
   console.error("[Header] Failed to load layout data:", e);
 }
 
-// 🎯 1. Resolve Logo Text (Strict waterfall prioritizing explicit strings)
 const rawLogoText = channelData?.logoText;
 const rawSiteTitle = channelData?.siteTitle;
 const rawLabel = channelData?.label;
@@ -82,11 +79,9 @@ if (typeof rawLogoText === "string" && rawLogoText.trim() !== "") {
   logoText = import.meta.env.PUBLIC_SITE_NAME || "KAMA";
 }
 
-// 🎯 2. Extract Raw Logo Asset (Unwraps array wrappers if present)
 const rawLogoAsset = channelData?.logoImage || channelData?.logo;
 const targetLogo = Array.isArray(rawLogoAsset) ? rawLogoAsset[0] : rawLogoAsset;
 
-// 🎯 3. Strict Image Validation Guard (Guarantees non-empty string or populated object)
 const hasValidLogoImage = Boolean(
   targetLogo &&
   ((typeof targetLogo === "string" && targetLogo.trim() !== "") ||
@@ -152,7 +147,6 @@ const hasValidLogoImage = Boolean(
     z-index: 1001;
   }
 
-  /* 🎯 Strict 16px Height Constraint for KamaImage output */
   :global(.logo-image) {
     height: 16px !important;
     max-height: 16px !important;

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

@@ -8,29 +8,37 @@ export interface Props {
 
 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 || "index").trim();
 
-const homeNode = tree.find(
-  item =>
-    item.slug === homeSlug ||
-    item.slug === "" ||
-    item.path === "/" ||
-    item.path === "",
-);
+// 🎯 FIX: Identify the root node in the tree structure
+const rootNode =
+  tree.find(
+    item =>
+      item.path === "/" ||
+      item.path === "" ||
+      item.slug === "index" ||
+      (item as any).isRoot === true ||
+      (item as any).isRootNode === 1,
+  ) || tree[0];
 
-const topLevelNavItems =
-  homeNode?.children && homeNode.children.length > 0
-    ? homeNode.children
+// 🎯 FIX: If rootNode has children, display those children as top-level menu items.
+// If not, filter out the root node by ID AND path.
+// ✨ NEW: Filter out nodes where notInMenu is true
+const rawTopLevelItems =
+  rootNode?.children && rootNode.children.length > 0
+    ? rootNode.children
     : tree.filter(
         item =>
-          item.slug !== homeSlug &&
-          item.slug !== "" &&
+          item.id !== rootNode?.id &&
+          item.slug !== rootNode?.slug &&
           item.path !== "/" &&
           item.path !== "",
       );
 
+const topLevelNavItems = rawTopLevelItems.filter(
+  item => !(item as any).notInMenu,
+);
+
 const isPathActive = (itemPath?: string) => {
   const normItem = (itemPath || "").replace(/\/$/, "") || "/";
   if (normItem === "/") return currentPath === "/";
@@ -59,7 +67,10 @@ const isExactActive = (itemPath?: string) => {
   <ul class="nav-list">
     {
       topLevelNavItems.map(item => {
-        const hasChildren = item.children && item.children.length > 0;
+        // ✨ NEW: Also filter children for notInMenu
+        const visibleChildren =
+          item.children?.filter(child => !(child as any).notInMenu) || [];
+        const hasChildren = visibleChildren.length > 0;
         const isParentActive = isPathActive(item.path);
 
         if (hasChildren) {
@@ -90,7 +101,7 @@ const isExactActive = (itemPath?: string) => {
                         {item.title} Overview
                       </a>
                     </li>
-                    {item.children?.map(child => (
+                    {visibleChildren.map(child => (
                       <li>
                         <a
                           href={child.path}
@@ -125,58 +136,66 @@ const isExactActive = (itemPath?: string) => {
   </ul>
 </nav>
 
-<script>
-  // 🎯 Clean, standard event listeners that run when the HTML is parsed
-  document.addEventListener("DOMContentLoaded", () => {
+<script is:inline>
+  const initMobileMenu = () => {
     const toggleBtn = document.getElementById("menu-toggle");
     const navOverlay = document.getElementById("nav-overlay");
 
+    if (!toggleBtn || !navOverlay) return;
+
+    // Remove old listeners by replacing the nodes (prevents duplicate bindings)
+    const newToggleBtn = toggleBtn.cloneNode(true);
+    toggleBtn.parentNode.replaceChild(newToggleBtn, toggleBtn);
+
     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");
-      }
+      newToggleBtn.setAttribute("aria-expanded", "false");
+      newToggleBtn.classList.remove("is-open");
+      navOverlay.classList.remove("is-open");
+      document.body.classList.remove("menu-lock-scroll");
     };
 
-    if (toggleBtn && navOverlay) {
-      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");
-      });
+    newToggleBtn.addEventListener("click", e => {
+      e.stopPropagation();
+      const isOpen = newToggleBtn.getAttribute("aria-expanded") === "true";
+      newToggleBtn.setAttribute("aria-expanded", (!isOpen).toString());
+      newToggleBtn.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();
-        });
+    // Close menu when clicking nav links
+    const navLinks = navOverlay.querySelectorAll("a");
+    navLinks.forEach(link => {
+      link.addEventListener("click", () => {
+        closeMenu();
       });
-    }
-
-    window.addEventListener("pageshow", closeMenu);
+    });
 
+    // Close details 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)
-        ) {
+        if (details.hasAttribute("open") && !details.contains(event.target)) {
           details.removeAttribute("open");
         }
       });
     });
-  });
+
+    window.addEventListener("pageshow", closeMenu);
+  };
+
+  // Run on first load
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initMobileMenu);
+  } else {
+    initMobileMenu();
+  }
+
+  // Run on every Astro View Transition page navigation
+  document.addEventListener("astro:page-load", initMobileMenu);
 </script>
 
 <style>
-  /* Keeps all of your exact original CSS styles intact! */
   .mobile-toggle {
     display: flex;
     flex-direction: column;