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

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

@@ -1,413 +0,0 @@
----
-// src/components/global/NavigationMenu.astro
-import type { TreeNode } from "@/lib/cms";
-
-export interface Props {
-  tree?: TreeNode[];
-}
-
-const { tree = [] } = Astro.props;
-
-const currentPath = Astro.url.pathname.replace(/\/$/, "") || "/";
-
-// 🎯 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];
-
-// 🎯 FIX: If rootNode has children, display those children as top-level menu items.
-// If not, filter out the root node by ID AND path.
-const topLevelNavItems =
-  rootNode?.children && rootNode.children.length > 0
-    ? rootNode.children
-    : tree.filter(
-        item =>
-          item.id !== rootNode?.id &&
-          item.slug !== rootNode?.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 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 = () => {
-      newToggleBtn.setAttribute("aria-expanded", "false");
-      newToggleBtn.classList.remove("is-open");
-      navOverlay.classList.remove("is-open");
-      document.body.classList.remove("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");
-    });
-
-    // Close menu when clicking nav links
-    const navLinks = navOverlay.querySelectorAll("a");
-    navLinks.forEach(link => {
-      link.addEventListener("click", () => {
-        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)) {
-          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>
-  .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/old_src/components/ui/KamaImage.astro

@@ -1,180 +0,0 @@
----
-// 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, 1920, 2560],
-  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(", ");
-}
-
-// 🎯 High-DPI / Retina Optimization:
-// - Mobile: Includes 320, 640, 768 (covers 2x and 3x Retina mobile displays)
-// - Tablet: Includes 768, 1024, 1352 (covers iPad Pro Retina density)
-// - Desktop: Uses desktopWidths (defaults to 768, 1352, 1920, 2560 for 1440p and 4K)
-const mobileSrcset =
-  !isSvg && rawMobileUrl
-    ? buildAgnosticSrcset(rawMobileUrl, [320, 640, 768])
-    : null;
-
-const tabletSrcset =
-  !isSvg && rawTabletUrl
-    ? buildAgnosticSrcset(rawTabletUrl, [768, 1024, 1352])
-    : null;
-
-const desktopSrcset =
-  !isSvg && rawDesktopUrl
-    ? buildAgnosticSrcset(
-        rawDesktopUrl,
-        desktopWidths.length ? desktopWidths : [768, 1352, 1920, 2560],
-      )
-    : 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/old_src/layouts/SkeletonLayout.astro

@@ -1,56 +0,0 @@
----
-// 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/old_src/layouts/StandardLayout.astro

@@ -1,63 +0,0 @@
----
-// 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;
-
-// 🎯 FIX: Extract the footer blocks from the payload again
-const footerBlocks = content?.footer || [];
----
-
-<!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>
-
-    {/* 🎯 FIX: Pass the blocks and contentMap into the Footer */}
-    <Footer blocks={footerBlocks} contentMap={content} />
-  </body>
-</html>