@digitalygo/create-diggocms-app 0.1.0 → 0.1.2

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/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 (Title, Subtitle, Image, Richtext, 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,25 +33,29 @@ 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
-- `/chi-siamo` - About page
-- `/contatti` - Contact page
+- `/` 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
 
 ## Scripts
 
 | 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,29 +68,29 @@ 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
 ├── ExtendedTitle.tsx
-├── ExtendedSubtitle.tsx
 ├── ExtendedImage.tsx
-├── ExtendedRichtext.tsx
+├── ExtendedText.tsx
+├── ExtendedVideo.tsx
+├── ExtendedGallery.tsx
 ├── ExtendedCard.tsx
 ├── ExtendedMenuItem.tsx
 └── 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
@@ -98,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
@@ -105,24 +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`
 
+## 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/ExtendedCard.tsx

@@ -1,15 +1,27 @@
 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';
+import { ExtendedImage } from './ExtendedImage';
+import { ExtendedText } from './ExtendedText';
+
+export function ExtendedCard({ title, image, content, richtext, callToAction }: CardProps): ReactElement | null {
+  const body = richtext ?? content;
+  const hasCallToAction = Boolean(callToAction?.text && callToAction?.url);
+
+  if (!title && !image?.src && !body && !hasCallToAction) {
+    return null;
+  }
 
-export function ExtendedCard({ title, subtitle, content }: CardProps): ReactElement | null {
   return (
     <div className="diggo-card">
+      {image?.src && <ExtendedImage {...image} />}
       {title && <ExtendedTitle content={title} />}
-      {subtitle && <ExtendedSubtitle content={subtitle} />}
-      {content && <ExtendedRichtext content={content} />}
+      {body && <ExtendedText content={body} />}
+      {hasCallToAction ? (
+        <a href={callToAction?.url ?? '#'} className="diggo-card-link">
+          {callToAction?.text}
+        </a>
+      ) : null}
     </div>
   );
 }

package/templates/with-mock/components/ExtendedGallery.tsx

@@ -0,0 +1,43 @@
+import type { GalleryProps, ImageProps, VideoProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+
+type LegacyGalleryProps = {
+  images?: ImageProps[] | null;
+};
+
+type ExtendedGalleryProps = GalleryProps & LegacyGalleryProps;
+
+export function ExtendedGallery({ items, images }: ExtendedGalleryProps): ReactElement | null {
+  const normalizedItems = items ?? images?.map((image, index) => ({ type: 'image' as const, order: index, data: image })) ?? null;
+
+  if (!normalizedItems || normalizedItems.length === 0) {
+    return null;
+  }
+
+  const sortedItems = [...normalizedItems].sort((left, right) => left.order - right.order);
+
+  return (
+    <div className="diggo-gallery">
+      {sortedItems.map((item, index) => (
+        item.type === 'video' ? (
+          <video
+            key={`${item.type}-${index}-${(item.data as VideoProps).src ?? 'video'}`}
+            className="diggo-gallery-video"
+            controls
+            poster={(item.data as VideoProps).poster ?? undefined}
+          >
+            <source src={(item.data as VideoProps).src ?? ''} />
+            {(item.data as VideoProps).alt ?? ''}
+          </video>
+        ) : (
+          <img
+            key={`${item.type}-${index}-${(item.data as ImageProps).src ?? 'image'}`}
+            src={(item.data as ImageProps).src ?? ''}
+            alt={(item.data as ImageProps).alt ?? ''}
+            className="diggo-gallery-image"
+          />
+        )
+      ))}
+    </div>
+  );
+}

package/templates/with-mock/components/ExtendedText.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement } from 'react';
+
+type TextProps = {
+  content?: string | null;
+  text?: string | null;
+};
+
+export function ExtendedText({ content, text }: TextProps): ReactElement | null {
+  const value = content ?? text;
+
+  if (!value) {
+    return null;
+  }
+
+  return <p className="diggo-text">{value}</p>;
+}

package/templates/with-mock/components/ExtendedVideo.tsx

@@ -0,0 +1,27 @@
+import type { VideoProps } from '@digitalygo/diggocms-sdk-core';
+import type { ReactElement } from 'react';
+
+type LegacyVideoProps = VideoProps & {
+  title?: string | null;
+};
+
+export function ExtendedVideo({
+  src,
+  poster,
+  alt,
+  title,
+}: LegacyVideoProps): ReactElement | null {
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <figure className="diggo-video-block">
+      <video className="diggo-video" controls poster={poster ?? undefined}>
+        <source src={src} />
+        {alt ?? title ?? ''}
+      </video>
+      {alt || title ? <figcaption className="diggo-media-caption">{alt ?? title}</figcaption> : null}
+    </figure>
+  );
+}

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

@@ -1,8 +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 { ExtendedText } from './ExtendedText';
+export { ExtendedVideo } from './ExtendedVideo';
+export { ExtendedGallery } from './ExtendedGallery';
 export { ExtendedCard } from './ExtendedCard';
 export { ExtendedMenuItem } from './ExtendedMenuItem';
 export { ExtendedMenuContainer } from './ExtendedMenuContainer';

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

@@ -1,28 +1,69 @@
 {
-  "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": "item-1",
+      "title": "First Article",
+      "slug": "first-article",
+      "excerpt": "This is the first article in the collection demonstration.",
+      "image": {
+        "src": "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=400&h=200&fit=crop",
+        "alt": "Article 1 image"
+      },
+      "components": [
+        {
+          "type": "title",
+          "data": {
+            "content": "Nested Title in Article 1"
+          }
+        }
+      ]
     },
     {
-      "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": "item-2",
+      "title": "Second Article",
+      "slug": "second-article",
+      "excerpt": "This is the second article with null image field.",
+      "image": null,
+      "components": [
+        {
+          "type": "text",
+          "data": {
+            "content": "Component with null image"
+          }
+        }
+      ]
     },
     {
-      "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"
+      "id": "item-3",
+      "title": null,
+      "slug": "third-article",
+      "excerpt": "This item has null title but still renders.",
+      "image": {
+        "src": "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=400&h=200&fit=crop",
+        "alt": "Article 3 image"
+      },
+      "components": []
+    },
+    {
+      "id": "item-4",
+      "title": "Fourth Article",
+      "slug": "fourth-article",
+      "excerpt": "Full content with all fields present.",
+      "image": {
+        "src": "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=400&h=200&fit=crop",
+        "alt": "Article 4 image"
+      },
+      "components": [
+        {
+          "type": "text",
+          "data": {
+            "content": "Additional content inside the collection item."
+          }
+        }
+      ]
     }
   ],
-  "pagination": {
-    "page": 1,
-    "totalPages": 1,
-    "totalItems": 3
-  }
+  "total": 4,
+  "page": 1,
+  "perPage": 10
 }

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

@@ -10,27 +10,28 @@
       }
     },
     {
-      "type": "subtitle",
+      "type": "text",
       "data": {
-        "content": "About Our Company"
+        "content": "Who we are — scopri la nostra storia, i nostri valori e il modo in cui lavoriamo insieme ai clienti."
       }
     },
     {
-      "type": "richtext",
+      "type": "text",
       "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>"
+        "content": "Siamo un'azienda italiana con una passione per l'innovazione e la qualità. Dal 2010 realizziamo soluzioni digitali che aiutano le aziende a crescere nel panorama digitale moderno."
       }
     },
     {
-      "type": "subtitle",
+      "type": "text",
       "data": {
-        "content": "Our Mission"
+        "content": "Il nostro team unisce collaborazione, creatività ed eccellenza. Se stai visualizzando questa pagina, significa che la navigazione verso Chi Siamo funziona correttamente."
       }
     },
     {
-      "type": "richtext",
+      "type": "image",
       "data": {
-        "content": "<p>To simplify content management for developers while providing powerful features for content editors.</p>"
+        "src": "https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=400&fit=crop",
+        "alt": "Il nostro team"
       }
     }
   ]

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

@@ -10,23 +10,26 @@
       }
     },
     {
-      "type": "subtitle",
+      "type": "text",
       "data": {
-        "content": "Get in Touch"
+        "content": "Contacts — siamo qui per aiutarti con domande, collaborazioni e richieste di supporto."
       }
     },
     {
-      "type": "richtext",
+      "type": "text",
       "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>"
+        "content": "Questa sezione raccoglie i recapiti principali per scriverci, chiamarci o venire a trovarci in sede. Se stai visualizzando questa pagina, la navigazione verso Contatti funziona correttamente."
       }
     },
     {
       "type": "card",
       "data": {
-        "title": "Office Location",
-        "subtitle": "Headquarters",
-        "content": "<p>123 Developer Street<br>Tech City, TC 12345<br>United States</p>"
+        "title": "Informazioni di Contatto",
+        "richtext": "Indirizzo: Via Roma 123, 00100 Roma, Italia. Email: info@example.com. Telefono: +39 06 12345678. Orari: lun-ven 9:00-18:00.",
+        "callToAction": {
+          "text": "Scrivici",
+          "url": "mailto:info@example.com"
+        }
       }
     }
   ]

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

@@ -1,61 +1,110 @@
 {
-  "id": "home",
+  "id": "page-1",
   "slug": "home",
-  "title": "Welcome to DiggoCMS",
+  "title": "Welcome to DiggoCMS Demo",
   "components": [
     {
       "type": "title",
       "data": {
-        "content": "Welcome to DiggoCMS"
+        "content": "Benvenuto su DiggoCMS Demo"
       }
     },
     {
-      "type": "subtitle",
+      "type": "text",
       "data": {
-        "content": "Your headless CMS powered by React & Next.js"
+        "content": "A demonstration of the SDK rendering capabilities built around the current component model."
       }
     },
     {
-      "type": "richtext",
+      "type": "text",
       "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>"
+        "content": "This page showcases the DiggoCMS SDK with extended components. All content is rendered from a JSON payload matching the CMS API format."
       }
     },
     {
       "type": "image",
       "data": {
-        "src": "https://via.placeholder.com/800x400/3b82f6/ffffff?text=DiggoCMS+Mock",
-        "alt": "DiggoCMS Mock Placeholder"
+        "src": "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop",
+        "alt": "DiggoCMS Demo Placeholder"
       }
     },
     {
-      "type": "subtitle",
+      "type": "text",
       "data": {
-        "content": "Features"
+        "content": "The SDK now renders plain text, videos, galleries, and richer CMS cards with minimal custom components."
       }
     },
     {
-      "type": "card",
+      "type": "video",
       "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>"
+        "src": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+        "poster": "https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?w=800&h=450&fit=crop",
+        "alt": "Short sample video"
       }
     },
     {
-      "type": "card",
+      "type": "gallery",
       "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>"
+        "items": [
+          {
+            "type": "image",
+            "order": 2,
+            "data": {
+              "src": "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&h=400&fit=crop",
+              "alt": "Gallery item one"
+            }
+          },
+          {
+            "type": "video",
+            "order": 1,
+            "data": {
+              "src": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
+              "poster": "https://images.unsplash.com/photo-1518837695005-2083093ee35b?w=600&h=400&fit=crop",
+              "alt": "Gallery video item"
+            }
+          },
+          {
+            "type": "image",
+            "order": 0,
+            "data": {
+              "src": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop",
+              "alt": "Gallery item three"
+            }
+          }
+        ]
       }
     },
     {
       "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>"
+        "image": {
+          "src": "https://images.unsplash.com/photo-1551434678-e076c223a692?w=640&h=360&fit=crop",
+          "alt": "CMS card preview"
+        },
+        "title": "Feature Card",
+        "richtext": "This card demonstrates the updated CMS card shape with an image, body copy, and a call to action.",
+        "callToAction": {
+          "text": "Explore collection",
+          "url": "/collection"
+        }
+      }
+    },
+    {
+      "type": "text",
+      "data": {
+        "content": "Null value handling"
+      }
+    },
+    {
+      "type": "title",
+      "data": {
+        "content": null
+      }
+    },
+    {
+      "type": "text",
+      "data": {
+        "content": "The null title above should not render, demonstrating graceful null handling."
       }
     }
   ]

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 ?? [];
 }