@estation/create-cms-site 1.0.0

package/template/src/app/blog/[slug]/page.tsx

@@ -0,0 +1,60 @@
+import { getBlocksByTags } from "@/lib/cms-api";
+import { findBlockBySlug, formatDate } from "@/lib/content-helpers";
+import { str } from "@/lib/types";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const blocks = await getBlocksByTags(["blogs"]);
+  const block = findBlockBySlug(blocks, slug);
+  if (!block) return { title: "Post Not Found" };
+  return {
+    title: str(block.content.title, block.name),
+    description: str(block.content.excerpt),
+  };
+}
+
+export default async function BlogDetailPage({ params }: PageProps) {
+  const { slug } = await params;
+  const blocks = await getBlocksByTags(["blogs"]);
+  const block = findBlockBySlug(blocks, slug);
+
+  if (!block) notFound();
+
+  const title = str(block.content.title, block.name);
+  const author = str(block.content.author);
+  const date = str(block.content.publishDate) || block.created_at;
+  const featuredImage = str(block.content.featuredImage);
+  const content = str(block.content.content);
+
+  return (
+    <article className="py-16 px-6">
+      <div className="max-w-3xl mx-auto">
+        <a href="/blog" className="text-sm text-gray-500 hover:underline">&larr; Back to Blog</a>
+        <h1 className="text-4xl font-bold mt-4 mb-4">{title}</h1>
+        <div className="flex gap-4 text-sm text-gray-500 mb-8">
+          {author && <span>By {author}</span>}
+          <span>{formatDate(date)}</span>
+        </div>
+        {featuredImage && (
+          <img
+            src={featuredImage}
+            alt={title}
+            className="w-full rounded-lg mb-8"
+          />
+        )}
+        {content && (
+          <div
+            className="prose prose-gray max-w-none"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        )}
+      </div>
+    </article>
+  );
+}

package/template/src/app/blog/page.tsx

@@ -0,0 +1,68 @@
+import { getBlocksByTags } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import { formatDate } from "@/lib/content-helpers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blog",
+  description: "Latest blog posts",
+};
+
+export default async function BlogListingPage() {
+  let blocks: Awaited<ReturnType<typeof getBlocksByTags>> = [];
+  try {
+    blocks = await getBlocksByTags(["blogs"]);
+  } catch {
+    // CMS unavailable
+  }
+
+  const sorted = [...blocks].sort((a, b) => {
+    const da = str(a.content.publishDate) || a.created_at;
+    const db = str(b.content.publishDate) || b.created_at;
+    return new Date(db).getTime() - new Date(da).getTime();
+  });
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-10">Blog</h1>
+        {sorted.length === 0 ? (
+          <p className="text-gray-500">No blog posts yet.</p>
+        ) : (
+          <div className="space-y-8">
+            {sorted.map((block) => {
+              const slug = str(block.content.slug);
+              const title = str(block.content.title, block.name);
+              const excerpt = str(block.content.excerpt);
+              const featuredImage = str(block.content.featuredImage);
+              const date = str(block.content.publishDate) || block.created_at;
+
+              return (
+                <article key={block.uuid} className="border-b pb-8">
+                  {featuredImage && (
+                    <img
+                      src={featuredImage}
+                      alt={title}
+                      className="w-full h-48 object-cover rounded-lg mb-4"
+                    />
+                  )}
+                  <h2 className="text-2xl font-semibold">
+                    {slug ? (
+                      <a href={`/blog/${slug}`} className="hover:underline">
+                        {title}
+                      </a>
+                    ) : (
+                      title
+                    )}
+                  </h2>
+                  <p className="text-sm text-gray-500 mt-1">{formatDate(date)}</p>
+                  {excerpt && <p className="text-gray-600 mt-2">{excerpt}</p>}
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/app/collections/[uuid]/page.tsx

@@ -0,0 +1,28 @@
+import { executeCollection } from "@/lib/cms-api";
+import { SectionRenderer } from "@/components/SectionRenderer";
+import type { Metadata } from "next";
+
+interface PageProps {
+  params: Promise<{ uuid: string }>;
+}
+
+export const metadata: Metadata = {
+  title: "Collection",
+};
+
+export default async function CollectionPage({ params }: PageProps) {
+  const { uuid } = await params;
+  const blocks = await executeCollection(uuid);
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-6xl mx-auto">
+        {blocks.length === 0 ? (
+          <p className="text-gray-500 text-center">No items in this collection.</p>
+        ) : (
+          <SectionRenderer blocks={blocks} />
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/app/events/[slug]/page.tsx

@@ -0,0 +1,62 @@
+import { getBlocksByTags } from "@/lib/cms-api";
+import { findBlockBySlug, formatDate } from "@/lib/content-helpers";
+import { str } from "@/lib/types";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const blocks = await getBlocksByTags(["events"]);
+  const block = findBlockBySlug(blocks, slug);
+  if (!block) return { title: "Event Not Found" };
+  return {
+    title: str(block.content.title, block.name),
+    description: str(block.content.description),
+  };
+}
+
+export default async function EventDetailPage({ params }: PageProps) {
+  const { slug } = await params;
+  const blocks = await getBlocksByTags(["events"]);
+  const block = findBlockBySlug(blocks, slug);
+
+  if (!block) notFound();
+
+  const title = str(block.content.title, block.name);
+  const description = str(block.content.description);
+  const location = str(block.content.location);
+  const startDate = str(block.content.startDate);
+  const endDate = str(block.content.endDate);
+  const organizer = str(block.content.organizer);
+  const content = str(block.content.content);
+
+  return (
+    <article className="py-16 px-6">
+      <div className="max-w-3xl mx-auto">
+        <a href="/events" className="text-sm text-gray-500 hover:underline">&larr; Back to Events</a>
+        <h1 className="text-4xl font-bold mt-4 mb-4">{title}</h1>
+        <div className="flex flex-wrap gap-4 text-sm text-gray-500 mb-8">
+          {startDate && (
+            <span>
+              {formatDate(startDate)}
+              {endDate && ` – ${formatDate(endDate)}`}
+            </span>
+          )}
+          {location && <span>{location}</span>}
+          {organizer && <span>Organized by {organizer}</span>}
+        </div>
+        {description && <p className="text-lg text-gray-700 mb-6">{description}</p>}
+        {content && (
+          <div
+            className="prose prose-gray max-w-none"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        )}
+      </div>
+    </article>
+  );
+}

package/template/src/app/events/page.tsx

@@ -0,0 +1,70 @@
+import { getBlocksByTags } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import { formatDate } from "@/lib/content-helpers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Events",
+  description: "Upcoming events",
+};
+
+export default async function EventsListingPage() {
+  let blocks: Awaited<ReturnType<typeof getBlocksByTags>> = [];
+  try {
+    blocks = await getBlocksByTags(["events"]);
+  } catch {
+    // CMS unavailable
+  }
+
+  const sorted = [...blocks].sort((a, b) => {
+    const da = str(a.content.startDate) || a.created_at;
+    const db = str(b.content.startDate) || b.created_at;
+    return new Date(da).getTime() - new Date(db).getTime();
+  });
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-10">Events</h1>
+        {sorted.length === 0 ? (
+          <p className="text-gray-500">No events scheduled.</p>
+        ) : (
+          <div className="space-y-8">
+            {sorted.map((block) => {
+              const slug = str(block.content.slug);
+              const title = str(block.content.title, block.name);
+              const description = str(block.content.description);
+              const location = str(block.content.location);
+              const startDate = str(block.content.startDate);
+              const endDate = str(block.content.endDate);
+
+              return (
+                <article key={block.uuid} className="border-b pb-8">
+                  <h2 className="text-2xl font-semibold">
+                    {slug ? (
+                      <a href={`/events/${slug}`} className="hover:underline">
+                        {title}
+                      </a>
+                    ) : (
+                      title
+                    )}
+                  </h2>
+                  <div className="flex flex-wrap gap-4 text-sm text-gray-500 mt-2">
+                    {startDate && (
+                      <span>
+                        {formatDate(startDate)}
+                        {endDate && ` – ${formatDate(endDate)}`}
+                      </span>
+                    )}
+                    {location && <span>{location}</span>}
+                  </div>
+                  {description && <p className="text-gray-600 mt-2">{description}</p>}
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/app/layout.tsx

@@ -0,0 +1,27 @@
+import type { Metadata } from "next";
+import { CMSPreviewListener } from "@/components/cms-preview-listener";
+import { Navigation } from "@/components/Navigation";
+import { Footer } from "@/components/Footer";
+import "@/styles/globals.css";
+
+export const metadata: Metadata = {
+  title: "Website",
+  description: "Powered by CMS",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="antialiased">
+        <Navigation />
+        <main>{children}</main>
+        <Footer />
+        <CMSPreviewListener />
+      </body>
+    </html>
+  );
+}

package/template/src/app/news/[slug]/page.tsx

@@ -0,0 +1,66 @@
+import { getBlocksByTags } from "@/lib/cms-api";
+import { findBlockBySlug, formatDate } from "@/lib/content-helpers";
+import { str } from "@/lib/types";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const blocks = await getBlocksByTags(["news"]);
+  const block = findBlockBySlug(blocks, slug);
+  if (!block) return { title: "Article Not Found" };
+  return {
+    title: str(block.content.title, block.name),
+    description: str(block.content.excerpt),
+  };
+}
+
+export default async function NewsDetailPage({ params }: PageProps) {
+  const { slug } = await params;
+  const blocks = await getBlocksByTags(["news"]);
+  const block = findBlockBySlug(blocks, slug);
+
+  if (!block) notFound();
+
+  const title = str(block.content.title, block.name);
+  const author = str(block.content.author);
+  const category = str(block.content.category);
+  const date = str(block.content.publishDate) || block.created_at;
+  const featuredImage = str(block.content.featuredImage);
+  const content = str(block.content.content);
+
+  return (
+    <article className="py-16 px-6">
+      <div className="max-w-3xl mx-auto">
+        <a href="/news" className="text-sm text-gray-500 hover:underline">&larr; Back to News</a>
+        {category && (
+          <span className="ml-4 text-xs font-medium uppercase tracking-wide text-blue-600 bg-blue-50 px-2 py-1 rounded">
+            {category}
+          </span>
+        )}
+        <h1 className="text-4xl font-bold mt-4 mb-4">{title}</h1>
+        <div className="flex gap-4 text-sm text-gray-500 mb-8">
+          {author && <span>By {author}</span>}
+          <span>{formatDate(date)}</span>
+        </div>
+        {featuredImage && (
+          <img
+            src={featuredImage}
+            alt={title}
+            className="w-full rounded-lg mb-8"
+          />
+        )}
+        {content && (
+          <div
+            className="prose prose-gray max-w-none"
+            dangerouslySetInnerHTML={{ __html: content }}
+          />
+        )}
+      </div>
+    </article>
+  );
+}

package/template/src/app/news/page.tsx

@@ -0,0 +1,68 @@
+import { getBlocksByTags } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import { formatDate } from "@/lib/content-helpers";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "News",
+  description: "Latest news",
+};
+
+export default async function NewsListingPage() {
+  let blocks: Awaited<ReturnType<typeof getBlocksByTags>> = [];
+  try {
+    blocks = await getBlocksByTags(["news"]);
+  } catch {
+    // CMS unavailable
+  }
+
+  const sorted = [...blocks].sort((a, b) => {
+    const da = str(a.content.publishDate) || a.created_at;
+    const db = str(b.content.publishDate) || b.created_at;
+    return new Date(db).getTime() - new Date(da).getTime();
+  });
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-10">News</h1>
+        {sorted.length === 0 ? (
+          <p className="text-gray-500">No news articles yet.</p>
+        ) : (
+          <div className="space-y-8">
+            {sorted.map((block) => {
+              const slug = str(block.content.slug);
+              const title = str(block.content.title, block.name);
+              const excerpt = str(block.content.excerpt);
+              const category = str(block.content.category);
+              const date = str(block.content.publishDate) || block.created_at;
+
+              return (
+                <article key={block.uuid} className="border-b pb-8">
+                  <div className="flex items-center gap-3 mb-2">
+                    {category && (
+                      <span className="text-xs font-medium uppercase tracking-wide text-blue-600 bg-blue-50 px-2 py-1 rounded">
+                        {category}
+                      </span>
+                    )}
+                    <span className="text-sm text-gray-500">{formatDate(date)}</span>
+                  </div>
+                  <h2 className="text-2xl font-semibold">
+                    {slug ? (
+                      <a href={`/news/${slug}`} className="hover:underline">
+                        {title}
+                      </a>
+                    ) : (
+                      title
+                    )}
+                  </h2>
+                  {excerpt && <p className="text-gray-600 mt-2">{excerpt}</p>}
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/app/page.tsx

@@ -0,0 +1,40 @@
+import { getPageBySlug } from "@/lib/cms-api";
+import { SectionRenderer } from "@/components/SectionRenderer";
+import type { ContentBlock } from "@/lib/types";
+import type { Metadata } from "next";
+
+export async function generateMetadata(): Promise<Metadata> {
+  try {
+    const data = await getPageBySlug("index");
+    return {
+      title: data.page.title || "Home",
+      description: data.page.description || undefined,
+    };
+  } catch {
+    return { title: "Home" };
+  }
+}
+
+export default async function Home() {
+  try {
+    const data = await getPageBySlug("index");
+    const orderedBlocks = getOrderedBlocks(data.page.blocks, data.blocks);
+    return <SectionRenderer blocks={orderedBlocks} />;
+  } catch {
+    return (
+      <div className="py-20 px-6 text-center">
+        <h1 className="text-4xl font-bold">Welcome</h1>
+        <p className="mt-4 text-gray-500">Content is not available yet. Configure your CMS to get started.</p>
+      </div>
+    );
+  }
+}
+
+function getOrderedBlocks(
+  blockUuids: string[],
+  blocksMap: Record<string, ContentBlock>
+): ContentBlock[] {
+  return blockUuids
+    .map((uuid) => blocksMap[uuid])
+    .filter(Boolean);
+}

package/template/src/app/search/page.tsx

@@ -0,0 +1,136 @@
+import { searchContent } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Search",
+  description: "Search content",
+};
+
+interface SearchPageProps {
+  searchParams: Promise<{ q?: string; type?: string; page?: string }>;
+}
+
+export default async function SearchPage({ searchParams }: SearchPageProps) {
+  const { q, type, page: pageStr } = await searchParams;
+  const query = q || "";
+  const currentPage = Math.max(1, parseInt(pageStr || "1", 10));
+
+  const results = query
+    ? await searchContent(query, type, currentPage, 20)
+    : null;
+
+  return (
+    <div className="py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8">Search</h1>
+
+        <form method="get" action="/search" className="flex gap-2 mb-10">
+          <input
+            type="text"
+            name="q"
+            defaultValue={query}
+            placeholder="Search..."
+            className="flex-1 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"
+          >
+            Search
+          </button>
+        </form>
+
+        {results && (
+          <>
+            <p className="text-sm text-gray-500 mb-6">
+              {results.total} result{results.total !== 1 ? "s" : ""} for &ldquo;{query}&rdquo;
+            </p>
+
+            {results.data.length === 0 ? (
+              <p className="text-gray-500">No results found.</p>
+            ) : (
+              <div className="space-y-6">
+                {results.data.map((item, i) => {
+                  if (item.type === "page" && item.page) {
+                    return (
+                      <div key={`page-${item.page.uuid}`} className="border-b pb-4">
+                        <span className="text-xs font-medium uppercase text-green-600 bg-green-50 px-2 py-0.5 rounded">
+                          Page
+                        </span>
+                        <h2 className="text-xl font-semibold mt-1">
+                          <a
+                            href={item.page.slug === "index" ? "/" : `/${item.page.slug}`}
+                            className="hover:underline"
+                          >
+                            {item.page.title}
+                          </a>
+                        </h2>
+                        {item.page.description && (
+                          <p className="text-gray-600 mt-1">{item.page.description}</p>
+                        )}
+                      </div>
+                    );
+                  }
+
+                  if (item.type === "block" && item.block) {
+                    const title = str(item.block.content.title, item.block.name);
+                    const slug = str(item.block.content.slug);
+                    const tag = item.block.tags?.[0] || "";
+                    let href = "#";
+                    if (slug) {
+                      if (tag === "blogs") href = `/blog/${slug}`;
+                      else if (tag === "news") href = `/news/${slug}`;
+                      else if (tag === "events") href = `/events/${slug}`;
+                    }
+
+                    return (
+                      <div key={`block-${item.block.uuid}-${i}`} className="border-b pb-4">
+                        <span className="text-xs font-medium uppercase text-purple-600 bg-purple-50 px-2 py-0.5 rounded">
+                          {tag || "Block"}
+                        </span>
+                        <h2 className="text-xl font-semibold mt-1">
+                          {href !== "#" ? (
+                            <a href={href} className="hover:underline">{title}</a>
+                          ) : (
+                            title
+                          )}
+                        </h2>
+                      </div>
+                    );
+                  }
+
+                  return null;
+                })}
+              </div>
+            )}
+
+            {results.total_pages > 1 && (
+              <div className="flex justify-center gap-2 mt-10">
+                {currentPage > 1 && (
+                  <a
+                    href={`/search?q=${encodeURIComponent(query)}&page=${currentPage - 1}${type ? `&type=${type}` : ""}`}
+                    className="px-4 py-2 border rounded-lg hover:bg-gray-100"
+                  >
+                    Previous
+                  </a>
+                )}
+                <span className="flex items-center px-4 text-sm text-gray-500">
+                  Page {currentPage} of {results.total_pages}
+                </span>
+                {currentPage < results.total_pages && (
+                  <a
+                    href={`/search?q=${encodeURIComponent(query)}&page=${currentPage + 1}${type ? `&type=${type}` : ""}`}
+                    className="px-4 py-2 border rounded-lg hover:bg-gray-100"
+                  >
+                    Next
+                  </a>
+                )}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

package/template/src/app/sitemap.ts

@@ -0,0 +1,48 @@
+import type { MetadataRoute } from "next";
+import { getAllPages, getBlocksByTags } from "@/lib/cms-api";
+import { str } from "@/lib/types";
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "http://localhost:3000";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const entries: MetadataRoute.Sitemap = [];
+
+  try {
+    const pages = await getAllPages();
+    for (const page of pages) {
+      if (!page.is_published) continue;
+      const slug = page.slug === "index" || page.slug === "" ? "" : page.slug;
+      entries.push({
+        url: `${SITE_URL}/${slug}`,
+        lastModified: page.updated_at,
+      });
+    }
+  } catch {
+    entries.push({ url: SITE_URL, lastModified: new Date().toISOString() });
+  }
+
+  const contentTypes = [
+    { tag: "blogs", prefix: "blog" },
+    { tag: "news", prefix: "news" },
+    { tag: "events", prefix: "events" },
+  ];
+
+  for (const { tag, prefix } of contentTypes) {
+    try {
+      const blocks = await getBlocksByTags([tag]);
+      for (const block of blocks) {
+        const slug = str(block.content.slug);
+        if (slug) {
+          entries.push({
+            url: `${SITE_URL}/${prefix}/${slug}`,
+            lastModified: block.updated_at,
+          });
+        }
+      }
+    } catch {
+      // tag not available
+    }
+  }
+
+  return entries;
+}