@digitalygo/create-diggocms-app 0.1.0

package/templates/full/app/[...slug]/page.tsx

@@ -0,0 +1,115 @@
+import type { ReactElement } from 'react';
+import type { Metadata } from 'next';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { fetchPageData, fetchMenuData } from '@/lib/data-fetching';
+import {
+  componentsRegistry,
+  navigationRegistry,
+  isMockMode,
+  hasBaseUrl,
+} from '@/lib/diggo-config';
+import { renderPage, renderMenu } from '@digitalygo/diggocms-sdk-core/server';
+
+export const dynamic = 'force-dynamic';
+
+interface CatchAllPageProps {
+  params: Promise<{ slug: string[] }>;
+}
+
+export async function generateMetadata({
+  params,
+}: CatchAllPageProps): Promise<Metadata> {
+  const { slug: slugParam } = await params;
+  const slug = (Array.isArray(slugParam) ? slugParam : []).join('/') || 'home';
+  const { page } = await fetchPageData(slug);
+
+  return {
+    title: page?.title,
+  };
+}
+
+export default async function CatchAllPage({
+  params,
+}: CatchAllPageProps): Promise<ReactElement> {
+  const { slug: slugParam } = await params;
+  const slug = (Array.isArray(slugParam) ? slugParam : []).join('/') || 'home';
+
+  const [{ page, error, usingMock }, { menu }] = await Promise.all([
+    fetchPageData(slug),
+    fetchMenuData('main'),
+  ]);
+
+  const showMockIndicator = usingMock || isMockMode();
+  const showError = error && !page;
+
+  if (!page) {
+    if (!hasBaseUrl() && !isMockMode()) {
+      return (
+        <div className="container">
+          <header className="header">
+            <div className="header-content container">
+              <div className="logo">My DiggoCMS App</div>
+            </div>
+          </header>
+          <main className="main container">
+            <div className="error-banner">
+              <strong>Error:</strong> BASE_URL is not configured and MOCK mode
+              is disabled.
+            </div>
+            <p>
+              Please configure your environment variables. Copy{' '}
+              <code>.env.local.example</code> to <code>.env.local</code> and set
+              either:
+            </p>
+            <ul style={{ marginLeft: '1.5rem', marginTop: '0.5rem' }}>
+              <li>
+                <code>MOCK=1</code> to use local fixtures
+              </li>
+              <li>
+                <code>BASE_URL</code> to your CMS API endpoint
+              </li>
+            </ul>
+          </main>
+        </div>
+      );
+    }
+
+    notFound();
+  }
+
+  return (
+    <div>
+      <header className="header">
+        <div className="header-content container">
+          <Link href="/" className="logo">
+            My DiggoCMS App
+          </Link>
+          {menu && renderMenu(menu, navigationRegistry)}
+        </div>
+      </header>
+
+      <main className="main container">
+        {showError && !showMockIndicator && (
+          <div className="error-banner">
+            <strong>Warning:</strong> {error}
+          </div>
+        )}
+
+        {showMockIndicator && (
+          <div className="mock-badge">
+            Mock Mode
+          </div>
+        )}
+
+        {renderPage(page, componentsRegistry)}
+      </main>
+
+      <footer className="footer">
+        <div className="container">
+          <p>My DiggoCMS App &copy; {new Date().getFullYear()}</p>
+        </div>
+      </footer>
+    </div>
+  );
+}

package/templates/full/app/globals.css

@@ -0,0 +1,187 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  color: #333;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+/* Header Styles */
+.header {
+  background: #fff;
+  border-bottom: 1px solid #e5e7eb;
+  padding: 1rem 0;
+  margin-bottom: 2rem;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.logo {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: #3b82f6;
+  text-decoration: none;
+}
+
+/* Main Content */
+.main {
+  min-height: calc(100vh - 200px);
+  padding-bottom: 3rem;
+}
+
+/* Footer Styles */
+.footer {
+  background: #f9fafb;
+  border-top: 1px solid #e5e7eb;
+  padding: 2rem 0;
+  text-align: center;
+  color: #6b7280;
+}
+
+/* Error Banner */
+.error-banner {
+  background: #fef3c7;
+  border: 1px solid #fbbf24;
+  border-radius: 0.375rem;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+  color: #92400e;
+}
+
+/* Mock Badge */
+.mock-badge {
+  display: inline-block;
+  background: #dbeafe;
+  color: #1e40af;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  margin-bottom: 1rem;
+}
+
+/* Component Styles */
+.diggo-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 1rem;
+  line-height: 1.2;
+}
+
+.diggo-subtitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #374151;
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+  line-height: 1.3;
+}
+
+.diggo-image {
+  max-width: 100%;
+  height: auto;
+  border-radius: 0.5rem;
+  margin: 1rem 0;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.diggo-richtext {
+  margin: 1rem 0;
+}
+
+.diggo-richtext p {
+  margin-bottom: 1rem;
+}
+
+.diggo-card {
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.diggo-card .diggo-title {
+  font-size: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.diggo-card .diggo-subtitle {
+  font-size: 1rem;
+  color: #6b7280;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+/* Navigation Styles */
+.menu {
+  display: flex;
+}
+
+.menu-list {
+  display: flex;
+  list-style: none;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.menu-item {
+  position: relative;
+}
+
+.menu-link {
+  color: #374151;
+  text-decoration: none;
+  font-weight: 500;
+  padding: 0.5rem 0;
+  transition: color 0.2s;
+}
+
+.menu-link:hover {
+  color: #3b82f6;
+}
+
+.menu-link[aria-current='page'] {
+  color: #3b82f6;
+  border-bottom: 2px solid #3b82f6;
+}
+
+.menu-item ul {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0;
+  min-width: 150px;
+  list-style: none;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.menu-item:hover > ul {
+  display: block;
+}
+
+.menu-item ul li {
+  padding: 0.25rem 1rem;
+}

package/templates/full/app/layout.tsx

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+import { DiggoProvider } from '@/components/DiggoProvider';
+import './globals.css';
+
+export const metadata = {
+  title: {
+    template: '%s | My DiggoCMS App',
+    default: 'My DiggoCMS App',
+  },
+  description: 'Built with DiggoCMS SDK',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}): ReactElement {
+  return (
+    <html lang="en">
+      <body>
+        <DiggoProvider>{children}</DiggoProvider>
+      </body>
+    </html>
+  );
+}

package/templates/full/app/page.tsx

@@ -0,0 +1,6 @@
+import type { ReactElement } from 'react';
+import { redirect } from 'next/navigation';
+
+export default function HomePage(): ReactElement {
+  redirect('/home');
+}

package/templates/full/components/DiggoProvider.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import type { ReactElement, ReactNode } from 'react';
+import { DiggoProvider as SDKProvider } from '@digitalygo/diggocms-sdk-core';
+import { sdkConfig } from '@/lib/diggo-config';
+
+interface DiggoProviderWrapperProps {
+  children: ReactNode;
+}
+
+export function DiggoProvider({
+  children,
+}: DiggoProviderWrapperProps): ReactElement {
+  return <SDKProvider config={sdkConfig}>{children}</SDKProvider>;
+}

package/templates/full/components/ExtendedCard.tsx

@@ -0,0 +1,15 @@
+import type { CardProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+import { ExtendedTitle } from './ExtendedTitle';
+import { ExtendedSubtitle } from './ExtendedSubtitle';
+import { ExtendedRichtext } from './ExtendedRichtext';
+
+export function ExtendedCard({ title, subtitle, content }: CardProps): ReactElement | null {
+  return (
+    <div className="diggo-card">
+      {title && <ExtendedTitle content={title} />}
+      {subtitle && <ExtendedSubtitle content={subtitle} />}
+      {content && <ExtendedRichtext content={content} />}
+    </div>
+  );
+}

package/templates/full/components/ExtendedImage.tsx

@@ -0,0 +1,16 @@
+import type { ImageProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+
+export function ExtendedImage({ src, alt }: ImageProps): ReactElement | null {
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt || ''}
+      className="diggo-image"
+    />
+  );
+}

package/templates/full/components/ExtendedMenuContainer.tsx

@@ -0,0 +1,10 @@
+import type { MenuContainerProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+
+export function ExtendedMenuContainer({ children }: MenuContainerProps): ReactElement {
+  return (
+    <nav className="menu">
+      <ul className="menu-list">{children}</ul>
+    </nav>
+  );
+}

package/templates/full/components/ExtendedMenuItem.tsx

@@ -0,0 +1,22 @@
+import type { MenuItemProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement, ReactNode } from 'react';
+
+interface ExtendedMenuItemProps extends MenuItemProps {
+  children?: ReactNode;
+}
+
+export function ExtendedMenuItem({
+  label,
+  href,
+  current,
+  children,
+}: ExtendedMenuItemProps): ReactElement {
+  return (
+    <li className="menu-item">
+      <a href={href} aria-current={current ? 'page' : undefined} className="menu-link">
+        {label}
+      </a>
+      {children}
+    </li>
+  );
+}

package/templates/full/components/ExtendedRichtext.tsx

@@ -0,0 +1,15 @@
+import type { RichtextProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+
+export function ExtendedRichtext({ content }: RichtextProps): ReactElement | null {
+  if (!content) {
+    return null;
+  }
+
+  return (
+    <div
+      className="diggo-richtext"
+      dangerouslySetInnerHTML={{ __html: content }}
+    />
+  );
+}

package/templates/full/components/ExtendedSubtitle.tsx

@@ -0,0 +1,10 @@
+import type { SubtitleProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+
+export function ExtendedSubtitle({ content }: SubtitleProps): ReactElement | null {
+  if (!content) {
+    return null;
+  }
+
+  return <h2 className="diggo-subtitle">{content}</h2>;
+}

package/templates/full/components/ExtendedTitle.tsx

@@ -0,0 +1,10 @@
+import type { TitleProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+
+export function ExtendedTitle({ content }: TitleProps): ReactElement | null {
+  if (!content) {
+    return null;
+  }
+
+  return <h1 className="diggo-title">{content}</h1>;
+}

package/templates/full/components/server-components.ts

@@ -0,0 +1,8 @@
+// Re-export components for server-side usage (they're server-safe pure components)
+export { ExtendedTitle } from './ExtendedTitle';
+export { ExtendedSubtitle } from './ExtendedSubtitle';
+export { ExtendedImage } from './ExtendedImage';
+export { ExtendedRichtext } from './ExtendedRichtext';
+export { ExtendedCard } from './ExtendedCard';
+export { ExtendedMenuItem } from './ExtendedMenuItem';
+export { ExtendedMenuContainer } from './ExtendedMenuContainer';

package/templates/full/lib/data-fetching.ts

@@ -0,0 +1,205 @@
+import type {
+  PagePayload,
+  CollectionPayload,
+  MenuPayload,
+} from '@digitalygo/diggocms-sdk-core';
+import { sdkConfig, isMockMode, hasBaseUrl } from './diggo-config';
+
+interface PageIndexItem {
+  id: string;
+  slug: string;
+  title: string;
+}
+
+const DEFAULT_MOCK_API_URL = 'http://localhost:3001';
+
+function getMockApiBaseUrl(): string {
+  return process.env.MOCK_API_URL ?? DEFAULT_MOCK_API_URL;
+}
+
+async function fetchFromMockApi<T>(endpoint: string): Promise<T | null> {
+  try {
+    const baseUrl = getMockApiBaseUrl();
+    const response = await fetch(`${baseUrl}${endpoint}`);
+
+    if (!response.ok) {
+      return null;
+    }
+
+    return (await response.json()) as T;
+  } catch {
+    return null;
+  }
+}
+
+async function loadPagesIndex(): Promise<PageIndexItem[]> {
+  const index = await fetchFromMockApi<PageIndexItem[]>('/pages');
+  return index ?? [];
+}
+
+export interface FetchPageResult {
+  page: PagePayload | null;
+  error: string | null;
+  usingMock: boolean;
+}
+
+export interface FetchCollectionResult {
+  collection: CollectionPayload | null;
+  error: string | null;
+  usingMock: boolean;
+}
+
+export interface FetchMenuResult {
+  menu: MenuPayload | null;
+  error: string | null;
+  usingMock: boolean;
+}
+
+function normalizeSlug(slug: string): string {
+  if (slug === 'home' || slug === '') {
+    return '';
+  }
+  return slug;
+}
+
+async function loadPageFromMockApi(slug: string): Promise<PagePayload | null> {
+  const normalizedSlug = normalizeSlug(slug);
+  const index = await loadPagesIndex();
+
+  const pageExists = index.some(
+    (item) => normalizeSlug(item.slug) === normalizedSlug
+  );
+
+  if (!pageExists) {
+    return null;
+  }
+
+  const endpoint =
+    normalizedSlug === '' ? '/pages/home' : `/pages/${normalizedSlug}`;
+
+  return fetchFromMockApi<PagePayload>(endpoint);
+}
+
+export async function fetchPageData(slug: string): Promise<FetchPageResult> {
+  if (isMockMode()) {
+    const page = await loadPageFromMockApi(slug);
+    return {
+      page,
+      error: page ? null : 'Failed to load mock page from API',
+      usingMock: true,
+    };
+  }
+
+  if (!hasBaseUrl()) {
+    return {
+      page: null,
+      error: 'BASE_URL is not configured and MOCK mode is not enabled.',
+      usingMock: false,
+    };
+  }
+
+  try {
+    const response = await fetch(`${sdkConfig.baseUrl}/pages/${slug}`);
+
+    if (!response.ok) {
+      return {
+        page: null,
+        error: `Failed to fetch page: ${response.statusText}`,
+        usingMock: false,
+      };
+    }
+
+    const page = (await response.json()) as PagePayload;
+    return { page, error: null, usingMock: false };
+  } catch {
+    return {
+      page: null,
+      error: 'Error connecting to CMS',
+      usingMock: false,
+    };
+  }
+}
+
+export async function fetchCollectionData(
+  type: string
+): Promise<FetchCollectionResult> {
+  if (isMockMode()) {
+    const collection = await fetchFromMockApi<CollectionPayload>(
+      `/collections/${type}`
+    );
+    return {
+      collection,
+      error: collection ? null : 'Failed to load mock collection from API',
+      usingMock: true,
+    };
+  }
+
+  if (!hasBaseUrl()) {
+    return {
+      collection: null,
+      error: 'BASE_URL is not configured and MOCK mode is not enabled.',
+      usingMock: false,
+    };
+  }
+
+  try {
+    const response = await fetch(`${sdkConfig.baseUrl}/collections/${type}`);
+
+    if (!response.ok) {
+      return {
+        collection: null,
+        error: `Failed to fetch collection: ${response.statusText}`,
+        usingMock: false,
+      };
+    }
+
+    const collection = (await response.json()) as CollectionPayload;
+    return { collection, error: null, usingMock: false };
+  } catch {
+    return {
+      collection: null,
+      error: 'Error connecting to CMS',
+      usingMock: false,
+    };
+  }
+}
+
+export async function fetchMenuData(key: string): Promise<FetchMenuResult> {
+  if (isMockMode()) {
+    const menu = await fetchFromMockApi<MenuPayload>(`/menus/${key}`);
+    return {
+      menu,
+      error: menu ? null : 'Failed to load mock menu from API',
+      usingMock: true,
+    };
+  }
+
+  if (!hasBaseUrl()) {
+    return {
+      menu: null,
+      error: 'BASE_URL is not configured and MOCK mode is not enabled.',
+      usingMock: false,
+    };
+  }
+
+  try {
+    const response = await fetch(`${sdkConfig.baseUrl}/menus/${key}`);
+
+    if (!response.ok) {
+      return {
+        menu: null,
+        error: `Failed to fetch menu: ${response.statusText}`,
+        usingMock: false,
+      };
+    }
+
+    const menu = (await response.json()) as MenuPayload;
+    return { menu, error: null, usingMock: false };
+  } catch {
+    return {
+      menu: null,
+      error: 'Error connecting to CMS',
+      usingMock: false,
+    };
+  }
+}