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

package/templates/astro-starter/src/layouts/Layout.astro

@@ -0,0 +1,280 @@
+---
+// src/layouts/Layout.astro
+import Header from "@/components/global/Header.astro";
+import Footer from "@/components/global/Footer.astro";
+import type { TreeNode, ContentBlock } from "@/lib/cms";
+// 🎯 FIX: Import from pure TypeScript utility, NOT from KamaImage.astro
+import { buildAgnosticImageUrl } from "@/lib/media-url";
+
+interface Props {
+  node: Record<string, any>;
+  content: Record<string, ContentBlock[]>;
+  normalizedSlug: string;
+  isHomePage: boolean;
+  hasSidebar?: boolean;
+  headerBlocks?: ContentBlock[];
+  tree?: TreeNode[];
+}
+
+const { 
+  node = {}, 
+  content = {}, 
+  normalizedSlug, 
+  isHomePage, 
+  headerBlocks = [], 
+  tree 
+} = Astro.props;
+
+const footerBlocks = content?.footer || [];
+
+// 🎯 Detect LCP image candidate to preload immediately in <head>
+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`
+      },
+      "description": "Corporate Web Management built with KAMA Engine, Astro, and Cloudflare Edge infrastructure."
+    },
+    {
+      "@type": "WebSite",
+      "@id": `${siteOrigin}/#website`,
+      "url": siteOrigin,
+      "name": brandName,
+      "publisher": {
+        "@id": `${siteOrigin}/#organization`
+      },
+      "potentialAction": {
+        "@type": "SearchAction",
+        "target": {
+          "@type": "EntryPoint",
+          "urlTemplate": `${siteOrigin}/search?q={search_term_string}`
+        },
+        "query-input": "required name=search_term_string"
+      }
+    },
+    {
+      "@type": "BreadcrumbList",
+      "@id": `${siteOrigin}${normalizedSlug ? `/${normalizedSlug}` : ''}/#breadcrumb`,
+      "itemListElement": breadcrumbListItems
+    }
+  ]
+};
+---
+
+<html lang="en">
+  <head>
+    <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} />
+
+    {lcpImageUrl && (
+      <link
+        rel="preload"
+        as="image"
+        href={lcpImageUrl}
+        fetchpriority="high"
+      />
+    )}
+
+    <script
+      type="application/ld+json"
+      is:inline
+      set:html={JSON.stringify(structuredDataGraph)}
+    />
+  </head>
+  <body>
+    <Header node={node} tree={tree} />
+
+    <main class="content-block">
+      <div class="content-container">
+        <slot />
+      </div>
+    </main>
+
+    <Footer blocks={footerBlocks} contentMap={content} />
+  </body>
+</html>
+
+<style is:global>
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    border-radius: 0 !important;
+  }
+
+  html {
+    font-size: 16px;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    font-family:
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Roboto,
+      Helvetica,
+      Arial,
+      sans-serif;
+    font-display: swap;
+    background-color: #ffffff;
+    color: #1e293b;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    line-height: 1.65;
+    letter-spacing: -0.011em;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: #0f172a;
+    font-weight: 700;
+    line-height: 1.25;
+    letter-spacing: -0.022em;
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+  }
+
+  h1 {
+    font-size: 2.25rem;
+  }
+  h2 {
+    font-size: 1.65rem;
+  }
+  h3 {
+    font-size: 1.35rem;
+  }
+
+  p {
+    margin-top: 0;
+    margin-bottom: 1.25em;
+    color: #334155;
+    font-size: 1.03rem;
+  }
+
+  a {
+    color: #0284c7;
+    text-decoration-thickness: 1px;
+    text-underline-offset: 3px;
+    transition: color 0.15s ease;
+  }
+
+  a:hover {
+    color: #0369a1;
+  }
+  li>p:last-child {
+    margin-bottom: 0;
+  }
+</style>
+
+<style>
+  .content-block {
+    flex: 1;
+    padding: 40px 0 64px 0;
+  }
+
+  .content-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 24px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+</style>

package/templates/astro-starter/src/lib/cms.ts

@@ -0,0 +1,149 @@
+// src/lib/cms.ts
+
+export interface TreeNode {
+    id: number;
+    treeNodeId: number;
+    parentId: number | null;
+    title: string;
+    slug: string;
+    path: string;
+    nodeType: string;
+    hidden?: number;
+    summary?: string;
+    url?: string;
+    target?: string;
+    children?: TreeNode[];
+}
+
+export interface ContentBlock {
+    instanceId: number;
+    componentId: string;
+    data: Record<string, any>;
+}
+
+export interface RegionMeta {
+    isInherited: boolean;
+    inheritedFromId?: string | number;
+    inheritedFromTitle?: string;
+}
+
+export interface NodeResponse {
+    channelId: string | number;
+    treeId: string | number;
+    language: string;
+    node: {
+        id: number;
+        title: string;
+        slug: string;
+        nodeType: string;
+        path?: string;
+        createdAt?: string;
+        updatedAt?: string;
+        summary?: string;
+        children?: any[];
+        [key: string]: any;
+    };
+    content: Record<string, ContentBlock[]>;
+    regionMeta?: Record<string, RegionMeta>;
+}
+
+/**
+ * Resolves base CMS URL across runtime environments safely via Astro
+ */
+export function getCmsUrl(): string {
+    const url =
+        import.meta.env.PUBLIC_API_URL ||
+        import.meta.env.PUBLIC_CMS_URL ||
+        'http://localhost:8787';
+    return url.replace(/\/+$/, '');
+}
+
+/**
+ * Resolves Default Channel ID across environments
+ */
+export function getChannelId(): string {
+    return import.meta.env.PUBLIC_CHANNEL_ID || 'website';
+}
+
+/**
+ * Resolves Default Tree ID across environments
+ */
+export function getTreeId(): string {
+    return import.meta.env.PUBLIC_TREE_ID || 'navigation';
+}
+
+/**
+ * Fetch tree navigation hierarchy by tree key/ID and channel.
+ * Supports passing Cloudflare Service Bindings (e.g. env.CMS_WORKER.fetch)
+ */
+export async function getTree(
+    treeKeyOrId: string = getTreeId(),
+    channel: string | number = getChannelId(),
+    customFetch: typeof fetch = fetch
+): Promise<TreeNode[]> {
+    const baseUrl = getCmsUrl();
+    const requestUrl = `${baseUrl}/api/v1/tree/${treeKeyOrId}?channelId=${channel}`;
+
+    try {
+        const res = await customFetch(requestUrl, {
+            headers: {
+                Accept: 'application/json',
+            },
+        });
+
+        if (!res.ok) return [];
+
+        const data = await res.json();
+        return data.items || [];
+    } catch (err) {
+        console.error('[CMS Client] Failed to fetch public tree:', err);
+        return [];
+    }
+}
+
+/**
+ * Fetch single content node payload by its full URL path.
+ * Supports passing Cloudflare Service Bindings (e.g. env.CMS_WORKER.fetch)
+ */
+export async function getNodeByPath(
+    path: string,
+    channel: string | number = getChannelId(),
+    preview = false,
+    customFetch: typeof fetch = fetch
+): Promise<NodeResponse | null> {
+    const cleanPath = path.replace(/^\/+|\/+$/g, '') || 'home';
+    const baseUrl = getCmsUrl();
+    const requestUrl = `${baseUrl}/api/v1/node/${cleanPath}?channelId=${channel}&preview=${preview}`;
+
+    try {
+        const res = await customFetch(requestUrl, {
+            headers: {
+                Accept: 'application/json',
+            },
+        });
+
+        if (!res.ok) return null;
+
+        return (await res.json()) as NodeResponse;
+    } catch (err) {
+        console.error('[CMS Client] Failed to fetch node by path:', err);
+        return null;
+    }
+}
+
+/**
+ * Resolves relative media URLs against base CMS URL
+ */
+export function getMediaUrl(url?: string): string {
+    if (!url) return '';
+
+    const baseUrl = getCmsUrl();
+    let cleanUrl = url.replace(/^http:\/\/localhost:\d+/, baseUrl);
+
+    if (cleanUrl.startsWith('http://') || cleanUrl.startsWith('https://')) {
+        return cleanUrl;
+    }
+
+    const cleanPath = cleanUrl.replace(/^\/+/, '');
+    return `${baseUrl}/${cleanPath}`;
+}

package/templates/astro-starter/src/lib/media-url.ts

@@ -0,0 +1,34 @@
+// src/lib/media-url.ts
+
+export function toRelativeMediaPath(rawUrl: string): string {
+    if (!rawUrl) return "";
+
+    let clean = String(rawUrl);
+    clean = clean.replace(/^https?:\/\/[^/]+/, "");
+    clean = clean.split("?")[0].split("#")[0];
+
+    const mediaIndex = clean.indexOf("/media/");
+    if (mediaIndex !== -1) {
+        return `/media/${clean
+            .slice(mediaIndex + "/media/".length)
+            .replace(/^\/+/, "")}`;
+    }
+
+    return clean.startsWith("/") ? clean : `/${clean}`;
+}
+
+export function buildAgnosticImageUrl(
+    url: string,
+    width: number,
+    quality = 75,
+): string {
+    const cleanPath = toRelativeMediaPath(url);
+    if (!cleanPath) return "";
+
+    const urlObj = new URL(cleanPath, "http://localhost");
+    urlObj.searchParams.set("w", String(width));
+    urlObj.searchParams.set("q", String(quality));
+    urlObj.searchParams.set("f", "auto");
+
+    return urlObj.pathname + urlObj.search;
+}