@digitalygo/create-diggocms-app 0.1.0 → 0.1.1

package/README.md

@@ -29,8 +29,8 @@ The CLI will guide you through the setup process:
 
 1. **Project name** - Name of your new project directory
 2. **Template** - Choose from:
-   - `full` - Complete setup with all extended components (recommended)
-   - `with-mock` - Full setup + mock API server + sample fixtures
+   - `full` - Complete setup with the current supported component templates (recommended)
+   - `with-mock` - Full setup + mock API server + sample fixtures aligned with the SDK/demo payload model
    - `minimal` - Basic setup, add components yourself
 3. **Package manager** - Choose your preferred package manager (bun, npm, yarn, pnpm)
 
@@ -48,7 +48,7 @@ Best for: Experienced developers who want full control.
 ### Full
 
 Complete setup including:
-- All extended components (Title, Subtitle, Image, Richtext, Card)
+- Extended templates for the current supported component set (title, image, text, video, gallery, card)
 - Navigation components with dropdown support
 - Dynamic routing with `[...slug]`
 - Data fetching helpers
@@ -61,7 +61,7 @@ Best for: Most users starting a new project.
 
 Everything from the full template, plus:
 - Standalone mock API server (`scripts/mock-server.ts`)
-- Sample fixtures (pages, menu, collection)
+- Sample fixtures (pages, menu, collection) aligned with the current JSON/content standards used by the SDK/demo
 - Scripts: `mock:api` and `dev:mock`
 - Pre-configured `.env.local` for mock mode
 

package/package.json

@@ -1,12 +1,15 @@
 {
   "name": "@digitalygo/create-diggocms-app",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "CLI tool to scaffold a new DiggoCMS project",
   "type": "module",
   "bin": {
     "create-diggocms-app": "./bin/cli.js"
   },
-  "files": ["bin", "templates"],
+  "files": [
+    "bin",
+    "templates"
+  ],
   "scripts": {
     "prepublishOnly": "echo 'No build step needed'"
   },

package/templates/full/README.md

@@ -5,7 +5,7 @@ A complete DiggoCMS application built with Next.js and the DiggoCMS SDK.
 ## Features
 
 - Dynamic routing with `[...slug]` pattern
-- Extended components (Title, Subtitle, Image, Richtext, Card)
+- Extended components for the current supported standalone types: title, image, text, video, gallery, and card
 - Navigation with dropdown support
 - Mock mode for development
 - Error handling and loading states
@@ -64,9 +64,10 @@ components/           # React components
 ├── DiggoProvider.tsx    # SDK provider wrapper
 ├── server-components.ts # Server-safe component exports
 ├── ExtendedTitle.tsx
-├── ExtendedSubtitle.tsx
 ├── ExtendedImage.tsx
-├── ExtendedRichtext.tsx
+├── ExtendedText.tsx
+├── ExtendedVideo.tsx
+├── ExtendedGallery.tsx
 ├── ExtendedCard.tsx
 ├── ExtendedMenuItem.tsx
 └── ExtendedMenuContainer.tsx
@@ -78,16 +79,19 @@ lib/                  # Utility functions
 
 ## Extended Components
 
-This template includes extended versions of all base components:
+This template includes extended versions of the current SDK component set used by the starter:
 
 - **ExtendedTitle** - Styled H1 heading
-- **ExtendedSubtitle** - Styled H2 heading
 - **ExtendedImage** - Responsive image with shadow
-- **ExtendedRichtext** - HTML content renderer
-- **ExtendedCard** - Card layout with title, subtitle, content
+- **ExtendedText** - Styled paragraph content
+- **ExtendedVideo** - Styled video wrapper for CMS media payloads
+- **ExtendedGallery** - Ordered gallery renderer for image and video items
+- **ExtendedCard** - Card layout with title, media, body copy, and CTA support
 - **ExtendedMenuItem** - Navigation item with active state
 - **ExtendedMenuContainer** - Navigation wrapper
 
+Standalone page payloads in this template are expected to use only the supported types above. Card payloads can still include internal card fields such as `richtext` when provided by the CMS.
+
 ## Customization
 
 1. Edit styles in `app/globals.css`

package/templates/full/app/globals.css

@@ -16,7 +16,6 @@ body {
   padding: 0 1rem;
 }
 
-/* Header Styles */
 .header {
   background: #fff;
   border-bottom: 1px solid #e5e7eb;
@@ -39,13 +38,11 @@ body {
   text-decoration: none;
 }
 
-/* Main Content */
 .main {
   min-height: calc(100vh - 200px);
   padding-bottom: 3rem;
 }
 
-/* Footer Styles */
 .footer {
   background: #f9fafb;
   border-top: 1px solid #e5e7eb;
@@ -54,7 +51,6 @@ body {
   color: #6b7280;
 }
 
-/* Error Banner */
 .error-banner {
   background: #fef3c7;
   border: 1px solid #fbbf24;
@@ -64,7 +60,6 @@ body {
   color: #92400e;
 }
 
-/* Mock Badge */
 .mock-badge {
   display: inline-block;
   background: #dbeafe;
@@ -76,7 +71,6 @@ body {
   margin-bottom: 1rem;
 }
 
-/* Component Styles */
 .diggo-title {
   font-size: 2.5rem;
   font-weight: 700;
@@ -110,6 +104,52 @@ body {
   margin-bottom: 1rem;
 }
 
+.diggo-text {
+  margin: 1rem 0;
+  color: #374151;
+}
+
+.diggo-video-block {
+  margin: 1.5rem 0;
+}
+
+.diggo-video {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  border-radius: 0.75rem;
+  background: #111827;
+}
+
+.diggo-media-caption {
+  margin-top: 0.5rem;
+  color: #6b7280;
+  font-size: 0.875rem;
+}
+
+.diggo-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+.diggo-gallery-image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 0.75rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+.diggo-gallery-video {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 0.75rem;
+  background: #111827;
+}
+
 .diggo-card {
   background: #fff;
   border: 1px solid #e5e7eb;
@@ -131,7 +171,18 @@ body {
   margin-bottom: 1rem;
 }
 
-/* Navigation Styles */
+.diggo-card-link {
+  display: inline-flex;
+  margin-top: 0.5rem;
+  color: #2563eb;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.diggo-card-link:hover {
+  text-decoration: underline;
+}
+
 .menu {
   display: flex;
 }

package/templates/full/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/full/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/full/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/full/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/full/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/full/lib/diggo-config.ts

@@ -1,20 +1,21 @@
 import type { ComponentRegistry, NavigationRegistry, DiggoConfig } from '@digitalygo/diggocms-sdk-core';
 import {
-  ExtendedTitle,
-  ExtendedSubtitle,
   ExtendedImage,
-  ExtendedRichtext,
+  ExtendedText,
+  ExtendedVideo,
+  ExtendedGallery,
   ExtendedCard,
   ExtendedMenuItem,
   ExtendedMenuContainer,
 } from '@/components/server-components';
 
-export const componentsRegistry: ComponentRegistry = {
-  subtitle: ExtendedSubtitle,
+export const componentsRegistry = {
   image: ExtendedImage,
-  richtext: ExtendedRichtext,
+  text: ExtendedText,
+  video: ExtendedVideo,
+  gallery: ExtendedGallery,
   card: ExtendedCard,
-};
+} as ComponentRegistry;
 
 export const navigationRegistry: NavigationRegistry = {
   MenuItem: ExtendedMenuItem,