npm - create-template-html-css - Versions diffs - 1.6.2 → 1.6.4 - Mend

create-template-html-css 1.6.2 → 1.6.4

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 (13) hide show

package/README.md +8 -1
package/bin/cli.js +1 -1
package/package.json +1 -1
package/src/generator.js +168 -165
package/src/inserter.js +355 -352
package/INSERT-QUICK-REFERENCE.md +0 -147
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/INSERT-QUICK-REFERENCE.md DELETED Viewed

@@ -1,147 +0,0 @@
-# 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/RELEASE-NOTES-v1.6.1.md DELETED Viewed

@@ -1,129 +0,0 @@
-# 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 DELETED Viewed

@@ -1,203 +0,0 @@
-# 🎉 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

package/RELEASE-v1.6.2.md DELETED Viewed

@@ -1,169 +0,0 @@
-# 🎉 Version 1.6.2 Release - Published to GitHub
-**Release Date:** February 1, 2026
-**Commit:** 29c3e1b
-**Branch:** main
-**Repository:** github.com/benshabbat/create-template-html-css
-## ✨ What's New in v1.6.2
-### 1. **Prettier Code Formatting** ✨
-All generated and inserted code is now automatically formatted with [Prettier](https://prettier.io/):
-- Beautiful, consistent code formatting
-- Proper indentation and line breaks
-- Professional output ready for production
-- Applied to HTML, CSS, and JavaScript files
-### 2. **Organized Folder Structure** 📂
-Components are now organized in logical folder hierarchies:
-**When Creating Templates:**
-```
-my-component/
-├── index.html
-├── css/
-│   └── style.css
-└── js/
-    └── script.js
-```
-**When Inserting Components:**
-```
-my-project/
-├── index.html
-├── css/
-│   ├── button-component.css
-│   └── card-component.css
-└── js/
-    ├── button-component.js
-    └── card-component.js
-```
-### 3. **Simplified Backup Naming** 💾
-Backup files now have clean, simple naming:
-```bash
-# Before v1.6.2
-index.html.backup.1769896716907
-index.html.backup.1769896775579
-# v1.6.2+
-index.html.backup
-```
-## 📋 Complete Release Information
-### Files Updated
-- ✅ `README.md` - Added v1.6.2 features and improvements
-- ✅ `package.json` - Version bumped to 1.6.2
-- ✅ `bin/cli.js` - Version updated to 1.6.2
-- ✅ `src/generator.js` - Prettier formatting integrated
-- ✅ `src/inserter.js` - Prettier formatting + simplified backups
-- ✅ `CHANGELOG.md` - v1.6.2 release notes added
-### New Documentation
-- ✅ `SECURITY-AUDIT.md` - Comprehensive security audit report
-- ✅ `VERIFICATION-REPORT.md` - Code quality verification
-- ✅ `v1.6.2-IMPROVEMENTS.md` - Detailed improvements guide
-- ✅ `INSERT-QUICK-REFERENCE.md` - Insert feature quick guide
-- ✅ `TEST-REPORT.md` - Testing results and validation
-### Demo Updates
-- ✅ `demo/index.html` - Properly formatted showcase
-- ✅ `demo/css/` - Formatted component styles
-- ✅ `demo/js/` - Formatted component scripts
-## 🔒 Security Status
-- ✅ Zero vulnerabilities found
-- ✅ All dependencies secure and up-to-date
-- ✅ Input validation and sanitization verified
-- ✅ Path traversal protection confirmed
-- ✅ 100% English content verified
-## ✅ Quality Assurance
-### Code Quality
-- ✅ Prettier formatting applied to all files
-- ✅ Consistent code style throughout
-- ✅ JSDoc documentation in place
-- ✅ Error handling verified
-### Testing
-- ✅ Generator tested with multiple components
-- ✅ Inserter tested with separate and inline modes
-- ✅ Backup functionality verified
-- ✅ Folder structure creation confirmed
-- ✅ Multiple component insertion tested
-## 📊 Release Statistics
-| Metric | Value |
-|--------|-------|
-| Files Changed | 23 |
-| Insertions | 2,840 |
-| Deletions | 366 |
-| New Files | 5 |
-| Components | 23 |
-| Security Issues | 0 |
-## 🚀 How to Update
-### For Global Installation
-```bash
-npm install -g create-template-html-css@latest
-```
-### For Local Projects
-```bash
-npm update create-template-html-css
-```
-### Using Direct GitHub Link
-```bash
-git clone https://github.com/benshabbat/create-template-html-css.git
-cd create-template-html-css
-npm install
-npm link
-```
-## 📖 Documentation
-Full documentation available:
-- **Main README:** `/README.md`
-- **Changelog:** `/CHANGELOG.md`
-- **Insert Guide:** `/INSERT-QUICK-REFERENCE.md`
-- **Security:** `/SECURITY-AUDIT.md`
-- **Improvements:** `/v1.6.2-IMPROVEMENTS.md`
-## 🎯 Key Features
-✅ 23 ready-to-use UI component templates
-✅ Two powerful modes: Create & Insert
-✅ Prettier code formatting (v1.6.2+)
-✅ Organized folder structure (v1.6.2+)
-✅ Simplified backup naming (v1.6.2+)
-✅ CLI with interactive prompts
-✅ Flags for automation and scripts
-✅ HTML validation before insertion
-✅ Backup protection for existing files
-✅ Multiple component insertion
-✅ Flexible CSS/JS integration
-✅ Professional security measures
-## 💬 Support
-For issues, questions, or feature requests:
-- **GitHub Issues:** github.com/benshabbat/create-template-html-css/issues
-- **Repository:** github.com/benshabbat/create-template-html-css
-## 📄 License
-MIT License - See LICENSE file for details
----
-**Status:** 🟢 Production Ready
-**Release Type:** Feature Release + Security Audit
-**Previous Version:** 1.5.0 (2026-01-31)
-**Date Published:** February 1, 2026