create-marp-presentation 1.1.0 → 1.2.0

package/lib/vscode-integration.js

@@ -0,0 +1,198 @@
+// lib/vscode-integration.js
+const fs = require('fs');
+const path = require('path');
+const { VSCodeIntegrationError } = require('./errors');
+
+/**
+ * DTO for VSCode settings structure
+ * Encapsulates the settings format and provides type-safe accessors
+ */
+class VSCodeSettingsDTO {
+  /**
+   * @param {Object} settings - Raw settings object
+   */
+  constructor(settings = {}) {
+    this._settings = settings;
+  }
+
+  /**
+   * Get Marp themes array
+   * Supports both flat key "markdown.marp.themes" and nested markdown.marp.themes
+   * @returns {string[]} Array of theme file paths
+   */
+  getMarpThemes() {
+    // Support both flat key and nested structure for backward compatibility
+    if (this._settings['markdown.marp.themes']) {
+      return this._settings['markdown.marp.themes'];
+    }
+    return this._settings.markdown?.marp?.themes || [];
+  }
+
+  /**
+   * Set Marp themes array
+   * Always uses flat key format for VSCode
+   * @param {string[]} themes - Array of theme file paths
+   */
+  setMarpThemes(themes) {
+    // Always use flat key format for VSCode
+    this._settings['markdown.marp.themes'] = themes;
+  }
+
+  /**
+   * Merge another settings object into this one
+   * Combines themes without duplicates
+   * @param {VSCodeSettingsDTO} other - Other settings to merge
+   */
+  merge(other) {
+    const otherThemes = other.getMarpThemes();
+    const currentThemes = this.getMarpThemes();
+    const merged = [...new Set([...currentThemes, ...otherThemes])];
+    this.setMarpThemes(merged);
+  }
+
+  /**
+   * Convert to plain object for JSON serialization
+   * @returns {Object} Plain settings object
+   */
+  toObject() {
+    return { ...this._settings };
+  }
+}
+
+/**
+ * Manages VSCode settings integration for Marp themes
+ * Handles .vscode/settings.json for markdown.marp.themes configuration
+ */
+class VSCodeIntegration {
+  /**
+   * @param {string} projectPath - Path to the project root
+   */
+  constructor(projectPath) {
+    if (!projectPath) {
+      throw new VSCodeIntegrationError('Project path is required');
+    }
+    this.projectPath = projectPath;
+  }
+
+  /**
+   * Returns the path to .vscode/settings.json
+   * @returns {string} Absolute path to settings.json
+   */
+  getSettingsPath() {
+    return path.join(this.projectPath, '.vscode', 'settings.json');
+  }
+
+  /**
+   * Reads settings.json from .vscode directory
+   * Returns empty object if file doesn't exist
+   * Creates backup of corrupted JSON files
+   *
+   * @returns {Object} Parsed settings object
+   * @throws {VSCodeIntegrationError} If backup creation fails
+   */
+  readSettings() {
+    const settingsPath = this.getSettingsPath();
+
+    // Return empty object if file doesn't exist
+    if (!fs.existsSync(settingsPath)) {
+      return {};
+    }
+
+    try {
+      const content = fs.readFileSync(settingsPath, 'utf-8');
+      const settings = JSON.parse(content);
+      return settings;
+    } catch (error) {
+      if (error instanceof SyntaxError) {
+        // Create backup of corrupted file
+        this._backupCorruptedSettings(settingsPath);
+        return {};
+      }
+      throw new VSCodeIntegrationError(`Failed to read settings: ${error.message}`);
+    }
+  }
+
+  /**
+   * Writes settings to .vscode/settings.json
+   * Creates .vscode directory if it doesn't exist
+   *
+   * @param {Object} settings - Settings object to write
+   * @throws {VSCodeIntegrationError} If directory creation or write fails
+   */
+  writeSettings(settings) {
+    const vscodeDir = path.join(this.projectPath, '.vscode');
+    const settingsPath = this.getSettingsPath();
+
+    try {
+      // Create .vscode directory if it doesn't exist
+      if (!fs.existsSync(vscodeDir)) {
+        fs.mkdirSync(vscodeDir, { recursive: true });
+      }
+
+      // Write settings with pretty formatting (2-space indent)
+      fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2), 'utf-8');
+    } catch (error) {
+      throw new VSCodeIntegrationError(`Failed to write settings: ${error.message}`);
+    }
+  }
+
+  /**
+   * Creates a new DTO instance from current settings
+   * @returns {VSCodeSettingsDTO} DTO instance
+   */
+  createSettingsDTO() {
+    const settings = this.readSettings();
+    return new VSCodeSettingsDTO(settings);
+  }
+
+  /**
+   * Syncs Marp themes to VSCode settings
+   * Updates markdown.marp.themes array in settings.json
+   * Preserves existing settings while updating theme list
+   *
+   * @param {string[]} themes - Array of theme file paths
+   * @throws {VSCodeIntegrationError} If settings read/write fails
+   */
+  syncThemes(themes) {
+    const dto = this.createSettingsDTO();
+    dto.setMarpThemes(themes);
+    this.writeSettings(dto.toObject());
+  }
+
+  /**
+   * Reads and returns settings as DTO
+   * @returns {VSCodeSettingsDTO} DTO instance
+   */
+  readSettingsAsDTO() {
+    const settings = this.readSettings();
+    return new VSCodeSettingsDTO(settings);
+  }
+
+  /**
+   * Creates a backup of corrupted settings.json
+   * Backup filename: settings.json.corrupted.YYYYMMDD-HHMMSS
+   *
+   * @private
+   * @param {string} settingsPath - Path to corrupted settings file
+   * @throws {VSCodeIntegrationError} If backup creation fails
+   */
+  _backupCorruptedSettings(settingsPath) {
+    try {
+      const timestamp = new Date()
+        .toISOString()
+        .replace(/[:.]/g, '-')
+        .replace('T', '-')
+        .slice(0, 19);
+      const backupPath = `${settingsPath}.corrupted.${timestamp}`;
+
+      fs.copyFileSync(settingsPath, backupPath);
+      console.warn(`Corrupted settings.json backed up to: ${backupPath}`);
+    } catch (error) {
+      throw new VSCodeIntegrationError(
+        `Failed to create backup of corrupted settings: ${error.message}`
+      );
+    }
+  }
+}
+
+module.exports = { VSCodeIntegration, VSCodeSettingsDTO };

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "create-marp-presentation",
-  "version": "1.1.0",
-  "description": "Create a new Marp presentation project with one command",
+  "version": "1.2.0",
+  "description": "Create a new Marp presentation project with one command. Manage themes quickly and easily with the CLI.",
   "bin": {
     "create-marp-presentation": "index.js"
   },
   "files": [
     "index.js",
+    "lib/",
     "template/",
-    "template-optional/"
+    "template-optional/",
+    "themes/"
   ],
   "scripts": {
     "test": "jest"
@@ -38,10 +40,16 @@
     "testEnvironment": "node",
     "testMatch": [
       "**/tests/**/*.test.js"
-    ]
+    ],
+    "maxWorkers": 1,
+    "setupFilesAfterEnv": ["<rootDir>/jest.setup.js"]
   },
-  "devDependencies": {
+  "dependencies": {
+    "@inquirer/prompts": "^7.10.1",
     "fast-glob": "^3.3.3",
+    "gray-matter": "^4.0.3"
+  },
+  "devDependencies": {
     "jest": "^29.7.0"
   }
 }

package/template/README.md

@@ -2,36 +2,47 @@
 
 A template for creating presentations with Marp.
 
-## Getting Started
-
-### Live Preview
+## Quick Start
 
 ```bash
 npm run dev
 ```
 
-Opens a browser with auto-reload on changes.
+Opens a browser with live preview and auto-reload on changes.
+
+Edit `presentation.md` to create your slides.
 
-### Creating Slides
+## Building
+
+```bash
+npm run build:html   # HTML presentation (interactive)
+npm run build:pdf    # PDF file
+npm run build:pptx   # PowerPoint
+npm run build:all    # All formats at once
+```
 
-Edit `presentation.md` — this is the main presentation file.
+The output appears in the `output/` folder.
 
-## Building the Presentation
+## Theme Management
 
 ```bash
-npm run build:html    # HTML presentation (interactive)
-npm run build:pdf     # PDF file
-npm run build:pptx    # PowerPoint
-npm run build:all     # All formats at once
+npm run theme:add        # Add themes from library
+npm run theme:list       # List available/installed themes
+npm run theme:set <name> # Set active theme
+npm run theme:create     # Create custom theme
 ```
 
-The output will appear in the `output/` folder.
+For detailed theme management guide, see [docs/theme-management.md](docs/theme-management.md).
 
-## Static Files
+## VSCode Setup
 
-Place images and other files in the folder specified in `marp.config.js`.
+1. Install [Marp for VSCode](https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode)
+2. Open this project in VSCode
+3. Click "Marp: Open Preview" in the editor toolbar
+
+## Static Files
 
-Default: `static/`
+Place images and other files in `static/` folder.
 
 You can add additional folders in `marp.config.js`:
 
@@ -42,7 +53,7 @@ module.exports = {
 };
 ```
 
-## Cleaning Up
+## Cleaning
 
 ```bash
 npm run clean
@@ -54,4 +65,4 @@ Removes the `output/` folder.
 
 - [Marp Documentation](https://marp.app/)
 - [Marp CLI](https://github.com/marp-team/marp-cli)
-- [Markdown Guide](https://www.markdownguide.org/)
+- [Theme Management Guide](docs/theme-management.md)

package/template/package.json

@@ -9,7 +9,16 @@
     "build:pptx": "marp presentation.md -o output/presentation.pptx --allow-local-files && npm run copy:static",
     "build:all": "npm run build:html && npm run build:pdf && npm run build:pptx",
     "copy:static": "node scripts/copy-static.js",
-    "clean": "rimraf output"
+    "clean": "rimraf output",
+    "theme": "node scripts/theme-cli.js",
+    "theme:add": "npx create-marp-presentation theme:add .",
+    "theme:list": "node scripts/theme-cli.js list",
+    "theme:create": "node scripts/theme-cli.js create",
+    "theme:set": "node scripts/theme-cli.js set"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^7.10.1",
+    "gray-matter": "^4.0.3"
   },
   "devDependencies": {
     "@marp-team/marp-cli": "^4.1.2",
@@ -18,5 +27,8 @@
   },
   "engines": {
     "node": ">=20.0.0"
+  },
+  "marp": {
+    "themeSet": "./themes"
   }
 }

package/template/scripts/theme-cli.js

@@ -0,0 +1,248 @@
+#!/usr/bin/env node
+
+/**
+ * theme-cli.js - CLI for managing Marp themes in a project
+ *
+ * This script provides commands to:
+ * - List installed themes
+ * - Create new themes
+ * - Update presentation.md with selected theme
+ * - Sync themes to VSCode settings
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+// Import lib modules
+const {
+  ThemeResolver,
+  Theme
+} = require('./lib/theme-resolver');
+const { ThemeManager } = require('./lib/theme-manager');
+const { Prompts } = require('./lib/prompts');
+const { Frontmatter } = require('./lib/frontmatter');
+const { VSCodeIntegration } = require('./lib/vscode-integration');
+const {
+  ThemeError,
+  ThemeNotFoundError,
+  ThemeAlreadyExistsError,
+  PresentationNotFoundError
+} = require('./lib/errors');
+
+// Get command from arguments
+const command = process.argv[2] || 'help';
+const args = process.argv.slice(3);
+
+// Paths
+const projectRoot = process.cwd();
+const templatePath = path.join(__dirname, '..');
+
+/**
+ * Show help message
+ */
+function showHelp() {
+  console.log(`
+Marp Theme CLI
+
+Usage:
+  npm run theme <command> [options]
+
+Commands:
+  list                 List installed themes
+  create <name>        Create a new theme
+  set <theme>          Set active theme in presentation.md
+  switch <theme>       Alias for 'set' - change active theme
+  sync                 Sync installed themes to VSCode settings
+  help                 Show this help message
+
+Options:
+  --force              Overwrite existing themes (for theme:add)
+
+Examples:
+  npm run theme list
+  npm run theme create my-theme
+  npm run theme set beam
+  npm run theme sync
+
+Note:
+  Run "npm run theme:add" to add themes from the theme library.
+`);
+}
+
+/**
+ * List installed themes
+ */
+async function listThemes() {
+  console.log('\n=== Installed Themes ===\n');
+
+  const projectThemesPath = path.join(projectRoot, 'themes');
+  let installedThemes = [];
+
+  if (fs.existsSync(projectThemesPath)) {
+    try {
+      installedThemes = ThemeResolver.scanDirectory(projectThemesPath);
+    } catch (error) {
+      // Directory exists but no themes
+    }
+  }
+
+  if (installedThemes.length === 0) {
+    console.log('  No themes installed.');
+    console.log('  Run "npm run theme:add" to install themes.\n');
+  } else {
+    for (const theme of installedThemes) {
+      const deps = theme.dependencies.length > 0
+        ? ` (depends on: ${theme.dependencies.join(', ')})`
+        : '';
+      console.log(`  ${theme.name}${deps}`);
+    }
+    console.log();
+  }
+}
+
+/**
+ * Create a new theme
+ */
+async function createTheme(themeName) {
+  if (!themeName) {
+    console.error('\nError: Theme name is required.\n');
+    console.log('Usage: npm run theme create <theme-name>\n');
+    process.exit(1);
+  }
+
+  const manager = new ThemeManager(projectRoot);
+
+  try {
+    console.log(`\nCreating theme: ${themeName}\n`);
+
+    // Prompt for parent theme - need objects with isSystem property
+    const scannedThemes = manager.scanThemes();
+    const systemThemeObjects = ThemeManager.SYSTEM_THEMES.map(name => ({
+      name,
+      isSystem: true
+    }));
+    const allThemes = [...scannedThemes, ...systemThemeObjects];
+    const parentTheme = await Prompts.promptParentTheme(allThemes);
+
+    // Prompt for directory location
+    const existingDirs = manager.listDirectories();
+    const location = await Prompts.promptDirectoryLocation(existingDirs);
+
+    let newFolderName = null;
+    if (location === 'new') {
+      newFolderName = await Prompts.promptNewFolderName();
+    }
+
+    const result = manager.createTheme(
+      themeName,
+      parentTheme,
+      location,
+      newFolderName
+    );
+
+    console.log(`\n✓ Theme created: ${result.path}\n`);
+    console.log('Next steps:');
+    console.log(`  1. Edit ${result.path} to customize the theme`);
+    console.log(`  2. Run "npm run theme set ${themeName}" to use it in your presentation\n`);
+  } catch (error) {
+    console.error(`\nError: ${error.message}\n`);
+    process.exit(1);
+  }
+}
+
+/**
+ * Sync VSCode settings with installed themes
+ */
+async function syncThemes() {
+  const projectThemesPath = path.join(projectRoot, 'themes');
+  let installedThemes = [];
+
+  if (fs.existsSync(projectThemesPath)) {
+    try {
+      installedThemes = ThemeResolver.scanDirectory(projectThemesPath);
+    } catch (error) {
+      // Directory exists but no themes
+    }
+  }
+
+  if (installedThemes.length === 0) {
+    console.log('\nNo themes installed to sync.\n');
+    return;
+  }
+
+  // Build theme paths for VSCode
+  const themePaths = installedThemes.map(theme => {
+    // For themes in subdirectories, use themes/subdir/theme.css
+    // For themes at root level, use themes/theme.css
+    if (theme.path.includes(`${path.sep}themes${path.sep}`)) {
+      const relativePath = theme.path.split(`${path.sep}themes${path.sep}`)[1];
+      return `themes/${relativePath}`;
+    }
+    return `themes/${theme.name}.css`;
+  });
+
+  // Sync with VSCode
+  const vscode = new VSCodeIntegration(projectRoot);
+  vscode.syncThemes(themePaths);
+
+  console.log(`\n✓ Synced ${themePaths.length} theme(s) to VSCode settings:`);
+  themePaths.forEach(p => console.log(`  - ${p}`));
+  console.log();
+}
+
+/**
+ * Main CLI entry point
+ */
+async function main() {
+  switch (command) {
+    case 'list':
+      await listThemes();
+      break;
+
+    case 'create':
+      await createTheme(args[0]);
+      break;
+
+    case 'set':
+    case 'switch':
+      try {
+        const themeManager = new ThemeManager(projectRoot);
+        themeManager.setActiveTheme(args[0]);
+        console.log(`\n✓ Theme set to "${args[0]}" in presentation.md`);
+
+        // VSCode integration - sync ALL themes in project
+        themeManager.updateVSCodeSettings();
+
+        console.log('Next steps:');
+        console.log('  npm run dev  # Start live preview\n');
+      } catch (error) {
+        if (error.name === 'ThemeNotFoundError') {
+          console.error(`\nError: ${error.message}\n`);
+          console.log('Run "npm run theme list" to see available themes.\n');
+          process.exit(1);
+        }
+        if (error.name === 'PresentationNotFoundError') {
+          console.error(`\nError: presentation.md not found in ${projectRoot}\n`);
+          process.exit(1);
+        }
+        console.error(`\nError: ${error.message}\n`);
+        process.exit(1);
+      }
+      break;
+
+    case 'sync':
+      await syncThemes();
+      break;
+
+    case 'help':
+    default:
+      showHelp();
+      break;
+  }
+}
+
+// Run CLI
+main().catch(error => {
+  console.error(`\nUnexpected error: ${error.message}\n`);
+  process.exit(1);
+});