@digitalygo/create-diggocms-app 0.1.0

package/README.md

@@ -0,0 +1,152 @@
+# Create DiggoCMS App
+
+A CLI tool to scaffold new DiggoCMS projects with Next.js and the DiggoCMS SDK.
+
+## Usage
+
+### With npx (no installation required)
+
+```bash
+npx create-diggocms-app@latest
+```
+
+### With bun
+
+```bash
+bun x create-diggocms-app
+```
+
+### Global installation
+
+```bash
+npm install -g create-diggocms-app
+create-diggocms-app
+```
+
+## Interactive Setup
+
+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
+   - `minimal` - Basic setup, add components yourself
+3. **Package manager** - Choose your preferred package manager (bun, npm, yarn, pnpm)
+
+## Templates
+
+### Minimal
+
+A bare-bones setup with just the SDK installed. You'll need to:
+- Create your own extended components
+- Configure the SDK manually
+- Set up data fetching
+
+Best for: Experienced developers who want full control.
+
+### Full
+
+Complete setup including:
+- All extended components (Title, Subtitle, Image, Richtext, Card)
+- Navigation components with dropdown support
+- Dynamic routing with `[...slug]`
+- Data fetching helpers
+- Error handling and mock indicators
+- Ready-to-use styles
+
+Best for: Most users starting a new project.
+
+### With Mock
+
+Everything from the full template, plus:
+- Standalone mock API server (`scripts/mock-server.ts`)
+- Sample fixtures (pages, menu, collection)
+- Scripts: `mock:api` and `dev:mock`
+- Pre-configured `.env.local` for mock mode
+
+Best for: Developing without a real CMS API, testing, or learning.
+
+## Project Structure
+
+After scaffolding, your project will have this structure:
+
+```
+my-app/
+├── app/                  # Next.js app router
+│   ├── [...slug]/        # Dynamic routes
+│   ├── layout.tsx
+│   ├── page.tsx
+│   └── globals.css
+├── components/           # React components
+│   ├── DiggoProvider.tsx
+│   ├── server-components.ts
+│   └── Extended*.tsx
+├── lib/                  # Utilities
+│   ├── diggo-config.ts
+│   └── data-fetching.ts
+├── fixtures/             # Mock data (with-mock only)
+├── scripts/              # Mock server (with-mock only)
+├── .env.local.example
+├── next.config.ts
+├── package.json
+├── tsconfig.json
+└── README.md
+```
+
+## Environment Variables
+
+Copy `.env.local.example` to `.env.local` and configure:
+
+```env
+# Use real CMS API
+BASE_URL=https://your-cms-api.com
+MOCK=0
+
+# Or use mock mode
+MOCK=1
+MOCK_API_URL=http://localhost:3001
+```
+
+## Requirements
+
+- Node.js >= 18.0.0 or Bun >= 1.1.0
+- A DiggoCMS API endpoint (or use mock mode)
+
+## Options
+
+You can also pass the project name as an argument:
+
+```bash
+npx create-diggocms-app@latest my-project
+```
+
+This skips the project name prompt and uses `my-project` directly.
+
+## Troubleshooting
+
+### Permission denied
+
+If you get a permission error, try:
+
+```bash
+npx create-diggocms-app@latest --use-npm
+```
+
+Or use a Node version manager like nvm/fnm.
+
+### Port already in use
+
+If the mock API server fails to start due to port conflicts, set a different port:
+
+```bash
+PORT=3002 bun run mock:api
+```
+
+## Contributing
+
+This CLI is part of the DiggoCMS SDK monorepo. See the main repository for contribution guidelines.
+
+## License
+
+MIT © DigitalyGo Team

package/bin/cli.js

@@ -0,0 +1,392 @@
+#!/usr/bin/env node
+/**
+ * Create DiggoCMS App - CLI tool to scaffold new DiggoCMS projects
+ * Inspired by create-next-app and create-vite
+ */
+
+import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import { cp, mkdir, readFile, writeFile, access, stat } from 'fs/promises';
+import { execSync } from 'child_process';
+import process from 'process';
+import prompts from 'prompts';
+import {
+  cyan,
+  green,
+  red,
+  yellow,
+  blue,
+  magenta,
+  lightGray,
+  dim,
+} from 'kolorist';
+
+const require = createRequire(import.meta.url);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const TEMPLATES = ['minimal', 'full', 'with-mock'];
+const PACKAGE_MANAGERS = ['bun', 'npm', 'yarn', 'pnpm'];
+
+const DEFAULT_PROJECT_NAME = 'my-diggocms-app';
+
+/**
+ * Validates project name (no spaces, special chars, etc.)
+ * @param {string} name
+ * @returns {string | true} Error message or true if valid
+ */
+function validateProjectName(name) {
+  if (!name || name.trim().length === 0) {
+    return 'Project name is required';
+  }
+
+  if (name.trim().includes(' ')) {
+    return 'Project name cannot contain spaces';
+  }
+
+  if (!/^[a-z0-9-_]+$/i.test(name)) {
+    return 'Project name can only contain letters, numbers, hyphens, and underscores';
+  }
+
+  return true;
+}
+
+/**
+ * Checks if directory exists and is not empty
+ * @param {string} dir
+ * @returns {Promise<boolean>}
+ */
+async function isDirectoryEmpty(dir) {
+  try {
+    const stats = await stat(dir);
+    if (!stats.isDirectory()) {
+      return false;
+    }
+    const files = await readdir(dir);
+    return files.length === 0;
+  } catch {
+    return true;
+  }
+}
+
+/**
+ * Checks if a command exists
+ * @param {string} cmd
+ * @returns {boolean}
+ */
+function commandExists(cmd) {
+  try {
+    execSync(`${cmd} --version`, { stdio: 'ignore' });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Gets the version of Node.js or Bun
+ * @param {string} runtime
+ * @returns {string | null}
+ */
+function getRuntimeVersion(runtime) {
+  try {
+    const version = execSync(`${runtime} --version`, { encoding: 'utf-8' }).trim();
+    return version;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Checks version requirements
+ * @returns {{ node: string | null, bun: string | null }}
+ */
+function checkRuntimeVersions() {
+  return {
+    node: getRuntimeVersion('node'),
+    bun: getRuntimeVersion('bun'),
+  };
+}
+
+/**
+ * Copies template files to target directory
+ * @param {string} template
+ * @param {string} targetDir
+ */
+async function copyTemplate(template, targetDir) {
+  const templateDir = join(__dirname, '..', 'templates', template);
+
+  async function copyRecursive(src, dest) {
+    const entries = await readdir(src, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const srcPath = join(src, entry.name);
+      const destPath = join(dest, entry.name);
+
+      if (entry.isDirectory()) {
+        await mkdir(destPath, { recursive: true });
+        await copyRecursive(srcPath, destPath);
+      } else {
+        await cp(srcPath, destPath);
+      }
+    }
+  }
+
+  await copyRecursive(templateDir, targetDir);
+}
+
+/**
+ * Updates package.json with project name
+ * @param {string} targetDir
+ * @param {string} projectName
+ */
+async function updatePackageJson(targetDir, projectName) {
+  const packageJsonPath = join(targetDir, 'package.json');
+  const content = await readFile(packageJsonPath, 'utf-8');
+  const packageJson = JSON.parse(content);
+
+  packageJson.name = projectName;
+
+  await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
+}
+
+/**
+ * Installs dependencies using specified package manager
+ * @param {string} packageManager
+ * @param {string} cwd
+ */
+function installDependencies(packageManager, cwd) {
+  const installCmd = {
+    bun: 'bun install',
+    npm: 'npm install',
+    yarn: 'yarn',
+    pnpm: 'pnpm install',
+  }[packageManager];
+
+  console.log(dim(`\nInstalling dependencies with ${packageManager}...`));
+  execSync(installCmd, { cwd, stdio: 'inherit' });
+}
+
+/**
+ * Initializes git repository
+ * @param {string} cwd
+ */
+function initGit(cwd) {
+  try {
+    execSync('git init', { cwd, stdio: 'ignore' });
+    execSync('git add .', { cwd, stdio: 'ignore' });
+    execSync('git commit -m "Initial commit from create-diggocms-app"', {
+      cwd,
+      stdio: 'ignore',
+    });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Shows the final success message with next steps
+ * @param {string} projectName
+ * @param {string} targetDir
+ * @param {string} packageManager
+ * @param {string} template
+ */
+function showSuccessMessage(projectName, targetDir, packageManager, template) {
+  const runCmd = {
+    bun: 'bun run',
+    npm: 'npm run',
+    yarn: 'yarn',
+    pnpm: 'pnpm',
+  }[packageManager];
+
+  console.log(`\n${green('✔')} Successfully created ${cyan(projectName)}`);
+  console.log(`\n${lightGray('Next steps:')}`);
+  console.log(`  ${cyan('cd')} ${projectName}`);
+
+  if (template === 'with-mock') {
+    console.log(`  ${cyan(`${runCmd} mock:api`)}     ${dim('# Start the mock API server')}`);
+    console.log(`  ${cyan(`${runCmd} dev`)}          ${dim('# Start the Next.js dev server (in another terminal)')}`);
+    console.log(`\n${yellow('Or run both together:')}`);
+    console.log(`  ${cyan(`${runCmd} dev:mock`)}     ${dim('# Start mock API and dev server concurrently')}`);
+  } else {
+    console.log(`  ${cyan(`${runCmd} dev`)}          ${dim('# Start the development server')}`);
+  }
+
+  console.log(`\n${lightGray('Before you start:')}`);
+  console.log(`  ${dim('• Copy')} .env.local.example ${dim('to')} .env.local`);
+  console.log(`  ${dim('• Configure your')} BASE_URL ${dim('or set')} MOCK=1`);
+
+  if (template === 'minimal') {
+    console.log(`\n${yellow('Note:')} This is a minimal template. You'll need to:`);
+    console.log(`  ${dim('• Create your extended components in')} components/`);
+    console.log(`  ${dim('• Configure the SDK in')} lib/diggo-config.ts`);
+  }
+
+  console.log(`\n${blue('Happy coding with DiggoCMS!')} ${magenta('🚀')}\n`);
+}
+
+/**
+ * Main CLI function
+ */
+async function main() {
+  console.log(`\n${cyan('◆')} ${bold('DiggoCMS')} ${lightGray('– Create a new CMS-powered app')}\n`);
+
+  // Check runtime versions
+  const versions = checkRuntimeVersions();
+
+  if (!versions.node && !versions.bun) {
+    console.error(red('Error: Neither Node.js nor Bun found. Please install one of them.'));
+    process.exit(1);
+  }
+
+  // Get project name from command line or prompt
+  let projectName = process.argv[2];
+
+  if (!projectName) {
+    const response = await prompts({
+      type: 'text',
+      name: 'projectName',
+      message: 'Project name:',
+      initial: DEFAULT_PROJECT_NAME,
+      validate: validateProjectName,
+    });
+
+    if (!response.projectName) {
+      console.log(red('\nAborted.'));
+      process.exit(1);
+    }
+
+    projectName = response.projectName;
+  }
+
+  const validation = validateProjectName(projectName);
+  if (validation !== true) {
+    console.error(red(`Error: ${validation}`));
+    process.exit(1);
+  }
+
+  // Check if directory exists
+  const targetDir = join(process.cwd(), projectName);
+
+  try {
+    await access(targetDir);
+    const dirStats = await stat(targetDir);
+
+    if (dirStats.isDirectory()) {
+      const files = await readdir(targetDir);
+      if (files.length > 0) {
+        const { overwrite } = await prompts({
+          type: 'confirm',
+          name: 'overwrite',
+          message: `Directory "${projectName}" is not empty. Remove existing files and continue?`,
+          initial: false,
+        });
+
+        if (!overwrite) {
+          console.log(red('\nAborted.'));
+          process.exit(1);
+        }
+
+        // Remove directory contents
+        for (const file of files) {
+          const filePath = join(targetDir, file);
+          await rm(filePath, { recursive: true, force: true });
+        }
+      }
+    }
+  } catch {
+    // Directory doesn't exist, create it
+    await mkdir(targetDir, { recursive: true });
+  }
+
+  // Choose template
+  const { template } = await prompts({
+    type: 'select',
+    name: 'template',
+    message: 'Choose a template:',
+    choices: [
+      { title: green('full'), value: 'full', description: 'Complete setup with all components' },
+      { title: blue('with-mock'), value: 'with-mock', description: 'Full setup + mock API server' },
+      { title: yellow('minimal'), value: 'minimal', description: 'Basic setup, add components yourself' },
+    ],
+    initial: 0,
+  });
+
+  if (!template) {
+    console.log(red('\nAborted.'));
+    process.exit(1);
+  }
+
+  // Choose package manager
+  const availableManagers = PACKAGE_MANAGERS.filter(commandExists);
+  const defaultManager = availableManagers.includes('bun') ? 'bun' : 'npm';
+
+  const { packageManager } = await prompts({
+    type: 'select',
+    name: 'packageManager',
+    message: 'Choose a package manager:',
+    choices: PACKAGE_MANAGERS.map((pm) => ({
+      title: pm + (pm === defaultManager ? dim(' (default)') : ''),
+      value: pm,
+      disabled: !availableManagers.includes(pm),
+    })),
+    initial: PACKAGE_MANAGERS.indexOf(defaultManager),
+  });
+
+  if (!packageManager) {
+    console.log(red('\nAborted.'));
+    process.exit(1);
+  }
+
+  // Scaffold project
+  console.log(dim(`\nScaffolding project in ${targetDir}...`));
+
+  try {
+    // Copy template
+    await copyTemplate(template, targetDir);
+
+    // Update package.json
+    await updatePackageJson(targetDir, projectName);
+
+    // Initialize git
+    const gitInitialized = initGit(targetDir);
+
+    // Install dependencies
+    installDependencies(packageManager, targetDir);
+
+    // Show success message
+    showSuccessMessage(projectName, targetDir, packageManager, template);
+
+    if (gitInitialized) {
+      console.log(`${green('✔')} Git repository initialized\n`);
+    }
+  } catch (error) {
+    console.error(red('\nError scaffolding project:'));
+    console.error(error.message);
+    process.exit(1);
+  }
+}
+
+// Helper functions
+function bold(str) {
+  return `\x1b[1m${str}\x1b[0m`;
+}
+
+async function readdir(path, options) {
+  const fs = await import('fs/promises');
+  return fs.readdir(path, options);
+}
+
+async function rm(path, options) {
+  const fs = await import('fs/promises');
+  return fs.rm(path, options);
+}
+
+// Run main function
+main().catch((error) => {
+  console.error(red('\nUnexpected error:'));
+  console.error(error);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@digitalygo/create-diggocms-app",
+  "version": "0.1.0",
+  "description": "CLI tool to scaffold a new DiggoCMS project",
+  "type": "module",
+  "bin": {
+    "create-diggocms-app": "./bin/cli.js"
+  },
+  "files": ["bin", "templates"],
+  "scripts": {
+    "prepublishOnly": "echo 'No build step needed'"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "kolorist": "^1.8.0"
+  },
+  "keywords": [
+    "cms",
+    "headless-cms",
+    "react",
+    "nextjs",
+    "cli",
+    "scaffold",
+    "generator",
+    "diggo"
+  ],
+  "author": "DigitalyGo Team <team@digitalygo.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digitalygo/diggocms-sdk.git",
+    "directory": "packages/create-diggocms-app"
+  },
+  "bugs": {
+    "url": "https://github.com/digitalygo/diggocms-sdk/issues"
+  },
+  "homepage": "https://github.com/digitalygo/diggocms-sdk/tree/main/packages/create-diggocms-app#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/full/.env.local.example

@@ -0,0 +1,13 @@
+# DiggoCMS Environment Configuration
+# 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
+
+# Mock Mode
+# Set to 1 to use local mock data instead of a real API
+MOCK=0
+
+# Mock API URL (only used when MOCK=1)
+MOCK_API_URL=http://localhost:3001

package/templates/full/README.md

@@ -0,0 +1,101 @@
+# My DiggoCMS App
+
+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)
+- Navigation with dropdown support
+- Mock mode for development
+- Error handling and loading states
+
+## Getting Started
+
+1. Copy `.env.local.example` to `.env.local` and configure:
+   ```bash
+   cp .env.local.example .env.local
+   ```
+
+2. Install dependencies:
+   ```bash
+   npm install
+   # or
+   bun install
+   ```
+
+3. Run the development server:
+   ```bash
+   npm run dev
+   # or
+   bun run dev
+   ```
+
+4. Open [http://localhost:3000](http://localhost:3000) in your browser.
+
+## Configuration
+
+### Using a Real CMS API
+
+Set your CMS API base URL:
+```env
+BASE_URL=https://your-cms-api.com
+MOCK=0
+```
+
+### Using Mock Mode
+
+Enable mock mode for development without a real API:
+```env
+MOCK=1
+MOCK_API_URL=http://localhost:3001
+```
+
+## 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
+
+components/           # React components
+├── DiggoProvider.tsx    # SDK provider wrapper
+├── server-components.ts # Server-safe component exports
+├── ExtendedTitle.tsx
+├── ExtendedSubtitle.tsx
+├── ExtendedImage.tsx
+├── ExtendedRichtext.tsx
+├── ExtendedCard.tsx
+├── ExtendedMenuItem.tsx
+└── ExtendedMenuContainer.tsx
+
+lib/                  # Utility functions
+├── diggo-config.ts   # SDK configuration
+└── data-fetching.ts  # Data fetching helpers
+```
+
+## Extended Components
+
+This template includes extended versions of all base components:
+
+- **ExtendedTitle** - Styled H1 heading
+- **ExtendedSubtitle** - Styled H2 heading
+- **ExtendedImage** - Responsive image with shadow
+- **ExtendedRichtext** - HTML content renderer
+- **ExtendedCard** - Card layout with title, subtitle, content
+- **ExtendedMenuItem** - Navigation item with active state
+- **ExtendedMenuContainer** - Navigation wrapper
+
+## Customization
+
+1. Edit styles in `app/globals.css`
+2. Modify components in `components/`
+3. Update configuration in `lib/diggo-config.ts`
+4. Add more data fetching functions in `lib/data-fetching.ts`
+
+## Documentation
+
+- [DiggoCMS SDK Documentation](https://github.com/digitalygo/diggocms-sdk)
+- [Next.js Documentation](https://nextjs.org/docs)