@digitalygo/create-diggocms-app 0.1.0

package/templates/with-mock/lib/data-fetching.ts

@@ -0,0 +1,205 @@
+import type {
+  PagePayload,
+  CollectionPayload,
+  MenuPayload,
+} from '@digitalygo/diggocms-sdk-core';
+import { sdkConfig, isMockMode, hasBaseUrl } from './diggo-config';
+
+interface PageIndexItem {
+  id: string;
+  slug: string;
+  title: string;
+}
+
+const DEFAULT_MOCK_API_URL = 'http://localhost:3001';
+
+function getMockApiBaseUrl(): string {
+  return process.env.MOCK_API_URL ?? DEFAULT_MOCK_API_URL;
+}
+
+async function fetchFromMockApi<T>(endpoint: string): Promise<T | null> {
+  try {
+    const baseUrl = getMockApiBaseUrl();
+    const response = await fetch(`${baseUrl}${endpoint}`);
+
+    if (!response.ok) {
+      return null;
+    }
+
+    return (await response.json()) as T;
+  } catch {
+    return null;
+  }
+}
+
+async function loadPagesIndex(): Promise<PageIndexItem[]> {
+  const index = await fetchFromMockApi<PageIndexItem[]>('/pages');
+  return index ?? [];
+}
+
+export interface FetchPageResult {
+  page: PagePayload | null;
+  error: string | null;
+  usingMock: boolean;
+}
+
+export interface FetchCollectionResult {
+  collection: CollectionPayload | null;
+  error: string | null;
+  usingMock: boolean;
+}
+
+export interface FetchMenuResult {
+  menu: MenuPayload | null;
+  error: string | null;
+  usingMock: boolean;
+}
+
+function normalizeSlug(slug: string): string {
+  if (slug === 'home' || slug === '') {
+    return '';
+  }
+  return slug;
+}
+
+async function loadPageFromMockApi(slug: string): Promise<PagePayload | null> {
+  const normalizedSlug = normalizeSlug(slug);
+  const index = await loadPagesIndex();
+
+  const pageExists = index.some(
+    (item) => normalizeSlug(item.slug) === normalizedSlug
+  );
+
+  if (!pageExists) {
+    return null;
+  }
+
+  const endpoint =
+    normalizedSlug === '' ? '/pages/home' : `/pages/${normalizedSlug}`;
+
+  return fetchFromMockApi<PagePayload>(endpoint);
+}
+
+export async function fetchPageData(slug: string): Promise<FetchPageResult> {
+  if (isMockMode()) {
+    const page = await loadPageFromMockApi(slug);
+    return {
+      page,
+      error: page ? null : 'Failed to load mock page from API',
+      usingMock: true,
+    };
+  }
+
+  if (!hasBaseUrl()) {
+    return {
+      page: null,
+      error: 'BASE_URL is not configured and MOCK mode is not enabled.',
+      usingMock: false,
+    };
+  }
+
+  try {
+    const response = await fetch(`${sdkConfig.baseUrl}/pages/${slug}`);
+
+    if (!response.ok) {
+      return {
+        page: null,
+        error: `Failed to fetch page: ${response.statusText}`,
+        usingMock: false,
+      };
+    }
+
+    const page = (await response.json()) as PagePayload;
+    return { page, error: null, usingMock: false };
+  } catch {
+    return {
+      page: null,
+      error: 'Error connecting to CMS',
+      usingMock: false,
+    };
+  }
+}
+
+export async function fetchCollectionData(
+  type: string
+): Promise<FetchCollectionResult> {
+  if (isMockMode()) {
+    const collection = await fetchFromMockApi<CollectionPayload>(
+      `/collections/${type}`
+    );
+    return {
+      collection,
+      error: collection ? null : 'Failed to load mock collection from API',
+      usingMock: true,
+    };
+  }
+
+  if (!hasBaseUrl()) {
+    return {
+      collection: null,
+      error: 'BASE_URL is not configured and MOCK mode is not enabled.',
+      usingMock: false,
+    };
+  }
+
+  try {
+    const response = await fetch(`${sdkConfig.baseUrl}/collections/${type}`);
+
+    if (!response.ok) {
+      return {
+        collection: null,
+        error: `Failed to fetch collection: ${response.statusText}`,
+        usingMock: false,
+      };
+    }
+
+    const collection = (await response.json()) as CollectionPayload;
+    return { collection, error: null, usingMock: false };
+  } catch {
+    return {
+      collection: null,
+      error: 'Error connecting to CMS',
+      usingMock: false,
+    };
+  }
+}
+
+export async function fetchMenuData(key: string): Promise<FetchMenuResult> {
+  if (isMockMode()) {
+    const menu = await fetchFromMockApi<MenuPayload>(`/menus/${key}`);
+    return {
+      menu,
+      error: menu ? null : 'Failed to load mock menu from API',
+      usingMock: true,
+    };
+  }
+
+  if (!hasBaseUrl()) {
+    return {
+      menu: null,
+      error: 'BASE_URL is not configured and MOCK mode is not enabled.',
+      usingMock: false,
+    };
+  }
+
+  try {
+    const response = await fetch(`${sdkConfig.baseUrl}/menus/${key}`);
+
+    if (!response.ok) {
+      return {
+        menu: null,
+        error: `Failed to fetch menu: ${response.statusText}`,
+        usingMock: false,
+      };
+    }
+
+    const menu = (await response.json()) as MenuPayload;
+    return { menu, error: null, usingMock: false };
+  } catch {
+    return {
+      menu: null,
+      error: 'Error connecting to CMS',
+      usingMock: false,
+    };
+  }
+}

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

@@ -0,0 +1,48 @@
+import type { ComponentRegistry, NavigationRegistry, DiggoConfig } from '@digitalygo/diggocms-sdk-core';
+import {
+  ExtendedTitle,
+  ExtendedSubtitle,
+  ExtendedImage,
+  ExtendedRichtext,
+  ExtendedCard,
+  ExtendedMenuItem,
+  ExtendedMenuContainer,
+} from '@/components/server-components';
+
+export const componentsRegistry: ComponentRegistry = {
+  subtitle: ExtendedSubtitle,
+  image: ExtendedImage,
+  richtext: ExtendedRichtext,
+  card: ExtendedCard,
+};
+
+export const navigationRegistry: NavigationRegistry = {
+  MenuItem: ExtendedMenuItem,
+  MenuContainer: ExtendedMenuContainer,
+};
+
+const isMock = process.env.MOCK === '1';
+const baseUrl = process.env.BASE_URL;
+const mockApiUrl = process.env.MOCK_API_URL;
+
+function getBaseUrl(): string {
+  if (isMock) {
+    return mockApiUrl ?? 'http://localhost:3001';
+  }
+
+  return baseUrl ?? 'http://placeholder.local';
+}
+
+export const sdkConfig: DiggoConfig = {
+  baseUrl: getBaseUrl(),
+  components: componentsRegistry,
+  navigation: navigationRegistry,
+};
+
+export function isMockMode(): boolean {
+  return isMock;
+}
+
+export function hasBaseUrl(): boolean {
+  return !!baseUrl;
+}

package/templates/with-mock/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />

package/templates/with-mock/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+};
+
+export default nextConfig;

package/templates/with-mock/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "my-diggocms-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit",
+    "mock:api": "bun run scripts/mock-server.ts",
+    "dev:mock": "bun run mock:api & next dev"
+  },
+  "dependencies": {
+    "@digitalygo/diggocms-sdk-core": "^0.1.0",
+    "next": "^16.0.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.5.0"
+  }
+}

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

@@ -0,0 +1,231 @@
+#!/usr/bin/env bun
+/**
+ * Standalone mock API server for DiggoCMS SDK.
+ * Serves fixtures as REST API endpoints for local development.
+ */
+
+import { createServer, type IncomingMessage, type ServerResponse } from 'http';
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+import { fileURLToPath } from 'url';
+
+const PORT = Number(process.env.PORT) || 3001;
+const HOST = process.env.HOST || 'localhost';
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+const fixturesPath = join(__dirname, '..', 'fixtures');
+const pagesPath = join(fixturesPath, 'pages');
+
+type Handler = (req: IncomingMessage, res: ServerResponse, params: Record<string, string>) => Promise<string>;
+
+interface Route {
+  pattern: RegExp;
+  method: string;
+  handler: Handler;
+}
+
+function sendJson(res: ServerResponse, statusCode: number, data: unknown): string {
+  const jsonString = JSON.stringify(data);
+  res.writeHead(statusCode, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(data, null, 2));
+  return jsonString;
+}
+
+function logRequest(method: string, url: string, statusCode: number, body?: string): void {
+  const timestamp = new Date().toISOString();
+  const statusColor = statusCode >= 400 ? '\x1b[31m' : statusCode >= 300 ? '\x1b[33m' : '\x1b[32m';
+  const resetColor = '\x1b[0m';
+  const dimColor = '\x1b[2m';
+  const cyanColor = '\x1b[36m';
+  const yellowColor = '\x1b[33m';
+
+  let logLine = `${dimColor}${timestamp}${resetColor} | ${cyanColor}${method}${resetColor} ${url} | ${statusColor}${statusCode}${resetColor}`;
+
+  if (body) {
+    const preview = body.length > 100 ? body.slice(0, 100) + '...' : body;
+    logLine += ` | ${yellowColor}Body: ${preview}${resetColor}`;
+  }
+
+  console.log(logLine);
+}
+
+async function readJsonFile<T>(filepath: string): Promise<T | null> {
+  try {
+    const content = await readFile(filepath, 'utf-8');
+    return JSON.parse(content) as T;
+  } catch {
+    return null;
+  }
+}
+
+function matchRoute(path: string, method: string, routes: Route[]): { handler: Handler; params: Record<string, string> } | null {
+  for (const route of routes) {
+    if (route.method !== method) continue;
+    const match = route.pattern.exec(path);
+    if (match) {
+      const params: Record<string, string> = {};
+      const groups = match.groups ?? {};
+      for (const [key, value] of Object.entries(groups)) {
+        if (value !== undefined) {
+          params[key] = decodeURIComponent(value);
+        }
+      }
+      return { handler: route.handler, params };
+    }
+  }
+  return null;
+}
+
+const routes: Route[] = [
+  {
+    pattern: /^\/pages\/?$/,
+    method: 'GET',
+    handler: async (_req, res) => {
+      const data = await readJsonFile<unknown[]>(join(pagesPath, 'index.json'));
+      if (data === null) {
+        return sendJson(res, 404, { error: 'Pages index not found' });
+      }
+      return sendJson(res, 200, data);
+    },
+  },
+  {
+    pattern: /^\/pages\/(?<slug>.+)$/,
+    method: 'GET',
+    handler: async (_req, res, params) => {
+      const slug = params.slug ?? '';
+
+      const index = await readJsonFile<Array<{ id: string; slug: string; title: string }>>(
+        join(pagesPath, 'index.json')
+      );
+
+      if (index === null) {
+        return sendJson(res, 404, { error: 'Pages index not found' });
+      }
+
+      const pageItem = index.find(
+        (item) => item.slug === slug || (slug === 'home' && item.slug === '')
+      );
+
+      if (!pageItem) {
+        return sendJson(res, 404, { error: `Page not found: ${slug}` });
+      }
+
+      const filepath = pageItem.slug === '' ? 'home.json' : `${pageItem.id}.json`;
+      const data = await readJsonFile<unknown>(join(pagesPath, filepath));
+
+      if (data === null) {
+        return sendJson(res, 404, { error: `Page file not found: ${filepath}` });
+      }
+
+      return sendJson(res, 200, data);
+    },
+  },
+  {
+    pattern: /^\/collections\/(?<type>[^/]+)$/,
+    method: 'GET',
+    handler: async (_req, res) => {
+      const data = await readJsonFile<unknown>(join(fixturesPath, 'collection.json'));
+      if (data === null) {
+        return sendJson(res, 404, { error: 'Collection not found' });
+      }
+      return sendJson(res, 200, data);
+    },
+  },
+  {
+    pattern: /^\/menus\/(?<key>[^/]+)$/,
+    method: 'GET',
+    handler: async (_req, res) => {
+      const data = await readJsonFile<unknown>(join(fixturesPath, 'menu.json'));
+      if (data === null) {
+        return sendJson(res, 404, { error: 'Menu not found' });
+      }
+      return sendJson(res, 200, data);
+    },
+  },
+  {
+    pattern: /^\/$/,
+    method: 'GET',
+    handler: async (_req, res) => {
+      return sendJson(res, 200, {
+        name: 'DiggoCMS Mock API',
+        version: '1.0.0',
+        endpoints: [
+          'GET /pages',
+          'GET /pages/:slug',
+          'GET /collections/:type',
+          'GET /menus/:key',
+        ],
+      });
+    },
+  },
+];
+
+const server = createServer(async (req, res) => {
+  const url = new URL(req.url ?? '/', `http://${req.headers.host}`);
+  const pathname = url.pathname;
+
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204);
+    res.end();
+    logRequest(req.method ?? 'OPTIONS', pathname, 204, '');
+    return;
+  }
+
+  const routeMatch = matchRoute(pathname, req.method ?? 'GET', routes);
+
+  if (routeMatch) {
+    let responseBody = '';
+    try {
+      responseBody = await routeMatch.handler(req, res, routeMatch.params);
+    } catch (error) {
+      console.error('Error handling request:', error);
+      responseBody = sendJson(res, 500, { error: 'Internal server error' });
+    }
+    const statusCode = res.statusCode ?? 200;
+    logRequest(req.method ?? 'GET', pathname, statusCode, responseBody);
+    return;
+  }
+
+  const responseBody = sendJson(res, 404, { error: 'Not found', path: pathname });
+  logRequest(req.method ?? 'GET', pathname, 404, responseBody);
+});
+
+server.listen(PORT, HOST, () => {
+  console.log(`
+┌─────────────────────────────────────────────────────┐
+│                                                     │
+│   DiggoCMS Mock API Server                          │
+│                                                     │
+│   Running at: http://${HOST}:${PORT}                    │
+│                                                     │
+│   Endpoints:                                        │
+│   • GET /pages             → List all pages         │
+│   • GET /pages/:slug       → Get page by slug       │
+│   • GET /collections/:type → Get collection         │
+│   • GET /menus/:key        → Get menu by key        │
+│                                                     │
+│   Environment:                                      │
+│   • PORT=${PORT}                                    │
+│   • HOST=${HOST}                                    │
+│                                                     │
+└─────────────────────────────────────────────────────┘
+  `);
+});
+
+process.on('SIGINT', () => {
+  console.log('\n\nShutting down mock server...');
+  server.close(() => {
+    console.log('Mock server stopped.');
+    process.exit(0);
+  });
+});
+
+process.on('SIGTERM', () => {
+  server.close(() => {
+    process.exit(0);
+  });
+});

package/templates/with-mock/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}