@estation/create-cms-site 3.0.1 → 3.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estation/create-cms-site",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "MCP server to scaffold Next.js sites powered by eSTATION CMS",
   "type": "module",
   "bin": {

package/template/src/components/Breadcrumbs.tsx

@@ -1,64 +1,75 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
+
+interface Crumb {
+  label: string;
+  href: string;
+}
+
+const HOME_LABELS: Record<string, string> = {
+  en: "Home", ar: "الرئيسية", ku: "سەرەکی", fr: "Accueil",
+  de: "Startseite", es: "Inicio", tr: "Ana Sayfa", it: "Home",
+  pt: "Início", zh: "首页", ja: "ホーム", ko: "홈",
+};
 
 /**
- * Breadcrumbs component for website pages.
- * Auto-generates breadcrumb trail from the URL path.
+ * Auto breadcrumbs — reads URL, fetches localized titles from CMS.
+ * No props needed — place once in the layout, works everywhere.
  *
- * Examples:
- *   /en              → (hidden — homepage)
- *   /en/about-us     → Home > About Us
- *   /en/partners     → Home > Partners
- *   /en/partners/york → Home > Partners > York
+ * /en               → (hidden)
+ * /en/about-us      → Home > About Us (from CMS page title)
+ * /ar/partners/york → الرئيسية / شركاؤنا / يورك
  */
 export function Breadcrumbs() {
   const pathname = usePathname();
-  if (!pathname) return null;
-
-  // Split path: /en/partners/york → ["en", "partners", "york"]
-  const segments = pathname.split("/").filter(Boolean);
-
-  // First segment is locale — skip it
-  const locale = segments[0] || "en";
-  const pathSegments = segments.slice(1);
-
-  // Don't show breadcrumbs on homepage
-  if (pathSegments.length === 0) return null;
-
-  // Build breadcrumb items
-  const crumbs: { label: string; href: string }[] = [
-    { label: "Home", href: `/${locale}` },
-  ];
-
-  let currentPath = `/${locale}`;
-  for (const segment of pathSegments) {
-    currentPath += `/${segment}`;
-    // Convert slug to display name: "about-us" → "About Us", "york" → "York"
-    const label = segment
-      .split("-")
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ");
-    crumbs.push({ label, href: currentPath });
-  }
+  const [crumbs, setCrumbs] = useState<Crumb[]>([]);
+
+  useEffect(() => {
+    if (!pathname) return;
+
+    const segments = pathname.split("/").filter(Boolean);
+    const locale = segments[0] || "en";
+    const pathSegments = segments.slice(1);
+
+    if (pathSegments.length === 0) {
+      setCrumbs([]);
+      return;
+    }
+
+    const homeCrumb: Crumb = {
+      label: HOME_LABELS[locale] || "Home",
+      href: `/${locale}`,
+    };
+
+    // Show slug-based labels immediately
+    const initial: Crumb[] = [homeCrumb];
+    let p = `/${locale}`;
+    for (const seg of pathSegments) {
+      p += `/${seg}`;
+      initial.push({ label: slugToTitle(seg), href: p });
+    }
+    setCrumbs(initial);
+
+    // Then fetch real titles from CMS
+    fetchTitles(locale, pathSegments).then((fetched) => {
+      if (fetched.length > 0) setCrumbs([homeCrumb, ...fetched]);
+    });
+  }, [pathname]);
+
+  if (crumbs.length === 0) return null;
 
   return (
-    <nav aria-label="Breadcrumb" className="px-6 py-3">
-      <ol className="flex items-center gap-1.5 text-sm text-gray-500">
+    <nav aria-label="Breadcrumb" className="px-6 py-3 max-w-6xl mx-auto">
+      <ol className="flex items-center gap-1.5 text-sm text-gray-500 flex-wrap">
         {crumbs.map((crumb, idx) => (
           <li key={crumb.href} className="flex items-center gap-1.5">
-            {idx > 0 && (
-              <span className="text-gray-300" aria-hidden="true">/</span>
-            )}
+            {idx > 0 && <span className="text-gray-300">/</span>}
             {idx === crumbs.length - 1 ? (
               <span className="text-gray-900 font-medium">{crumb.label}</span>
             ) : (
-              <a
-                href={crumb.href}
-                className="hover:text-gray-700 hover:underline transition-colors"
-              >
-                {crumb.label}
-              </a>
+              <a href={crumb.href} className="hover:text-gray-700 hover:underline transition-colors">{crumb.label}</a>
             )}
           </li>
         ))}
@@ -66,3 +77,43 @@ export function Breadcrumbs() {
     </nav>
   );
 }
+
+async function fetchTitles(locale: string, segments: string[]): Promise<Crumb[]> {
+  const apiUrl = process.env.NEXT_PUBLIC_CMS_API_URL || "https://cms-gateway.estation.io/api/v1";
+  const token = process.env.NEXT_PUBLIC_CMS_API_TOKEN || "";
+  const v2 = apiUrl.replace(/\/api\/v[12]$/, "/api/v2");
+  const crumbs: Crumb[] = [];
+  let path = `/${locale}`;
+
+  for (let i = 0; i < segments.length; i++) {
+    path += `/${segments[i]}`;
+    let label = slugToTitle(segments[i]);
+
+    try {
+      if (i === 0) {
+        const r = await fetch(`${apiUrl}/public/content/pages/slug/${segments[i]}?locale=${locale}`, { headers: { "X-API-TOKEN": token }, cache: "force-cache" });
+        if (r.ok) {
+          const j = await r.json();
+          const pg = j.data?.page || j.page;
+          if (pg) label = pg.metadata?.titles?.[locale] || pg.title || label;
+        }
+      } else if (i === 1) {
+        const type = deriveType(segments[0]);
+        const r = await fetch(`${v2}/public/content/${type}/slug/${segments[i]}`, { headers: { "X-API-TOKEN": token }, cache: "force-cache" });
+        if (r.ok) {
+          const j = await r.json();
+          const b = j.data || j;
+          const fv = b?.content?.title?.fieldValue;
+          if (fv) label = typeof fv === "string" ? fv : (fv[locale] || fv.en || Object.values(fv)[0] as string || label);
+          else if (b?.name) label = b.name;
+        }
+      }
+    } catch { /* fallback */ }
+
+    crumbs.push({ label, href: path });
+  }
+  return crumbs;
+}
+
+function slugToTitle(s: string) { return s.split("-").map(w => w[0].toUpperCase() + w.slice(1)).join(" "); }
+function deriveType(s: string) { return s.endsWith("ies") ? s.slice(0,-3)+"y" : s.endsWith("s") ? s.slice(0,-1) : s; }