@digitalygo/create-diggocms-app 0.1.1 → 0.1.2

package/templates/with-mock/README.md

@@ -1,32 +1,31 @@
 # My DiggoCMS App
 
-A complete DiggoCMS application with mock API server for development.
+A complete DiggoCMS application with mock API server for development, built with Next.js Pages Router.
 
 ## Features
 
-- Dynamic routing with `[...slug]` pattern
-- Extended components for the current supported standalone types: title, image, text, video, gallery, and card
-- Navigation with dropdown support
-- Built-in mock API server
-- Sample fixtures included
-- Mock mode for development
-- Error handling and loading states
+- Next.js 16 with Pages Router
+- Static Site Generation (SSG) with `getStaticProps`/`getStaticPaths`
+- Tailwind CSS for styling
+- Hot reload via `next dev`
+- Extended components for all supported types: title, image, text, video, gallery, and card
+- Navigation components with dropdown support
+- Built-in mock API server (runs with tsx, works with any package manager)
+- Sample fixtures aligned with SDK payload model
+- Mock mode indicator during development
 
 ## Quick Start
 
 1. Copy `.env.local.example` to `.env.local`:
+
    ```bash
    cp .env.local.example .env.local
    ```
 
-2. Install dependencies:
-   ```bash
-   bun install
-   # or
-   npm install
-   ```
+2. Install dependencies using your chosen package manager.
 
 3. Start the mock API and dev server:
+
    ```bash
    bun run dev:mock
    # or run separately:
@@ -34,13 +33,15 @@ A complete DiggoCMS application with mock API server for development.
    bun run dev       # Terminal 2
    ```
 
+   With npm, yarn, or pnpm, use: `npm run dev:mock`, `yarn dev:mock`, or `pnpm run dev:mock`.
+
 4. Open [http://localhost:3000](http://localhost:3000) in your browser.
 
 ## Available Pages
 
 The mock API includes these sample pages:
 
-- `/` - Home page with title, text, image, video, gallery, and card payloads
+- `/` or `/home` - Home page with title, text, image, video, gallery, and card payloads
 - `/chi-siamo` - About page with title, text, and image payloads
 - `/contatti` - Contact page with title, text, and card payloads
 
@@ -48,11 +49,13 @@ The mock API includes these sample pages:
 
 | Script | Description |
 |--------|-------------|
-| `bun run dev` | Start Next.js dev server only |
-| `bun run build` | Build for production |
-| `bun run start` | Start production server |
-| `bun run mock:api` | Start mock API server only |
-| `bun run dev:mock` | Start mock API and dev server together |
+| `dev` | Start Next.js dev server only |
+| `build` | Build for production |
+| `start` | Start production server |
+| `lint` | Run ESLint |
+| `typecheck` | Run TypeScript check |
+| `mock:api` | Start mock API server only |
+| `dev:mock` | Start mock API and dev server together |
 
 ## Mock API Endpoints
 
@@ -65,13 +68,7 @@ The mock server provides these endpoints:
 
 ## Project Structure
 
-```
-app/                  # Next.js app router
-├── [...slug]/        # Dynamic catch-all route
-├── layout.tsx        # Root layout with DiggoProvider
-├── page.tsx          # Home redirect
-└── globals.css       # Global styles
-
+```text
 components/           # React components
 ├── DiggoProvider.tsx
 ├── server-components.ts
@@ -85,10 +82,15 @@ components/           # React components
 └── ExtendedMenuContainer.tsx
 
 lib/                  # Utility functions
-├── diggo-config.ts
-└── data-fetching.ts
+├── diggo-config.ts   # SDK configuration
+└── data-fetching.ts  # Data fetching helpers
 
-fixtures/             # Mock data
+pages/                # Next.js pages (Pages Router)
+├── _app.tsx          # App wrapper with DiggoProvider
+├── index.tsx         # Home redirect
+└── [...slug].tsx     # Dynamic catch-all route
+
+fixtures/             # Mock data (optional, CLI-configurable)
 ├── pages/
 │   ├── index.json    # Pages list
 │   ├── home.json     # Home page
@@ -99,6 +101,10 @@ fixtures/             # Mock data
 
 scripts/
 └── mock-server.ts    # Mock API server
+
+public/               # Static assets
+styles/               # Global styles
+└── globals.css       # Tailwind + component styles
 ```
 
 ## Switching to Real API
@@ -106,26 +112,45 @@ scripts/
 To use a real CMS API instead of mock data:
 
 1. Update `.env.local`:
+
    ```env
    BASE_URL=https://your-cms-api.com
    MOCK=0
    ```
 
 2. Restart the dev server:
+
    ```bash
    bun run dev
    ```
 
+   Or use npm, yarn, or pnpm: `npm run dev`, `yarn dev`, `pnpm run dev`.
+
+## CLI Options
+
+When creating a project with `create-diggocms-app`, you can choose:
+
+- **Template**: `minimal`, `full`, or `with-mock`
+- **Package manager**: `bun` (default), `npm`, `yarn`, or `pnpm`
+- **Fixtures** (with-mock only): Include or exclude sample fixtures
+
+## SSG Configuration
+
+Pages are automatically pre-generated at build time from the fixtures when using mock mode. For production with a real API, update `getStaticPaths` in `pages/[...slug].tsx` to fetch from your CMS.
+
 ## Customization
 
 1. **Edit fixtures** - Modify files in `fixtures/` to change content
 2. **Add components** - Create new components in `components/` and register in `lib/diggo-config.ts`
-3. **Update styles** - Edit `app/globals.css` or component styles
+3. **Update styles** - Edit `styles/globals.css` or component styles
 4. **Extend mock API** - Add new routes in `scripts/mock-server.ts`
 
-Standalone page fixtures intentionally avoid deprecated `subtitle` and `richtext` component entries. Card fixtures may still use card-specific fields such as `richtext` because that remains part of the card contract.
+## Fixture Notes
+
+Page fixtures intentionally use only the current supported component types: `title`, `text`, `image`, `video`, `gallery`, and `card`. Deprecated types like `subtitle` and `richtext` (as standalone components) are excluded from page fixtures. Card components may still use card-specific fields like `richtext` as part of the card data structure.
 
 ## Documentation
 
 - [DiggoCMS SDK Documentation](https://github.com/digitalygo/diggocms-sdk)
-- [Next.js Documentation](https://nextjs.org/docs)
+- [Next.js Pages Router Documentation](https://nextjs.org/docs/pages)
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)

package/templates/with-mock/lib/data-fetching.ts

@@ -32,7 +32,7 @@ async function fetchFromMockApi<T>(endpoint: string): Promise<T | null> {
   }
 }
 
-async function loadPagesIndex(): Promise<PageIndexItem[]> {
+export async function loadPagesIndex(): Promise<PageIndexItem[]> {
   const index = await fetchFromMockApi<PageIndexItem[]>('/pages');
   return index ?? [];
 }

package/templates/with-mock/lib/diggo-config.ts

@@ -1,5 +1,6 @@
 import type { ComponentRegistry, NavigationRegistry, DiggoConfig } from '@digitalygo/diggocms-sdk-core';
 import {
+  ExtendedTitle,
   ExtendedImage,
   ExtendedText,
   ExtendedVideo,
@@ -10,6 +11,7 @@ import {
 } from '@/components/server-components';
 
 export const componentsRegistry = {
+  title: ExtendedTitle,
   image: ExtendedImage,
   text: ExtendedText,
   video: ExtendedVideo,

package/templates/with-mock/package.json

@@ -9,8 +9,8 @@
     "start": "next start",
     "lint": "next lint",
     "typecheck": "tsc --noEmit",
-    "mock:api": "bun run scripts/mock-server.ts",
-    "dev:mock": "bun run mock:api & next dev"
+    "mock:api": "tsx scripts/mock-server.ts",
+    "dev:mock": "concurrently \"pm run mock:api\" \"pm run dev\""
   },
   "dependencies": {
     "@digitalygo/diggocms-sdk-core": "^0.1.0",
@@ -22,6 +22,11 @@
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "concurrently": "^9.0.0",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "tsx": "^4.0.0",
     "typescript": "^5.5.0"
   }
 }

package/templates/with-mock/pages/[...slug].tsx

@@ -0,0 +1,103 @@
+import type { GetStaticPaths, GetStaticProps } from 'next';
+import type { PagePayload } from '@digitalygo/diggocms-sdk-core';
+import { useRouter } from 'next/router';
+import Head from 'next/head';
+import { renderPage } from '@digitalygo/diggocms-sdk-core/server';
+import { componentsRegistry, isMockMode } from '@/lib/diggo-config';
+import { fetchPageData, FetchPageResult, loadPagesIndex } from '@/lib/data-fetching';
+
+interface CatchAllPageProps {
+  page: PagePayload | null;
+  error: string | null;
+  usingMock: boolean;
+}
+
+export default function CatchAllPage({ page, error, usingMock }: CatchAllPageProps) {
+  const router = useRouter();
+
+  if (router.isFallback) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg text-gray-600">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!page) {
+    return (
+      <main className="max-w-5xl mx-auto p-8">
+        <h1 className="text-3xl font-bold text-gray-900 mb-4">Page Not Found</h1>
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-800 p-4 rounded">
+            {error}
+          </div>
+        )}
+      </main>
+    );
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{page.title || 'My DiggoCMS App'}</title>
+        <meta name="description" content={page.title || 'DiggoCMS powered page'} />
+      </Head>
+      {usingMock && (
+        <div className="mock-indicator">
+          Mock Mode
+        </div>
+      )}
+      <main className="max-w-5xl mx-auto p-8">
+        {error && (
+          <div className="bg-yellow-50 border border-yellow-200 text-yellow-800 p-4 mb-6 rounded">
+            <strong className="font-semibold">Warning:</strong> {error}
+          </div>
+        )}
+        {renderPage(page, componentsRegistry)}
+      </main>
+    </>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  if (isMockMode()) {
+    try {
+      const pages = await loadPagesIndex();
+      return {
+        paths: pages.map((page) => ({
+          params: { 
+            slug: page.slug === '' ? ['home'] : page.slug.split('/') 
+          },
+        })),
+        fallback: 'blocking',
+      };
+    } catch {}
+  }
+
+  return {
+    paths: [],
+    fallback: 'blocking',
+  };
+};
+
+export const getStaticProps: GetStaticProps<CatchAllPageProps> = async ({ params }) => {
+  const slugArray = params?.slug as string[] | undefined;
+  const slug = Array.isArray(slugArray) ? slugArray.join('/') : 'home';
+
+  const { page, error, usingMock }: FetchPageResult = await fetchPageData(slug);
+
+  if (!page) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      page,
+      error,
+      usingMock,
+    },
+    revalidate: isMockMode() ? false : 60,
+  };
+};

package/templates/with-mock/pages/_app.tsx

@@ -0,0 +1,11 @@
+import type { AppProps } from 'next/app';
+import { DiggoProvider } from '@/components/DiggoProvider';
+import '@/styles/globals.css';
+
+export default function App({ Component, pageProps }: AppProps) {
+  return (
+    <DiggoProvider>
+      <Component {...pageProps} />
+    </DiggoProvider>
+  );
+}

package/templates/with-mock/pages/index.tsx

@@ -0,0 +1,14 @@
+import type { GetStaticProps } from 'next';
+
+export default function HomePage() {
+  return null;
+}
+
+export const getStaticProps: GetStaticProps = async () => {
+  return {
+    redirect: {
+      destination: '/home',
+      permanent: false,
+    },
+  };
+};

package/templates/with-mock/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/with-mock/scripts/mock-server.ts

@@ -1,9 +1,3 @@
-#!/usr/bin/env bun
-/**
- * Standalone mock API server for DiggoCMS SDK.
- * Serves fixtures as REST API endpoints for local development.
- */
-
 import { createServer, type IncomingMessage, type ServerResponse } from 'http';
 import { readFile } from 'fs/promises';
 import { join } from 'path';

package/templates/with-mock/styles/globals.css

@@ -0,0 +1,86 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  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;
+}
+
+/* DiggoCMS Component Styles */
+.diggo-title {
+  @apply text-3xl font-bold mb-4 text-gray-900;
+}
+
+.diggo-text {
+  @apply mb-4 text-gray-700 leading-relaxed;
+}
+
+.diggo-image {
+  @apply max-w-full h-auto rounded-lg shadow-md mb-6;
+}
+
+.diggo-video-block {
+  @apply mb-6;
+}
+
+.diggo-video {
+  @apply w-full rounded-lg shadow-md;
+}
+
+.diggo-media-caption {
+  @apply text-sm text-gray-600 mt-2 text-center;
+}
+
+.diggo-gallery {
+  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6;
+}
+
+.diggo-gallery-image {
+  @apply w-full h-48 object-cover rounded-lg shadow-md;
+}
+
+.diggo-gallery-video {
+  @apply w-full h-48 rounded-lg shadow-md;
+}
+
+.diggo-card {
+  @apply border border-gray-200 rounded-lg p-6 shadow-sm mb-6 bg-white;
+}
+
+.diggo-card-link {
+  @apply inline-block mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors;
+}
+
+/* Navigation Styles */
+.menu {
+  @apply bg-gray-100 py-4 mb-8;
+}
+
+.menu-list {
+  @apply flex flex-wrap gap-6 max-w-5xl mx-auto px-8 list-none;
+}
+
+.menu-item {
+  @apply relative;
+}
+
+.menu-link {
+  @apply text-gray-700 hover:text-blue-600 font-medium transition-colors;
+}
+
+.menu-link[aria-current="page"] {
+  @apply text-blue-600 font-semibold;
+}
+
+/* Mock Mode Indicator */
+.mock-indicator {
+  @apply fixed bottom-4 right-4 bg-blue-600 text-white px-3 py-1 rounded text-sm font-medium shadow-lg z-50;
+}

package/templates/with-mock/tailwind.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
+
+export default config;

package/templates/with-mock/tsconfig.json

@@ -14,10 +14,11 @@
     "jsx": "preserve",
     "incremental": true,
     "plugins": [{ "name": "next" }],
+    "baseUrl": ".",
     "paths": {
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
 }

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

@@ -1,115 +0,0 @@
-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>
-  );
-}