@digitalygo/create-diggocms-app 0.1.0

package/templates/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/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/with-mock/fixtures/collection.json

@@ -0,0 +1,28 @@
+{
+  "type": "posts",
+  "items": [
+    {
+      "id": "1",
+      "title": "Getting Started with DiggoCMS",
+      "excerpt": "Learn how to set up your first DiggoCMS project",
+      "image": "https://via.placeholder.com/400x200/3b82f6/ffffff?text=Getting+Started"
+    },
+    {
+      "id": "2",
+      "title": "Building Custom Components",
+      "excerpt": "Create your own components for the SDK",
+      "image": "https://via.placeholder.com/400x200/10b981/ffffff?text=Custom+Components"
+    },
+    {
+      "id": "3",
+      "title": "Working with Mock Data",
+      "excerpt": "Develop without a backend using our mock API",
+      "image": "https://via.placeholder.com/400x200/f59e0b/ffffff?text=Mock+Data"
+    }
+  ],
+  "pagination": {
+    "page": 1,
+    "totalPages": 1,
+    "totalItems": 3
+  }
+}

package/templates/with-mock/fixtures/menu.json

@@ -0,0 +1,29 @@
+{
+  "key": "main",
+  "items": [
+    {
+      "id": "menu-home",
+      "label": "Home",
+      "href": "/",
+      "active": false,
+      "current": false,
+      "children": []
+    },
+    {
+      "id": "menu-chi-siamo",
+      "label": "Chi Siamo",
+      "href": "/chi-siamo",
+      "active": false,
+      "current": false,
+      "children": []
+    },
+    {
+      "id": "menu-contatti",
+      "label": "Contatti",
+      "href": "/contatti",
+      "active": false,
+      "current": false,
+      "children": []
+    }
+  ]
+}

package/templates/with-mock/fixtures/pages/chi-siamo.json

@@ -0,0 +1,37 @@
+{
+  "id": "chi-siamo",
+  "slug": "chi-siamo",
+  "title": "Chi Siamo",
+  "components": [
+    {
+      "type": "title",
+      "data": {
+        "content": "Chi Siamo"
+      }
+    },
+    {
+      "type": "subtitle",
+      "data": {
+        "content": "About Our Company"
+      }
+    },
+    {
+      "type": "richtext",
+      "data": {
+        "content": "<p>We are a team of passionate developers building the next generation of headless CMS tools. DiggoCMS provides a flexible, developer-friendly platform for content management.</p>"
+      }
+    },
+    {
+      "type": "subtitle",
+      "data": {
+        "content": "Our Mission"
+      }
+    },
+    {
+      "type": "richtext",
+      "data": {
+        "content": "<p>To simplify content management for developers while providing powerful features for content editors.</p>"
+      }
+    }
+  ]
+}

package/templates/with-mock/fixtures/pages/contatti.json

@@ -0,0 +1,33 @@
+{
+  "id": "contatti",
+  "slug": "contatti",
+  "title": "Contatti",
+  "components": [
+    {
+      "type": "title",
+      "data": {
+        "content": "Contatti"
+      }
+    },
+    {
+      "type": "subtitle",
+      "data": {
+        "content": "Get in Touch"
+      }
+    },
+    {
+      "type": "richtext",
+      "data": {
+        "content": "<p>Have questions? We'd love to hear from you.</p><p><strong>Email:</strong> hello@example.com<br><strong>Phone:</strong> +1 234 567 890</p>"
+      }
+    },
+    {
+      "type": "card",
+      "data": {
+        "title": "Office Location",
+        "subtitle": "Headquarters",
+        "content": "<p>123 Developer Street<br>Tech City, TC 12345<br>United States</p>"
+      }
+    }
+  ]
+}

package/templates/with-mock/fixtures/pages/home.json

@@ -0,0 +1,62 @@
+{
+  "id": "home",
+  "slug": "home",
+  "title": "Welcome to DiggoCMS",
+  "components": [
+    {
+      "type": "title",
+      "data": {
+        "content": "Welcome to DiggoCMS"
+      }
+    },
+    {
+      "type": "subtitle",
+      "data": {
+        "content": "Your headless CMS powered by React & Next.js"
+      }
+    },
+    {
+      "type": "richtext",
+      "data": {
+        "content": "<p>This is a sample page rendered from a <strong>mock API</strong>. All content comes from JSON fixtures in the <code>fixtures/</code> directory.</p><p>The DiggoCMS SDK automatically renders components based on the page payload.</p>"
+      }
+    },
+    {
+      "type": "image",
+      "data": {
+        "src": "https://via.placeholder.com/800x400/3b82f6/ffffff?text=DiggoCMS+Mock",
+        "alt": "DiggoCMS Mock Placeholder"
+      }
+    },
+    {
+      "type": "subtitle",
+      "data": {
+        "content": "Features"
+      }
+    },
+    {
+      "type": "card",
+      "data": {
+        "title": "Dynamic Routing",
+        "subtitle": "Built on Next.js App Router",
+        "content": "<p>Pages are rendered dynamically using the [...slug] catch-all route pattern. Each page is fetched from the CMS API.</p>"
+      }
+    },
+    {
+      "type": "card",
+      "data": {
+        "title": "Component System",
+        "subtitle": "Extensible & Type-Safe",
+        "content": "<p>Components are registered in a type-safe registry. Extend base components or create your own custom ones.</p>"
+      }
+    },
+    {
+      "type": "card",
+      "data": {
+        "title": "Mock API",
+        "subtitle": "Develop Without a Backend",
+        "content": "<p>The included mock server lets you develop your frontend without needing a real CMS API running.</p>"
+      }
+    }
+  ]
+}

package/templates/with-mock/fixtures/pages/index.json

@@ -0,0 +1,17 @@
+[
+  {
+    "id": "home",
+    "slug": "",
+    "title": "Welcome to DiggoCMS"
+  },
+  {
+    "id": "chi-siamo",
+    "slug": "chi-siamo",
+    "title": "Chi Siamo"
+  },
+  {
+    "id": "contatti",
+    "slug": "contatti",
+    "title": "Contatti"
+  }
+]