create-marp-presentation 1.1.0 → 1.2.1

package/lib/prompts.js

@@ -0,0 +1,222 @@
+// lib/prompts.js
+const inquirer = require('@inquirer/prompts');
+const { THEME_NOT_FOUND } = require('./errors');
+
+/**
+ * Interactive prompts for theme management
+ */
+class Prompts {
+  /**
+   * Prompt user to select themes from available options
+   *
+   * @param {Array} availableThemes - Array of {name, description} objects
+   * @returns {Promise<string[]>} Array of selected theme names
+   */
+  static async promptThemes(availableThemes) {
+    if (availableThemes.length === 0) {
+      return [];
+    }
+
+    const choices = availableThemes.map(theme => ({
+      name: theme.name,
+      value: theme.name,
+      checked: false
+    }));
+
+    return await inquirer.checkbox({
+      message: 'Select themes to add:',
+      choices
+    });
+  }
+
+  /**
+   * Prompt user to select active theme from available themes
+   *
+   * @param {string[]} selectedThemes - Array of available theme names
+   * @returns {Promise<string>} Selected theme name
+   * @throws {Error} If no themes available
+   */
+  static async promptActiveTheme(selectedThemes) {
+    if (selectedThemes.length === 0) {
+      throw new Error('No themes available');
+    }
+
+    // Return single theme if only one available
+    if (selectedThemes.length === 1) {
+      return selectedThemes[0];
+    }
+
+    return await inquirer.select({
+      message: 'Select active theme:',
+      choices: selectedThemes
+    });
+  }
+
+  /**
+   * Prompt user for new theme name with validation
+   *
+   * @returns {Promise<string>} Validated theme name
+   */
+  static async promptNewThemeName() {
+    return await inquirer.input({
+      message: 'Theme name:',
+      validate: (input) => {
+        if (!input || input.trim().length === 0) {
+          return 'Theme name is required';
+        }
+        if (!/^[a-z0-9-]+$/.test(input)) {
+          return 'Theme name must contain only lowercase letters, numbers, and hyphens';
+        }
+        return true;
+      }
+    });
+  }
+
+  /**
+   * Prompt user to select parent theme
+   *
+   * @param {Array} existingThemes - Array of {name, isSystem} objects
+   * @returns {Promise<string|null>} Selected parent theme name or null for none
+   */
+  static async promptParentTheme(existingThemes) {
+    const choices = [
+      { name: 'none (create from scratch)', value: null },
+      new inquirer.Separator('--- System Themes ---'),
+      { name: 'default (system built-in)', value: 'default' },
+      { name: 'gaia (system built-in)', value: 'gaia' },
+      { name: 'uncover (system built-in)', value: 'uncover' }
+    ];
+
+    // Add custom themes
+    const customThemes = existingThemes.filter(t => !t.isSystem);
+    if (customThemes.length > 0) {
+      choices.push(new inquirer.Separator('--- Custom Themes ---'));
+      customThemes.forEach(theme => {
+        choices.push({ name: theme.name, value: theme.name });
+      });
+    }
+
+    return await inquirer.select({
+      message: 'Parent theme:',
+      choices
+    });
+  }
+
+  /**
+   * Prompt user for directory location for new theme
+   *
+   * @param {Array} existingDirs - Array of existing directory names
+   * @returns {Promise<string>} Selected option: 'root', 'existing', or 'new'
+   */
+  static async promptDirectoryLocation(existingDirs) {
+    const choices = [
+      { name: 'In root (themes/<name>.css)', value: 'root' }
+    ];
+
+    if (existingDirs.length > 0) {
+      choices.push(new inquirer.Separator('--- Existing Folders ---'));
+      existingDirs.forEach(dir => {
+        choices.push({
+          name: `In existing folder: themes/${dir}/`,
+          value: dir
+        });
+      });
+    }
+
+    choices.push(new inquirer.Separator('--- New Folder ---'));
+    choices.push({ name: 'In new folder (enter name)', value: 'new' });
+
+    return await inquirer.select({
+      message: 'Where to create the theme CSS file?',
+      choices
+    });
+  }
+
+  /**
+   * Prompt user for new folder name
+   *
+   * @returns {Promise<string>} Folder name
+   */
+  static async promptNewFolderName() {
+    return await inquirer.input({
+      message: 'Folder name:',
+      validate: (input) => {
+        if (!input || input.trim().length === 0) {
+          return 'Folder name is required';
+        }
+        if (!/^[a-z0-9-]+$/.test(input)) {
+          return 'Folder name must contain only lowercase letters, numbers, and hyphens';
+        }
+        return true;
+      }
+    });
+  }
+
+  /**
+   * Prompt user for conflict resolution
+   *
+   * @param {Array} conflicts - Array of conflicting theme names
+   * @returns {Promise<string>} Selected action: 'skip', 'overwrite', 'skip-all', 'overwrite-all', or 'cancel'
+   */
+  static async promptConflictResolution(conflicts) {
+    const isMultiple = conflicts.length > 1;
+
+    if (isMultiple) {
+      const conflictList = conflicts.map(c => `  - ${c.name}`).join('\n');
+      console.log(`\n${conflicts.length} themes already exist in your project:\n${conflictList}\n`);
+
+      return await inquirer.select({
+        message: 'Apply to all conflicts?',
+        choices: [
+          { name: 'Skip all', value: 'skip-all' },
+          { name: 'Overwrite all', value: 'overwrite-all' },
+          { name: 'Choose for each', value: 'choose-each' },
+          { name: 'Cancel', value: 'cancel' }
+        ]
+      });
+    }
+
+    const conflict = conflicts[0];
+    return await inquirer.select({
+      message: `Theme "${conflict.name}" already exists. What would you like to do?`,
+      choices: [
+        { name: 'Skip (keep existing)', value: 'skip' },
+        { name: 'Overwrite (replace with template version)', value: 'overwrite' },
+        { name: 'Cancel (stop adding themes)', value: 'cancel' }
+      ]
+    });
+  }
+
+  /**
+   * Prompt user for single theme conflict resolution
+   *
+   * @param {string} themeName - Name of conflicting theme
+   * @returns {Promise<string>} Selected action: 'skip', 'overwrite', or 'cancel'
+   */
+  static async promptSingleConflict(themeName) {
+    return await inquirer.select({
+      message: `Theme "${themeName}" already exists. What would you like to do?`,
+      choices: [
+        { name: 'Skip (keep existing)', value: 'skip' },
+        { name: 'Overwrite (replace with template version)', value: 'overwrite' },
+        { name: 'Cancel (stop adding themes)', value: 'cancel' }
+      ]
+    });
+  }
+
+  /**
+   * Confirm action with user
+   *
+   * @param {string} message - Confirmation message
+   * @param {boolean} defaultValue - Default value (true: yes, false: no)
+   * @returns {Promise<boolean>} User's choice
+   */
+  static async confirm(message, defaultValue = true) {
+    return await inquirer.confirm({
+      message,
+      default: defaultValue
+    });
+  }
+}
+
+module.exports = { Prompts };

package/lib/theme-manager.js

@@ -0,0 +1,238 @@
+// lib/theme-manager.js
+const fs = require('fs');
+const path = require('path');
+const { ThemeResolver } = require('./theme-resolver');
+const { VSCodeIntegration } = require('./vscode-integration');
+const { Frontmatter } = require('./frontmatter');
+const {
+  ThemeNotFoundError,
+  ThemeAlreadyExistsError,
+  PresentationNotFoundError
+} = require('./errors');
+
+/**
+ * Main class for theme operations
+ * Manages Marp themes in a project, including scanning, creating, and updating themes
+ */
+class ThemeManager {
+  // System themes that are always available
+  static SYSTEM_THEMES = ['default', 'gaia', 'uncover'];
+
+  /**
+   * Ensure marp.themeSet is configured in package.json
+   * This is a static utility that can be called without instantiating ThemeManager
+   *
+   * @param {string} projectPath - Path to the project directory
+   * @param {Object} options - Optional configuration
+   * @param {boolean} options.silent - If true, don't log messages (default: false)
+   * @returns {boolean} - True if configuration was added, false if already present or error occurred
+   */
+  static ensureThemeSetConfig(projectPath, options = {}) {
+    const { silent = false } = options;
+    const pkgPath = path.join(projectPath, 'package.json');
+
+    if (!fs.existsSync(pkgPath)) {
+      if (!silent) console.warn('  Warning: package.json not found');
+      return false;
+    }
+
+    try {
+      const pkgContent = fs.readFileSync(pkgPath, 'utf-8');
+      const pkg = JSON.parse(pkgContent);
+
+      // Check if marp.themeSet is already configured
+      if (pkg.marp && pkg.marp.themeSet) {
+        return false; // Already configured
+      }
+
+      // Add marp.themeSet configuration
+      if (!pkg.marp) {
+        pkg.marp = {};
+      }
+      pkg.marp.themeSet = './themes';
+
+      // Write back to package.json with proper formatting
+      fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+
+      if (!silent) {
+        console.log('✓ Added marp.themeSet configuration to package.json');
+      }
+      return true; // Configuration was added
+    } catch (error) {
+      if (!silent) {
+        console.warn(`  Warning: Could not ensure marp.themeSet: ${error.message}`);
+      }
+      return false;
+    }
+  }
+
+  /**
+   * Create a new ThemeManager instance
+   *
+   * @param {string} projectPath - Path to the project root
+   */
+  constructor(projectPath) {
+    if (!projectPath) {
+      throw new Error('Project path is required');
+    }
+    this.projectPath = projectPath;
+    this.themesPath = path.join(projectPath, 'themes');
+    this.presentationPath = path.join(projectPath, 'presentation.md');
+  }
+
+  /**
+   * Scan themes in project
+   * Delegates to ThemeResolver.scanDirectory
+   *
+   * @returns {Theme[]} Array of Theme objects found in themes directory
+   */
+  scanThemes() {
+    return ThemeResolver.scanDirectory(this.themesPath);
+  }
+
+  /**
+   * List theme names (for theme-cli.js compatibility)
+   *
+   * @returns {string[]} Array of theme names including system themes
+   */
+  listThemes() {
+    const themes = this.scanThemes().map(t => t.name);
+    return [...themes, ...ThemeManager.SYSTEM_THEMES];
+  }
+
+  /**
+   * List theme directory names (for theme-cli.js compatibility)
+   *
+   * @returns {string[]} Array of directory names in themes folder
+   */
+  listDirectories() {
+    if (!fs.existsSync(this.themesPath)) {
+      return [];
+    }
+
+    const entries = fs.readdirSync(this.themesPath, { withFileTypes: true });
+    return entries
+      .filter(entry => entry.isDirectory())
+      .map(entry => entry.name);
+  }
+
+  /**
+   * Get theme by name
+   *
+   * @param {string} name - Theme name
+   * @returns {Theme|null} Theme object or null if not found
+   */
+  getTheme(name) {
+    const themes = this.scanThemes();
+    return themes.find((theme) => theme.name === name) || null;
+  }
+
+  /**
+   * Get active theme from presentation.md
+   *
+   * @returns {string|null} Theme name or null if not found
+   */
+  getActiveTheme() {
+    if (!fs.existsSync(this.presentationPath)) {
+      return null;
+    }
+
+    const content = fs.readFileSync(this.presentationPath, 'utf-8');
+    return Frontmatter.getTheme(content);
+  }
+
+  /**
+   * Set active theme in presentation.md
+   *
+   * @param {string} themeName - Theme name to set
+   * @throws {ThemeNotFoundError} If theme does not exist
+   * @throws {PresentationNotFoundError} If presentation.md does not exist
+   */
+  setActiveTheme(themeName) {
+    if (!fs.existsSync(this.presentationPath)) {
+      throw new PresentationNotFoundError(this.presentationPath);
+    }
+
+    // Validate theme exists
+    const availableThemes = this.scanThemes().map((t) => t.name);
+    const allThemes = [...availableThemes, ...ThemeManager.SYSTEM_THEMES];
+
+    if (!allThemes.includes(themeName)) {
+      throw new ThemeNotFoundError(themeName);
+    }
+
+    const content = fs.readFileSync(this.presentationPath, 'utf-8');
+    const updated = Frontmatter.setTheme(content, themeName);
+    Frontmatter.writeToFile(this.presentationPath, updated);
+  }
+
+  /**
+   * Create new theme
+   *
+   * @param {string} name - Theme name
+   * @param {string|null} parent - Parent theme name or null
+   * @param {string} location - 'root', 'existing' folder name, or 'new'
+   * @param {string} newFolderName - Required if location is 'new'
+   * @throws {ThemeAlreadyExistsError} If theme with same name already exists
+   * @throws {Error} If location is 'new' but newFolderName not provided
+   */
+  createTheme(name, parent, location, newFolderName = null) {
+    // Check for duplicate
+    if (this.getTheme(name)) {
+      throw new ThemeAlreadyExistsError(name);
+    }
+
+    let cssPath;
+    if (location === 'root') {
+      cssPath = path.join(this.themesPath, `${name}.css`);
+    } else if (location === 'new') {
+      if (!newFolderName) {
+        throw new Error('newFolderName required when location is "new"');
+      }
+      const folderPath = path.join(this.themesPath, newFolderName);
+      fs.mkdirSync(folderPath, { recursive: true });
+      cssPath = path.join(folderPath, `${name}.css`);
+    } else {
+      // Existing folder
+      cssPath = path.join(this.themesPath, location, `${name}.css`);
+    }
+
+    // Generate CSS content
+    let css = `/* @theme ${name} */\n\n`;
+
+    if (parent) {
+      css += `@import "${parent}";\n\n`;
+    }
+
+    css += `:root {\n  /* Your theme variables */\n}\n`;
+
+    fs.writeFileSync(cssPath, css, 'utf-8');
+
+    // Update VSCode settings
+    this.updateVSCodeSettings();
+
+    return { path: cssPath };
+  }
+
+  /**
+   * Update VSCode settings with current themes
+   * Syncs all discovered themes plus system themes to .vscode/settings.json
+   */
+  updateVSCodeSettings() {
+    const themes = this.scanThemes();
+    const vscode = new VSCodeIntegration(this.projectPath);
+
+    // Convert theme objects to relative paths for VSCode
+    const themePaths = themes.map((theme) => {
+      return path.relative(this.projectPath, theme.path);
+    });
+
+    // Add system theme paths for VSCode (system themes use flat structure)
+    const systemThemePaths = ThemeManager.SYSTEM_THEMES.map(name => `themes/${name}.css`);
+    const allThemePaths = [...themePaths, ...systemThemePaths];
+
+    vscode.syncThemes(allThemePaths);
+  }
+}
+
+module.exports = { ThemeManager };

package/lib/theme-resolver.js

@@ -0,0 +1,227 @@
+// lib/theme-resolver.js
+const fs = require('fs');
+const { readdirSync } = require('fs');
+const path = require('path');
+
+/**
+ * Represents a Marp theme
+ */
+class Theme {
+  constructor(name, cssPath, css, dependencies = []) {
+    this.name = name;
+    this.path = cssPath;
+    this.css = css;
+    this.dependencies = dependencies;
+    this.isSystem = ['default', 'gaia', 'uncover'].includes(name);
+  }
+}
+
+/**
+ * Resolves theme information from CSS files
+ */
+class ThemeResolver {
+  static SYSTEM_THEMES = ['default', 'gaia', 'uncover'];
+
+  /**
+   * Extract theme name from CSS comment directive
+   * Pattern: /* @theme name *\/
+   *
+   * @param {string} cssContent - CSS file content
+   * @param {string} fallbackFilename - Filename to use as fallback
+   * @returns {string|null} Theme name or null if not found
+   */
+  static extractThemeName(cssContent, fallbackFilename = null) {
+    // Match /* @theme name */ - supports multi-line comments
+    // The [\s\S]*? allows matching across newlines (non-greedy)
+    const themeDirectiveRegex = /\/\*[\s\S]*?@theme\s+([\w-]+)[\s\S]*?\*\//;
+    const match = cssContent.match(themeDirectiveRegex);
+
+    if (match && match[1]) {
+      return match[1].trim();
+    }
+
+    // Fallback to filename (with or without .css extension)
+    if (fallbackFilename) {
+      const basename = path.basename(fallbackFilename, '.css');
+      return basename;
+    }
+
+    return null;
+  }
+
+  /**
+   * Extract @import dependencies from CSS
+   * Ignores url() imports
+   *
+   * @param {string} cssContent - CSS file content
+   * @returns {string[]} Array of theme names from @import statements
+   */
+  static extractDependencies(cssContent) {
+    // Match @import "theme" or @import 'theme' - exclude url() imports using negative lookahead
+    const importRegex = /@import\s+(?!url\()['"]([^'"]+)['"]\s*;/g;
+    const dependencies = [];
+
+    let match;
+    while ((match = importRegex.exec(cssContent)) !== null) {
+      const importPath = match[1];
+
+      // Skip URL imports (data:, http:, https:, etc.)
+      if (importPath.includes('://') || importPath.startsWith('data:')) {
+        continue;
+      }
+
+      // Skip if it looks like inline CSS content
+      if (importPath.includes('{') || importPath.includes('}')) {
+        continue;
+      }
+
+      dependencies.push(importPath);
+    }
+
+    return dependencies;
+  }
+
+  /**
+   * Resolve theme from a CSS file
+   *
+   * @param {string} cssPath - Path to CSS file
+   * @returns {Theme} Theme object
+   * @throws {Error} If file does not exist
+   */
+  static resolveTheme(cssPath) {
+    if (!fs.existsSync(cssPath)) {
+      throw new Error(`CSS file not found: ${cssPath}`);
+    }
+
+    const css = fs.readFileSync(cssPath, 'utf-8');
+    const filename = path.basename(cssPath);
+    const name = this.extractThemeName(css, filename) || filename;
+    const dependencies = this.extractDependencies(css);
+
+    return new Theme(name, cssPath, css, dependencies);
+  }
+
+  /**
+   * Scan directory recursively for CSS theme files
+   *
+   * @param {string} themesPath - Path to themes directory
+   * @returns {Theme[]} Array of Theme objects (empty if directory doesn't exist)
+   */
+  static scanDirectory(themesPath) {
+    if (!fs.existsSync(themesPath)) {
+      return [];
+    }
+
+    const themes = [];
+    const cssFiles = this._findCssFiles(themesPath);
+
+    for (const cssPath of cssFiles) {
+      try {
+        const theme = this.resolveTheme(cssPath);
+        themes.push(theme);
+      } catch (error) {
+        // Skip files that can't be resolved
+        console.warn(`Warning: Could not resolve theme from ${cssPath}: ${error.message}`);
+      }
+    }
+
+    return themes;
+  }
+
+  /**
+   * Find all CSS files in directory recursively
+   * @private
+   */
+  static _findCssFiles(dirPath, results = []) {
+    const entries = readdirSync(dirPath, { withFileTypes: true });
+
+    for (const entry of entries) {
+      const fullPath = path.join(dirPath, entry.name);
+
+      if (entry.isDirectory()) {
+        this._findCssFiles(fullPath, results);
+      } else if (entry.isFile() && entry.name.endsWith('.css')) {
+        results.push(fullPath);
+      }
+    }
+
+    return results;
+  }
+
+  /**
+   * Resolve all dependencies for selected themes
+   * Returns complete set of themes to copy (including parents)
+   * Excludes system themes (default, gaia, uncover)
+   *
+   * @param {Theme[]} selectedThemes - Themes user selected
+   * @param {Theme[]} allThemes - All available themes
+   * @returns {Theme[]} Themes to copy (selected + dependencies)
+   */
+  static resolveDependencies(selectedThemes, allThemes) {
+    const toCopy = new Map(); // Use Map for deduplication by name
+    const visited = new Set();
+    const visiting = new Set();
+
+    // Create a map of all available themes for quick lookup
+    // Also include selected themes in case they're not in allThemes
+    const allThemesMap = new Map();
+    for (const theme of allThemes) {
+      allThemesMap.set(theme.name, theme);
+    }
+    for (const theme of selectedThemes) {
+      if (!allThemesMap.has(theme.name)) {
+        allThemesMap.set(theme.name, theme);
+      }
+    }
+
+    const addTheme = (themeName) => {
+      if (visited.has(themeName)) {
+        return;
+      }
+
+      // Check for circular dependency
+      if (visiting.has(themeName)) {
+        console.warn(`Warning: Circular dependency detected for theme '${themeName}'`);
+        return;
+      }
+
+      visiting.add(themeName);
+
+      // Find theme in allThemesMap
+      const theme = allThemesMap.get(themeName);
+
+      if (!theme) {
+        console.warn(`Warning: Dependency '${themeName}' not found in available themes`);
+        visiting.delete(themeName);
+        return;
+      }
+
+      // Skip system themes
+      if (theme.isSystem) {
+        visiting.delete(themeName);
+        return;
+      }
+
+      // First resolve dependencies
+      for (const depName of theme.dependencies) {
+        // Extract just the theme name from path (e.g., "../marpx/marpx.css" -> "marpx")
+        const simpleDepName = depName.replace(/\.css$/g, '').split('/').pop();
+        addTheme(simpleDepName);
+      }
+
+      // Then add this theme
+      toCopy.set(theme.name, theme);
+      visited.add(theme.name);
+      visiting.delete(themeName);
+    };
+
+    // Start with selected themes
+    for (const theme of selectedThemes) {
+      addTheme(theme.name);
+    }
+
+    return Array.from(toCopy.values());
+  }
+}
+
+module.exports = { ThemeResolver, Theme };