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

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

@@ -0,0 +1,278 @@
+---
+// src/components/blocks/NodeList.astro
+
+interface Props {
+  data: Record<string, any>;
+}
+
+const { data } = Astro.props;
+const items = data.initialItems || [];
+const listTitle = data.listTitle || "";
+---
+
+<div class="cms-block node-list-wrapper">
+  {listTitle && <h2 class="node-list-title">{listTitle}</h2>}
+
+  {
+    items.length === 0 ? (
+      <p class="empty-state">No items found.</p>
+    ) : (
+      <div class="node-grid" id={`grid-${data.blockId}`}>
+        {items.map((item: any) => (
+          <article class="node-card">
+            <a href={`/${item.slug}`} class="node-card-link">
+              {item.image ? (
+                <img
+                  src={item.image.url}
+                  alt={item.image.alt || item.title}
+                  loading="lazy"
+                />
+              ) : (
+                <div class="image-placeholder" />
+              )}
+              <div class="node-card-content">
+                <h3 class="node-card-title">{item.title}</h3>
+                {item.createdAt && (
+                  <time datetime={item.createdAt} class="node-card-date">
+                    {new Date(item.createdAt).toLocaleDateString("en-GB", {
+                      day: "numeric",
+                      month: "short",
+                      year: "numeric",
+                    })}
+                  </time>
+                )}
+                {item.excerpt && (
+                  <p class="node-card-excerpt">{item.excerpt}</p>
+                )}
+              </div>
+            </a>
+          </article>
+        ))}
+      </div>
+    )
+  }
+
+  {
+    data.loadMoreUrl && (
+      <div class="load-more-container">
+        <button
+          class="load-more-btn"
+          data-url={data.loadMoreUrl}
+          data-target={`grid-${data.blockId}`}
+        >
+          Load More
+        </button>
+      </div>
+    )
+  }
+</div>
+<style is:global>
+  .node-list-wrapper {
+    margin: 2rem 0;
+  }
+
+  .node-list-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+    color: #1e293b;
+  }
+
+  .node-list-wrapper .empty-state {
+    color: #64748b;
+    font-style: italic;
+  }
+
+  .node-grid {
+    display: grid;
+    grid-template-columns: repeat(1, 1fr);
+    gap: 1.5rem;
+  }
+
+  @media (min-width: 640px) {
+    .node-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .node-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .node-card {
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+    overflow: hidden;
+    background: #fff;
+    transition:
+      transform 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .node-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+  }
+
+  .node-card-link {
+    text-decoration: none;
+    color: inherit;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .node-card img,
+  .node-card .image-placeholder {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    background: #f1f5f9;
+  }
+
+  .node-card-content {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+
+  .node-card-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem 0;
+    color: #0f172a;
+    line-height: 1.4;
+  }
+
+  .node-card-date {
+    font-size: 0.875rem;
+    color: #64748b;
+    margin-bottom: 0.75rem;
+  }
+
+  .node-card-excerpt {
+    font-size: 0.9375rem;
+    color: #475569;
+    margin: 0;
+    line-height: 1.5;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .load-more-container {
+    margin-top: 2rem;
+    text-align: center;
+  }
+
+  .load-more-btn {
+    padding: 0.75rem 1.5rem;
+    background: #0f172a;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s;
+  }
+
+  .load-more-btn:hover {
+    background: #334155;
+  }
+</style>
+
+<script>
+  document.addEventListener("DOMContentLoaded", () => {
+    const buttons = document.querySelectorAll(".load-more-btn");
+
+    buttons.forEach(btn => {
+      btn.addEventListener("click", async e => {
+        const targetBtn = e.currentTarget as HTMLButtonElement;
+        const urlString = targetBtn.getAttribute("data-url");
+        const targetId = targetBtn.getAttribute("data-target");
+
+        if (!urlString || !targetId) return;
+
+        const grid = document.getElementById(targetId);
+        if (!grid) return;
+
+        // Change the original backend URL path to our local Astro proxy path
+        const urlObj = new URL(urlString, window.location.origin);
+        const proxyUrl = `/api/load-nodes${urlObj.search}`;
+
+        const originalText = targetBtn.textContent;
+        targetBtn.textContent = "Loading...";
+        targetBtn.disabled = true;
+
+        try {
+          const res = await fetch(proxyUrl);
+          const data = await res.json();
+
+          if (data.items && data.items.length > 0) {
+            // Append each new item to the grid
+            data.items.forEach((item: any) => {
+              const dateStr = item.createdAt
+                ? new Date(item.createdAt).toLocaleDateString("en-GB", {
+                    day: "numeric",
+                    month: "short",
+                    year: "numeric",
+                  })
+                : "";
+
+              const imgHtml = item.image
+                ? `<img src="${item.image.url}" alt="${item.image.alt || item.title}" loading="lazy" />`
+                : `<div class="image-placeholder"></div>`;
+
+              const articleHtml = `
+                <article class="node-card">
+                  <a href="/${item.slug}" class="node-card-link">
+                    ${imgHtml}
+                    <div class="node-card-content">
+                      <h3 class="node-card-title">${item.title}</h3>
+                      ${dateStr ? `<time datetime="${item.createdAt}" class="node-card-date">${dateStr}</time>` : ""}
+                      ${item.excerpt ? `<p class="node-card-excerpt">${item.excerpt}</p>` : ""}
+                    </div>
+                  </a>
+                </article>
+              `;
+              grid.insertAdjacentHTML("beforeend", articleHtml);
+            });
+
+            // If we received a full batch, there might be more. Update the offset.
+            if (data.items.length === data.limit) {
+              const currentOffset = parseInt(
+                urlObj.searchParams.get("offset") || "0",
+                10,
+              );
+              urlObj.searchParams.set(
+                "offset",
+                (currentOffset + data.limit).toString(),
+              );
+              targetBtn.setAttribute(
+                "data-url",
+                urlObj.pathname + urlObj.search,
+              );
+              targetBtn.textContent = "Load More";
+              targetBtn.disabled = false;
+            } else {
+              // Hide the button container if we've reached the end
+              if (targetBtn.parentElement)
+                targetBtn.parentElement.style.display = "none";
+            }
+          } else {
+            if (targetBtn.parentElement)
+              targetBtn.parentElement.style.display = "none";
+          }
+        } catch (err) {
+          console.error("Failed to load more items:", err);
+          targetBtn.textContent = "Error. Try again";
+          targetBtn.disabled = false;
+        }
+      });
+    });
+  });
+</script>

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

@@ -0,0 +1,15 @@
+---
+// src/components/blocks/TextBlock.astro
+
+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,108 @@
+---
+// src/components/global/Breadcrumb.astro
+
+interface Props {
+  title: string;
+  slug?: string;
+  isHomePage?: boolean;
+}
+
+const { title, isHomePage } = Astro.props;
+
+const currentPath = Astro.url.pathname;
+
+// Extract non-empty path segments
+const rawSegments = currentPath.split("/").filter(Boolean);
+
+// Detect homepage
+const isHome = isHomePage || currentPath === "/" || rawSegments.length === 0;
+
+function formatSegmentTitle(segment: string): string {
+  return segment
+    .split("-")
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ");
+}
+
+// Build progressive paths: /some-page, /some-page/child-page, etc.
+let runningPath = "";
+const breadcrumbItems = rawSegments.map((segment, index) => {
+  runningPath += `/${segment}`;
+  const isLast = index === rawSegments.length - 1;
+
+  return {
+    label: isLast ? title : formatSegmentTitle(segment),
+    href: runningPath,
+    isCurrent: isLast,
+  };
+});
+---
+
+<nav class="breadcrumb-nav" aria-label="Breadcrumb">
+  <ol class="breadcrumb-list">
+    <!-- Home Link -->
+    <li class="breadcrumb-item">
+      <a href="/">Home</a>
+    </li>
+
+    <!-- Subpage Breadcrumbs -->
+    {
+      !isHome &&
+        breadcrumbItems.map(item => (
+          <li
+            class={`breadcrumb-item ${item.isCurrent ? "active" : ""}`}
+            aria-current={item.isCurrent ? "page" : undefined}
+          >
+            <span class="separator">/</span>
+            {item.isCurrent ? (
+              <span>{item.label}</span>
+            ) : (
+              <a href={item.href}>{item.label}</a>
+            )}
+          </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 {
+    display: flex;
+    align-items: center;
+  }
+
+  .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,50 @@
+---
+// src/components/global/Footer.astro
+
+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,171 @@
+---
+// src/components/global/Header.astro
+
+import NavigationMenu from "@/components/global/NavigationMenu.astro";
+import KamaImage from "@/components/ui/KamaImage.astro";
+import { getTree, getTreeId, getChannel, getChannelId } from "@/lib/cms";
+import type { TreeNode } from "@/lib/cms";
+
+interface Props {
+  node?: Record<string, any>;
+  tree?: TreeNode[];
+}
+
+const props = Astro.props as Props;
+const currentPropsNode = props.node || {};
+let rawTree: TreeNode[] = props.tree || [];
+
+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);
+};
+
+// 🎯 Resolve Channel ID dynamically from env/lib without hardcoding "website"
+const channelId = getChannelId();
+const treeId = getTreeId();
+
+let channelData: Record<string, any> | null = null;
+
+try {
+  if (!rawTree || rawTree.length === 0) {
+    const [fetchedChannel, fetchedTree] = await Promise.all([
+      getChannel(channelId, customFetch),
+      getTree(treeId, channelId, customFetch),
+    ]);
+    channelData = fetchedChannel;
+    rawTree = fetchedTree || [];
+  } else {
+    channelData = await getChannel(channelId, customFetch);
+  }
+} catch (e) {
+  console.error("[Header] Failed to load layout data:", e);
+}
+
+const rawLogoText = channelData?.logoText;
+const rawSiteTitle = channelData?.siteTitle;
+const rawLabel = channelData?.label;
+
+let logoText = "";
+
+if (typeof rawLogoText === "string" && rawLogoText.trim() !== "") {
+  logoText = rawLogoText;
+} else if (typeof rawSiteTitle === "string" && rawSiteTitle.trim() !== "") {
+  logoText = rawSiteTitle;
+} else if (typeof rawLabel === "string" && rawLabel.trim() !== "") {
+  logoText = rawLabel;
+} else if (currentPropsNode.logoText) {
+  logoText = currentPropsNode.logoText;
+} else {
+  logoText = import.meta.env.PUBLIC_SITE_NAME || "KAMA";
+}
+
+const rawLogoAsset = channelData?.logoImage || channelData?.logo;
+const targetLogo = Array.isArray(rawLogoAsset) ? rawLogoAsset[0] : rawLogoAsset;
+
+const hasValidLogoImage = Boolean(
+  targetLogo &&
+  ((typeof targetLogo === "string" && targetLogo.trim() !== "") ||
+    targetLogo.url ||
+    targetLogo.path ||
+    targetLogo.variants),
+);
+---
+
+<header class="site-header">
+  <div class="header-container main-header-row">
+    <a href="/" class="logo-block">
+      {
+        hasValidLogoImage ? (
+          <KamaImage
+            image={targetLogo}
+            idealWidth={300}
+            class="logo-image"
+            loading="eager"
+            fetchpriority="high"
+          />
+        ) : (
+          <span class="logo-text">{logoText}</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;
+  }
+
+  :global(.logo-image) {
+    height: 16px !important;
+    max-height: 16px !important;
+    width: auto !important;
+    object-fit: contain;
+    display: block;
+  }
+
+  .logo-text {
+    white-space: nowrap;
+    font-size: 16px;
+    line-height: 16px;
+  }
+
+  @media (min-width: 768px) {
+    .main-header-row {
+      height: 64px;
+      justify-content: space-between;
+      gap: 32px;
+    }
+  }
+</style>