npm - create-template-html-css - Versions diffs - 1.6.3 → 1.7.0 - Mend

create-template-html-css 1.6.3 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/CHANGELOG.md +50 -0
package/README.md +80 -13
package/bin/cli.js +144 -1
package/package.json +1 -1
package/src/generator.js +476 -165
package/src/inserter.js +355 -352
package/INSERT-QUICK-REFERENCE.md +0 -147
package/PUBLISHED.md +0 -234
package/RELEASE-NOTES-v1.6.1.md +0 -129
package/RELEASE-STATUS.md +0 -203
package/RELEASE-v1.6.2.md +0 -169
package/SECURITY-AUDIT.md +0 -157
package/TEST-REPORT.md +0 -110
package/VERIFICATION-REPORT.md +0 -162
package/v1.6.2-IMPROVEMENTS.md +0 -185

package/v1.6.2-IMPROVEMENTS.md DELETED Viewed

@@ -1,185 +0,0 @@
-# Version 1.6.2 Improvements Summary
-## ✨ Changes Implemented
-### 1. **Simplified Backup Naming**
-Backup files now use clean, simple naming without timestamps:
-**Before:**
-```
-index.html
-index.html.backup.1769896716907
-index.html.backup.1769896775579
-index.html.backup.1769896789741
-```
-**After:**
-```
-index.html
-index.html.backup
-```
-Benefits:
-- ✅ Cleaner file naming
-- ✅ Easier to identify backup files
-- ✅ Less clutter in directory listings
-- ✅ Simple to remember file names
-### 2. **Prettier Code Formatting**
-All generated and inserted code is automatically formatted with Prettier for beautiful, consistent styling.
-**HTML Example (Generator):**
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>My Button</title>
-    <link rel="stylesheet" href="css/style.css" />
-  </head>
-  <body>
-    <div class="container">
-      <h1>Button Component</h1>
-      <!-- Beautiful formatting with proper indentation -->
-    </div>
-    <script src="js/script.js"></script>
-  </body>
-</html>
-```
-**CSS Example:**
-```css
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-body {
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  /* Consistent, beautiful formatting */
-}
-```
-**JavaScript Example:**
-```javascript
-// Properly formatted JavaScript
-document.querySelectorAll(".btn").forEach((button) => {
-  button.addEventListener("click", function (e) {
-    if (!this.disabled) {
-      console.log("Button clicked:", this.textContent);
-    }
-  });
-});
-```
-## 🔄 How It Works
-### Generator (create command)
-1. Creates template structure with css/ and js/ folders
-2. **Formats all files with Prettier before writing**
-3. Creates clean, well-formatted output
-### Inserter (insert command)
-1. Validates target HTML file
-2. Creates backup file with simplified naming
-3. Extracts and inserts component
-4. **Formats final HTML with Prettier**
-5. **Formats CSS and JS files with Prettier**
-6. Updates HTML links to point to organized folders
-## 📊 Testing Results
-### Generator Test
-```bash
-$ node bin/cli.js create -c button -n my-button
-✓ Template created successfully!
-  Location: ./my-button/
-  Structure:
-    index.html          (formatted with prettier)
-    css/
-      └── style.css     (formatted with prettier)
-    js/
-      └── script.js     (formatted with prettier)
-```
-### Inserter Test
-```bash
-$ node bin/cli.js insert -f index.html -c card -s separate --backup
-✓ Component inserted successfully!
-  Backup: index.html.backup (simple naming, no timestamp)
-  CSS: css/card-component.css (formatted with prettier)
-  JS: js/card-component.js (formatted with prettier)
-  HTML: Updated with prettier formatting
-```
-## 🎯 Key Features
-- ✅ **Automatic Prettier Formatting**: All code is beautifully formatted
-- ✅ **Simplified Backups**: No timestamps cluttering filenames
-- ✅ **Consistent Code Style**: All generated and inserted code follows same format
-- ✅ **Better Readability**: Proper indentation and line breaks
-- ✅ **Professional Output**: Code looks production-ready immediately
-## 📦 Dependencies
-Added:
-- `prettier` (^3.x) - for code formatting
-## 🚀 Usage Examples
-### Create with Prettier Formatting
-```bash
-node bin/cli.js create -c button -n my-button
-```
-Output: Beautifully formatted HTML, CSS, and JavaScript files
-### Insert with Prettier Formatting and Backup
-```bash
-node bin/cli.js insert -f index.html -c card -s separate --backup
-```
-Creates:
-- `index.html.backup` (backup without timestamp)
-- `css/card-component.css` (prettier formatted)
-- `js/card-component.js` (prettier formatted)
-- Updated `index.html` (prettier formatted)
-### Insert with Inline Mode
-```bash
-node bin/cli.js insert -f index.html -c modal -s inline --style inline
-```
-Output: Clean, formatted HTML with embedded CSS and JavaScript
-## 📝 Files Modified
-1. **src/generator.js**
-   - Added prettier formatting functions (async)
-   - Updated file writing to use prettier.format()
-2. **src/inserter.js**
-   - Simplified backup naming (removed timestamp)
-   - Added prettier formatting functions (async)
-   - Updated CSS/JS file writing to use prettier.format()
-   - Updated HTML file writing to use prettier.format()
-3. **CHANGELOG.md**
-   - Added v1.6.2 release notes
-4. **package.json**
-   - Added prettier as dev dependency
-## ✅ Status: COMPLETE
-All improvements have been tested and verified working:
-- ✅ Backup naming simplified and tested
-- ✅ Prettier formatting applied to all files
-- ✅ Generator creates beautifully formatted templates
-- ✅ Inserter creates beautifully formatted components
-- ✅ Multiple component insertions working
-- ✅ Both inline and separate file modes working
-**Version:** 1.6.2
-**Date:** February 1, 2026
-**Status:** Ready for Production