@estation/create-cms-site 1.0.0

package/template/src/components/sections/TestimonialsSection.tsx

@@ -0,0 +1,52 @@
+import type { SectionProps } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function TestimonialsSection({ block }: SectionProps) {
+  const c = block.content;
+  const title = str(c.title);
+
+  const testimonials: { name: string; quote: string; role?: string }[] = [];
+  if (Array.isArray(c.items?.fieldValue)) {
+    for (const item of c.items.fieldValue as Record<string, unknown>[]) {
+      const name = (item.name as { fieldValue?: string })?.fieldValue || (item.name as string) || "";
+      const quote = (item.quote as { fieldValue?: string })?.fieldValue || (item.quote as string) || "";
+      const role = (item.role as { fieldValue?: string })?.fieldValue || (item.role as string) || "";
+      testimonials.push({ name, quote, role });
+    }
+  }
+
+  // Fallback: extract numbered testimonials from flat fields
+  if (testimonials.length === 0) {
+    let i = 1;
+    while (str(c[`testimonial-${i}-title`]) || str(c[`testimonial-${i}-description`])) {
+      testimonials.push({
+        name: str(c[`testimonial-${i}-title`]),
+        quote: str(c[`testimonial-${i}-description`]),
+      });
+      i++;
+    }
+  }
+
+  return (
+    <div className="py-16 px-6 bg-gray-50">
+      <div className="max-w-5xl mx-auto">
+        {title && (
+          <h2 data-cms-field="title" className="text-3xl font-bold text-center mb-12">
+            {title}
+          </h2>
+        )}
+        <div data-cms-field="items" className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {testimonials.map((t, i) => (
+            <blockquote key={i} className="p-6 bg-white rounded-lg border border-gray-200">
+              <p className="text-gray-600 italic mb-4">&ldquo;{t.quote}&rdquo;</p>
+              <footer className="font-medium">
+                {t.name}
+                {t.role && <span className="text-gray-500 text-sm block">{t.role}</span>}
+              </footer>
+            </blockquote>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/template/src/components/sections/TextSection.tsx

@@ -0,0 +1,31 @@
+import type { SectionProps } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function TextSection({ block }: SectionProps) {
+  const c = block.content;
+  const title = str(c.title);
+  const subtitle = str(c.subtitle);
+  const body = str(c.body);
+
+  return (
+    <div className="py-16 px-6 max-w-3xl mx-auto">
+      {title && (
+        <h2 data-cms-field="title" className="text-3xl font-bold mb-4">
+          {title}
+        </h2>
+      )}
+      {subtitle && (
+        <p data-cms-field="subtitle" className="text-lg text-gray-600 mb-6">
+          {subtitle}
+        </p>
+      )}
+      {body && (
+        <div
+          data-cms-field="body"
+          className="prose prose-gray max-w-none"
+          dangerouslySetInnerHTML={{ __html: body }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+import type {
+  PageWithBlocksResponse,
+  ContentBlock,
+  PageComposition,
+  PaginatedResponse,
+  Collection,
+  SearchResultItem,
+} from "./types";
+
+const CMS_API_URL = process.env.CMS_API_URL || "";
+const CMS_API_TOKEN = process.env.CMS_API_TOKEN || "";
+
+interface ApiResponse<T> {
+  status: string;
+  message: string;
+  data: T;
+}
+
+async function cmsFetch<T>(path: string, tags?: string[]): Promise<T> {
+  const url = `${CMS_API_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 API error: ${res.status} ${res.statusText} for ${path}`);
+  }
+
+  const json: ApiResponse<T> = await res.json();
+  return json.data;
+}
+
+export async function getPageBySlug(slug: string): Promise<PageWithBlocksResponse> {
+  return cmsFetch<PageWithBlocksResponse>(
+    `/public/content/pages/slug/${encodeURIComponent(slug)}`,
+    [`page-${slug}`]
+  );
+}
+
+export async function getBlocksByTags(tags: string[]): Promise<ContentBlock[]> {
+  const query = tags.map(encodeURIComponent).join(",");
+  return cmsFetch<ContentBlock[]>(
+    `/public/content/blocks/by-tags?tags=${query}`,
+    tags.map((t) => `tag-${t}`)
+  );
+}
+
+export async function getBlocksByTagPaginated(
+  tag: string,
+  page = 1,
+  size = 20
+): Promise<PaginatedResponse<ContentBlock>> {
+  return cmsFetch<PaginatedResponse<ContentBlock>>(
+    `/public/content/blocks/by-tags?tags=${encodeURIComponent(tag)}&page=${page}&size=${size}`,
+    [`tag-${tag}`]
+  );
+}
+
+export async function getBlockByUUID(uuid: string): Promise<ContentBlock> {
+  return cmsFetch<ContentBlock>(
+    `/public/content/blocks/${encodeURIComponent(uuid)}`,
+    [`block-${uuid}`]
+  );
+}
+
+export async function getAllPages(): Promise<PageComposition[]> {
+  return cmsFetch<PageComposition[]>("/public/content/pages", ["all-pages"]);
+}
+
+export async function executeCollection(uuid: string): Promise<ContentBlock[]> {
+  return cmsFetch<ContentBlock[]>(
+    `/public/content/collections/${encodeURIComponent(uuid)}/execute`,
+    [`collection-${uuid}`]
+  );
+}
+
+export async function getCollections(): Promise<Collection[]> {
+  return cmsFetch<Collection[]>("/public/content/collections", ["collections"]);
+}
+
+export async function searchContent(
+  query: string,
+  type?: string,
+  page = 1,
+  size = 20
+): Promise<PaginatedResponse<SearchResultItem>> {
+  const params = new URLSearchParams({ q: query, page: String(page), size: String(size) });
+  if (type) params.set("type", type);
+  return cmsFetch<PaginatedResponse<SearchResultItem>>(
+    `/public/content/search?${params.toString()}`,
+    ["search"]
+  );
+}

package/template/src/lib/content-helpers.ts

@@ -0,0 +1,18 @@
+import type { ContentBlock } from "./types";
+import { str } from "./types";
+
+export function findBlockBySlug(blocks: ContentBlock[], slug: string): ContentBlock | undefined {
+  return blocks.find((b) => str(b.content.slug) === slug);
+}
+
+export function formatDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  } catch {
+    return dateStr;
+  }
+}

package/template/src/lib/types.ts

@@ -0,0 +1,109 @@
+export interface ContentField {
+  fieldType: string;
+  fieldValue: string | ListItem[];
+}
+
+/** Safely extract a string value from a content field. */
+export function str(field: ContentField | undefined, fallback = ""): string {
+  if (!field || typeof field.fieldValue !== "string") return fallback;
+  return field.fieldValue || fallback;
+}
+
+/** Safely extract a list value from a content field. */
+export function list(field: any, fallback: any[] = []): any[] {
+  if (!field?.fieldValue) return fallback;
+
+  return field.fieldValue.map((item: any) => {
+    const flattened: Record<string, any> = {};
+
+    Object.entries(item).forEach(([key, value]: any) => {
+      if (key === "id") return;
+      flattened[key] = value?.fieldValue ?? value;
+    });
+
+    return flattened;
+  });
+}
+
+export interface ListItem {
+  id: string;
+  [fieldName: string]: ContentField | string;
+}
+
+export interface ContentBlock {
+  uuid: string;
+  tenant_uuid: string;
+  type: string;
+  name: string;
+  tags: string[];
+  content: Record<string, ContentField>;
+  metadata: Record<string, unknown>;
+  version: number;
+  is_published: boolean;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface PageComposition {
+  uuid: string;
+  tenant_uuid: string;
+  slug: string;
+  title: string;
+  description: string;
+  blocks: string[];
+  layout: string;
+  tags: string[];
+  metadata: Record<string, unknown>;
+  is_published: boolean;
+  published_at: string | null;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface PageWithBlocksResponse {
+  page: PageComposition;
+  blocks: Record<string, ContentBlock>;
+}
+
+export interface SectionProps {
+  block: ContentBlock;
+  className?: string;
+}
+
+export interface CMSPreviewMessage {
+  type: "cms-preview-update";
+  blockTag: string;
+  fieldName: string;
+  fieldType: string;
+  value: string;
+}
+
+export interface CMSPreviewHighlightMessage {
+  type: "cms-preview-highlight";
+  blockTag: string;
+  fieldName: string;
+  active: boolean;
+}
+
+export interface PaginatedResponse<T> {
+  page: number;
+  size: number;
+  total: number;
+  total_pages: number;
+  data: T[];
+}
+
+export interface Collection {
+  uuid: string;
+  name: string;
+  query: string;
+  order_by: string;
+  order_dir: string;
+  limit: number;
+}
+
+export interface SearchResultItem {
+  type: "block" | "page";
+  block?: ContentBlock;
+  page?: PageComposition;
+}

package/template/src/styles/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/template/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}