@brightsideoy/kama 0.1.0-alpha.16 → 0.1.0-alpha.161

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

@@ -0,0 +1,318 @@
+---
+// src/components/global/NavigationMenu.astro
+---
+
+<!-- 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">
+  <!-- 🎯 The partial HTML will be injected into this div -->
+  <div id="nav-injection-target"></div>
+</nav>
+
+<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 (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");
+      }
+    };
+
+    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");
+        }
+      });
+    });
+  }
+
+  // Run on page load
+  initNav();
+</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;
+  }
+
+  /* 🎯 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;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+  :global(.nav-item) {
+    position: relative;
+    width: 100%;
+  }
+  :global(.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;
+  }
+  :global(.nav-button:hover) {
+    color: #0f172a;
+    background: #f8fafc;
+  }
+  :global(.nav-button.active) {
+    color: #0c4a6e;
+    font-weight: 600;
+  }
+  :global(.dropdown-summary) {
+    list-style: none;
+    user-select: none;
+  }
+  :global(.dropdown-summary::-webkit-details-marker) {
+    display: none;
+  }
+  :global(.indicator) {
+    font-size: 11px;
+    color: #64748b;
+    transition: transform 0.2s ease;
+  }
+  :global(details[open] .indicator) {
+    transform: rotate(180deg);
+  }
+  :global(details.nav-details) {
+    border-radius: 6px;
+    transition: background-color 0.2s ease;
+  }
+  :global(details[open].nav-details) {
+    background: #f8fafc;
+    padding-bottom: 8px;
+  }
+  :global(.submenu-container) {
+    position: relative;
+    margin-left: 24px;
+    padding-left: 16px;
+    border-left: 2px solid #cbd5e1;
+  }
+  :global(.dropdown-panel) {
+    list-style: none;
+    margin: 4px 0 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+  :global(.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;
+  }
+  :global(.overview-item) {
+    font-weight: 500;
+    color: #334155;
+  }
+  :global(.dropdown-item:hover) {
+    background: #e2e8f0;
+    color: #0f172a;
+  }
+  :global(.dropdown-item.active) {
+    font-weight: 600;
+    color: #0c4a6e;
+    background: #e0f2fe;
+  }
+  :global(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;
+    }
+    :global(.nav-list) {
+      flex-direction: row;
+      gap: 4px;
+      justify-content: flex-end;
+    }
+    :global(.nav-item) {
+      width: auto;
+    }
+    :global(.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;
+    }
+    :global(details[open].nav-details) {
+      background: transparent;
+      padding-bottom: 0;
+    }
+    :global(.submenu-container) {
+      margin-left: 0;
+      padding-left: 0;
+      border-left: none;
+    }
+    :global(.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;
+    }
+    :global(.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,47 @@
+---
+// 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;
+}
+
+const { node = {}, content = {}, normalizedSlug, isHomePage } = Astro.props;
+
+// 1. Extract raw custom code fields from the node payload
+const customCss = node.css || "";
+const customJsHeader = node.jsHeader || "";
+const customJsFooter = node.jsFooter || "";
+const pageLang = language || node?.language || "en";
+---
+
+<!doctype html>
+<html lang={pageLang}>
+  <head>
+    <!-- 🎯 1. SEO & Meta Tags -->
+    <MetaHead
+      node={node}
+      content={content}
+      normalizedSlug={normalizedSlug}
+      isHomePage={isHomePage}
+    />
+
+    <!-- 🎯 2. Custom CSS injected into <head> -->
+    {customCss && <style set:html={customCss} />}
+
+    <!-- 🎯 3. Custom Header JS injected into <head> -->
+    {customJsHeader && <script set:html={customJsHeader} />}
+  </head>
+
+  <body>
+    <!-- 🎯 4. Renders your HTML Block natively (No wrappers, no headers) -->
+    <slot />
+
+    <!-- 🎯 5. Custom Footer JS injected before closing body -->
+    {customJsFooter && <script 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>