@digitalygo/create-diggocms-app 0.1.2 → 0.1.3

package/README.md

@@ -123,6 +123,8 @@ MOCK=1
 MOCK_API_URL=http://localhost:3001
 ```
 
+Note: `BASE_URL` must be set to a valid URL when not using mock mode. Requests will timeout after 5 seconds if the server is unreachable.
+
 ## Package Manager Support
 
 The CLI supports multiple package managers:

package/bin/cli.js

@@ -117,12 +117,6 @@ async function updatePackageJson(targetDir, projectName, packageManager) {
 
   const scripts = packageJson.scripts;
 
-  if (packageManager === 'bun') {
-    scripts.dev = scripts.dev.replace('next dev', 'bunx next dev');
-    scripts.build = scripts.build.replace('next build', 'bunx next build');
-    scripts.start = scripts.start.replace('next start', 'bunx next start');
-  }
-
   if (scripts['dev:mock']) {
     const mockCmd = {
       bun: 'bun run mock:api',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitalygo/create-diggocms-app",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "CLI tool to scaffold a new DiggoCMS project",
   "type": "module",
   "bin": {

package/templates/full/.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
-BASE_URL=https://your-cms-api.com
+# Set your DiggoCMS API base URL (required when not using mock mode)
+# Example: BASE_URL=https://cms.example.com
+BASE_URL=
 
 # Mock Mode
 # Set to 1 to use local mock data instead of a real API

package/templates/full/README.md

@@ -10,6 +10,7 @@ A complete DiggoCMS application built with Next.js Pages Router and the DiggoCMS
 - 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 CMS or mock API data
 - Error handling and mock indicators
 
 ## Getting Started
@@ -42,13 +43,15 @@ A complete DiggoCMS application built with Next.js Pages Router and the DiggoCMS
 
 ### Using a Real CMS API
 
-Set your CMS API base URL:
+Set your CMS API base URL in `.env.local`:
 
 ```env
 BASE_URL=https://your-cms-api.com
 MOCK=0
 ```
 
+Note: The template defaults to an empty `BASE_URL`. You must configure it before running in non-mock mode. Requests timeout after 5 seconds to prevent hanging.
+
 ### Using Mock Mode
 
 Enable mock mode for development without a real API:
@@ -58,6 +61,8 @@ MOCK=1
 MOCK_API_URL=http://localhost:3001
 ```
 
+When `MOCK=1`, the `BASE_URL` setting is ignored.
+
 ## Project Structure
 
 ```text

package/templates/full/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/full/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;
@@ -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,
     };
   }

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

@@ -33,7 +33,7 @@ function getBaseUrl(): string {
     return mockApiUrl ?? 'http://localhost:3001';
   }
 
-  return baseUrl ?? 'http://placeholder.local';
+  return baseUrl ?? '';
 }
 
 export const sdkConfig: DiggoConfig = {
@@ -47,5 +47,5 @@ export function isMockMode(): boolean {
 }
 
 export function hasBaseUrl(): boolean {
-  return !!baseUrl;
+  return !!baseUrl && baseUrl.length > 0;
 }

package/templates/full/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",

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

@@ -1,17 +1,25 @@
 import type { GetStaticPaths, GetStaticProps } from 'next';
-import type { PagePayload } from '@digitalygo/diggocms-sdk-core';
+import type { MenuPayload, 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';
+import { PageLayout } from '@/components/PageLayout';
+import {
+  fetchMenuData,
+  fetchPageData,
+  FetchMenuResult,
+  FetchPageResult,
+} from '@/lib/data-fetching';
 
 interface CatchAllPageProps {
   page: PagePayload | null;
   error: string | null;
+  menu: MenuPayload | null;
+  menuError: string | null;
 }
 
-export default function CatchAllPage({ page, error }: CatchAllPageProps) {
+export default function CatchAllPage({ page, error, menu, menuError }: CatchAllPageProps) {
   const router = useRouter();
 
   if (router.isFallback) {
@@ -24,14 +32,14 @@ export default function CatchAllPage({ page, error }: CatchAllPageProps) {
 
   if (!page) {
     return (
-      <main className="max-w-5xl mx-auto p-8">
+      <PageLayout menu={menu} menuError={menuError}>
         <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>
+      </PageLayout>
     );
   }
 
@@ -41,14 +49,14 @@ export default function CatchAllPage({ page, error }: CatchAllPageProps) {
         <title>{page.title || 'My DiggoCMS App'}</title>
         <meta name="description" content={page.title || 'DiggoCMS powered page'} />
       </Head>
-      <main className="max-w-5xl mx-auto p-8">
+      <PageLayout menu={menu} menuError={menuError}>
         {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>
+      </PageLayout>
     </>
   );
 }
@@ -64,7 +72,8 @@ 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);
+  const [{ page, error }, { menu, error: menuError }]: [FetchPageResult, FetchMenuResult] =
+    await Promise.all([fetchPageData(slug), fetchMenuData('main')]);
 
   if (!page) {
     return {
@@ -76,6 +85,8 @@ export const getStaticProps: GetStaticProps<CatchAllPageProps> = async ({ params
     props: {
       page,
       error,
+      menu,
+      menuError,
     },
     revalidate: 60,
   };

package/templates/full/styles/globals.css

@@ -14,6 +14,30 @@ body {
   color: #333;
 }
 
+.page-shell {
+  @apply min-h-screen bg-gray-50;
+}
+
+.site-header {
+  @apply bg-white border-b border-gray-200 shadow-sm;
+}
+
+.site-header__inner {
+  @apply max-w-5xl mx-auto px-6 py-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between;
+}
+
+.site-brand {
+  @apply text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors;
+}
+
+.site-nav {
+  @apply w-full md:w-auto;
+}
+
+.page-content {
+  @apply max-w-5xl mx-auto px-6 py-10;
+}
+
 /* DiggoCMS Component Styles */
 .diggo-title {
   @apply text-3xl font-bold mb-4 text-gray-900;
@@ -61,11 +85,11 @@ body {
 
 /* Navigation Styles */
 .menu {
-  @apply bg-gray-100 py-4 mb-8;
+  @apply w-full;
 }
 
 .menu-list {
-  @apply flex flex-wrap gap-6 max-w-5xl mx-auto px-8 list-none;
+  @apply flex flex-wrap gap-4 items-center justify-start md:justify-end list-none;
 }
 
 .menu-item {
@@ -79,3 +103,11 @@ body {
 .menu-link[aria-current="page"] {
   @apply text-blue-600 font-semibold;
 }
+
+.menu-fallback {
+  @apply text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded px-3 py-2 inline-flex items-center;
+}
+
+.menu-alert {
+  @apply bg-yellow-50 text-yellow-800 border-t border-yellow-200 px-6 py-3 text-sm;
+}

package/templates/minimal/.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
-BASE_URL=https://your-cms-api.com
+# Set your DiggoCMS API base URL (required when not using mock mode)
+# Example: BASE_URL=https://cms.example.com
+BASE_URL=
 
 # Mock Mode
 # Set to 1 to use local mock data instead of a real API

package/templates/minimal/README.md

@@ -40,13 +40,15 @@ A minimal DiggoCMS application built with Next.js Pages Router and the DiggoCMS
 
 ### Using a Real CMS API
 
-Set your CMS API base URL:
+Set your CMS API base URL in `.env.local`:
 
 ```env
 BASE_URL=https://your-cms-api.com
 MOCK=0
 ```
 
+Note: The template defaults to an empty `BASE_URL`. You must configure it before running in non-mock mode. Requests timeout after 5 seconds to prevent hanging.
+
 ### Using Mock Mode
 
 Enable mock mode to use a local mock API:
@@ -56,6 +58,8 @@ MOCK=1
 MOCK_API_URL=http://localhost:3001
 ```
 
+When `MOCK=1`, the `BASE_URL` setting is ignored.
+
 ## Project Structure
 
 ```text

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

@@ -1,30 +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()) {
     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,21 +66,28 @@ 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 {
         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

@@ -14,7 +14,7 @@ function getBaseUrl(): string {
   if (isMock) {
     return mockApiUrl ?? 'http://localhost:3001';
   }
-  return baseUrl ?? 'http://placeholder.local';
+  return baseUrl ?? '';
 }
 
 export const sdkConfig: DiggoConfig = {
@@ -28,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",

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

@@ -10,6 +10,7 @@ A complete DiggoCMS application with mock API server for development, built with
 - 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
@@ -118,6 +119,8 @@ To use a real CMS API instead of mock data:
    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

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;
@@ -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,
     };
   }

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

@@ -33,7 +33,7 @@ function getBaseUrl(): string {
     return mockApiUrl ?? 'http://localhost:3001';
   }
 
-  return baseUrl ?? 'http://placeholder.local';
+  return baseUrl ?? '';
 }
 
 export const sdkConfig: DiggoConfig = {
@@ -47,5 +47,5 @@ export function isMockMode(): boolean {
 }
 
 export function hasBaseUrl(): boolean {
-  return !!baseUrl;
+  return !!baseUrl && baseUrl.length > 0;
 }

package/templates/with-mock/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",

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

@@ -1,18 +1,27 @@
 import type { GetStaticPaths, GetStaticProps } from 'next';
-import type { PagePayload } from '@digitalygo/diggocms-sdk-core';
+import type { MenuPayload, 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';
+import { PageLayout } from '@/components/PageLayout';
+import {
+  fetchMenuData,
+  fetchPageData,
+  FetchMenuResult,
+  FetchPageResult,
+  loadPagesIndex,
+} from '@/lib/data-fetching';
 
 interface CatchAllPageProps {
   page: PagePayload | null;
   error: string | null;
   usingMock: boolean;
+  menu: MenuPayload | null;
+  menuError: string | null;
 }
 
-export default function CatchAllPage({ page, error, usingMock }: CatchAllPageProps) {
+export default function CatchAllPage({ page, error, usingMock, menu, menuError }: CatchAllPageProps) {
   const router = useRouter();
 
   if (router.isFallback) {
@@ -25,14 +34,14 @@ export default function CatchAllPage({ page, error, usingMock }: CatchAllPagePro
 
   if (!page) {
     return (
-      <main className="max-w-5xl mx-auto p-8">
+      <PageLayout menu={menu} menuError={menuError}>
         <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>
+      </PageLayout>
     );
   }
 
@@ -47,14 +56,14 @@ export default function CatchAllPage({ page, error, usingMock }: CatchAllPagePro
           Mock Mode
         </div>
       )}
-      <main className="max-w-5xl mx-auto p-8">
+      <PageLayout menu={menu} menuError={menuError}>
         {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>
+      </PageLayout>
     </>
   );
 }
@@ -84,7 +93,10 @@ 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);
+  const [{ page, error, usingMock }, { menu, error: menuError }]: [
+    FetchPageResult,
+    FetchMenuResult,
+  ] = await Promise.all([fetchPageData(slug), fetchMenuData('main')]);
 
   if (!page) {
     return {
@@ -97,6 +109,8 @@ export const getStaticProps: GetStaticProps<CatchAllPageProps> = async ({ params
       page,
       error,
       usingMock,
+      menu,
+      menuError,
     },
     revalidate: isMockMode() ? false : 60,
   };

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

@@ -14,6 +14,30 @@ body {
   color: #333;
 }
 
+.page-shell {
+  @apply min-h-screen bg-gray-50;
+}
+
+.site-header {
+  @apply bg-white border-b border-gray-200 shadow-sm;
+}
+
+.site-header__inner {
+  @apply max-w-5xl mx-auto px-6 py-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between;
+}
+
+.site-brand {
+  @apply text-lg font-semibold text-gray-900 hover:text-blue-600 transition-colors;
+}
+
+.site-nav {
+  @apply w-full md:w-auto;
+}
+
+.page-content {
+  @apply max-w-5xl mx-auto px-6 py-10;
+}
+
 /* DiggoCMS Component Styles */
 .diggo-title {
   @apply text-3xl font-bold mb-4 text-gray-900;
@@ -61,11 +85,11 @@ body {
 
 /* Navigation Styles */
 .menu {
-  @apply bg-gray-100 py-4 mb-8;
+  @apply w-full;
 }
 
 .menu-list {
-  @apply flex flex-wrap gap-6 max-w-5xl mx-auto px-8 list-none;
+  @apply flex flex-wrap gap-4 items-center justify-start md:justify-end list-none;
 }
 
 .menu-item {
@@ -80,6 +104,14 @@ body {
   @apply text-blue-600 font-semibold;
 }
 
+.menu-fallback {
+  @apply text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded px-3 py-2 inline-flex items-center;
+}
+
+.menu-alert {
+  @apply bg-yellow-50 text-yellow-800 border-t border-yellow-200 px-6 py-3 text-sm;
+}
+
 /* 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;