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

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

@@ -0,0 +1,402 @@
+---
+// 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 || "index").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 -->
+<button
+  type="button"
+  class="mobile-toggle"
+  id="menu-toggle"
+  aria-label="Toggle Navigation Menu"
+  aria-expanded="false"
+>
+  <span class="line line-1"></span>
+  <span class="line line-2"></span>
+</button>
+
+<!-- NAVIGATION BLOCK & FULLSCREEN CONTAINER -->
+<nav class="nav-block" id="nav-overlay">
+  <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>
+</nav>
+
+<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");
+
+    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");
+      }
+    };
+
+    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");
+      });
+
+      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();
+        });
+      });
+    }
+
+    window.addEventListener("pageshow", 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");
+        }
+      });
+    });
+  });
+</script>
+
+<style>
+  /* Keeps all of your exact original CSS styles intact! */
+  .mobile-toggle {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 6px;
+    width: 44px;
+    height: 44px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    z-index: 1001;
+  }
+  .mobile-toggle .line {
+    width: 22px;
+    height: 2px;
+    background-color: #0f172a;
+    transition:
+      transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
+      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);
+  }
+  .nav-block {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: #ffffff;
+    padding: 80px 24px 40px 24px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+    z-index: 1000;
+  }
+  .nav-block.is-open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+
+  .nav-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  .nav-item {
+    position: relative;
+    width: 100%;
+  }
+  .nav-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 52px;
+    padding: 0 16px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #334155;
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    box-sizing: border-box;
+  }
+  .nav-button:hover {
+    color: #0f172a;
+    background: #f8fafc;
+  }
+  .nav-button.active {
+    color: #0c4a6e;
+    font-weight: 600;
+  }
+  .dropdown-summary {
+    list-style: none;
+    user-select: none;
+  }
+  .dropdown-summary::-webkit-details-marker {
+    display: none;
+  }
+  .indicator {
+    font-size: 11px;
+    color: #64748b;
+    transition: transform 0.2s ease;
+  }
+  details[open] .indicator {
+    transform: rotate(180deg);
+  }
+  details.nav-details {
+    border-radius: 6px;
+    transition: background-color 0.2s ease;
+  }
+  details[open].nav-details {
+    background: #f8fafc;
+    padding-bottom: 8px;
+  }
+  .submenu-container {
+    position: relative;
+    margin-left: 24px;
+    padding-left: 16px;
+    border-left: 2px solid #cbd5e1;
+  }
+  .dropdown-panel {
+    list-style: none;
+    margin: 4px 0 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  .dropdown-item {
+    display: block;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    color: #475569;
+    text-decoration: none;
+    border-radius: 4px;
+    transition:
+      background 0.15s ease,
+      color 0.15s ease;
+  }
+  .overview-item {
+    font-weight: 500;
+    color: #334155;
+  }
+  .dropdown-item:hover {
+    background: #e2e8f0;
+    color: #0f172a;
+  }
+  .dropdown-item.active {
+    font-weight: 600;
+    color: #0c4a6e;
+    background: #e0f2fe;
+  }
+  body.menu-lock-scroll {
+    overflow: hidden !important;
+  }
+
+  @media (min-width: 768px) {
+    .mobile-toggle {
+      display: none;
+    }
+    .nav-block {
+      position: static;
+      width: 100%;
+      height: auto;
+      background: transparent;
+      padding: 0;
+      opacity: 1;
+      visibility: visible;
+      pointer-events: auto;
+      overflow-y: visible;
+      display: block;
+    }
+    .nav-list {
+      flex-direction: row;
+      gap: 4px;
+      justify-content: flex-end;
+    }
+    .nav-item {
+      width: auto;
+    }
+    .nav-button {
+      display: inline-flex;
+      justify-content: flex-start;
+      gap: 6px;
+      height: 40px;
+      padding: 0 16px;
+      font-size: 14px;
+      border-radius: 4px;
+      margin-top: 4px;
+    }
+    details[open].nav-details {
+      background: transparent;
+      padding-bottom: 0;
+    }
+    .submenu-container {
+      margin-left: 0;
+      padding-left: 0;
+      border-left: none;
+    }
+    .dropdown-panel {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      min-width: 220px;
+      background: #ffffff;
+      border: 1px solid #e2e8f0;
+      margin: 0;
+      gap: 0;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+      border-radius: 4px;
+      padding: 4px;
+    }
+    .dropdown-item {
+      font-size: 14px;
+      padding: 8px 16px;
+      border-radius: 4px;
+      border-bottom: none;
+    }
+  }
+</style>

package/templates/astro-starter/src/components/ui/KamaImage.astro

@@ -0,0 +1,172 @@
+---
+// src/components/ui/KamaImage.astro
+
+import {
+  buildAgnosticImageUrl,
+  isSvgImage,
+  getImageUri,
+} from "@/lib/media/media-url";
+
+interface Props {
+  image: any;
+  sizes?: string;
+  desktopWidths?: number[];
+  idealWidth?: number;
+  class?: string;
+  loading?: "lazy" | "eager";
+  fetchpriority?: "auto" | "high" | "low";
+}
+
+const {
+  image = {},
+  sizes = "100vw",
+  desktopWidths = [768, 1352],
+  idealWidth = 1352,
+  class: className = "",
+  loading = "lazy",
+  fetchpriority = "auto",
+} = Astro.props;
+
+// Unpack array wrappers if passed
+const targetImage = Array.isArray(image) ? image[0] : image;
+
+// 🎯 FIX 1: Support string paths in addition to object payloads
+const isValidImage = Boolean(
+  targetImage &&
+  (typeof targetImage === "string" ||
+    targetImage.url ||
+    targetImage.path ||
+    targetImage.variants),
+);
+
+// Detect if this asset is a vector SVG
+const isSvg =
+  isSvgImage(targetImage?.mimeType || "") ||
+  isSvgImage(targetImage?.filename || "") ||
+  isSvgImage(targetImage?.url || targetImage?.path || "") ||
+  (typeof targetImage === "string" && isSvgImage(targetImage));
+
+const variants = targetImage?.variants || {};
+
+// Resolve base paths using getImageUri to ensure CSP compliance & relativity
+const rawMobileUrl = getImageUri(variants.mobile?.url);
+const rawTabletUrl = getImageUri(variants.tablet?.url);
+const rawDesktopUrl = getImageUri(
+  variants.standard?.url ||
+    targetImage?.url ||
+    targetImage?.path ||
+    targetImage,
+);
+
+const mobileW = Number(variants.mobile?.cropCoordinates?.width || 768);
+const mobileH = Number(variants.mobile?.cropCoordinates?.height || 576);
+
+const tabletW = Number(variants.tablet?.cropCoordinates?.width || 1024);
+const tabletH = Number(variants.tablet?.cropCoordinates?.height || 512);
+
+// 🎯 FIX 2: Omit explicit width/height attributes on SVGs if intrinsic dimensions are missing/0
+const rawWidth = Number(
+  variants.standard?.cropCoordinates?.width || targetImage?.width,
+);
+const rawHeight = Number(
+  variants.standard?.cropCoordinates?.height || targetImage?.height,
+);
+
+const baseWidth =
+  rawWidth && !isNaN(rawWidth) && rawWidth > 0 ? rawWidth : idealWidth;
+const baseHeight =
+  rawHeight && !isNaN(rawHeight) && rawHeight > 0
+    ? rawHeight
+    : Math.round(idealWidth * 0.5);
+
+function buildAgnosticSrcset(
+  url: string,
+  targetWidths: number[],
+  quality = 75,
+): string {
+  if (!url) return "";
+  return targetWidths
+    .map(width => `${buildAgnosticImageUrl(url, width, quality)} ${width}w`)
+    .join(", ");
+}
+
+// Generate srcsets only for raster images
+const mobileSrcset =
+  !isSvg && rawMobileUrl ? buildAgnosticSrcset(rawMobileUrl, [400, 768]) : null;
+
+const tabletSrcset =
+  !isSvg && rawTabletUrl
+    ? buildAgnosticSrcset(rawTabletUrl, [768, 1024])
+    : null;
+
+const desktopSrcset =
+  !isSvg && rawDesktopUrl
+    ? buildAgnosticSrcset(rawDesktopUrl, desktopWidths)
+    : null;
+
+const fallbackUrl =
+  getImageUri(rawDesktopUrl, {
+    width: isSvg ? undefined : baseWidth,
+    quality: 75,
+  }) || "";
+---
+
+{
+  isValidImage &&
+    (isSvg ? (
+      /* 🎯 Clean single <img> for SVG Vectors */
+      <img
+        src={fallbackUrl}
+        alt={targetImage.alt || targetImage.filename || ""}
+        width={rawWidth > 0 ? rawWidth : undefined}
+        height={rawHeight > 0 ? rawHeight : undefined}
+        loading={loading}
+        fetchpriority={fetchpriority}
+        decoding={loading === "eager" ? "sync" : "async"}
+        class={className}
+      />
+    ) : (
+      /* 🎯 Responsive <picture> for Raster Images (.png, .jpg, .webp) */
+      <picture>
+        {Boolean(mobileSrcset) && (
+          <source
+            media="(max-width: 767px)"
+            srcset={mobileSrcset as string}
+            sizes="(max-width: 767px) calc(100vw - 48px), 768px"
+            width={mobileW}
+            height={mobileH}
+          />
+        )}
+
+        {Boolean(tabletSrcset) && (
+          <source
+            media="(min-width: 768px) and (max-width: 1024px)"
+            srcset={tabletSrcset as string}
+            sizes="(max-width: 1024px) calc(100vw - 48px), 1024px"
+            width={tabletW}
+            height={tabletH}
+          />
+        )}
+
+        {Boolean(desktopSrcset) && (
+          <source
+            srcset={desktopSrcset as string}
+            sizes={sizes}
+            width={baseWidth}
+            height={baseHeight}
+          />
+        )}
+
+        <img
+          src={fallbackUrl}
+          alt={targetImage.alt || targetImage.filename || ""}
+          width={baseWidth}
+          height={baseHeight}
+          loading={loading}
+          fetchpriority={fetchpriority}
+          decoding={loading === "eager" ? "sync" : "async"}
+          class={className}
+        />
+      </picture>
+    ))
+}

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

@@ -0,0 +1,56 @@
+---
+// src/layouts/SkeletonLayout.astro
+
+import MetaHead from "@/components/global/MetaHead.astro";
+
+interface Props {
+  node: Record<string, any>;
+  content: Record<string, any>;
+  normalizedSlug: string;
+  isHomePage: boolean;
+  // 🎯 1. Added language to Props
+  language?: string;
+}
+
+// 🎯 2. Destructure language
+const {
+  node = {},
+  content = {},
+  normalizedSlug,
+  isHomePage,
+  language,
+} = Astro.props;
+
+const customCss = node.css || "";
+const customJsHeader = node.jsHeader || "";
+const customJsFooter = node.jsFooter || "";
+
+// Now this works without crashing!
+const pageLang = language || node?.language || "en";
+---
+
+<!doctype html>
+<html lang={pageLang}>
+  <head>
+    <MetaHead
+      node={node}
+      content={content}
+      normalizedSlug={normalizedSlug}
+      isHomePage={isHomePage}
+    />
+
+    <!-- 🎯 3. Added is:inline so Astro actually renders your database CSS -->
+    {customCss && <style is:inline set:html={customCss} />}
+
+    <!-- 🎯 4. Added is:inline so Astro executes your header JS -->
+    {customJsHeader && <script is:inline set:html={customJsHeader} />}
+  </head>
+
+  <body>
+    <!-- Renders your Blocks (like the HTML Block) natively -->
+    <slot />
+
+    <!-- 🎯 5. Added is:inline to footer JS -->
+    {customJsFooter && <script is:inline set:html={customJsFooter} />}
+  </body>
+</html>

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

@@ -0,0 +1,62 @@
+---
+// src/layouts/StandardLayout.astro
+
+import "@/styles/standard-theme.css";
+import Header from "@/components/global/Header.astro";
+import Footer from "@/components/global/Footer.astro";
+import MetaHead from "@/components/global/MetaHead.astro";
+import type { TreeNode, ContentBlock } from "@/lib/cms";
+
+interface Props {
+  node: Record<string, any>;
+  content: Record<string, ContentBlock[]>;
+  normalizedSlug: string;
+  isHomePage: boolean;
+  hasSidebar?: boolean;
+  headerBlocks?: ContentBlock[];
+  tree?: TreeNode[];
+  language?: string;
+}
+
+const {
+  node = {},
+  content = {},
+  normalizedSlug,
+  isHomePage,
+  headerBlocks = [],
+  tree,
+  language,
+} = Astro.props;
+
+// 🎯 Language Cascade: explicit prop -> node language -> fallback undefined
+// (MetaHead will resolve channel.defaultLanguage if this remains undefined)
+const pageLang = language || node?.language || undefined;
+
+// ❌ Removed: const footerBlocks = content?.footer || [];
+// (The new Footer component handles its own data now!)
+---
+
+<!doctype html>
+<html lang={pageLang}>
+  <head>
+    <MetaHead
+      node={node}
+      content={content}
+      normalizedSlug={normalizedSlug}
+      isHomePage={isHomePage}
+      headerBlocks={headerBlocks}
+      resolvedLanguage={pageLang}
+    />
+  </head>
+  <body>
+    <Header node={node} tree={tree} />
+
+    <main class="content-block">
+      <div class="content-container">
+        <slot />
+      </div>
+    </main>
+
+    <Footer />
+  </body>
+</html>