@brightsideoy/kama 0.1.0-alpha.113 → 0.1.0-alpha.115

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

@@ -0,0 +1,450 @@
+---
+// 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(/\/$/, "") || "/";
+
+const homeNode = tree.find(
+  (item: TreeNode) => item.slug === "home" || item.path === "/",
+);
+
+const topLevelNavItems =
+  homeNode?.children && homeNode.children.length > 0
+    ? homeNode.children
+    : tree.filter((item: TreeNode) => item.slug !== "home");
+
+// 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 -->
+<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: 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>
+</nav>
+<script>
+  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) {
+    // 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");
+    });
+
+    // 🎯 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);
+
+        // 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();
+        }
+        // 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");
+      }
+    });
+  });
+</script>
+
+<style>
+  /* -------------------------------------------------------------
+     MOBILE HAMBURGER BUTTON (2-LINE TRANSFORMING TO X)
+  ------------------------------------------------------------- */
+  .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);
+  }
+
+  /* -------------------------------------------------------------
+     MOBILE FULLSCREEN OVERLAY (DEFAULT MOBILE VIEW < 768px)
+  ------------------------------------------------------------- */
+  .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);
+  }
+
+  /* OPEN DROPDOWN SINGLE BLOCK WITH CONNECTING LINE & INDENTATION */
+  details.nav-details {
+    border-radius: 6px;
+    transition: background-color 0.2s ease;
+  }
+
+  details[open].nav-details {
+    background: #f8fafc;
+    padding-bottom: 8px;
+  }
+
+  /* Left vertical accent line connecting parent item and sub-levels */
+  .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;
+  }
+
+  /* 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%;
+      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,148 @@
+---
+// src/components/ui/KamaImage.astro
+
+import { getMediaUrl } from "@/lib/cms";
+import { buildAgnosticImageUrl } from "@/lib/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;
+
+if (!image || (!image.url && !image.path && !image.variants)) {
+  return null;
+}
+
+const variants = image.variants || {};
+
+/**
+ * Resolve CMS media URLs.
+ */
+const rawMobileUrl = getMediaUrl(variants.mobile?.url);
+const rawTabletUrl = getMediaUrl(variants.tablet?.url);
+const rawDesktopUrl = getMediaUrl(
+  variants.standard?.url || image.url || image.path,
+);
+
+/**
+ * Resolve dimensions.
+ * Crop dimensions take precedence over original image dimensions.
+ */
+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);
+
+const baseWidth = Number(
+  variants.standard?.cropCoordinates?.width || image.width || idealWidth,
+);
+const baseHeight = Number(
+  variants.standard?.cropCoordinates?.height ||
+    image.height ||
+    Math.round(idealWidth * 0.5),
+);
+
+/**
+ * Build responsive srcset using query-based media proxy URLs (/media/foo.jpg?w=768&q=75&f=auto)
+ */
+function buildAgnosticSrcset(
+  url: string,
+  targetWidths: number[],
+  quality = 75,
+): string {
+  if (!url) return "";
+
+  return targetWidths
+    .map(width => `${buildAgnosticImageUrl(url, width, quality)} ${width}w`)
+    .join(", ");
+}
+
+/**
+ * Build srcsets.
+ */
+const mobileSrcset = rawMobileUrl
+  ? buildAgnosticSrcset(rawMobileUrl, [400, 768])
+  : null;
+
+const tabletSrcset = rawTabletUrl
+  ? buildAgnosticSrcset(rawTabletUrl, [768, 1024])
+  : null;
+
+const desktopSrcset = rawDesktopUrl
+  ? buildAgnosticSrcset(rawDesktopUrl, desktopWidths)
+  : null;
+
+/**
+ * Fallback image URL: /media/foo.jpg?w=1352&q=75&f=auto
+ */
+const absoluteFallback = rawDesktopUrl
+  ? buildAgnosticImageUrl(rawDesktopUrl, idealWidth, 75)
+  : "";
+---
+
+<picture>
+  {/* Mobile Variant (< 768px) */}
+  {
+    mobileSrcset && (
+      <source
+        media="(max-width: 767px)"
+        srcset={mobileSrcset}
+        sizes="(max-width: 767px) calc(100vw - 48px), 768px"
+        width={mobileW}
+        height={mobileH}
+      />
+    )
+  }
+
+  {/* Tablet Variant (768px - 1024px) */}
+  {
+    tabletSrcset && (
+      <source
+        media="(min-width: 768px) and (max-width: 1024px)"
+        srcset={tabletSrcset}
+        sizes="(max-width: 1024px) calc(100vw - 48px), 1024px"
+        width={tabletW}
+        height={tabletH}
+      />
+    )
+  }
+
+  {/* Desktop Variant (> 1024px) */}
+  {
+    desktopSrcset && (
+      <source
+        srcset={desktopSrcset}
+        sizes={sizes}
+        width={baseWidth}
+        height={baseHeight}
+      />
+    )
+  }
+
+  <img
+    src={absoluteFallback}
+    alt={image.alt || image.filename || ""}
+    width={baseWidth}
+    height={baseHeight}
+    loading={loading}
+    fetchpriority={fetchpriority}
+    decoding={loading === "eager" ? "sync" : "async"}
+    class={className}
+  />
+</picture>

package/templates/astro-starter/src/kama-image-service.ts

@@ -0,0 +1,41 @@
+// src/kama-image-service.ts
+import type { LocalImageService } from "astro";
+
+const kamaImageService: LocalImageService = {
+    getURL(options) {
+        let src = options.src;
+
+        if (typeof src === 'object' && 'src' in src) {
+            src = src.src;
+        }
+
+        if (typeof src === 'string') {
+            try {
+                const url = new URL(src, 'http://localhost');
+
+                if (options.width) url.searchParams.set('w', Math.round(options.width).toString());
+                if (options.height) url.searchParams.set('h', Math.round(options.height).toString());
+                if (options.quality) url.searchParams.set('q', options.quality.toString());
+                if (options.format) url.searchParams.set('f', options.format.toString());
+
+                return src.startsWith('http') ? url.toString() : (url.pathname + url.search);
+            } catch (e) {
+                return src;
+            }
+        }
+        return String(src);
+    },
+    parseURL(url) {
+        return { src: url.pathname + url.search };
+    },
+    getHTMLAttributes(options) {
+        return {
+            width: options.width,
+            height: options.height,
+            loading: options.loading || 'lazy',
+            decoding: options.decoding || 'async',
+        };
+    }
+};
+
+export default kamaImageService;