create-template-html-css 1.5.0 → 1.6.3

package/CHANGELOG.md

@@ -5,6 +5,82 @@ 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

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/PUBLISHED.md

@@ -0,0 +1,234 @@
+# 🎉 v1.6.2 OFFICIALLY PUBLISHED - COMPLETE ✅
+
+**Publication Date:** February 1, 2026
+**Status:** ✅ LIVE ON NPM & GITHUB
+
+---
+
+## 📦 NPM Publication
+
+### Published Package
+- **Package Name:** `create-template-html-css`
+- **Version:** 1.6.2
+- **Registry:** https://www.npmjs.com/package/create-template-html-css
+- **Package Size:** 73.6 kB
+- **Files Included:** 92
+- **Access Level:** public
+
+### Installation Commands
+
+**Global Installation:**
+```bash
+npm install -g create-template-html-css@latest
+```
+
+**Local Installation:**
+```bash
+npm install create-template-html-css
+```
+
+**Specific Version:**
+```bash
+npm install create-template-html-css@1.6.2
+```
+
+---
+
+## 🔗 GitHub Repository
+
+### Public Access
+- **Repository:** https://github.com/benshabbat/create-template-html-css
+- **Branch:** main
+- **Status:** All commits pushed and visible
+- **Latest Commits:**
+  1. Release status documentation (e3febce)
+  2. Release notes documentation (77cf429)
+  3. v1.6.2 main release (29c3e1b)
+
+---
+
+## ✨ v1.6.2 Features (Now Live)
+
+### 1. Prettier Code Formatting ✨
+All generated and inserted code automatically formatted:
+- Beautiful HTML with proper indentation
+- Clean CSS with consistent styling
+- Professional JavaScript formatting
+
+### 2. Organized Folder Structure 📂
+Components organized in logical folders:
+- CSS files in `css/` directory
+- JavaScript files in `js/` directory
+- Better project organization
+
+### 3. Simplified Backup Naming 💾
+Clean backup file naming:
+- Format: `file.html.backup`
+- No timestamps cluttering filenames
+- Easy to identify and manage
+
+---
+
+## 📋 Package Contents
+
+**CLI Tool:**
+- `bin/cli.js` - Command-line interface (v1.6.2)
+
+**Source Code:**
+- `src/generator.js` - Template generation
+- `src/inserter.js` - Component insertion
+- `src/index.js` - Main module
+
+**Templates (23 Total):**
+- 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
+
+**Documentation:**
+- README.md - Complete user guide
+- CHANGELOG.md - Version history
+- SECURITY-AUDIT.md - Security verification
+- RELEASE-v1.6.2.md - Release details
+- And more...
+
+---
+
+## 🔒 Quality Metrics
+
+✅ **Security:** 0 vulnerabilities
+✅ **Code Quality:** Prettier formatted
+✅ **Testing:** All tests passed
+✅ **Documentation:** Complete
+✅ **English Content:** 100% verified
+✅ **Production Ready:** Yes
+
+---
+
+## 📊 Package Statistics
+
+| Metric | Value |
+|--------|-------|
+| Version | 1.6.2 |
+| Package Size | 73.6 kB |
+| Unpacked Size | 412.8 kB |
+| Total Files | 92 |
+| Templates | 23 |
+| Dependencies | 3 (chalk, commander, inquirer) |
+| Dev Dependencies | 1 (prettier) |
+
+---
+
+## 🚀 What Users Can Do Now
+
+### Install Globally
+```bash
+npm install -g create-template-html-css@latest
+create-template create
+create-template insert
+create-template list
+```
+
+### Use in Projects
+```bash
+npm install create-template-html-css
+const { generateTemplate, insertComponent } = require('create-template-html-css');
+```
+
+### Enjoy Features
+- Create templates with Prettier formatting
+- Insert components with organized folders
+- Simple backup naming
+- 23 professional components
+- Full documentation and examples
+
+---
+
+## 📝 What's Included
+
+**HTML Templates:**
+- 23 ready-to-use UI components
+- Professional design and styling
+- Responsive and modern
+- Beautifully formatted with Prettier
+
+**CSS Styles:**
+- Organized in `css/` folders
+- Beautiful gradients and animations
+- Responsive design
+- Properly formatted
+
+**JavaScript:**
+- Interactive components
+- DOM manipulation examples
+- Organized in `js/` folders
+- Cleanly formatted
+
+---
+
+## 🔑 Key Improvements in v1.6.2
+
+1. **Prettier Integration**
+   - All code automatically formatted
+   - Professional output
+   - No manual formatting needed
+
+2. **Folder Organization**
+   - CSS in dedicated folders
+   - JS in dedicated folders
+   - Better project structure
+
+3. **Simplified Backups**
+   - No timestamp numbers
+   - Simple `file.html.backup` format
+   - Easier file management
+
+4. **Security Verified**
+   - Input validation
+   - Path protection
+   - Zero vulnerabilities
+
+5. **Fully Documented**
+   - Comprehensive README
+   - Security audit report
+   - Release notes
+   - Quick reference guides
+
+---
+
+## 📈 How to Get It
+
+1. **Visit npm:**
+   https://www.npmjs.com/package/create-template-html-css
+
+2. **Install:**
+   ```bash
+   npm install -g create-template-html-css@latest
+   ```
+
+3. **Start Using:**
+   ```bash
+   create-template create
+   ```
+
+---
+
+## 💬 Support & Feedback
+
+- **GitHub Issues:** https://github.com/benshabbat/create-template-html-css/issues
+- **Documentation:** See README.md and docs in repository
+- **Examples:** Check demo/ folder
+
+---
+
+## 📄 License
+
+MIT License - Free to use for commercial and personal projects
+
+---
+
+**Status:** 🟢 PUBLISHED & LIVE
+**Date:** February 1, 2026
+**Version:** 1.6.2
+**Availability:** NPM Registry + GitHub Repository

package/README.md

@@ -2,6 +2,13 @@
 
 A powerful CLI library to create HTML+CSS element templates. Generate styled UI components in seconds!
 
+[![npm version](https://img.shields.io/npm/v/create-template-html-css.svg)](https://www.npmjs.com/package/create-template-html-css)
+[![npm downloads](https://img.shields.io/npm/dm/create-template-html-css.svg)](https://www.npmjs.com/package/create-template-html-css)
+
+```bash
+npm install -g create-template-html-css
+```
+
 ## 📋 Table of Contents
 
 - [Features](#features)
@@ -31,6 +38,20 @@ A powerful CLI library to create HTML+CSS element templates. Generate styled UI
 - 🔒 **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
 
@@ -632,6 +653,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:
@@ -642,6 +679,6 @@ If you find this project helpful, please consider:
 
 ---
 
-Made with ❤️ by  DavidChen Benshabbat
+Made with ❤️ by David Chen Benshabbat
 
 **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