@brightsideoy/kama 0.1.0-alpha.12 → 0.1.0-alpha.121

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/seo/SeoHead.astro

@@ -0,0 +1,150 @@
+---
+// src/components/seo/SeoHead.astro
+import type { ContentBlock } from "@/lib/cms";
+import { buildAgnosticImageUrl } from "@/lib/media/media-url"; // Update path if you moved this!
+
+interface Props {
+  node: Record<string, any>;
+  content: Record<string, ContentBlock[]>;
+  normalizedSlug: string;
+  isHomePage: boolean;
+  headerBlocks?: ContentBlock[];
+}
+
+const { 
+  node = {}, 
+  content = {}, 
+  normalizedSlug, 
+  isHomePage, 
+  headerBlocks = [] 
+} = Astro.props;
+
+// 🎯 Detect LCP image candidate to preload immediately
+let lcpImageUrl = "";
+const firstHeaderBlock = headerBlocks && headerBlocks[0];
+const firstContentBlock = content?.content && content.content[0];
+
+const candidateBlock = (firstHeaderBlock?.data?.image ? firstHeaderBlock : null) 
+  || (firstContentBlock?.data?.image ? firstContentBlock : null);
+
+if (candidateBlock?.data?.image) {
+  const candidateImg = candidateBlock.data.image;
+  const rawUrl = candidateImg.variants?.standard?.url || candidateImg.url || candidateImg.path;
+  if (rawUrl) {
+    lcpImageUrl = buildAgnosticImageUrl(rawUrl, 1352, 75);
+  }
+}
+
+const siteOrigin = import.meta.env.PUBLIC_SITE_URL || Astro.site?.origin || "https://example.com";
+const brandName = import.meta.env.PUBLIC_SITE_NAME || "KAMA Starter";
+const agencyName = import.meta.env.PUBLIC_AGENCY_NAME || "My Company Name";
+const brandLogo = `${siteOrigin}/logo.png`;
+
+const prefix = node?.titlePrefix?.trim() ? `${node.titlePrefix.trim()} ` : "";
+const suffix = node?.titleSuffix?.trim() ? ` ${node.titleSuffix.trim()}` : "";
+const baseTitle = node?.title?.trim() || brandName;
+const fullTitle = `${prefix}${baseTitle}${suffix}`;
+
+const canonicalURL = new URL(Astro.url.pathname, siteOrigin).href;
+
+const breadcrumbListItems = [
+  {
+    "@type": "ListItem",
+    "position": 1,
+    "name": "Home",
+    "item": siteOrigin,
+  },
+];
+
+if (!isHomePage && normalizedSlug) {
+  const segments = normalizedSlug.split("/").filter(Boolean);
+  let currentPath = "";
+
+  segments.forEach((segment, index) => {
+    currentPath += `/${segment}`;
+    const isLast = index === segments.length - 1;
+
+    const fallbackTitle = segment
+      .replace(/-/g, " ")
+      .replace(/\b\w/g, (char) => char.toUpperCase());
+
+    const segmentTitle = isLast && node?.title ? node.title : fallbackTitle;
+
+    breadcrumbListItems.push({
+      "@type": "ListItem",
+      "position": index + 2,
+      "name": segmentTitle,
+      "item": `${siteOrigin}${currentPath}`,
+    });
+  });
+}
+
+const structuredDataGraph = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "Organization",
+      "@id": `${siteOrigin}/#organization`,
+      "name": agencyName,
+      "url": siteOrigin,
+      "logo": {
+        "@type": "ImageObject",
+        "url": brandLogo,
+        "caption": agencyName
+      }
+    },
+    {
+      "@type": "SoftwareApplication",
+      "@id": `${siteOrigin}/#application`,
+      "name": brandName,
+      "applicationCategory": "WebApplication",
+      "operatingSystem": "Cloudflare Workers",
+      "publisher": {
+        "@id": `${siteOrigin}/#organization`
+      }
+    },
+    {
+      "@type": "WebSite",
+      "@id": `${siteOrigin}/#website`,
+      "url": siteOrigin,
+      "name": brandName,
+      "publisher": {
+        "@id": `${siteOrigin}/#organization`
+      }
+    },
+    {
+      "@type": "BreadcrumbList",
+      "@id": `${siteOrigin}${normalizedSlug ? `/${normalizedSlug}` : ''}/#breadcrumb`,
+      "itemListElement": breadcrumbListItems
+    }
+  ]
+};
+---
+
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<title>{fullTitle}</title>
+
+<meta
+  name="description"
+  content={node?.summary || `${brandName} - Corporate Web Application`}
+/>
+
+<link rel="canonical" href={canonicalURL} />
+<link rel="author" type="text/plain" href="/llms.txt" title="LLM Directory" />
+
+{lcpImageUrl && (
+  <link
+    rel="preload"
+    as="image"
+    href={lcpImageUrl}
+    fetchpriority="high"
+  />
+)}
+
+<script
+  type="application/ld+json"
+  is:inline
+  set:html={JSON.stringify(structuredDataGraph)}
+/>