@digitalygo/create-diggocms-app 0.1.1 → 0.1.3

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

@@ -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,
@@ -31,7 +33,7 @@ function getBaseUrl(): string {
     return mockApiUrl ?? 'http://localhost:3001';
   }
 
-  return baseUrl ?? 'http://placeholder.local';
+  return baseUrl ?? '';
 }
 
 export const sdkConfig: DiggoConfig = {
@@ -45,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",
@@ -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/full/pages/[...slug].tsx

@@ -0,0 +1,93 @@
+import type { GetStaticPaths, GetStaticProps } from 'next';
+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 { 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, menu, menuError }: 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 (
+      <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>
+        )}
+      </PageLayout>
+    );
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{page.title || 'My DiggoCMS App'}</title>
+        <meta name="description" content={page.title || 'DiggoCMS powered page'} />
+      </Head>
+      <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)}
+      </PageLayout>
+    </>
+  );
+}
+
+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 }, { menu, error: menuError }]: [FetchPageResult, FetchMenuResult] =
+    await Promise.all([fetchPageData(slug), fetchMenuData('main')]);
+
+  if (!page) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: {
+      page,
+      error,
+      menu,
+      menuError,
+    },
+    revalidate: 60,
+  };
+};

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

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

package/templates/full/styles/globals.css

@@ -0,0 +1,113 @@
+@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;
+}
+
+.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;
+}
+
+.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 w-full;
+}
+
+.menu-list {
+  @apply flex flex-wrap gap-4 items-center justify-start md:justify-end 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;
+}
+
+.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/full/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/full/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/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

@@ -1,26 +1,37 @@
 # My DiggoCMS App
 
-A minimal DiggoCMS application built with Next.js and the DiggoCMS SDK.
+A minimal DiggoCMS application built with Next.js Pages Router and the DiggoCMS SDK.
+
+## Features
+
+- Next.js 16 with Pages Router
+- Static Site Generation (SSG) with `getStaticProps`/`getStaticPaths`
+- Tailwind CSS for styling
+- Hot reload via `next dev`
+- DiggoCMS SDK integration
 
 ## Getting Started
 
 1. Copy `.env.local.example` to `.env.local` and configure your environment:
+
    ```bash
    cp .env.local.example .env.local
    ```
 
 2. Install dependencies:
+
    ```bash
-   npm install
-   # or
    bun install
+   # or
+   npm install
    ```
 
 3. Run the development server:
+
    ```bash
-   npm run dev
-   # or
    bun run dev
+   # or
+   npm run dev
    ```
 
 4. Open [http://localhost:3000](http://localhost:3000) in your browser.
@@ -29,29 +40,50 @@ A minimal DiggoCMS application built with Next.js and the DiggoCMS SDK.
 
 ### 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 local fixtures:
+Enable mock mode to use a local mock API:
+
 ```env
 MOCK=1
 MOCK_API_URL=http://localhost:3001
 ```
 
+When `MOCK=1`, the `BASE_URL` setting is ignored.
+
 ## Project Structure
 
-```
-app/              # Next.js app router
+```text
 components/       # React components (add your extended components here)
 lib/              # Utility functions and SDK configuration
+pages/            # Next.js pages (Pages Router)
+├── _app.tsx      # App wrapper with DiggoProvider
+├── index.tsx     # Home redirect
+└── [...slug].tsx # Dynamic catch-all route
 public/           # Static assets
+styles/           # Global styles
+├── globals.css   # Tailwind imports + global styles
 ```
 
+## Scripts
+
+| Script | Description |
+|--------|-------------|
+| `bun run dev` | Start development server with hot reload |
+| `bun run build` | Build for static export |
+| `bun run start` | Start production server |
+| `bun run lint` | Run ESLint |
+| `bun run typecheck` | Run TypeScript check |
+
 ## Next Steps
 
 This is a minimal template. To extend it:
@@ -60,8 +92,10 @@ This is a minimal template. To extend it:
 2. Register them in `lib/diggo-config.ts`
 3. Add navigation components if needed
 4. Set up your CMS API or mock server
+5. Configure `getStaticPaths` in `[...slug].tsx` to pre-generate pages at build time
 
 ## 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)