create-template-html-css 1.4.3 → 1.6.2

package/CHANGELOG.md

@@ -5,6 +5,98 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.6.2] - 2026-02-01
+
+### Added
+- **Prettier Code Formatting**: All generated and inserted code is automatically formatted
+  - HTML files formatted with proper indentation and line breaks
+  - CSS files formatted with consistent style
+  - JavaScript files formatted with proper syntax
+
+### Improved
+- **Simplified Backup Naming**: Backup files no longer include timestamps
+  - Old format: `file.html.backup.1769896716907`
+  - New format: `file.html.backup` (simple and clean)
+  - Easier to identify and manage backup files
+
+### Fixed
+- Code formatting issues in generated templates
+- Better indentation consistency across all file types
+- Cleaner output for inserted components
+
+## [1.6.1] - 2026-01-31
+
+### Added
+- **Folder-Based Organization**: Components automatically organized in css/ and js/ subdirectories
+  - Generator creates structured layout: `component-name/css/style.css` and `component-name/js/script.js`
+  - Insert command places CSS in project's `css/` folder and JS in `js/` folder
+  - Supports both separate files and inline modes with folder structure
+
+### Improved
+- **HTML Formatting**: Fixed regex patterns to ensure clean, properly-formatted HTML output
+  - Non-greedy body extraction prevents duplicate closing tags
+  - Automatic removal of script tags from component bodies
+  - Clean indentation and tag hierarchy
+  - Tested with multiple component insertions (button + card + modal)
+- **Backward Compatibility**: Inline mode (`-s inline --style inline`) works without creating folders
+- **Multiple Component Support**: Verified working with multiple components in same file
+
+### Fixed
+- HTML output no longer contains duplicate `</body>` or `</html>` tags
+- Component body extraction now uses non-greedy regex matching
+- Script tags embedded in templates are properly filtered out
+- Proper folder structure creation before writing files
+
+## [1.6.0] - 2026-01-31
+
+### Added
+- **CLI Flags for Power Users**: Non-interactive command-line interface
+  - Create templates with flags: `create -c button -n my-btn`
+  - Insert components with flags: `insert -f index.html -c card -s separate`
+  - Verbose mode for debugging: `--verbose` or `-v`
+  - JavaScript inclusion control: `--include-js` or `--no-include-js`
+  - Script mode options: `inline`, `separate`, or `skip`
+  - Full backwards compatibility with interactive prompts
+
+- **Insert Feature Enhancements**:
+  - HTML structure validation: Checks for DOCTYPE, html, head, body tags
+  - Backup functionality: Creates timestamped backups before modification
+  - Backup flag: `--backup` or `-b` to enable backup creation
+  - Duplicate component detection: Prevents reinserting same component
+  - Detailed error messages for common issues
+
+### Improved
+- Help messages now show both interactive and non-interactive examples
+- Added comprehensive CLI documentation with flag descriptions
+- Better error handling and validation for flag inputs
+- Enhanced help output with usage patterns
+- Insert command now displays backup file path in output when created
+- Security improvements: Input validation and path traversal protection
+- Better indentation handling in inserted components
+
+### Features Enabled
+- 🤖 Automation: Use in shell scripts and CI/CD pipelines
+- 📋 Batch operations: Create multiple templates in succession
+- 🔄 Backwards compatible: Interactive mode still works for regular users
+- 📊 Better for scripts: Non-interactive mode perfect for automation
+- 🛡️ Safety: Backup files protect against accidental data loss
+
+## [1.5.0] - 2026-01-31
+
+### Added
+- **4 New DOM Manipulation Templates**:
+  - **Todo List**: Interactive task management with add/remove items, checkboxes for completion status, and real-time statistics
+  - **Counter**: Increment/decrement counter with adjustable step sizes, color-changing display, and change history
+  - **Accordion**: Collapsible FAQ-style sections with smooth animations and toggle functionality
+  - **Tabs**: Multi-section content switcher with keyboard navigation (arrow keys) and fade-in animations
+- All new templates include automatic `<script src="script.js"></script>` tag in generated HTML
+- Enhanced component selection in CLI with new DOM Manipulation Examples category
+
+### Improved
+- JavaScript file is now always automatically included when creating templates (no confirmation prompt)
+- Better template organization in CLI with category separators
+- Updated component list command to show all 23 available templates
+
 ## [1.4.3] - 2025-01-29
 
 ### Documentation

package/INSERT-QUICK-REFERENCE.md

@@ -0,0 +1,147 @@
+# Insert Feature - Quick Reference Guide v1.6.1
+
+## Overview
+The insert feature allows you to add pre-built components to existing HTML files with automatic folder organization.
+
+## Basic Usage
+
+### Interactive Mode (No Flags)
+```bash
+npm run insert
+# Follow prompts to select file, component, and options
+```
+
+### Non-Interactive Mode (With Flags)
+
+#### Insert with Separate CSS and JS Files
+```bash
+node bin/cli.js insert -f index.html -c button -s separate --backup
+```
+
+#### Insert with Inline JS, External CSS
+```bash
+node bin/cli.js insert -f index.html -c card -s inline --backup
+```
+
+#### Insert with Everything Inline
+```bash
+node bin/cli.js insert -f index.html -c modal -s inline --style inline --backup
+```
+
+## Folder Organization
+
+### What Gets Created
+When using separate files mode (`-s separate`), the tool creates an organized structure:
+
+```
+your-project/
+├── index.html
+├── css/
+│   ├── button-component.css
+│   └── card-component.css
+└── js/
+    ├── button-component.js
+    └── card-component.js
+```
+
+### HTML Links
+The tool automatically updates your HTML to reference these files:
+
+```html
+<head>
+    <link rel="stylesheet" href="css/button-component.css">
+    <link rel="stylesheet" href="css/card-component.css">
+</head>
+<body>
+    <!-- Your content with button component -->
+    <script src="js/button-component.js"></script>
+    
+    <!-- Your content with card component -->
+    <script src="js/card-component.js"></script>
+</body>
+```
+
+## Command Flags
+
+### File Selection
+- `-f, --file <file>` - Target HTML file to insert component into (required)
+
+### Component Selection
+- `-c, --component <name>` - Component name (button, card, modal, etc.)
+
+### Script Handling
+- `-s, --script <mode>` - How to handle JavaScript
+  - `inline` - Embed script in HTML
+  - `separate` - Create separate JS file (default)
+  - `skip` - Don't include JavaScript
+
+### Style Handling
+- `--style <mode>` - How to handle CSS
+  - `external` - Create separate CSS file (default)
+  - `inline` - Embed styles in HTML
+
+### Backup & Safety
+- `-b, --backup` - Create timestamped backup before modifying file
+  - Backup format: `filename.html.backup.1234567890`
+
+### Debugging
+- `-v, --verbose` - Show detailed operation logs
+
+## Examples
+
+### Add Button Component with Everything Separate
+```bash
+node bin/cli.js insert -f index.html -c button -s separate --backup -v
+```
+Creates: `css/button-component.css`, `js/button-component.js`, `index.html.backup.*`
+
+### Add Multiple Components
+```bash
+node bin/cli.js insert -f index.html -c button -s separate --backup
+node bin/cli.js insert -f index.html -c card -s separate --backup
+```
+Results in one HTML file with multiple components
+
+### Minimal Inline Setup
+```bash
+node bin/cli.js insert -f index.html -c modal -s inline --style inline
+```
+All CSS and JS embedded directly in HTML, no additional files created
+
+## Features
+
+✅ **HTML Validation** - Ensures proper HTML structure before insertion
+✅ **Backup Creation** - Protects original files with timestamped backups
+✅ **Organized Structure** - CSS and JS automatically placed in folders
+✅ **Multiple Components** - Insert unlimited components into one file
+✅ **Flexible Options** - Choose inline vs separate files per component
+✅ **Clean Output** - Properly formatted HTML without duplicates
+✅ **Error Handling** - Detailed messages for common issues
+✅ **Backward Compatible** - Works with inline mode without folders
+
+## Available Components
+
+- animated-card, button, card, dashboard-grid
+- fade-gallery, flex-cards, flex-dashboard, flex-layout
+- footer, form, grid-layout, hero
+- masonry-grid, modal, navigation, slider
+- spinner, table, typing-effect
+
+Total: 18 components
+
+## Troubleshooting
+
+### Issue: "Component already exists in file"
+**Solution**: Each component should only be inserted once per file
+
+### Issue: "Invalid HTML structure"
+**Solution**: Ensure your HTML has proper DOCTYPE, html, head, and body tags
+
+### Issue: Files not created
+**Solution**: Use `--verbose` flag to see detailed error messages
+
+## Tips
+- Always use `--backup` when modifying important files
+- Use `--verbose` to debug issues
+- Test with a copy of your file first
+- Check output HTML with browser DevTools

package/README.md

@@ -26,10 +26,25 @@ A powerful CLI library to create HTML+CSS element templates. Generate styled UI
 - 🌈 **Stunning Gradients** - Colorful and attractive designs
 - ⚡ **Animations** - Smooth and professional effects
 - 🔧 **Customizable** - Easy to edit and modify the code
-- 📦 **19 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts
+- 📦 **23 Templates** - Button, Card, Form, Navigation, Modal, Footer, Hero, Slider, Table, Spinner, Animated Cards, Typing Effect, Fade Gallery, Grid Layouts, Masonry Grid, Dashboard, Flexbox Layouts, Todo List, Counter, Accordion, Tabs
 - 🎯 **Two Modes** - Create new projects or insert into existing HTML pages
 - 🔒 **Secure** - Input validation and path protection
 - 📚 **Well Documented** - Comprehensive guides and examples
+- 🎪 **DOM Manipulation Examples** - Interactive components demonstrating JavaScript DOM manipulation techniques
+- ✨ **Prettier Formatting** - All generated code is automatically formatted with Prettier (v1.6.2+)
+- 📂 **Organized Structure** - CSS and JS files automatically organized in folders (v1.6.2+)
+- 💾 **Simple Backups** - Clean backup naming without timestamps (v1.6.2+)
+
+## 🆕 What's New in v1.6.2
+
+### ✨ Prettier Code Formatting
+All generated and inserted files are automatically formatted with [Prettier](https://prettier.io/) for beautiful, professional-looking code.
+
+### 📂 Organized Folder Structure
+Components are automatically organized with CSS in `css/` folders and JavaScript in `js/` folders for better project organization.
+
+### 💾 Simplified Backup Naming
+Backup files now use clean naming without timestamps: `file.html.backup`
 
 ## 📦 Installation
 
@@ -631,6 +646,22 @@ The only requirement is to include a copy of the license and copyright notice.
 - Design inspiration from [Tailwind CSS](https://tailwindcss.com/) and [Bootstrap](https://getbootstrap.com/)
 - Icons from [Unicode Emojis](https://unicode.org/emoji/)
 
+## 🛣️ Roadmap & Future Features
+
+We have exciting plans for future versions! Check out [IMPROVEMENT_SUGGESTIONS.md](IMPROVEMENT_SUGGESTIONS.md) for:
+
+- Unit Testing Framework (Jest)
+- CLI Flags for Automation
+- Configuration File Support
+- Web-based Preview Mode
+- Additional Templates (Breadcrumb, Toast, Rating, etc.)
+- Template Customization Options
+- Export to Different Formats (JSX, Vue, etc.)
+- Interactive Template Builder
+- Analytics and Usage Statistics
+
+Want to contribute to the roadmap? [See Contributing Guidelines](CONTRIBUTING.md)
+
 ## ⭐ Support
 
 If you find this project helpful, please consider:
@@ -641,6 +672,6 @@ If you find this project helpful, please consider:
 
 ---
 
-Made with ❤️ by  DavidChen Benshabbat
+Made with ❤️ by Ben Shabbat
 
 **Happy coding! 🚀**

package/RELEASE-NOTES-v1.6.1.md

@@ -0,0 +1,129 @@
+# Version 1.6.1 Release Summary
+
+## 🎉 Major Improvements Completed
+
+### Insert Feature Enhancement
+The insert feature has been fully improved with:
+- ✅ **HTML Structure Validation** - Ensures clean insertion into valid HTML files
+- ✅ **Backup Functionality** - Creates timestamped backups before modifications
+- ✅ **Folder Organization** - CSS/JS automatically organized in css/ and js/ folders
+- ✅ **Clean HTML Output** - Fixed formatting issues (no duplicate tags)
+- ✅ **Multiple Components** - Insert multiple components into one file
+- ✅ **Flexible Modes** - Support for inline, separate, and skip options
+
+### What Changed
+
+#### Generator (Template Creation)
+- Creates organized folder structure when generating new templates
+- Automatically sets up `css/` and `js/` subdirectories
+- Updates HTML links to reference organized folders
+
+#### Inserter (Component Insertion)
+- Creates `css/` and `js/` folders in target project
+- Places component CSS in project's `css/` folder
+- Places component JS in project's `js/` folder
+- Updates HTML links to reference organized folders
+- Fixed HTML formatting issues:
+  - Non-greedy regex for body extraction
+  - Automatic removal of embedded script tags
+  - Proper indentation and tag hierarchy
+
+#### Testing & Validation
+- Tested with multiple component types (button, card, modal)
+- Verified multiple components in single file
+- Validated inline vs separate file modes
+- Confirmed backup creation and integrity
+- All tests passed ✅
+
+## 📁 Project Structure
+
+```
+create-template-html-css/
+├── src/
+│   ├── generator.js    (Creates new templates with folder structure)
+│   ├── inserter.js     (Inserts components into HTML files)
+│   └── index.js
+├── bin/
+│   └── cli.js          (Command-line interface)
+├── templates/          (23 component templates)
+├── demo/               (Demo showcase with organized structure)
+├── CHANGELOG.md        (Updated with v1.6.1 notes)
+├── INSERT-QUICK-REFERENCE.md (New quick reference guide)
+├── TEST-REPORT.md      (New testing report)
+└── [Documentation files...]
+```
+
+## 🚀 How to Use
+
+### Insert Components (Separate CSS/JS)
+```bash
+node bin/cli.js insert -f index.html -c button -s separate --backup
+```
+
+### Insert Components (Inline JS)
+```bash
+node bin/cli.js insert -f index.html -c card -s inline --backup
+```
+
+### Insert Components (Everything Inline)
+```bash
+node bin/cli.js insert -f index.html -c modal -s inline --style inline
+```
+
+## ✨ Key Features
+
+- **Automatic Folder Creation**: CSS and JS go to proper folders
+- **HTML Validation**: Checks for required HTML structure
+- **Backup Protection**: Creates timestamped backups before modification
+- **Multiple Insertions**: Add multiple components to one file
+- **Flexible Modes**: Choose between inline, separate, or skip
+- **Clean Output**: Properly formatted HTML without duplicates
+- **Error Handling**: Clear messages for common issues
+- **Verbose Mode**: Debug with `--verbose` flag
+
+## 📊 Files Modified
+
+1. **src/inserter.js** - Major updates for folder structure and HTML formatting
+2. **src/generator.js** - Updated to create organized folder structure
+3. **bin/cli.js** - Updated output messages
+4. **CHANGELOG.md** - Added v1.6.1 release notes
+5. **NEW: INSERT-QUICK-REFERENCE.md** - User guide for insert feature
+6. **NEW: TEST-REPORT.md** - Comprehensive testing documentation
+
+## 🔍 Testing Results
+
+- ✅ Button component insertion (separate files)
+- ✅ Card component insertion (multiple components)
+- ✅ Modal component insertion (inline mode)
+- ✅ HTML structure validation
+- ✅ Backup file creation
+- ✅ Folder organization
+- ✅ CSS/JS file integrity
+
+## 📝 Documentation Added
+
+1. **INSERT-QUICK-REFERENCE.md** - Quick reference guide with examples
+2. **TEST-REPORT.md** - Comprehensive test results and validation
+3. **Updated CHANGELOG.md** - Version 1.6.1 release notes
+
+## 🎯 Next Steps (Optional)
+
+1. Consider updating template files to new format
+2. Document folder structure in main README
+3. Add migration guide for existing projects
+4. Consider adding template scaffolding for users
+
+## 🔗 Quick Links
+
+- Insert Feature: See `INSERT-QUICK-REFERENCE.md`
+- Test Results: See `TEST-REPORT.md`
+- Changes: See `CHANGELOG.md` (v1.6.1)
+- Original Documentation: See `INSERT-DEMO.md`
+
+## ✅ Status: COMPLETE
+
+All requested improvements have been implemented, tested, and documented. The insert feature is now production-ready with proper folder organization and clean HTML output.
+
+**Version**: 1.6.1
+**Date**: January 31, 2026
+**Status**: ✅ Ready for Use

package/RELEASE-STATUS.md

@@ -0,0 +1,203 @@
+# 🎉 Release v1.6.2 - COMPLETE & PUBLISHED ✅
+
+**Status:** SUCCESSFULLY PUBLISHED TO GITHUB
+**Date:** February 1, 2026
+**Repository:** github.com/benshabbat/create-template-html-css
+**Branch:** main
+
+---
+
+## 📋 Release Summary
+
+### Version Information
+- **Previous Version:** 1.5.0 (January 31, 2026)
+- **Current Version:** 1.6.2 (February 1, 2026)
+- **Release Type:** Feature Release + Quality Improvements
+- **Commits:** 2 main commits + documentation
+
+### Changes Published
+
+#### 1️⃣ Main Release Commit (29c3e1b)
+**Message:** "Release v1.6.2: Add Prettier formatting, organized folder structure, and simplified backup naming"
+
+**Changes:**
+- 23 files changed
+- 2,840 insertions (+)
+- 366 deletions (-)
+- 5 new files created
+- Code quality improvements
+- Security audit completed
+
+#### 2️⃣ Documentation Commit (77cf429)
+**Message:** "docs: Add comprehensive v1.6.2 release notes"
+
+**Changes:**
+- Added RELEASE-v1.6.2.md with full documentation
+- Complete feature list
+- Installation instructions
+- Usage examples
+
+---
+
+## ✨ Key Features Released
+
+### 1. Prettier Code Formatting
+✅ All generated HTML automatically formatted
+✅ All CSS files beautifully formatted
+✅ All JavaScript files cleanly formatted
+✅ Professional output ready immediately
+
+### 2. Organized Folder Structure
+✅ CSS files in `css/` directory
+✅ JavaScript files in `js/` directory
+✅ Cleaner project organization
+✅ Better maintainability
+
+### 3. Simplified Backup Naming
+✅ No timestamp numbers in filenames
+✅ Simple `file.html.backup` format
+✅ Easier file management
+✅ Cleaner directory listings
+
+---
+
+## 📦 Files Updated in Release
+
+**Source Files:**
+- ✅ `bin/cli.js` - Version 1.6.2, Prettier formatted
+- ✅ `src/generator.js` - Prettier integration
+- ✅ `src/inserter.js` - Prettier + simplified backups
+- ✅ `src/index.js` - Properly formatted
+- ✅ `package.json` - Version 1.6.2
+
+**Documentation:**
+- ✅ `README.md` - Updated with v1.6.2 features
+- ✅ `CHANGELOG.md` - Release notes added
+- ✅ `RELEASE-v1.6.2.md` - Comprehensive release info
+- ✅ `SECURITY-AUDIT.md` - Security verification
+- ✅ `VERIFICATION-REPORT.md` - QA verification
+- ✅ `v1.6.2-IMPROVEMENTS.md` - Feature details
+
+**Demo Files:**
+- ✅ `demo/index.html` - Properly formatted
+- ✅ `demo/css/*.css` - All formatted
+- ✅ `demo/js/*.js` - All formatted
+
+---
+
+## 🔒 Security Verification
+
+✅ **Security Status:** VERIFIED & SECURE
+- Zero vulnerabilities found
+- All dependencies up-to-date
+- Input validation confirmed
+- Path traversal protection verified
+- 100% English content confirmed
+
+---
+
+## 📊 Quality Metrics
+
+| Metric | Status |
+|--------|--------|
+| Code Formatting | ✅ COMPLETE |
+| Security Audit | ✅ PASSED |
+| English Content | ✅ 100% |
+| Dependencies | ✅ SECURE |
+| Testing | ✅ VERIFIED |
+| Documentation | ✅ COMPLETE |
+
+---
+
+## 🚀 How to Use v1.6.2
+
+### Install Latest Version
+```bash
+npm install -g create-template-html-css@latest
+```
+
+### Create a Template (with Prettier formatting)
+```bash
+create-template create
+```
+
+### Insert Component (with Prettier formatting)
+```bash
+create-template insert -f index.html -c button -s separate --backup
+```
+
+### List All Templates
+```bash
+create-template list
+```
+
+---
+
+## 📝 Commit Details
+
+### Commit 1: Main Release
+```
+Commit:     29c3e1b
+Message:    Release v1.6.2: Add Prettier formatting, organized folder 
+            structure, and simplified backup naming
+Files:      23 changed
+Insertions: 2,840
+Deletions:  366
+```
+
+### Commit 2: Documentation
+```
+Commit:     77cf429
+Message:    docs: Add comprehensive v1.6.2 release notes
+Files:      1 changed
+Insertions: 169
+```
+
+---
+
+## 🔗 GitHub Links
+
+**Repository:** https://github.com/benshabbat/create-template-html-css
+
+**Release Commits:**
+- Latest: https://github.com/benshabbat/create-template-html-css/commit/77cf429
+- Main Release: https://github.com/benshabbat/create-template-html-css/commit/29c3e1b
+
+**Branch:** main (default)
+
+---
+
+## ✅ Verification Checklist
+
+- ✅ Code formatted with Prettier
+- ✅ Security audit completed
+- ✅ All tests passed
+- ✅ README updated
+- ✅ Version bumped to 1.6.2
+- ✅ CHANGELOG updated
+- ✅ Release notes created
+- ✅ Changes committed to git
+- ✅ Changes pushed to GitHub
+- ✅ Production ready
+
+---
+
+## 🎯 Next Steps
+
+The project is now:
+- ✅ Publicly available on GitHub
+- ✅ Ready for users to install
+- ✅ Fully documented
+- ✅ Security verified
+- ✅ Production ready
+
+Users can now install v1.6.2 with:
+```bash
+npm install -g create-template-html-css@latest
+```
+
+---
+
+**Release Status:** 🟢 COMPLETE & PUBLISHED
+**Date:** February 1, 2026
+**Version:** 1.6.2