universal-email-templates-cli 1.0.0 → 1.0.1

package/README.md

@@ -60,6 +60,22 @@ email-export --platform klaviyo --src ./dist/html --dist ./dist/klaviyo
 email-export --platform hubspot --src ./dist/html --dist ./dist/hubspot
 ```
 
+### Generate Preview Examples
+
+```bash
+# Generate examples for all languages
+email-examples --dist ./dist --examples ./examples --config ./config/examples
+
+# Generate English only
+email-examples en --dist ./dist --examples ./examples --config ./config/examples
+
+# Generate French only
+email-examples fr --dist ./dist --examples ./examples --config ./config/examples
+
+# Clean and regenerate
+email-examples --clean --dist ./dist --examples ./examples --config ./config/examples
+```
+
 ## Programmatic Usage
 
 ```javascript

package/bin/examples.js

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+/**
+ * CLI: Generate preview examples with real data
+ * Usage: email-examples --dist ./dist --examples ./examples --config ./config/examples
+ */
+
+const path = require('path');
+const { generateExamples } = require('../lib/examples');
+
+// Parse command line arguments
+const args = process.argv.slice(2);
+
+function getArg(name, defaultValue) {
+  const index = args.indexOf(`--${name}`);
+  if (index !== -1 && args[index + 1]) {
+    return args[index + 1];
+  }
+  return defaultValue;
+}
+
+function hasFlag(name) {
+  return args.includes(`--${name}`) || args.includes(`-${name[0]}`);
+}
+
+// Get specific language if provided as first non-flag argument
+function getSpecificLang() {
+  const lang = args.find(a => !a.startsWith('--') && !a.startsWith('-'));
+  return lang;
+}
+
+// Show help
+if (hasFlag('help') || hasFlag('h')) {
+  console.log(`
+📋 Universal Email Templates - Examples Generator CLI
+
+Usage:
+  email-examples [options] [language]
+
+Options:
+  --dist <path>      Directory with built HTML files (default: ./dist)
+  --examples <path>  Output directory for examples (default: ./examples)
+  --config <path>    Directory with example data configs (default: ./config/examples)
+  --clean            Clean examples folder before generating
+  --silent           Suppress console output
+  --help, -h         Show this help message
+
+Languages:
+  en                 Generate English examples only
+  fr                 Generate French examples only
+  (none)             Generate all languages (en, fr)
+
+Config Files Required:
+  <config>/en.json       English example data
+  <config>/fr.json       French example data
+  <config>/images.json   Image URLs configuration
+
+Examples:
+  email-examples
+  email-examples en
+  email-examples fr --clean
+  email-examples --dist ./dist --examples ./output --config ./data
+`);
+  process.exit(0);
+}
+
+// Run generator
+const specificLang = getSpecificLang();
+const languages = specificLang ? [specificLang] : ['en', 'fr'];
+
+const options = {
+  distDir: path.resolve(getArg('dist', './dist')),
+  examplesDir: path.resolve(getArg('examples', './examples')),
+  configDir: path.resolve(getArg('config', './config/examples')),
+  languages,
+  clean: hasFlag('clean'),
+  silent: hasFlag('silent')
+};
+
+generateExamples(options)
+  .then(result => {
+    if (result.errors > 0) {
+      process.exit(1);
+    }
+  })
+  .catch(error => {
+    console.error('❌ Example generation failed:', error.message);
+    process.exit(1);
+  });

package/index.js

@@ -1,17 +1,19 @@
 /**
  * Universal Email Templates CLI
- * Build, translate, and export MJML email templates
+ * Build, translate, export and generate examples for MJML email templates
  */
 
 const { build } = require('./lib/builder');
 const { translate, applyTranslations } = require('./lib/translator');
 const { exportTo, platforms } = require('./lib/exporter');
+const { generateExamples } = require('./lib/examples');
 
 module.exports = {
   // Main functions
   build,
   translate,
   exportTo,
+  generateExamples,
 
   // Utilities
   applyTranslations,

package/lib/examples.js

@@ -0,0 +1,563 @@
+/**
+ * Examples Generator
+ * Creates preview-ready HTML files with all variables replaced by example data
+ */
+
+const fs = require('fs');
+const fse = require('fs-extra');
+const path = require('path');
+const glob = require('glob');
+
+/**
+ * UI Translations for index.html
+ */
+const uiTranslations = {
+  en: {
+    title: 'Universal Email Templates',
+    subtitle: 'Professional MJML Email Templates - Ready to Use',
+    templates: 'Templates',
+    categories: 'Categories',
+    responsive: 'Responsive',
+    searchPlaceholder: 'Search templates...',
+    preview: 'Preview',
+    footer: 'Universal Email Templates Pack - Professional MJML Templates',
+    cat_core: 'Core Templates',
+    cat_ecommerce: 'E-Commerce',
+    cat_saas: 'SaaS',
+    cat_agency: 'Agency',
+    cat_restaurant: 'Restaurant',
+    cat_fitness: 'Fitness',
+    cat_education: 'Education',
+    cat_realestate: 'Real Estate',
+    cat_nonprofit: 'Nonprofit',
+    cat_travel: 'Travel',
+    cat_seasonal: 'Seasonal',
+    cat_events: 'Events',
+    templatesCount: 'templates'
+  },
+  fr: {
+    title: 'Templates Email Universels',
+    subtitle: 'Templates Email MJML Professionnels - Prets a utiliser',
+    templates: 'Templates',
+    categories: 'Categories',
+    responsive: 'Responsive',
+    searchPlaceholder: 'Rechercher des templates...',
+    preview: 'Apercu',
+    footer: 'Pack de Templates Email Universels - Templates MJML Professionnels',
+    cat_core: 'Templates Essentiels',
+    cat_ecommerce: 'E-Commerce',
+    cat_saas: 'SaaS',
+    cat_agency: 'Agence',
+    cat_restaurant: 'Restaurant',
+    cat_fitness: 'Fitness',
+    cat_education: 'Education',
+    cat_realestate: 'Immobilier',
+    cat_nonprofit: 'Association',
+    cat_travel: 'Voyage',
+    cat_seasonal: 'Saisonnier',
+    cat_events: 'Evenements',
+    templatesCount: 'templates'
+  }
+};
+
+// Image counters for cycling through arrays
+let imageCounters = {};
+
+/**
+ * Get image URL based on context and template type
+ */
+function getImageUrl(context, templatePath, imagesConfig) {
+  if (!imagesConfig) {
+    return 'https://images.unsplash.com/photo-1557200134-90327ee9fafa?w=600&h=400&fit=crop';
+  }
+
+  const pathLower = templatePath.toLowerCase();
+  let category = 'heroes';
+  let subcategory = 'welcome';
+
+  if (pathLower.includes('ecommerce') || pathLower.includes('cart') || pathLower.includes('product')) {
+    category = context.includes('product') ? 'products' : 'shopping';
+    subcategory = 'bags';
+  } else if (pathLower.includes('travel')) {
+    category = 'travel';
+    subcategory = 'luggage';
+  } else if (pathLower.includes('restaurant') || pathLower.includes('food')) {
+    category = 'food';
+  } else if (pathLower.includes('fitness') || pathLower.includes('gym')) {
+    category = 'fitness';
+    subcategory = 'gym';
+  } else if (pathLower.includes('education') || pathLower.includes('course')) {
+    category = 'education';
+    subcategory = 'classroom';
+  } else if (pathLower.includes('realestate') || pathLower.includes('property')) {
+    category = 'property';
+    subcategory = 'modern_house';
+  } else if (pathLower.includes('charity') || pathLower.includes('nonprofit')) {
+    category = 'charity';
+    subcategory = 'volunteers';
+  } else if (pathLower.includes('agency') || pathLower.includes('project')) {
+    category = 'agency';
+    subcategory = 'meeting';
+  } else if (pathLower.includes('newsletter')) {
+    category = 'newsletter';
+    subcategory = 'laptop';
+  } else if (pathLower.includes('seasonal') || pathLower.includes('holiday')) {
+    category = 'holiday';
+    subcategory = 'gifts';
+  } else if (pathLower.includes('saas') || pathLower.includes('dashboard')) {
+    category = 'dashboard';
+    subcategory = 'analytics';
+  } else if (pathLower.includes('team') || pathLower.includes('welcome')) {
+    category = 'team';
+    subcategory = 'meeting';
+  }
+
+  if (context.includes('avatar') || context.includes('profile') || context.includes('trainer')) {
+    category = 'avatars';
+  }
+
+  if (context.includes('logo')) {
+    return imagesConfig.logos?.default || 'https://via.placeholder.com/200x60?text=Logo';
+  }
+
+  const imageSet = imagesConfig[category];
+  if (!imageSet) {
+    return imagesConfig.heroes?.welcome || 'https://images.unsplash.com/photo-1557200134-90327ee9fafa?w=600&h=400&fit=crop';
+  }
+
+  if (Array.isArray(imageSet)) {
+    if (!imageCounters[category]) imageCounters[category] = 0;
+    const index = imageCounters[category] % imageSet.length;
+    imageCounters[category]++;
+    return imageSet[index];
+  }
+
+  if (typeof imageSet === 'object' && subcategory && imageSet[subcategory]) {
+    return imageSet[subcategory];
+  }
+
+  if (typeof imageSet === 'object') {
+    return Object.values(imageSet)[0];
+  }
+
+  return imageSet;
+}
+
+/**
+ * Flatten nested object to dot notation
+ */
+function flattenObject(obj, prefix = '') {
+  const result = {};
+  for (const key in obj) {
+    const newKey = prefix ? `${prefix}_${key}` : key;
+    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+      Object.assign(result, flattenObject(obj[key], newKey));
+    } else {
+      result[newKey] = obj[key];
+    }
+  }
+  return result;
+}
+
+/**
+ * Replace all variables in content
+ */
+function replaceVariables(content, data, templatePath, imagesConfig) {
+  let result = content;
+  const flatData = flattenObject(data);
+
+  for (const section in data) {
+    if (typeof data[section] === 'object') {
+      for (const key in data[section]) {
+        flatData[key] = data[section][key];
+      }
+    }
+  }
+
+  result = result.replace(/\{\{([a-zA-Z0-9_]+)\}\}/g, (match, varName) => {
+    if (varName.includes('image') || varName.includes('logo') || varName.includes('avatar') || varName.includes('photo')) {
+      return getImageUrl(varName, templatePath, imagesConfig);
+    }
+    if (flatData[varName] !== undefined) {
+      return flatData[varName];
+    }
+    const cleanName = varName.replace(/^(company_|user_|order_|item\d*_|product\d*_|shipping_|billing_)/, '');
+    if (flatData[cleanName] !== undefined) {
+      return flatData[cleanName];
+    }
+    return `[${varName}]`;
+  });
+
+  return result;
+}
+
+/**
+ * Get category info
+ */
+function getCategoryInfo(category, lang = 'en') {
+  const t = uiTranslations[lang] || uiTranslations.en;
+  const categoryMap = {
+    'core': { emoji: '📧', name: t.cat_core },
+    'ecommerce': { emoji: '🛒', name: t.cat_ecommerce },
+    'saas': { emoji: '💻', name: t.cat_saas },
+    'agency': { emoji: '🏢', name: t.cat_agency },
+    'restaurant': { emoji: '🍽️', name: t.cat_restaurant },
+    'fitness': { emoji: '💪', name: t.cat_fitness },
+    'education': { emoji: '📚', name: t.cat_education },
+    'realestate': { emoji: '🏠', name: t.cat_realestate },
+    'nonprofit': { emoji: '❤️', name: t.cat_nonprofit },
+    'travel': { emoji: '✈️', name: t.cat_travel },
+    'seasonal': { emoji: '🎄', name: t.cat_seasonal },
+    'events': { emoji: '📅', name: t.cat_events }
+  };
+  return categoryMap[category] || { emoji: '📁', name: category.charAt(0).toUpperCase() + category.slice(1) };
+}
+
+/**
+ * Process templates for a specific language
+ */
+async function processLanguage(options) {
+  const { lang, sourceDir, outputDir, exampleData, imagesConfig, silent } = options;
+
+  if (!fs.existsSync(sourceDir)) {
+    if (!silent) {
+      console.error(`Source directory not found: ${sourceDir}`);
+      console.log('Run build first to generate HTML templates.');
+    }
+    return { success: 0, errors: 0 };
+  }
+
+  await fse.ensureDir(outputDir);
+
+  const htmlFiles = glob.sync('**/*.html', { cwd: sourceDir });
+
+  let success = 0;
+  let errors = 0;
+
+  if (!silent) {
+    console.log(`\n📁 Processing ${lang.toUpperCase()} templates...`);
+  }
+
+  for (const file of htmlFiles) {
+    const sourcePath = path.join(sourceDir, file);
+    const outputPath = path.join(outputDir, file);
+
+    try {
+      const content = fs.readFileSync(sourcePath, 'utf-8');
+      imageCounters = {};
+      const processedContent = replaceVariables(content, exampleData, file, imagesConfig);
+
+      await fse.ensureDir(path.dirname(outputPath));
+      fs.writeFileSync(outputPath, processedContent);
+
+      if (!silent) {
+        console.log(`   ✅ ${file}`);
+      }
+      success++;
+    } catch (err) {
+      if (!silent) {
+        console.error(`   ❌ ${file}: ${err.message}`);
+      }
+      errors++;
+    }
+  }
+
+  return { success, errors };
+}
+
+/**
+ * Create index.html with links to all examples
+ */
+function createIndex(examplesDir, processedLangs, templatesByLang) {
+  let totalTemplates = 0;
+  const allCategories = new Set();
+
+  for (const lang of processedLangs) {
+    const data = templatesByLang[lang];
+    if (!data) continue;
+    Object.keys(data.categories).forEach(cat => allCategories.add(cat));
+    if (lang === 'en') totalTemplates = data.files.length;
+  }
+
+  const categoryCount = allCategories.size;
+  const t = uiTranslations.en;
+  const tFr = uiTranslations.fr;
+
+  // Generate HTML (simplified version)
+  let html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Universal Email Templates</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); min-height: 100vh; color: #e2e8f0; }
+    .hero { text-align: center; padding: 60px 20px 40px; background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%); }
+    .hero h1 { font-size: 42px; font-weight: 700; color: #fff; margin-bottom: 12px; }
+    .hero .subtitle { font-size: 18px; color: #94a3b8; margin-bottom: 40px; }
+    .stats { display: flex; justify-content: center; gap: 40px; margin-bottom: 40px; flex-wrap: wrap; }
+    .stat-card { background: rgba(30, 58, 95, 0.5); border: 1px solid rgba(59, 130, 246, 0.3); border-radius: 16px; padding: 24px 40px; text-align: center; }
+    .stat-number { font-size: 36px; font-weight: 700; color: #3b82f6; display: block; }
+    .stat-label { font-size: 14px; color: #94a3b8; text-transform: uppercase; }
+    .search-container { max-width: 500px; margin: 0 auto; position: relative; }
+    .search-input { width: 100%; padding: 16px 24px 16px 50px; font-size: 16px; border: 2px solid rgba(59, 130, 246, 0.3); border-radius: 50px; background: rgba(15, 23, 42, 0.8); color: #e2e8f0; outline: none; }
+    .search-icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: #64748b; }
+    .lang-tabs { display: flex; justify-content: center; gap: 10px; padding: 20px; background: rgba(15, 23, 42, 0.5); }
+    .lang-tab { padding: 12px 30px; font-size: 15px; font-weight: 600; border: 2px solid rgba(59, 130, 246, 0.3); border-radius: 50px; background: transparent; color: #94a3b8; cursor: pointer; }
+    .lang-tab:hover { border-color: #3b82f6; color: #e2e8f0; }
+    .lang-tab.active { background: #3b82f6; border-color: #3b82f6; color: #fff; }
+    .container { max-width: 1400px; margin: 0 auto; padding: 40px 20px; }
+    .language-content { display: none; }
+    .language-content.active { display: block; }
+    .category-section { margin-bottom: 50px; }
+    .category-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(59, 130, 246, 0.2); }
+    .category-emoji { font-size: 28px; }
+    .category-title { font-size: 24px; font-weight: 600; color: #fff; }
+    .category-count { font-size: 14px; color: #64748b; background: rgba(59, 130, 246, 0.2); padding: 4px 12px; border-radius: 20px; margin-left: auto; }
+    .templates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
+    @media (max-width: 1200px) { .templates-grid { grid-template-columns: repeat(3, 1fr); } }
+    @media (max-width: 900px) { .templates-grid { grid-template-columns: repeat(2, 1fr); } }
+    @media (max-width: 600px) { .templates-grid { grid-template-columns: 1fr; } }
+    .template-card { background: rgba(30, 41, 59, 0.8); border: 1px solid rgba(59, 130, 246, 0.2); border-radius: 12px; overflow: hidden; transition: transform 0.2s; }
+    .template-card:hover { transform: translateY(-4px); border-color: rgba(59, 130, 246, 0.5); }
+    .template-preview { position: relative; height: 450px; background: #fff; overflow: hidden; }
+    .template-preview iframe { width: 200%; height: 900px; transform: scale(0.5); transform-origin: top left; border: none; pointer-events: none; }
+    .template-info { padding: 16px; }
+    .template-name { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 6px; text-transform: capitalize; }
+    .template-path { font-size: 12px; color: #64748b; margin-bottom: 12px; font-family: monospace; }
+    .preview-btn { display: inline-block; width: 100%; padding: 10px 20px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; color: #fff; background: #3b82f6; border-radius: 8px; }
+    .preview-btn:hover { background: #2563eb; }
+    .footer { text-align: center; padding: 40px 20px; border-top: 1px solid rgba(59, 130, 246, 0.2); }
+    .footer p { color: #64748b; font-size: 14px; }
+    .template-card.hidden, .category-section.hidden { display: none; }
+  </style>
+</head>
+<body>
+  <div class="hero">
+    <h1>${t.title}</h1>
+    <p class="subtitle">${t.subtitle}</p>
+    <div class="stats">
+      <div class="stat-card"><span class="stat-number">${totalTemplates}</span><span class="stat-label">${t.templates}</span></div>
+      <div class="stat-card"><span class="stat-number">${categoryCount}</span><span class="stat-label">${t.categories}</span></div>
+      <div class="stat-card"><span class="stat-number">100%</span><span class="stat-label">${t.responsive}</span></div>
+    </div>
+    <div class="search-container">
+      <span class="search-icon">🔍</span>
+      <input type="text" class="search-input" id="searchInput" placeholder="${t.searchPlaceholder}">
+    </div>
+  </div>
+  <div class="lang-tabs">
+`;
+
+  for (const lang of processedLangs) {
+    const langName = lang === 'en' ? '🇬🇧 English' : '🇫🇷 Français';
+    const activeClass = lang === 'en' ? ' active' : '';
+    html += `    <button class="lang-tab${activeClass}" data-lang="${lang}">${langName}</button>\n`;
+  }
+
+  html += `  </div>
+  <div class="container">
+`;
+
+  for (const lang of processedLangs) {
+    const data = templatesByLang[lang];
+    if (!data) continue;
+
+    const activeClass = lang === 'en' ? ' active' : '';
+    html += `    <div class="language-content${activeClass}" id="content-${lang}">\n`;
+
+    const sortedCategories = Object.keys(data.categories).sort((a, b) => {
+      if (a === 'core') return -1;
+      if (b === 'core') return 1;
+      return a.localeCompare(b);
+    });
+
+    for (const category of sortedCategories) {
+      const catInfo = getCategoryInfo(category, lang);
+      const files = data.categories[category].sort();
+
+      html += `      <div class="category-section" data-category="${category}">
+        <div class="category-header">
+          <span class="category-emoji">${catInfo.emoji}</span>
+          <h2 class="category-title">${catInfo.name}</h2>
+          <span class="category-count">${files.length} ${t.templatesCount}</span>
+        </div>
+        <div class="templates-grid">
+`;
+
+      for (const file of files) {
+        const name = path.basename(file, '.html').replace(/-/g, ' ');
+        const filePath = file.replace(/\\/g, '/');
+
+        html += `          <div class="template-card" data-name="${name.toLowerCase()}" data-path="${filePath.toLowerCase()}">
+            <div class="template-preview">
+              <iframe src="${lang}/${filePath}" loading="lazy" title="${name}"></iframe>
+            </div>
+            <div class="template-info">
+              <div class="template-name">${name}</div>
+              <div class="template-path">${filePath}</div>
+              <a href="${lang}/${filePath}" class="preview-btn" target="_blank">${t.preview}</a>
+            </div>
+          </div>
+`;
+      }
+
+      html += `        </div>
+      </div>
+`;
+    }
+
+    html += `    </div>\n`;
+  }
+
+  html += `  </div>
+  <div class="footer"><p>${t.footer}</p></div>
+  <script>
+    document.querySelectorAll('.lang-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        const lang = tab.dataset.lang;
+        document.querySelectorAll('.lang-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        document.querySelectorAll('.language-content').forEach(c => c.classList.remove('active'));
+        document.getElementById('content-' + lang).classList.add('active');
+      });
+    });
+    document.getElementById('searchInput').addEventListener('input', function() {
+      const query = this.value.toLowerCase().trim();
+      const activeContent = document.querySelector('.language-content.active');
+      activeContent.querySelectorAll('.category-section').forEach(section => {
+        let visible = 0;
+        section.querySelectorAll('.template-card').forEach(card => {
+          const matches = card.dataset.name.includes(query) || card.dataset.path.includes(query);
+          card.classList.toggle('hidden', !matches);
+          if (matches) visible++;
+        });
+        section.classList.toggle('hidden', visible === 0);
+      });
+    });
+  </script>
+</body>
+</html>`;
+
+  fs.writeFileSync(path.join(examplesDir, 'index.html'), html);
+}
+
+/**
+ * Generate examples
+ * @param {Object} options
+ * @param {string} options.distDir - Directory with built HTML templates
+ * @param {string} options.examplesDir - Output directory for examples
+ * @param {string} options.configDir - Directory with example data configs
+ * @param {string[]} [options.languages] - Languages to process
+ * @param {boolean} [options.clean] - Clean before generating
+ * @param {boolean} [options.silent] - Suppress output
+ */
+async function generateExamples(options = {}) {
+  const {
+    distDir,
+    examplesDir,
+    configDir,
+    languages = ['en', 'fr'],
+    clean = false,
+    silent = false
+  } = options;
+
+  if (!silent) {
+    console.log('\n' + '='.repeat(60));
+    console.log('Email Template Example Generator');
+    console.log('='.repeat(60));
+  }
+
+  // Load images config
+  let imagesConfig = {};
+  const imagesConfigPath = path.join(configDir, 'images.json');
+  if (fs.existsSync(imagesConfigPath)) {
+    imagesConfig = JSON.parse(fs.readFileSync(imagesConfigPath, 'utf-8'));
+  }
+
+  // Clean if requested
+  if (clean && fs.existsSync(examplesDir)) {
+    if (!silent) console.log('\n🧹 Cleaning examples directory...');
+    for (const lang of languages) {
+      const langDir = path.join(examplesDir, lang);
+      if (fs.existsSync(langDir)) {
+        await fse.remove(langDir);
+      }
+    }
+    const indexPath = path.join(examplesDir, 'index.html');
+    if (fs.existsSync(indexPath)) {
+      fs.unlinkSync(indexPath);
+    }
+  }
+
+  await fse.ensureDir(examplesDir);
+
+  let totalSuccess = 0;
+  let totalErrors = 0;
+  const templatesByLang = {};
+
+  for (const lang of languages) {
+    const sourceDir = path.join(distDir, 'i18n', lang);
+    const outputDir = path.join(examplesDir, lang);
+    const dataFile = path.join(configDir, `${lang}.json`);
+
+    // Load example data
+    let exampleData = {};
+    if (fs.existsSync(dataFile)) {
+      exampleData = JSON.parse(fs.readFileSync(dataFile, 'utf-8'));
+    } else {
+      if (!silent) console.log(`⚠️  No data file for ${lang}: ${dataFile}`);
+      continue;
+    }
+
+    const result = await processLanguage({
+      lang,
+      sourceDir,
+      outputDir,
+      exampleData,
+      imagesConfig,
+      silent
+    });
+
+    totalSuccess += result.success;
+    totalErrors += result.errors;
+
+    // Collect template info for index
+    if (fs.existsSync(outputDir)) {
+      const htmlFiles = glob.sync('**/*.html', { cwd: outputDir });
+      const categories = {};
+      for (const file of htmlFiles) {
+        const parts = file.split(/[/\\]/);
+        const category = parts.length > 1 ? parts[0] : 'other';
+        if (!categories[category]) categories[category] = [];
+        categories[category].push(file);
+      }
+      templatesByLang[lang] = { files: htmlFiles, categories };
+    }
+  }
+
+  // Create index page
+  createIndex(examplesDir, languages, templatesByLang);
+  if (!silent) console.log(`\n📄 Created examples/index.html`);
+
+  if (!silent) {
+    console.log('\n' + '='.repeat(60));
+    console.log('Summary:');
+    console.log('='.repeat(60));
+    console.log(`  Languages processed: ${languages.join(', ').toUpperCase()}`);
+    console.log(`  Templates generated: ${totalSuccess}`);
+    if (totalErrors > 0) console.log(`  Errors: ${totalErrors}`);
+    console.log(`\n📂 Output: ${examplesDir}\n`);
+  }
+
+  return { success: totalSuccess, errors: totalErrors };
+}
+
+module.exports = {
+  generateExamples,
+  processLanguage,
+  createIndex,
+  replaceVariables,
+  uiTranslations
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "universal-email-templates-cli",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "CLI tools for building, translating and exporting professional MJML email templates to Mailchimp, Klaviyo, and HubSpot",
   "author": "Atsé Fabrice Igor KOMAN <your.email@example.com>",
   "license": "MIT",
@@ -8,7 +8,8 @@
   "bin": {
     "email-build": "./bin/build.js",
     "email-i18n": "./bin/build-i18n.js",
-    "email-export": "./bin/export.js"
+    "email-export": "./bin/export.js",
+    "email-examples": "./bin/examples.js"
   },
   "files": [
     "bin/",