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

package/templates/astro-starter/src/components/blocks/ImageBlock.astro

@@ -0,0 +1,160 @@
+---
+// src/components/blocks/ImageBlock.astro
+import KamaImage from "@/components/ui/KamaImage.astro";
+
+interface CropVariant {
+  id?: string;
+  url?: string;
+  cropCoordinates?: {
+    width?: number;
+    height?: number;
+  };
+}
+
+interface Props {
+  data: {
+    image?: {
+      id?: string;
+      url?: string;
+      path?: string;
+      filename?: string;
+      alt?: string;
+      width?: number | string;
+      height?: number | string;
+      cropCoordinates?: {
+        width?: number;
+        height?: number;
+      };
+      variants?: {
+        standard?: CropVariant;
+        tablet?: CropVariant;
+        mobile?: CropVariant;
+        [key: string]: CropVariant | undefined;
+      };
+    };
+
+    image_meta?: {
+      cropCoordinates?: {
+        width?: number;
+        height?: number;
+      };
+    };
+
+    width?: number | string;
+    height?: number | string;
+  };
+
+  region?: string;
+  isFirst?: boolean;
+}
+
+const { data, region = "main", isFirst = false } = Astro.props;
+
+const img = data?.image;
+
+if (!img || (!img.url && !img.path && !img.variants)) {
+  return null;
+}
+
+/**
+ * Determine whether this is likely to be LCP.
+ */
+const isLcp = region === "header" || (region === "main" && isFirst);
+
+/**
+ * Determine grid column count from the region name.
+ */
+let columnCount = 1;
+
+if (region.includes("_")) {
+  columnCount = 2;
+
+  if (region.includes("_middle") || region.includes("_col3")) {
+    columnCount = 3;
+  }
+
+  if (region.includes("_col4")) {
+    columnCount = 4;
+  }
+}
+
+/**
+ * Default single-column layout.
+ */
+let maxWidth = "1352";
+let targetColumnWidth = 1352;
+let optimizedWidths = [768, 1352];
+let sizes = "(max-width: 1399px) calc(100vw - 48px), 1352px";
+
+/**
+ * Two-column layout.
+ */
+if (columnCount === 2) {
+  maxWidth = "660";
+  targetColumnWidth = 660;
+  optimizedWidths = [400, 660];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 80px) / 2), " +
+    "660px";
+}
+
+/**
+ * Three-column layout.
+ */
+else if (columnCount === 3) {
+  maxWidth = "429";
+  targetColumnWidth = 429;
+  optimizedWidths = [300, 429];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 112px) / 3), " +
+    "429px";
+}
+
+/**
+ * Four-column layout.
+ */
+else if (columnCount === 4) {
+  maxWidth = "314";
+  targetColumnWidth = 314;
+  optimizedWidths = [264, 314];
+  sizes =
+    "(max-width: 767px) calc(100vw - 48px), " +
+    "(max-width: 1399px) calc((100vw - 144px) / 4), " +
+    "314px";
+}
+---
+
+<div class="cms-block cms-block-image" style={`--max-w: ${maxWidth}px;`}>
+  <KamaImage
+    image={img}
+    sizes={sizes}
+    desktopWidths={optimizedWidths}
+    idealWidth={targetColumnWidth}
+    width={data.width || data.image_meta?.cropCoordinates?.width || img.width}
+    height={data.height ||
+      data.image_meta?.cropCoordinates?.height ||
+      img.height}
+    class="free-crop-image"
+    loading={isLcp ? "eager" : "lazy"}
+    fetchpriority={isLcp ? "high" : "auto"}
+    decoding={isLcp ? "sync" : "async"}
+  />
+</div>
+
+<style>
+  .cms-block-image {
+    width: 100%;
+    max-width: var(--max-w, 1352px);
+    margin: 0 auto 1.5rem auto;
+  }
+
+  :global(.free-crop-image) {
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    display: block;
+    border-radius: var(--cms-radius-md, 0.5rem);
+  }
+</style>

package/templates/astro-starter/src/components/blocks/TextBlock.astro

@@ -0,0 +1,13 @@
+---
+interface Props {
+  data: {
+    text?: string;
+    content?: string;
+  };
+}
+const { data } = Astro.props;
+---
+
+<div class="block-text">
+  <Fragment set:html={data.text || data.content || ""} />
+</div>

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

@@ -0,0 +1,62 @@
+---
+interface Props {
+  title: string;
+  slug?: string;
+}
+
+const { title, slug } = Astro.props;
+const isHome = !slug || slug === "home";
+---
+
+<nav class="breadcrumb-nav" aria-label="Breadcrumb">
+  <ol class="breadcrumb-list">
+    <li class="breadcrumb-item">
+      <a href="/">Home</a>
+    </li>
+    {
+      !isHome && (
+        <li class="breadcrumb-item active" aria-current="page">
+          <span class="separator">/</span>
+          <span>{title}</span>
+        </li>
+      )
+    }
+  </ol>
+</nav>
+
+<style>
+  .breadcrumb-nav {
+    margin-bottom: 16px;
+  }
+
+  .breadcrumb-list {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 13px;
+    color: #64748b;
+  }
+
+  .breadcrumb-item a {
+    color: #334155;
+    text-decoration: none;
+  }
+
+  .breadcrumb-item a:hover {
+    color: #0f172a;
+    text-decoration: underline;
+  }
+
+  .breadcrumb-item.active {
+    color: #0f172a;
+    font-weight: 500;
+  }
+
+  .separator {
+    margin-right: 8px;
+    color: #94a3b8;
+  }
+</style>

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

@@ -0,0 +1,48 @@
+---
+import BlockRenderer from "@/components/blocks/BlockRenderer.astro";
+
+interface Props {
+  blocks?: any[];
+  contentMap?: Record<string, any[]>;
+}
+
+const { blocks = [], contentMap = {} } = Astro.props;
+---
+
+<footer class="site-footer">
+  <div class="footer-container">
+    {
+      blocks && blocks.length > 0 ? (
+        <BlockRenderer
+          blocks={blocks}
+          contentMap={contentMap}
+          region="footer"
+        />
+      ) : (
+        <div class="footer-default">
+          <p>&copy; {new Date().getFullYear()} all rights reserved.</p>
+        </div>
+      )
+    }
+  </div>
+</footer>
+
+<style>
+  .site-footer {
+    background: #ffffff;
+    border-top: 1px solid #e2e8f0;
+    margin-top: auto;
+  }
+
+  .footer-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 24px 20px;
+  }
+
+  .footer-default p {
+    margin: 0;
+    font-size: 14px;
+    color: #64748b;
+  }
+</style>

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

@@ -0,0 +1,92 @@
+---
+// src/components/global/Header.astro
+import NavigationMenu from "@/components/global/NavigationMenu.astro";
+import { getTree, getTreeId, getChannelId } from "@/lib/cms";
+import type { TreeNode } from "@/lib/cms";
+
+interface Props {
+  node?: Record<string, any>;
+  tree?: TreeNode[];
+}
+
+const { node, tree } = Astro.props;
+
+let rawTree = tree;
+
+// Fallback: If the layout didn't pass the tree, fetch it directly
+if (!rawTree || rawTree.length === 0) {
+  const locals = (Astro.locals as any) || {};
+  const runtimeEnv = (locals.runtime?.env as any) || {};
+  const cmsWorker = runtimeEnv.CMS_WORKER;
+
+  // Safely wrap the fetcher for Service Bindings
+  const customFetch = (input: RequestInfo | URL, init?: RequestInit) => {
+    if (cmsWorker && typeof cmsWorker.fetch === "function") {
+      return cmsWorker.fetch(new Request(input, init));
+    }
+    return fetch(input, init);
+  };
+
+  rawTree = await getTree(getTreeId(), getChannelId(), customFetch);
+}
+
+// Automatically use the configured site name for the text logo
+const siteName = import.meta.env.PUBLIC_SITE_NAME || "KAMA";
+---
+
+<header class="site-header">
+  <div class="header-container main-header-row">
+    <a href="/" class="logo-block">
+      <span class="logo-text">{siteName}</span>
+    </a>
+    <NavigationMenu tree={rawTree} />
+  </div>
+</header>
+
+<style>
+  .site-header {
+    background: #ffffff;
+    color: #1e293b;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    border-bottom: 1px solid #e2e8f0;
+  }
+
+  .header-container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 0 20px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .main-header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 64px;
+  }
+
+  .logo-block {
+    text-decoration: none;
+    color: #0f172a;
+    font-weight: 700;
+    font-size: 20px;
+    display: inline-flex;
+    align-items: center;
+    z-index: 1001;
+  }
+
+  .logo-text {
+    white-space: nowrap;
+  }
+
+  @media (min-width: 768px) {
+    .main-header-row {
+      height: 64px;
+      justify-content: space-between;
+      gap: 32px;
+    }
+  }
+</style>