create-template-html-css 1.4.3 → 1.6.2

package/src/inserter.js

@@ -1,146 +1,352 @@
-const fs = require('fs').promises;
-const path = require('path');
-
-// Security: Validate component name against whitelist
-const VALID_COMPONENTS = ['button', 'card', 'form', 'navigation', 'modal', 'footer', 'hero', 'slider', 'table', 'spinner', 'animated-card', 'typing-effect', 'fade-gallery', 'grid-layout', 'masonry-grid', 'dashboard-grid', 'flex-layout', 'flex-cards', 'flex-dashboard'];
-
-/**
- * Extracts indentation from a line
- */
-function getIndentation(line) {
-  const match = line.match(/^(\s*)/);
-  return match ? match[1] : '';
-}
-
-/**
- * Checks if a component is already inserted in the HTML
- */
-function isComponentAlreadyInserted(htmlContent, component) {
-  const commentPattern = new RegExp(`<!-- ${component.toUpperCase()} Component -->`, 'i');
-  return commentPattern.test(htmlContent);
-}
-
-/**
- * Gets the indentation level used in an HTML file
- */
-function getHtmlIndentation(htmlContent) {
-  // Look for any indented line to determine the standard indentation
-  const match = htmlContent.match(/\n(\s+)\S/);
-  return match ? match[1] : '    '; // default to 4 spaces
-}
-
-async function insertComponent(options) {
-  const { component, targetFile, styleMode, scriptMode } = options;
-  
-  // Security: Validate component name
-  if (!VALID_COMPONENTS.includes(component)) {
-    throw new Error(`Invalid component: ${component}. Must be one of: ${VALID_COMPONENTS.join(', ')}`);
-  }
-  
-  // Check if target file exists
-  const targetPath = path.resolve(process.cwd(), targetFile);
-  try {
-    await fs.access(targetPath);
-  } catch {
-    throw new Error(`Target file not found: ${targetFile}`);
-  }
-  
-  // Read target HTML file
-  let htmlContent = await fs.readFile(targetPath, 'utf-8');
-  
-  // Check if component is already inserted
-  if (isComponentAlreadyInserted(htmlContent, component)) {
-    throw new Error(`Component "${component}" is already inserted in this file`);
-  }
-  
-  // Validate HTML structure
-  if (!htmlContent.includes('</body>')) {
-    throw new Error('Target HTML file does not have a closing </body> tag');
-  }
-  
-  if (!htmlContent.includes('</head>')) {
-    throw new Error('Target HTML file does not have a </head> tag');
-  }
-  
-  // Get component templates
-  const templateDir = path.join(__dirname, '..', 'templates', component);
-  const componentHtml = await fs.readFile(path.join(templateDir, 'index.html'), 'utf-8');
-  const componentCss = await fs.readFile(path.join(templateDir, 'style.css'), 'utf-8');
-  
-  // Extract component body content
-  const bodyMatch = componentHtml.match(/<body[^>]*>([\s\S]*)<\/body>/i);
-  if (!bodyMatch) {
-    throw new Error('Invalid component template structure');
-  }
-  
-  let componentBody = bodyMatch[1].trim();
-  
-  // Get indentation used in the HTML file
-  const baseIndent = getHtmlIndentation(htmlContent);
-  
-  // Normalize component body indentation
-  const lines = componentBody.split('\n').map(line => {
-    if (line.trim() === '') return '';
-    return baseIndent + line.trim();
-  }).join('\n');
-  componentBody = lines;
-  
-  // Insert component HTML before closing </body> tag
-  htmlContent = htmlContent.replace('</body>', `${baseIndent}<!-- ${component.toUpperCase()} Component -->\n${componentBody}\n\n</body>`);
-  
-  // Handle CSS
-  if (styleMode === 'inline') {
-    // Normalize CSS indentation
-    const normalizedCss = componentCss.split('\n').map(line => {
-      if (line.trim() === '') return '';
-      return baseIndent + '    ' + line.trim();
-    }).join('\n');
-    
-    htmlContent = htmlContent.replace('</head>', `${baseIndent}<style id="${component}-styles">\n${baseIndent}    /* ${component.toUpperCase()} Component Styles */\n${normalizedCss}\n${baseIndent}</style>\n</head>`);
-  } else if (styleMode === 'separate') {
-    // Create separate CSS file
-    const cssFileName = `${component}-component.css`;
-    const cssPath = path.join(path.dirname(targetPath), cssFileName);
-    await fs.writeFile(cssPath, `/* ${component.toUpperCase()} Component Styles */\n\n${componentCss}`);
-    
-    // Add link to CSS file
-    htmlContent = htmlContent.replace('</head>', `${baseIndent}<link rel="stylesheet" href="${cssFileName}">\n</head>`);
-  }
-  
-  // Handle JavaScript
-  try {
-    const componentJs = await fs.readFile(path.join(templateDir, 'script.js'), 'utf-8');
-    
-    if (scriptMode === 'inline') {
-      // Normalize JS indentation
-      const normalizedJs = componentJs.split('\n').map(line => {
-        if (line.trim() === '') return '';
-        return baseIndent + '    ' + line.trim();
-      }).join('\n');
-      
-      htmlContent = htmlContent.replace('</body>', `${baseIndent}<script id="${component}-script">\n${baseIndent}    // ${component.toUpperCase()} Component Script\n${normalizedJs}\n${baseIndent}</script>\n</body>`);
-    } else if (scriptMode === 'separate') {
-      // Create separate JS file
-      const jsFileName = `${component}-component.js`;
-      const jsPath = path.join(path.dirname(targetPath), jsFileName);
-      await fs.writeFile(jsPath, `// ${component.toUpperCase()} Component Script\n\n${componentJs}`);
-      
-      // Add script tag
-      htmlContent = htmlContent.replace('</body>', `${baseIndent}<script src="${jsFileName}" id="${component}-script"></script>\n</body>`);
-    }
-  } catch (error) {
-    // No JavaScript file for this component, skip
-  }
-  
-  // Write updated HTML
-  await fs.writeFile(targetPath, htmlContent);
-  
-  return {
-    targetFile: targetPath,
-    component,
-    styleMode,
-    scriptMode
-  };
-}
-
-module.exports = { insertComponent };
+const fs = require("fs").promises;
+const path = require("path");
+
+// Security: Validate component name against whitelist
+const VALID_COMPONENTS = [
+  "button",
+  "card",
+  "form",
+  "navigation",
+  "modal",
+  "footer",
+  "hero",
+  "slider",
+  "table",
+  "spinner",
+  "animated-card",
+  "typing-effect",
+  "fade-gallery",
+  "grid-layout",
+  "masonry-grid",
+  "dashboard-grid",
+  "flex-layout",
+  "flex-cards",
+  "flex-dashboard",
+  "todo-list",
+  "counter",
+  "accordion",
+  "tabs",
+];
+
+/**
+ * Extracts indentation from a line
+ */
+function getIndentation(line) {
+  const match = line.match(/^(\s*)/);
+  return match ? match[1] : "";
+}
+
+/**
+ * Checks if a component is already inserted in the HTML
+ */
+function isComponentAlreadyInserted(htmlContent, component) {
+  const commentPattern = new RegExp(
+    `<!-- ${component.toUpperCase()} Component -->`,
+    "i",
+  );
+  return commentPattern.test(htmlContent);
+}
+
+/**
+ * Formats HTML content with prettier
+ */
+async function formatHtml(htmlContent) {
+  const prettier = require("prettier");
+  try {
+    return await prettier.format(htmlContent, { parser: "html" });
+  } catch (error) {
+    return htmlContent;
+  }
+}
+
+/**
+ * Formats CSS content with prettier
+ */
+async function formatCss(cssContent) {
+  const prettier = require("prettier");
+  try {
+    return await prettier.format(cssContent, { parser: "css" });
+  } catch (error) {
+    return cssContent;
+  }
+}
+
+/**
+ * Formats JavaScript content with prettier
+ */
+async function formatJs(jsContent) {
+  const prettier = require("prettier");
+  try {
+    return await prettier.format(jsContent, { parser: "babel" });
+  } catch (error) {
+    return jsContent;
+  }
+}
+
+/**
+ * Gets the indentation level used in an HTML file
+ */
+function getHtmlIndentation(htmlContent) {
+  // Look for any indented line to determine the standard indentation
+  const match = htmlContent.match(/\n(\s+)\S/);
+  return match ? match[1] : "    "; // default to 4 spaces
+}
+
+/**
+ * Validates that HTML file has proper structure
+ * @param {string} htmlContent - The HTML content to validate
+ * @returns {Object} Object with valid property and any errors
+ */
+function validateHtmlStructure(htmlContent) {
+  const errors = [];
+
+  if (!htmlContent.includes("<!DOCTYPE")) {
+    errors.push("Missing DOCTYPE declaration");
+  }
+
+  if (!htmlContent.includes("<html")) {
+    errors.push("Missing <html> tag");
+  }
+
+  if (!htmlContent.includes("<head>") && !htmlContent.includes("<head ")) {
+    errors.push("Missing <head> tag");
+  }
+
+  if (!htmlContent.includes("</head>")) {
+    errors.push("Missing closing </head> tag");
+  }
+
+  if (!htmlContent.includes("<body>") && !htmlContent.includes("<body ")) {
+    errors.push("Missing <body> tag");
+  }
+
+  if (!htmlContent.includes("</body>")) {
+    errors.push("Missing closing </body> tag");
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+  };
+}
+
+/**
+ * Creates a backup of the original file before insertion
+ * @param {string} targetPath - Path to the original file
+ * @returns {Promise<string>} Path to the backup file
+ */
+async function createBackup(targetPath) {
+  const backupPath = `${targetPath}.backup`;
+  const content = await fs.readFile(targetPath, "utf-8");
+  await fs.writeFile(backupPath, content, "utf-8");
+  return backupPath;
+}
+
+async function insertComponent(options) {
+  const {
+    component,
+    targetFile,
+    styleMode,
+    scriptMode,
+    createBackup: shouldBackup = false,
+  } = options;
+
+  // Security: Validate component name
+  if (!VALID_COMPONENTS.includes(component)) {
+    throw new Error(
+      `Invalid component: ${component}. Must be one of: ${VALID_COMPONENTS.join(", ")}`,
+    );
+  }
+
+  // Check if target file exists
+  const targetPath = path.resolve(process.cwd(), targetFile);
+  try {
+    await fs.access(targetPath);
+  } catch {
+    throw new Error(`Target file not found: ${targetFile}`);
+  }
+
+  // Read target HTML file
+  let htmlContent = await fs.readFile(targetPath, "utf-8");
+
+  // Validate HTML structure
+  const validation = validateHtmlStructure(htmlContent);
+  if (!validation.valid) {
+    throw new Error(
+      `Invalid HTML structure:\n  - ${validation.errors.join("\n  - ")}`,
+    );
+  }
+
+  // Check if component is already inserted
+  if (isComponentAlreadyInserted(htmlContent, component)) {
+    throw new Error(
+      `Component "${component}" is already inserted in this file`,
+    );
+  }
+
+  // Create backup if requested
+  let backupPath = null;
+  if (shouldBackup) {
+    backupPath = await createBackup(targetPath);
+  }
+
+  if (!htmlContent.includes("</head>")) {
+    throw new Error("Target HTML file does not have a </head> tag");
+  }
+
+  // Get component templates
+  const templateDir = path.join(__dirname, "..", "templates", component);
+  const componentHtml = await fs.readFile(
+    path.join(templateDir, "index.html"),
+    "utf-8",
+  );
+
+  // Try to read CSS from css/ subfolder, fall back to root
+  let componentCss;
+  try {
+    componentCss = await fs.readFile(
+      path.join(templateDir, "css", "style.css"),
+      "utf-8",
+    );
+  } catch {
+    componentCss = await fs.readFile(
+      path.join(templateDir, "style.css"),
+      "utf-8",
+    );
+  }
+
+  // Extract component body content (only the inner content, not the body tags)
+  const bodyMatch = componentHtml.match(/<body[^>]*>\s*([\s\S]*?)\s*<\/body>/i);
+  if (!bodyMatch) {
+    throw new Error("Invalid component template structure");
+  }
+
+  let componentBody = bodyMatch[1].trim();
+
+  // Remove any script and style tags that might be in the body
+  componentBody = componentBody
+    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
+    .trim();
+
+  // Get indentation used in the HTML file
+  const baseIndent = getHtmlIndentation(htmlContent);
+
+  // Normalize component body indentation
+  const lines = componentBody
+    .split("\n")
+    .map((line) => {
+      if (line.trim() === "") return "";
+      return baseIndent + line.trim();
+    })
+    .join("\n");
+  componentBody = lines;
+
+  // Insert component HTML before closing </body> tag
+  htmlContent = htmlContent.replace(
+    "</body>",
+    `${baseIndent}<!-- ${component.toUpperCase()} Component -->\n${componentBody}\n\n</body>`,
+  );
+
+  // Handle CSS
+  if (styleMode === "inline") {
+    // Normalize CSS indentation
+    const normalizedCss = componentCss
+      .split("\n")
+      .map((line) => {
+        if (line.trim() === "") return "";
+        return baseIndent + "    " + line.trim();
+      })
+      .join("\n");
+
+    htmlContent = htmlContent.replace(
+      "</head>",
+      `${baseIndent}<style id="${component}-styles">\n${baseIndent}    /* ${component.toUpperCase()} Component Styles */\n${normalizedCss}\n${baseIndent}</style>\n</head>`,
+    );
+  } else if (styleMode === "separate") {
+    // Create css directory if needed
+    const cssDir = path.join(path.dirname(targetPath), "css");
+    await fs.mkdir(cssDir, { recursive: true });
+
+    // Create separate CSS file in css/ folder
+    const cssFileName = `${component}-component.css`;
+    const cssPath = path.join(cssDir, cssFileName);
+    const formattedCss = await formatCss(
+      `/* ${component.toUpperCase()} Component Styles */\n\n${componentCss}`,
+    );
+    await fs.writeFile(cssPath, formattedCss);
+
+    // Add link to CSS file
+    htmlContent = htmlContent.replace(
+      "</head>",
+      `${baseIndent}<link rel="stylesheet" href="css/${cssFileName}">\n</head>`,
+    );
+  }
+
+  // Handle JavaScript
+  try {
+    // Try to read JS from js/ subfolder, fall back to root
+    let componentJs;
+    try {
+      componentJs = await fs.readFile(
+        path.join(templateDir, "js", "script.js"),
+        "utf-8",
+      );
+    } catch {
+      componentJs = await fs.readFile(
+        path.join(templateDir, "script.js"),
+        "utf-8",
+      );
+    }
+
+    if (scriptMode === "inline") {
+      // Normalize JS indentation
+      const normalizedJs = componentJs
+        .split("\n")
+        .map((line) => {
+          if (line.trim() === "") return "";
+          return baseIndent + "    " + line.trim();
+        })
+        .join("\n");
+
+      htmlContent = htmlContent.replace(
+        "</body>",
+        `${baseIndent}<script id="${component}-script">\n${baseIndent}    // ${component.toUpperCase()} Component Script\n${normalizedJs}\n${baseIndent}</script>\n</body>`,
+      );
+    } else if (scriptMode === "separate") {
+      // Create js directory if needed
+      const jsDir = path.join(path.dirname(targetPath), "js");
+      await fs.mkdir(jsDir, { recursive: true });
+
+      // Create separate JS file in js/ folder
+      const jsFileName = `${component}-component.js`;
+      const jsPath = path.join(jsDir, jsFileName);
+      const formattedJs = await formatJs(
+        `// ${component.toUpperCase()} Component Script\n\n${componentJs}`,
+      );
+      await fs.writeFile(jsPath, formattedJs);
+
+      // Add script tag
+      htmlContent = htmlContent.replace(
+        "</body>",
+        `${baseIndent}<script src="js/${jsFileName}" id="${component}-script"></script>\n</body>`,
+      );
+    }
+  } catch (error) {
+    // No JavaScript file for this component, skip
+  }
+
+  // Write updated HTML with prettier formatting
+  const formattedHtml = await formatHtml(htmlContent);
+  await fs.writeFile(targetPath, formattedHtml);
+
+  return {
+    targetFile: targetPath,
+    component,
+    styleMode,
+    scriptMode,
+    backupPath: backupPath || null,
+    success: true,
+  };
+}
+
+module.exports = { insertComponent, validateHtmlStructure, createBackup };

package/templates/accordion/index.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{name}} - Accordion Component</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="accordion-wrapper">
+            <h1>Frequently Asked Questions</h1>
+            
+            <div class="accordion">
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>What is this accordion component?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            This is a fully functional accordion component that uses DOM manipulation to toggle content visibility. Click on any header to expand or collapse the content.
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>How does it work?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            The accordion uses JavaScript to toggle classes on DOM elements. When you click a header, it adds or removes the 'active' class to expand or collapse the content section.
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>Can I customize the content?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            Absolutely! You can easily modify the HTML to add your own questions and answers. The styling and functionality will work with any content you add.
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="accordion-item">
+                    <button class="accordion-header">
+                        <span>Is it mobile responsive?</span>
+                        <span class="icon">+</span>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="accordion-body">
+                            Yes! This accordion is fully responsive and works great on all screen sizes - desktop, tablet, and mobile devices.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>

package/templates/accordion/script.js

@@ -0,0 +1,29 @@
+// Accordion Component
+
+const accordionHeaders = document.querySelectorAll('.accordion-header');
+
+// Toggle accordion
+function toggleAccordion(e) {
+    const header = e.currentTarget;
+    const item = header.parentElement;
+    
+    // Close all other items
+    document.querySelectorAll('.accordion-item').forEach(accordionItem => {
+        if (accordionItem !== item) {
+            accordionItem.classList.remove('active');
+        }
+    });
+    
+    // Toggle current item
+    item.classList.toggle('active');
+}
+
+// Add event listeners
+accordionHeaders.forEach(header => {
+    header.addEventListener('click', toggleAccordion);
+});
+
+// Optional: Open first item by default
+if (accordionHeaders.length > 0) {
+    accordionHeaders[0].parentElement.classList.add('active');
+}