@digitalygo/create-diggocms-app 0.1.0 → 0.1.2

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,23 @@
 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 = {
+  title: ExtendedTitle,
   image: ExtendedImage,
-  richtext: ExtendedRichtext,
+  text: ExtendedText,
+  video: ExtendedVideo,
+  gallery: ExtendedGallery,
   card: ExtendedCard,
-};
+} as ComponentRegistry;
 
 export const navigationRegistry: NavigationRegistry = {
   MenuItem: ExtendedMenuItem,

package/templates/full/package.json

@@ -20,6 +20,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,82 @@
+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="min-h-screen flex items-center justify-center">
+        <div className="text-lg text-gray-600">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!page) {
+    return (
+      <main className="max-w-5xl mx-auto p-8">
+        <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>
+    );
+  }
+
+  return (
+    <>
+      <Head>
+        <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">
+        {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>
+    </>
+  );
+}
+
+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/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,81 @@
+@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;
+}
+
+/* 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 bg-gray-100 py-4 mb-8;
+}
+
+.menu-list {
+  @apply flex flex-wrap gap-6 max-w-5xl mx-auto px-8 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;
+}

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/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.
@@ -30,6 +41,7 @@ A minimal DiggoCMS application built with Next.js and the DiggoCMS SDK.
 ### Using a Real CMS API
 
 Set your CMS API base URL:
+
 ```env
 BASE_URL=https://your-cms-api.com
 MOCK=0
@@ -37,7 +49,8 @@ MOCK=0
 
 ### 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
@@ -45,13 +58,28 @@ MOCK_API_URL=http://localhost:3001
 
 ## 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 +88,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)

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

@@ -8,7 +8,6 @@ export interface FetchPageResult {
 
 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}`);
@@ -37,7 +36,6 @@ export async function fetchPageData(slug: string): Promise<FetchPageResult> {
     };
   }
 
-  // Real API mode: fetch from CMS
   try {
     const response = await fetch(`${sdkConfig.baseUrl}/pages/${slug}`);
     

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';

package/templates/minimal/package.json

@@ -20,6 +20,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;