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

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

@@ -0,0 +1,266 @@
+---
+// src/components/global/MetaHead.astro
+
+import type { ContentBlock } from "@/lib/cms";
+import { getChannel, getChannelId } from "@/lib/cms";
+import { getImageUri } from "@/lib/media/media-url";
+
+interface Props {
+  node: Record<string, any>;
+  content: Record<string, ContentBlock[]>;
+  normalizedSlug: string;
+  isHomePage: boolean;
+  headerBlocks?: ContentBlock[];
+  resolvedLanguage?: string;
+}
+
+const { 
+  node = {}, 
+  content = {}, 
+  normalizedSlug, 
+  isHomePage, 
+  headerBlocks = [],
+  resolvedLanguage
+} = Astro.props;
+
+// 🎯 0. Read the safely extracted environment from middleware (Fixes Astro 7 crash)
+const safeEnv = (Astro.locals as any).safeEnv || {};
+const cmsWorker = safeEnv.CMS_WORKER;
+
+const customFetch = (input: RequestInfo | URL, init?: RequestInit) => {
+  const reqInit = { ...init };
+  delete reqInit.cache;
+
+  let urlStr = input instanceof URL ? input.toString() : String(input);
+
+  if (urlStr.startsWith("/")) {
+    const baseUrl = import.meta.env.PUBLIC_API_URL || safeEnv.PUBLIC_API_URL || "http://127.0.0.1:8787";
+    urlStr = `${baseUrl}${urlStr}`;
+  }
+
+  const req = new Request(urlStr, reqInit);
+
+  if (cmsWorker && typeof cmsWorker.fetch === "function") {
+    return cmsWorker.fetch(req);
+  }
+  return fetch(req);
+};
+
+// 🎯 Fetch Global Channel Metadata
+const channel = await getChannel(getChannelId(), customFetch);
+
+// 🎯 Language Cascade Final Resolution:
+// Prop / Node Language -> Channel Default -> Undefined
+const activeLanguage = resolvedLanguage || node?.language || channel?.defaultLanguage || channel?.language || undefined;
+
+// Convert BCP 47 (e.g. et-EE, zh-CN) to Open Graph locale format (et_EE, zh_CN)
+const ogLocale = activeLanguage ? activeLanguage.replace("-", "_") : undefined;
+
+// 🎯 1. Resolve Origin Safely
+let siteOrigin = import.meta.env.PUBLIC_FRONTEND_URL || safeEnv.PUBLIC_FRONTEND_URL || Astro.site?.origin || Astro.url.origin;
+if (siteOrigin === "https://example.com") {
+  siteOrigin = Astro.url.origin;
+}
+siteOrigin = siteOrigin.replace(/\/$/, "");
+
+// 🎯 2. Favicon Resolution (Channel -> Fallback Static)
+const faviconUrl = getImageUri(channel?.favicon, {
+  fallback: "/favicon.png",
+})!;
+
+// Detect MIME type dynamically for the favicon link tag
+const getFaviconType = (url: string) => {
+  if (url.endsWith(".svg")) return "image/svg+xml";
+  if (url.endsWith(".ico")) return "image/x-icon";
+  return "image/png";
+};
+
+// 🎯 3. Detect Block-level LCP Image Candidate
+const firstHeaderBlock = headerBlocks && headerBlocks[0];
+const firstContentBlock = content?.content && content.content[0];
+const candidateBlock = (firstHeaderBlock?.data?.image ? firstHeaderBlock : null) 
+  || (firstContentBlock?.data?.image ? firstContentBlock : null);
+
+const lcpImageUrl = getImageUri(candidateBlock?.data?.image, {
+  width: 1352,
+  quality: 75,
+});
+
+// 🎯 4. Text Metadata Variables
+const brandName = channel?.siteTitle || channel?.label || import.meta.env.PUBLIC_SITE_NAME || safeEnv.PUBLIC_SITE_NAME || "KAMA";
+const agencyName = import.meta.env.PUBLIC_AGENCY_NAME || safeEnv.PUBLIC_AGENCY_NAME || "";
+
+const brandLogo = getImageUri(channel?.logoImage || channel?.logo, {
+  width: 512,
+  absoluteOrigin: siteOrigin,
+  fallback: `${siteOrigin}/logo.png`,
+})!;
+
+const prefix = node?.titlePrefix?.trim() ? `${node.titlePrefix.trim()} ` : "";
+
+// Suffix Waterfall: Page node -> Channel level (e.g. "- Suffix")
+const channelSuffix = channel?.titleSuffix?.trim() || "";
+const rawSuffix = node?.titleSuffix?.trim() || channelSuffix;
+const suffix = rawSuffix ? ` ${rawSuffix}` : "";
+
+const baseTitle = node?.title?.trim() || brandName;
+const fullTitle = `${prefix}${baseTitle}${suffix}`;
+
+// Description Waterfall: Page summary -> Channel metaDescription
+const metaDescription = node?.summary || channel?.metaDescription || "KAMA – The headless content engine built for omnichannel delivery and Cloudflare Edge computing.";
+
+const canonicalURL = new URL(Astro.url.pathname, siteOrigin).href;
+
+// 🎯 5. Social Text Waterfall
+const fbTitle = node?.fbTitle?.trim() || fullTitle;
+const xTitle = node?.xTitle?.trim() || fbTitle;
+const fbDescription = node?.fbDescription?.trim() || metaDescription;
+const xDescription = node?.xDescription?.trim() || fbDescription;
+
+// 🎯 6. Social Image Waterfall (Page -> LCP Candidate -> Channel Default -> Fallback)
+const channelDefaultOg = channel?.defaultSeoImage;
+const rawFbImage = node?.socialImages?.facebook?.url || candidateBlock?.data?.image || channelDefaultOg;
+const rawXImage = node?.socialImages?.x?.url || candidateBlock?.data?.image || channelDefaultOg;
+
+const fbImageUrl = getImageUri(rawFbImage, {
+  width: 1200,
+  quality: 80,
+  absoluteOrigin: siteOrigin,
+  fallback: `${siteOrigin}/default-og-image.png`,
+})!;
+
+const xImageUrl = getImageUri(rawXImage, {
+  width: 1200,
+  quality: 80,
+  absoluteOrigin: siteOrigin,
+  fallback: `${siteOrigin}/default-og-image.png`,
+})!;
+
+// 🎯 7. Structured Data Breadcrumbs
+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}`,
+    });
+  });
+}
+
+// 🎯 8. JSON-LD Schema
+const structuredDataGraph = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "Organization",
+      "@id": `${siteOrigin}/#organization`,
+      "name": agencyName || brandName,
+      "url": siteOrigin,
+      "logo": {
+        "@type": "ImageObject",
+        "url": brandLogo,
+        "caption": brandName
+      },
+      "address": {
+        "@type": "PostalAddress",
+        "addressLocality": "",
+        "addressCountry": ""
+      }
+    },
+    {
+      "@type": "SoftwareApplication",
+      "@id": `${siteOrigin}/#application`,
+      "name": brandName,
+      "applicationCategory": "DeveloperApplication",
+      "softwareVersion": "v0.1.0",
+      "operatingSystem": "Cloudflare Workers, Node.js",
+      "description": metaDescription,
+      "url": siteOrigin,
+      "publisher": {
+        "@id": `${siteOrigin}/#organization`
+      },
+    },
+    {
+      "@type": "WebSite",
+      "@id": `${siteOrigin}/#website`,
+      "url": siteOrigin,
+      "name": brandName,
+      "description": metaDescription,
+      "inLanguage": activeLanguage,
+      "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={metaDescription} />
+
+<!-- 🎯 Channel Favicon -->
+<link rel="icon" type={getFaviconType(faviconUrl)} href={faviconUrl} />
+
+<link rel="canonical" href={canonicalURL} />
+<link rel="author" type="text/plain" href="/llms.txt" title="LLM Directory" />
+
+<!-- 🎯 Open Graph / Facebook -->
+<meta property="og:type" content={isHomePage ? "website" : "article"} />
+<meta property="og:url" content={canonicalURL} />
+<meta property="og:title" content={fbTitle} />
+<meta property="og:description" content={fbDescription} />
+<meta property="og:image" content={fbImageUrl} />
+<meta property="og:site_name" content={brandName} />
+{ogLocale && <meta property="og:locale" content={ogLocale} />}
+
+<!-- 🎯 X / Twitter -->
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:url" content={canonicalURL} />
+<meta name="twitter:title" content={xTitle} />
+<meta name="twitter:description" content={xDescription} />
+<meta name="twitter:image" content={xImageUrl} />
+
+{lcpImageUrl && (
+  <link
+    rel="preload"
+    as="image"
+    href={lcpImageUrl}
+    fetchpriority="high"
+  />
+)}
+
+<script
+  type="application/ld+json"
+  is:inline
+  set:html={JSON.stringify(structuredDataGraph)}
+/>

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

@@ -0,0 +1,413 @@
+---
+// 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>