@digitalygo/create-diggocms-app 0.1.1 → 0.1.3

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

@@ -1,31 +1,59 @@
 import type { PagePayload } from '@digitalygo/diggocms-sdk-core';
 import { sdkConfig, isMockMode, hasBaseUrl } from './diggo-config';
 
+const FETCH_TIMEOUT_MS = 5000;
+
 export interface FetchPageResult {
   page: PagePayload | null;
   error: string | null;
 }
 
+async function fetchWithTimeout(
+  url: string,
+  timeoutMs: number
+): Promise<Response> {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    clearTimeout(timeoutId);
+    return response;
+  } catch (error) {
+    clearTimeout(timeoutId);
+    if (error instanceof Error && error.name === 'AbortError') {
+      throw new Error(`Request timeout after ${timeoutMs}ms`);
+    }
+    throw error;
+  }
+}
+
 export async function fetchPageData(slug: string): Promise<FetchPageResult> {
   if (isMockMode()) {
-    // Mock mode: fetch from local mock API
     try {
       const mockApiUrl = process.env.MOCK_API_URL ?? 'http://localhost:3001';
-      const response = await fetch(`${mockApiUrl}/pages/${slug}`);
-      
+      const response = await fetchWithTimeout(
+        `${mockApiUrl}/pages/${slug}`,
+        FETCH_TIMEOUT_MS
+      );
+
       if (!response.ok) {
         return {
           page: null,
           error: `Mock API returned ${response.status}`,
         };
       }
-      
+
       const page = (await response.json()) as PagePayload;
       return { page, error: null };
-    } catch {
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : 'Unknown error';
       return {
         page: null,
-        error: 'Failed to connect to mock API. Is it running?',
+        error: errorMessage.includes('timeout')
+          ? 'Mock API request timed out. Is the server running?'
+          : 'Failed to connect to mock API. Is it running?',
       };
     }
   }
@@ -37,23 +65,29 @@ export async function fetchPageData(slug: string): Promise<FetchPageResult> {
     };
   }
 
-  // Real API mode: fetch from CMS
   try {
-    const response = await fetch(`${sdkConfig.baseUrl}/pages/${slug}`);
-    
+    const response = await fetchWithTimeout(
+      `${sdkConfig.baseUrl}/pages/${slug}`,
+      FETCH_TIMEOUT_MS
+    );
+
     if (!response.ok) {
       return {
         page: null,
         error: `CMS returned ${response.status}`,
       };
     }
-    
+
     const page = (await response.json()) as PagePayload;
     return { page, error: null };
-  } catch {
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Unknown error';
     return {
       page: null,
-      error: 'Error connecting to CMS',
+      error: errorMessage.includes('timeout')
+        ? 'Request to CMS timed out. Please check your BASE_URL and network connection.'
+        : 'Error connecting to CMS',
     };
   }
 }

package/templates/minimal/lib/diggo-config.ts

@@ -1,12 +1,9 @@
 import type { ComponentRegistry, NavigationRegistry, DiggoConfig } from '@digitalygo/diggocms-sdk-core';
 
-// Add your custom components here
 export const componentsRegistry: ComponentRegistry = {
-  // Example: title: ExtendedTitle,
 };
 
 export const navigationRegistry: NavigationRegistry = {
-  // Example: MenuItem: ExtendedMenuItem,
 };
 
 const isMock = process.env.MOCK === '1';
@@ -17,7 +14,7 @@ function getBaseUrl(): string {
   if (isMock) {
     return mockApiUrl ?? 'http://localhost:3001';
   }
-  return baseUrl ?? 'http://placeholder.local';
+  return baseUrl ?? '';
 }
 
 export const sdkConfig: DiggoConfig = {
@@ -31,5 +28,5 @@ export function isMockMode(): boolean {
 }
 
 export function hasBaseUrl(): boolean {
-  return !!baseUrl;
+  return !!baseUrl && baseUrl.length > 0;
 }

package/templates/minimal/package.json

@@ -2,7 +2,6 @@
   "name": "my-diggocms-app",
   "version": "0.1.0",
   "private": true,
-  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -20,6 +19,9 @@
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
     "typescript": "^5.5.0"
   }
 }

package/templates/minimal/pages/[...slug].tsx

@@ -0,0 +1,73 @@
+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 } from '@/lib/diggo-config';
+import { fetchPageData, FetchPageResult } from '@/lib/data-fetching';
+
+interface CatchAllPageProps {
+  page: PagePayload | null;
+  error: string | null;
+}
+
+export default function CatchAllPage({ page, error }: CatchAllPageProps) {
+  const router = useRouter();
+
+  if (router.isFallback) {
+    return <div className="p-8 text-center">Loading...</div>;
+  }
+
+  if (!page) {
+    return (
+      <main className="max-w-5xl mx-auto p-8">
+        <h1 className="text-2xl font-bold mb-4">Page Not Found</h1>
+        {error && <p className="text-red-600">{error}</p>}
+      </main>
+    );
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{page.title || 'My DiggoCMS App'}</title>
+      </Head>
+      <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>Warning:</strong> {error}
+          </div>
+        )}
+        {renderPage(page, componentsRegistry)}
+      </main>
+    </>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  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 }: FetchPageResult = await fetchPageData(slug);
+
+  if (!page) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      page,
+      error,
+    },
+    revalidate: 60,
+  };
+};

package/templates/minimal/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/minimal/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/minimal/postcss.config.js

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

package/templates/minimal/{app → styles}/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 * {
   margin: 0;
   padding: 0;

package/templates/minimal/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/minimal/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/with-mock/.env.local.example

@@ -2,8 +2,9 @@
 # Copy this file to .env.local and update the values
 
 # CMS API Configuration
-# Set your DiggoCMS API base URL (not needed in mock mode)
-BASE_URL=https://your-cms-api.com
+# Set your DiggoCMS API base URL (only needed when not using mock mode)
+# Example: BASE_URL=https://cms.example.com
+BASE_URL=
 
 # Mock Mode
 # Set to 1 to use the local mock API server

package/templates/with-mock/README.md

@@ -1,32 +1,32 @@
 # 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
+- Header renders the main menu from mock API data (or CMS when configured)
+- 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 +34,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 +50,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 +69,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 +83,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
+
+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
+fixtures/             # Mock data (optional, CLI-configurable)
 ├── pages/
 │   ├── index.json    # Pages list
 │   ├── home.json     # Home page
@@ -99,6 +102,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 +113,47 @@ 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
    ```
 
+   Note: `BASE_URL` defaults to empty. You must set a valid URL. Requests timeout after 5 seconds if the server is unreachable.
+
 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/components/PageLayout.tsx

@@ -0,0 +1,40 @@
+import type { MenuPayload } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement, ReactNode } from 'react';
+import { renderMenu } from '@digitalygo/diggocms-sdk-core/server';
+import { navigationRegistry } from '@/lib/diggo-config';
+
+interface PageLayoutProps {
+  children: ReactNode;
+  menu: MenuPayload | null;
+  menuError: string | null;
+}
+
+export function PageLayout({ children, menu, menuError }: PageLayoutProps): ReactElement {
+  return (
+    <div className="page-shell">
+      <header className="site-header">
+        <div className="site-header__inner">
+          <a href="/home" className="site-brand">
+            DiggoCMS Demo
+          </a>
+          <div className="site-nav">
+            {menu ? (
+              renderMenu(menu, navigationRegistry)
+            ) : (
+              <div className="menu-fallback" role="status">
+                Menu unavailable
+              </div>
+            )}
+          </div>
+        </div>
+        {menuError && (
+          <div className="menu-alert" role="status">
+            {menuError}
+          </div>
+        )}
+      </header>
+
+      <main className="page-content">{children}</main>
+    </div>
+  );
+}

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

@@ -12,15 +12,39 @@ interface PageIndexItem {
 }
 
 const DEFAULT_MOCK_API_URL = 'http://localhost:3001';
+const FETCH_TIMEOUT_MS = 5000;
 
 function getMockApiBaseUrl(): string {
   return process.env.MOCK_API_URL ?? DEFAULT_MOCK_API_URL;
 }
 
+async function fetchWithTimeout(
+  url: string,
+  timeoutMs: number
+): Promise<Response> {
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+
+  try {
+    const response = await fetch(url, { signal: controller.signal });
+    clearTimeout(timeoutId);
+    return response;
+  } catch (error) {
+    clearTimeout(timeoutId);
+    if (error instanceof Error && error.name === 'AbortError') {
+      throw new Error(`Request timeout after ${timeoutMs}ms`);
+    }
+    throw error;
+  }
+}
+
 async function fetchFromMockApi<T>(endpoint: string): Promise<T | null> {
   try {
     const baseUrl = getMockApiBaseUrl();
-    const response = await fetch(`${baseUrl}${endpoint}`);
+    const response = await fetchWithTimeout(
+      `${baseUrl}${endpoint}`,
+      FETCH_TIMEOUT_MS
+    );
 
     if (!response.ok) {
       return null;
@@ -32,7 +56,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 ?? [];
 }
@@ -99,7 +123,10 @@ export async function fetchPageData(slug: string): Promise<FetchPageResult> {
   }
 
   try {
-    const response = await fetch(`${sdkConfig.baseUrl}/pages/${slug}`);
+    const response = await fetchWithTimeout(
+      `${sdkConfig.baseUrl}/pages/${slug}`,
+      FETCH_TIMEOUT_MS
+    );
 
     if (!response.ok) {
       return {
@@ -111,10 +138,14 @@ export async function fetchPageData(slug: string): Promise<FetchPageResult> {
 
     const page = (await response.json()) as PagePayload;
     return { page, error: null, usingMock: false };
-  } catch {
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Unknown error';
     return {
       page: null,
-      error: 'Error connecting to CMS',
+      error: errorMessage.includes('timeout')
+        ? 'Request to CMS timed out. Please check your BASE_URL and network connection.'
+        : 'Error connecting to CMS',
       usingMock: false,
     };
   }
@@ -143,7 +174,10 @@ export async function fetchCollectionData(
   }
 
   try {
-    const response = await fetch(`${sdkConfig.baseUrl}/collections/${type}`);
+    const response = await fetchWithTimeout(
+      `${sdkConfig.baseUrl}/collections/${type}`,
+      FETCH_TIMEOUT_MS
+    );
 
     if (!response.ok) {
       return {
@@ -155,10 +189,14 @@ export async function fetchCollectionData(
 
     const collection = (await response.json()) as CollectionPayload;
     return { collection, error: null, usingMock: false };
-  } catch {
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Unknown error';
     return {
       collection: null,
-      error: 'Error connecting to CMS',
+      error: errorMessage.includes('timeout')
+        ? 'Request to CMS timed out. Please check your BASE_URL and network connection.'
+        : 'Error connecting to CMS',
       usingMock: false,
     };
   }
@@ -183,7 +221,10 @@ export async function fetchMenuData(key: string): Promise<FetchMenuResult> {
   }
 
   try {
-    const response = await fetch(`${sdkConfig.baseUrl}/menus/${key}`);
+    const response = await fetchWithTimeout(
+      `${sdkConfig.baseUrl}/menus/${key}`,
+      FETCH_TIMEOUT_MS
+    );
 
     if (!response.ok) {
       return {
@@ -195,10 +236,14 @@ export async function fetchMenuData(key: string): Promise<FetchMenuResult> {
 
     const menu = (await response.json()) as MenuPayload;
     return { menu, error: null, usingMock: false };
-  } catch {
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : 'Unknown error';
     return {
       menu: null,
-      error: 'Error connecting to CMS',
+      error: errorMessage.includes('timeout')
+        ? 'Request to CMS timed out. Please check your BASE_URL and network connection.'
+        : 'Error connecting to CMS',
       usingMock: false,
     };
   }