@estation/create-cms-site 1.0.0

package/template/src/components/Footer.tsx

@@ -0,0 +1,47 @@
+import { getBlocksByTags } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import type { ListItem } from "@/lib/types";
+
+export async function Footer() {
+  let copyright = `© ${new Date().getFullYear()} All rights reserved.`;
+  let links: { label: string; href: string }[] = [];
+
+  try {
+    const footerBlocks = await getBlocksByTags(["footer"]);
+    if (footerBlocks.length > 0) {
+      const block = footerBlocks[0];
+      const c = block.content;
+      if (str(c.copyright)) copyright = str(c.copyright);
+      const items = Array.isArray(c.links?.fieldValue)
+        ? (c.links.fieldValue as ListItem[])
+        : [];
+      links = items
+        .map((item) => ({
+          label: str(item.label as never),
+          href: str(item.href as never, "#"),
+        }))
+        .filter((l) => l.label);
+    }
+  } catch {
+    // footer tag not available
+  }
+
+  return (
+    <footer className="border-t mt-16">
+      <div className="max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
+        <p className="text-sm text-gray-500">{copyright}</p>
+        {links.length > 0 && (
+          <ul className="flex gap-6 text-sm">
+            {links.map((link) => (
+              <li key={link.href}>
+                <a href={link.href} className="text-gray-500 hover:underline">
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </footer>
+  );
+}

package/template/src/components/Navigation.tsx

@@ -0,0 +1,65 @@
+import { getBlocksByTags, getAllPages } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import type { ListItem } from "@/lib/types";
+
+interface NavLink {
+  label: string;
+  href: string;
+}
+
+export async function Navigation() {
+  let links: NavLink[] = [];
+
+  try {
+    const navBlocks = await getBlocksByTags(["navigation"]);
+    if (navBlocks.length > 0) {
+      const block = navBlocks[0];
+      const items = Array.isArray(block.content.items?.fieldValue)
+        ? (block.content.items.fieldValue as ListItem[])
+        : [];
+      links = items
+        .map((item) => ({
+          label: str(item.label as never),
+          href: str(item.href as never, "/"),
+        }))
+        .filter((l) => l.label);
+    }
+  } catch {
+    // navigation tag not available
+  }
+
+  if (links.length === 0) {
+    try {
+      const pages = await getAllPages();
+      links = pages
+        .filter((p) => p.is_published)
+        .map((p) => ({
+          label: p.title || p.slug,
+          href: p.slug === "index" || p.slug === "" ? "/" : `/${p.slug}`,
+        }));
+    } catch {
+      // fallback if no pages
+    }
+  }
+
+  return (
+    <nav className="border-b">
+      <div className="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+        <a href="/" className="text-xl font-bold">
+          Home
+        </a>
+        {links.length > 0 && (
+          <ul className="flex gap-6 text-sm">
+            {links.map((link) => (
+              <li key={link.href}>
+                <a href={link.href} className="hover:underline text-gray-700">
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </nav>
+  );
+}

package/template/src/components/SectionRenderer.tsx

@@ -0,0 +1,43 @@
+import type { ContentBlock, SectionProps } from "@/lib/types";
+import { HeroSection } from "./sections/HeroSection";
+import { TextSection } from "./sections/TextSection";
+import { FeaturesSection } from "./sections/FeaturesSection";
+import { FAQSection } from "./sections/FAQSection";
+import { TestimonialsSection } from "./sections/TestimonialsSection";
+import { CTASection } from "./sections/CTASection";
+import { SliderSection } from "./sections/SliderSection";
+import { GallerySection } from "./sections/GallerySection";
+import { ContactSection } from "./sections/ContactSection";
+import { GenericSection } from "./sections/GenericSection";
+
+const SECTION_MAP: Record<string, React.FC<SectionProps>> = {
+  hero: HeroSection,
+  text: TextSection,
+  features: FeaturesSection,
+  feature: FeaturesSection,
+  faq: FAQSection,
+  testimonials: TestimonialsSection,
+  testimonial: TestimonialsSection,
+  cta: CTASection,
+  slider: SliderSection,
+  sliders: SliderSection,
+  gallery: GallerySection,
+  contact: ContactSection,
+  form: ContactSection,
+};
+
+export function SectionRenderer({ blocks }: { blocks: ContentBlock[] }) {
+  return (
+    <>
+      {blocks.map((block) => {
+        const tag = block.tags?.[0] || block.type;
+        const Component = SECTION_MAP[tag] || GenericSection;
+        return (
+          <section key={block.uuid} data-cms-block={tag}>
+            <Component block={block} />
+          </section>
+        );
+      })}
+    </>
+  );
+}

package/template/src/components/cms-preview-listener.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { useEffect } from "react";
+import { list } from "@/lib/types";
+
+interface PreviewUpdateMessage {
+  type: "cms-preview-update";
+  blockTag: string;
+  fieldName: string;
+  fieldType: string;
+  value: string;
+}
+
+interface PreviewHighlightMessage {
+  type: "cms-preview-highlight";
+  blockTag: string;
+  fieldName: string;
+  active: boolean;
+}
+
+type CMSMessage = PreviewUpdateMessage | PreviewHighlightMessage;
+
+const HIGHLIGHT_CLASS = "cms-preview-highlight";
+const HIGHLIGHT_STYLE_ID = "cms-preview-highlight-style";
+
+function ensureHighlightStyles() {
+  if (document.getElementById(HIGHLIGHT_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = HIGHLIGHT_STYLE_ID;
+  style.textContent = `
+    .${HIGHLIGHT_CLASS} {
+      outline: 2px solid #3b82f6 !important;
+      outline-offset: 2px;
+      transition: outline 0.15s ease;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+function findField(blockTag: string, fieldName: string): Element | null {
+  const block = document.querySelector(`[data-cms-block="${blockTag}"]`);
+  if (!block) return null;
+  return block.querySelector(`[data-cms-field="${fieldName}"]`);
+}
+
+function handleUpdate(msg: PreviewUpdateMessage) {
+  const el = findField(msg.blockTag, msg.fieldName);
+  if (!el) return;
+
+  switch (msg.fieldType) {
+    case "text":
+      el.textContent = msg.value;
+      break;
+    case "richtext":
+      el.innerHTML = msg.value;
+      break;
+    case "image":
+      if (el instanceof HTMLImageElement) {
+        el.src = msg.value;
+      }
+      break;
+    case "list":
+      try {
+        const rawItems = JSON.parse(msg.value);
+        const items = list({ fieldValue: rawItems });
+        if (Array.isArray(items)) {
+          el.innerHTML = items
+            .map(
+              (item) =>
+                `<li>${typeof item === "string" ? item : JSON.stringify(item)}</li>`
+            )
+            .join("");
+        }
+      } catch {
+        // ignore parse errors
+      }
+      break;
+    default:
+      el.textContent = msg.value;
+  }
+}
+
+function handleHighlight(msg: PreviewHighlightMessage) {
+  ensureHighlightStyles();
+  const el = findField(msg.blockTag, msg.fieldName);
+  if (!el) return;
+
+  if (msg.active) {
+    el.classList.add(HIGHLIGHT_CLASS);
+    el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+  } else {
+    el.classList.remove(HIGHLIGHT_CLASS);
+  }
+}
+
+function handleMessage(event: MessageEvent) {
+  const msg = event.data as CMSMessage;
+  if (!msg || typeof msg !== "object" || !msg.type) return;
+
+  if (msg.type === "cms-preview-update") {
+    handleUpdate(msg as PreviewUpdateMessage);
+  } else if (msg.type === "cms-preview-highlight") {
+    handleHighlight(msg as PreviewHighlightMessage);
+  }
+}
+
+export function CMSPreviewListener() {
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, []);
+
+  return null;
+}

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

@@ -0,0 +1,32 @@
+import type { SectionProps } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function CTASection({ block }: SectionProps) {
+  const c = block.content;
+  const description = str(c.description);
+  const buttonText = str(c.buttonText);
+
+  return (
+    <div className="py-20 px-6 bg-gray-900 text-white text-center">
+      <div className="max-w-2xl mx-auto">
+        <h2 data-cms-field="title" className="text-3xl font-bold mb-4">
+          {str(c.title, "Ready to get started?")}
+        </h2>
+        {description && (
+          <p data-cms-field="description" className="text-lg text-gray-300 mb-8">
+            {description}
+          </p>
+        )}
+        {buttonText && (
+          <a
+            data-cms-field="buttonText"
+            href={str(c.buttonLink, "#")}
+            className="inline-block px-8 py-3 bg-white text-gray-900 rounded-lg font-medium hover:bg-gray-100 transition-colors"
+          >
+            {buttonText}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+import type { SectionProps } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function ContactSection({ block }: SectionProps) {
+  const c = block.content;
+  const title = str(c.title, "Contact Us");
+  const description = str(c.description);
+  const email = str(c.email);
+  const phone = str(c.phone);
+  const address = str(c.address);
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <h2 data-cms-field="title" className="text-3xl font-bold text-center mb-4">
+          {title}
+        </h2>
+        {description && (
+          <p data-cms-field="description" className="text-center text-gray-600 mb-10 max-w-2xl mx-auto">
+            {description}
+          </p>
+        )}
+        <div className="grid md:grid-cols-2 gap-10">
+          <div className="space-y-4">
+            {email && (
+              <p data-cms-field="email">
+                <span className="font-medium">Email:</span>{" "}
+                <a href={`mailto:${email}`} className="text-blue-600 hover:underline">
+                  {email}
+                </a>
+              </p>
+            )}
+            {phone && (
+              <p data-cms-field="phone">
+                <span className="font-medium">Phone:</span>{" "}
+                <a href={`tel:${phone}`} className="text-blue-600 hover:underline">
+                  {phone}
+                </a>
+              </p>
+            )}
+            {address && (
+              <p data-cms-field="address">
+                <span className="font-medium">Address:</span> {address}
+              </p>
+            )}
+          </div>
+          <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
+            <input
+              type="text"
+              placeholder="Your Name"
+              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300"
+            />
+            <input
+              type="email"
+              placeholder="Your Email"
+              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300"
+            />
+            <textarea
+              rows={4}
+              placeholder="Your Message"
+              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-300"
+            />
+            <button
+              type="submit"
+              className="px-6 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
+            >
+              Send Message
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,48 @@
+import type { SectionProps } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function FAQSection({ block }: SectionProps) {
+  const c = block.content;
+  const title = str(c.title);
+
+  const faqs: { question: string; answer: string }[] = [];
+  if (Array.isArray(c.items?.fieldValue)) {
+    for (const item of c.items.fieldValue as Record<string, unknown>[]) {
+      const question = (item.question as { fieldValue?: string })?.fieldValue || (item.question as string) || "";
+      const answer = (item.answer as { fieldValue?: string })?.fieldValue || (item.answer as string) || "";
+      faqs.push({ question, answer });
+    }
+  }
+
+  // Fallback: treat each content key as a question/answer pair
+  if (faqs.length === 0) {
+    for (const [key, field] of Object.entries(c)) {
+      if (key === "title" || key === "description") continue;
+      if (field?.fieldValue && typeof field.fieldValue === "string") {
+        faqs.push({ question: key, answer: field.fieldValue });
+      }
+    }
+  }
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-3xl 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="space-y-6">
+          {faqs.map((faq, i) => (
+            <details key={i} className="border border-gray-200 rounded-lg">
+              <summary className="px-6 py-4 cursor-pointer font-medium hover:bg-gray-50">
+                {faq.question}
+              </summary>
+              <div className="px-6 pb-4 text-gray-600">{faq.answer}</div>
+            </details>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,42 @@
+import type { SectionProps } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function FeaturesSection({ block }: SectionProps) {
+  const c = block.content;
+  const title = str(c.title);
+  const description = str(c.description);
+
+  const features: { title: string; description: string }[] = [];
+  if (Array.isArray(c.items?.fieldValue)) {
+    for (const item of c.items.fieldValue as Record<string, unknown>[]) {
+      const t = (item.title as { fieldValue?: string })?.fieldValue || (item.title as string) || "";
+      const d = (item.description as { fieldValue?: string })?.fieldValue || (item.description as string) || "";
+      features.push({ title: t, description: d });
+    }
+  }
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-5xl mx-auto">
+        {title && (
+          <h2 data-cms-field="title" className="text-3xl font-bold text-center mb-4">
+            {title}
+          </h2>
+        )}
+        {description && (
+          <p data-cms-field="description" className="text-lg text-gray-600 text-center mb-12 max-w-2xl mx-auto">
+            {description}
+          </p>
+        )}
+        <div data-cms-field="items" className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {features.map((feat, i) => (
+            <div key={i} className="p-6 rounded-lg border border-gray-200">
+              <h3 className="text-xl font-semibold mb-2">{feat.title}</h3>
+              <p className="text-gray-600">{feat.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import type { SectionProps, ListItem } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function GallerySection({ block }: SectionProps) {
+  const c = block.content;
+  const title = str(c.title);
+  const items = (Array.isArray(c.items?.fieldValue) ? c.items.fieldValue : []) as ListItem[];
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-6xl mx-auto">
+        {title && (
+          <h2 data-cms-field="title" className="text-3xl font-bold text-center mb-10">
+            {title}
+          </h2>
+        )}
+        <div
+          data-cms-field="items"
+          className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4"
+        >
+          {items.map((item) => {
+            const image = str(item.image as never);
+            const caption = str(item.caption as never);
+            if (!image) return null;
+            return (
+              <figure key={item.id} className="group overflow-hidden rounded-lg">
+                <img
+                  src={image}
+                  alt={caption || "Gallery image"}
+                  className="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300"
+                />
+                {caption && (
+                  <figcaption className="p-3 text-sm text-gray-600 text-center">
+                    {caption}
+                  </figcaption>
+                )}
+              </figure>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+import type { SectionProps } from "@/lib/types";
+
+export function GenericSection({ block }: SectionProps) {
+  const c = block.content;
+  const entries = Object.entries(c).filter(
+    ([, field]) => field?.fieldValue !== undefined && field?.fieldValue !== null && field?.fieldValue !== ""
+  );
+
+  return (
+    <div className="py-12 px-6">
+      <div className="max-w-3xl mx-auto">
+        {entries.map(([key, field]) => {
+          const value = field.fieldValue;
+
+          if (field.fieldType === "image" && typeof value === "string") {
+            return (
+              <img
+                key={key}
+                data-cms-field={key}
+                src={value}
+                alt={key}
+                className="w-full max-w-lg mx-auto rounded-lg mb-4"
+              />
+            );
+          }
+
+          if (field.fieldType === "richtext" && typeof value === "string") {
+            return (
+              <div
+                key={key}
+                data-cms-field={key}
+                className="prose prose-gray max-w-none mb-4"
+                dangerouslySetInnerHTML={{ __html: value }}
+              />
+            );
+          }
+
+          if (Array.isArray(value)) {
+            return (
+              <ul key={key} data-cms-field={key} className="list-disc pl-6 mb-4 space-y-1">
+                {value.map((item, i) => (
+                  <li key={i} className="text-gray-700">
+                    {typeof item === "string" ? item : JSON.stringify(item)}
+                  </li>
+                ))}
+              </ul>
+            );
+          }
+
+          if (typeof value === "string") {
+            return (
+              <p key={key} data-cms-field={key} className="text-gray-700 mb-3">
+                {value}
+              </p>
+            );
+          }
+
+          return null;
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+import type { SectionProps } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function HeroSection({ block }: SectionProps) {
+  const c = block.content;
+  const buttonText = str(c.buttonText);
+
+  return (
+    <div className="py-20 px-6 text-center">
+      <h1 data-cms-field="header" className="text-4xl md:text-5xl font-bold tracking-tight">
+        {str(c.header, "Hero Title")}
+      </h1>
+      <p data-cms-field="description" className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
+        {str(c.description, "Hero description goes here.")}
+      </p>
+      {buttonText && (
+        <a
+          data-cms-field="buttonText"
+          href={str(c.buttonLink, "#")}
+          className="mt-8 inline-block px-6 py-3 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
+        >
+          {buttonText}
+        </a>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,66 @@
+"use client";
+
+import { useState } from "react";
+import type { SectionProps, ListItem } from "@/lib/types";
+import { str } from "@/lib/types";
+
+export function SliderSection({ block }: SectionProps) {
+  const c = block.content;
+  const items = (Array.isArray(c.items?.fieldValue) ? c.items.fieldValue : []) as ListItem[];
+  const [current, setCurrent] = useState(0);
+
+  if (items.length === 0) return null;
+
+  const item = items[current];
+  const title = str(item.title as never);
+  const subtitle = str(item.subtitle as never);
+  const image = str(item.image as never);
+  const linkUrl = str(item.linkUrl as never);
+  const linkText = str(item.linkText as never, "Learn more");
+
+  return (
+    <div className="relative py-16 px-6" data-cms-field="items">
+      <div className="max-w-4xl mx-auto text-center">
+        {image && (
+          <img
+            src={image}
+            alt={title}
+            className="w-full max-h-96 object-cover rounded-lg mb-6"
+          />
+        )}
+        {title && <h2 className="text-3xl font-bold">{title}</h2>}
+        {subtitle && <p className="mt-2 text-lg text-gray-600">{subtitle}</p>}
+        {linkUrl && (
+          <a
+            href={linkUrl}
+            className="mt-4 inline-block px-5 py-2 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors"
+          >
+            {linkText}
+          </a>
+        )}
+      </div>
+
+      {items.length > 1 && (
+        <div className="flex justify-center gap-4 mt-8">
+          <button
+            onClick={() => setCurrent((c) => (c - 1 + items.length) % items.length)}
+            className="px-4 py-2 border rounded-lg hover:bg-gray-100 transition-colors"
+            aria-label="Previous slide"
+          >
+            &larr;
+          </button>
+          <span className="flex items-center text-sm text-gray-500">
+            {current + 1} / {items.length}
+          </span>
+          <button
+            onClick={() => setCurrent((c) => (c + 1) % items.length)}
+            className="px-4 py-2 border rounded-lg hover:bg-gray-100 transition-colors"
+            aria-label="Next slide"
+          >
+            &rarr;
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}