@estation/create-cms-site 2.6.0 → 2.7.0

package/package.json

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

package/template/src/app/[locale]/content/[typeName]/[slug]/page.tsx

@@ -0,0 +1,87 @@
+import { getContentBySlug } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+interface PageProps {
+  params: Promise<{ locale: string; typeName: string; slug: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { typeName, slug, locale } = await params;
+  try {
+    const block = await getContentBySlug(typeName, slug);
+    return {
+      title: str(block.content?.title, locale, block.name),
+      description: str(block.content?.excerpt || block.content?.description, locale),
+    };
+  } catch {
+    return { title: typeName };
+  }
+}
+
+export default async function ContentDetailPage({ params }: PageProps) {
+  const { locale, typeName, slug } = await params;
+
+  let block;
+  try {
+    block = await getContentBySlug(typeName, slug);
+  } catch {
+    notFound();
+  }
+
+  if (!block) notFound();
+
+  const c = block.content || {};
+  const title = str(c.title, locale, block.name);
+  const image = str(c.featuredImage || c.image);
+  const body = str(c.content || c.body || c.description, locale);
+  const author = str(c.author, locale);
+  const date = str(c.publishDate || c.startDate) || block.created_at;
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-3xl mx-auto">
+        <a href={`/${locale}/content/${typeName}`} className="text-sm text-gray-500 hover:underline mb-6 block">
+          ← Back to {typeName}
+        </a>
+
+        {image && (
+          <img src={image} alt={title} className="w-full h-64 object-cover rounded-xl mb-8" />
+        )}
+
+        <h1 data-cms-field="title" className="text-4xl font-bold">{title}</h1>
+
+        {(author || date) && (
+          <p className="text-sm text-gray-500 mt-3">
+            {author && <span data-cms-field="author">By {author}</span>}
+            {author && date && " · "}
+            {date && <time>{new Date(date).toLocaleDateString()}</time>}
+          </p>
+        )}
+
+        {body && (
+          <div
+            data-cms-field="content"
+            className="prose prose-gray max-w-none mt-8"
+            dangerouslySetInnerHTML={{ __html: body }}
+          />
+        )}
+
+        {/* Render all other text fields */}
+        {Object.entries(c).map(([key, field]) => {
+          if (["title", "slug", "content", "body", "description", "featuredImage", "image", "author", "publishDate", "startDate", "status", "tags"].includes(key)) return null;
+          const val = str(field, locale);
+          if (!val) return null;
+          const label = key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+          return (
+            <div key={key} className="mt-6">
+              <h3 className="text-sm font-medium text-gray-500 uppercase">{label}</h3>
+              <p data-cms-field={key} className="mt-1">{val}</p>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/template/src/app/[locale]/content/[typeName]/page.tsx

@@ -0,0 +1,77 @@
+import { getContentByType } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import type { Metadata } from "next";
+
+interface PageProps {
+  params: Promise<{ locale: string; typeName: string }>;
+  searchParams: Promise<{ page?: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { typeName } = await params;
+  const label = typeName.charAt(0).toUpperCase() + typeName.slice(1);
+  return { title: label, description: `Browse ${label}` };
+}
+
+export default async function ContentListPage({ params, searchParams }: PageProps) {
+  const { locale, typeName } = await params;
+  const { page: pageParam } = await searchParams;
+  const page = parseInt(pageParam || "1", 10);
+
+  let result;
+  try {
+    result = await getContentByType(typeName, page, 20);
+  } catch {
+    result = { data: [], total: 0, page: 1, size: 20, total_pages: 0 };
+  }
+
+  const blocks = result.data || [];
+  const label = typeName.charAt(0).toUpperCase() + typeName.slice(1);
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-10">{label}</h1>
+        {blocks.length === 0 ? (
+          <p className="text-gray-500">No {typeName} content yet.</p>
+        ) : (
+          <div className="space-y-8">
+            {blocks.map((block) => {
+              const slug = str(block.content?.slug);
+              const title = str(block.content?.title, locale, block.name);
+              const excerpt = str(block.content?.excerpt || block.content?.description, locale);
+              const image = str(block.content?.featuredImage || block.content?.image);
+
+              return (
+                <article key={block.uuid} className="border-b pb-8">
+                  {image && (
+                    <img src={image} alt={title} className="w-full h-48 object-cover rounded-lg mb-4" />
+                  )}
+                  <h2 className="text-2xl font-semibold">
+                    {slug ? (
+                      <a href={`/${locale}/content/${typeName}/${slug}`} className="hover:underline">{title}</a>
+                    ) : title}
+                  </h2>
+                  {excerpt && <p className="text-gray-600 mt-2">{excerpt}</p>}
+                </article>
+              );
+            })}
+          </div>
+        )}
+
+        {/* Pagination */}
+        {result.total_pages > 1 && (
+          <div className="flex justify-center gap-2 mt-10">
+            {page > 1 && (
+              <a href={`/${locale}/content/${typeName}?page=${page - 1}`} className="px-4 py-2 border rounded hover:bg-gray-50">Previous</a>
+            )}
+            <span className="px-4 py-2 text-gray-500">Page {page} of {result.total_pages}</span>
+            {page < result.total_pages && (
+              <a href={`/${locale}/content/${typeName}?page=${page + 1}`} className="px-4 py-2 border rounded hover:bg-gray-50">Next</a>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/lib/cms-api.ts

@@ -93,6 +93,53 @@ export async function getCollections(): Promise<Collection[]> {
   return cmsFetch<Collection[]>("/public/content/collections", ["collections"]);
 }
 
+// ── v2 API functions ──────────────────────────────────────────────
+
+const CMS_V2_URL = CMS_API_URL.replace("/api/v1", "/api/v2");
+
+async function cmsV2Fetch<T>(path: string, tags?: string[]): Promise<T> {
+  const url = `${CMS_V2_URL}${path}`;
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), 10000);
+  const res = await fetch(url, {
+    headers: { "X-API-TOKEN": CMS_API_TOKEN },
+    signal: controller.signal,
+    next: { revalidate: 60, tags: tags || [] },
+  });
+  clearTimeout(timeout);
+  if (!res.ok) throw new Error(`CMS v2 API error: ${res.status} for ${path}`);
+  const json = await res.json();
+  return json.data ?? json;
+}
+
+/** List content items of a specific type (paginated). */
+export async function getContentByType(
+  typeName: string,
+  page = 1,
+  size = 20,
+  filters?: Record<string, string>
+): Promise<PaginatedResponse<ContentBlock>> {
+  const params = new URLSearchParams({ page: String(page), size: String(size) });
+  if (filters) {
+    for (const [k, v] of Object.entries(filters)) params.set(`filter.${k}`, v);
+  }
+  return cmsV2Fetch<PaginatedResponse<ContentBlock>>(
+    `/public/content/${encodeURIComponent(typeName)}?${params}`,
+    [`content-${typeName}`]
+  );
+}
+
+/** Get a single content item by its slug. */
+export async function getContentBySlug(
+  typeName: string,
+  slug: string
+): Promise<ContentBlock> {
+  return cmsV2Fetch<ContentBlock>(
+    `/public/content/${encodeURIComponent(typeName)}/slug/${encodeURIComponent(slug)}`,
+    [`content-${typeName}-${slug}`]
+  );
+}
+
 export async function searchContent(
   query: string,
   type?: string,