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

create-template-html-css 1.4.3 → 1.6.2

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

package/CHANGELOG.md +92 -0
package/INSERT-QUICK-REFERENCE.md +147 -0
package/README.md +33 -2
package/RELEASE-NOTES-v1.6.1.md +129 -0
package/RELEASE-STATUS.md +203 -0
package/RELEASE-v1.6.2.md +169 -0
package/SECURITY-AUDIT.md +157 -0
package/TEST-REPORT.md +110 -0
package/VERIFICATION-REPORT.md +162 -0
package/bin/cli.js +416 -247
package/demo/css/accordion-component.css +135 -0
package/demo/css/button-component.css +110 -0
package/demo/css/card-component.css +381 -0
package/demo/index.html +169 -0
package/demo/js/accordion-component.js +31 -0
package/demo/js/button-component.js +17 -0
package/demo/js/card-component.js +124 -0
package/package.json +6 -3
package/src/generator.js +165 -64
package/src/index.js +1 -1
package/src/inserter.js +352 -146
package/templates/accordion/index.html +67 -0
package/templates/accordion/script.js +29 -0
package/templates/accordion/style.css +133 -0
package/templates/counter/index.html +46 -0
package/templates/counter/script.js +88 -0
package/templates/counter/style.css +164 -0
package/templates/tabs/index.html +83 -0
package/templates/tabs/script.js +46 -0
package/templates/tabs/style.css +173 -0
package/templates/todo-list/index.html +45 -0
package/templates/todo-list/script.js +69 -0
package/templates/todo-list/style.css +138 -0
package/v1.6.2-IMPROVEMENTS.md +185 -0
package/CONTRIBUTING.md +0 -62
package/INSERT-DEMO.md +0 -171
package/QUICKSTART.md +0 -195
package/SECURITY.md +0 -95
package/SHOWCASE.html +0 -342
package/test-insert.html +0 -54

package/INSERT-DEMO.md DELETED Viewed

@@ -1,171 +0,0 @@
-# Insert Feature Demo
-## How to Use the Insert Command
-The `insert` command allows you to add pre-styled components to your existing HTML pages without creating new projects. Components are smartly integrated with proper indentation and ID attributes for easy customization.
-## How It Works
-When inserting a component:
-1. ✅ Detects existing indentation in your HTML file
-2. ✅ Respects your code formatting style
-3. ✅ Adds unique IDs to styles and scripts (e.g., `button-styles`, `button-script`)
-4. ✅ Prevents duplicate insertions (warns if component already exists)
-5. ✅ Validates HTML structure (checks for `<head>` and `<body>` tags)
-## Example Usage
-### 1. Basic Usage
-```bash
-npm run insert
-```
-Follow the interactive prompts:
-1. **Enter path to your HTML file**: `index.html`
-2. **Choose component**: Button, Card, Form, Navigation, Modal, Footer, or Hero
-3. **CSS mode**: Inline, Separate file, or Skip
-4. **JS mode**: Inline, Separate file, or Skip
-### 2. Real Example
-Let's say you have this HTML file:
-**index.html (before):**
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>My Website</title>
-</head>
-<body>
-    <h1>Welcome to My Site</h1>
-    <p>This is my existing content.</p>
-</body>
-</html>
-```
-Run the command:
-```bash
-npm run insert
-# Path: index.html
-# Component: Button
-# CSS: Inline
-# JS: Inline
-```
-**index.html (after):**
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>My Website</title>
-    <style>
-        /* BUTTON Component Styles */
-        .btn {
-            padding: 12px 30px;
-            /* ... full button styles ... */
-        }
-    </style>
-</head>
-<body>
-    <h1>Welcome to My Site</h1>
-    <p>This is my existing content.</p>
-    <!-- BUTTON Component -->
-    <div class="container">
-        <button class="btn btn-primary">Click Here</button>
-        <!-- ... all button variations ... -->
-    </div>
-    <script>
-        // BUTTON Component Script
-        document.querySelectorAll('.btn').forEach(button => {
-            // ... button functionality ...
-        });
-    </script>
-</body>
-</html>
-```
-### 3. Separate Files Example
-If you choose "Separate file" for CSS and JS:
-```bash
-npm run insert
-# Path: products.html
-# Component: Card
-# CSS: Separate file
-# JS: Separate file
-```
-**Result:**
-- `products.html` - Updated with card HTML and links
-- `card-component.css` - Created with all card styles
-- `card-component.js` - Created with card functionality
-**products.html:**
-```html
-<head>
-    <!-- ... existing head content ... -->
-    <link rel="stylesheet" href="card-component.css">
-</head>
-<body>
-    <!-- ... existing content ... -->
-    <!-- CARD Component -->
-    <div class="cards-grid">
-        <!-- ... card HTML ... -->
-    </div>
-    <script src="card-component.js"></script>
-</body>
-```
-## Benefits
-✅ **No manual copy-paste** - Components are automatically inserted
-✅ **Flexible integration** - Choose inline or separate files
-✅ **Safe insertion** - HTML structure is preserved
-✅ **Clean organization** - Components are clearly marked
-✅ **Quick prototyping** - Add components in seconds
-## Tips
-1. **Inline mode** - Best for quick prototyping or single-use components
-2. **Separate files** - Best for reusable styles across multiple pages
-3. **Skip mode** - Use when you already have custom CSS/JS
-## Available Components
-All 19 templates are available for insertion:
-### Basic Components
-- Button - Styled button variations
-- Card - Product/content cards
-- Form - Contact/input forms
-- Navigation - Responsive navbar
-- Modal - Dialog popups
-- Footer - Page footer
-- Hero - Hero sections with CTA
-- Slider - Image carousel
-- Table - Data tables with features
-### Animation Templates
-- Spinner - Loading animations
-- Animated Card - Interactive card effects
-- Typing Effect - Text animations
-- Fade Gallery - Image gallery with effects
-### Grid Layouts (CSS Grid)
-- Grid Layout - CSS Grid examples
-- Masonry Grid - Pinterest-style layout
-- Dashboard Grid - Admin dashboard
-### Flexbox Layouts
-- Flex Layout - Flexbox patterns
-- Flex Cards - Equal-height cards
-- Flex Dashboard - Admin dashboard with Flexbox

package/QUICKSTART.md DELETED Viewed

@@ -1,195 +0,0 @@
-# Quick Start Guide 🚀
-## Quick Installation
-```bash
-# Clone the repository
-git clone https://github.com/benshabbat/create-template-html-css.git
-cd create-template-html-css
-# Install dependencies
-npm install
-# Link globally (optional)
-npm link
-```
-## Usage Examples
-### Mode 1: Create New Project
-Create a standalone project with HTML, CSS, and JavaScript files.
-#### 1. Create Styled Button
-```bash
-create-template create
-# or
-npm run create
-# Choose: Button
-# Name: my-awesome-button
-# JavaScript: Yes
-```
-**Result:**
-```
-my-awesome-button/
-├── index.html
-├── style.css
-└── script.js
-```
-#### 2. Create Product Card
-```bash
-npm run create
-# Choose: Card
-# Name: product-card
-# JavaScript: No
-```
-#### 3. Create Contact Form
-```bash
-npm run create
-# Choose: Form
-# Name: contact-form
-# JavaScript: Yes
-```
-### Mode 2: Insert into Existing Page
-Add components to your existing HTML files without creating new projects.
-#### 1. Add Button to Existing Page
-```bash
-create-template insert
-# or
-npm run insert
-# Enter path: index.html
-# Choose: Button
-# CSS: Inline (inside <style> tag)
-# JS: Inline (inside <script> tag)
-```
-**What happens:**
-- Button HTML is inserted before `</body>`
-- CSS is added in a `<style>` tag in the `<head>`
-- JavaScript is added in a `<script>` tag before `</body>`
-#### 2. Add Card with Separate Files
-```bash
-npm run insert
-# Enter path: products.html
-# Choose: Card
-# CSS: Separate file
-# JS: Separate file
-```
-**Result:**
-- Card HTML inserted into products.html
-- card-component.css created and linked
-- card-component.js created and linked
-#### 3. Add Navigation (Skip JS)
-```bash
-npm run insert
-# Enter path: about.html
-# Choose: Navigation
-# CSS: Inline
-# JS: Skip (I'll add it manually)
-```
-**Result:**
-- Navigation HTML inserted
-- CSS added inline
-- No JavaScript added (you can add later)
-### More Examples
-#### 4. Create Navigation Bar
-```bash
-create-template create
-# Choose: Navigation
-# Name: main-nav
-# JavaScript: Yes
-```
-#### 5. Create Modal Dialog
-```bash
-create-template create
-# Choose: Modal
-# Name: popup-modal
-# JavaScript: Yes
-```
-#### 6. Create Footer
-```bash
-create-template create
-# בחר: Footer
-# שם: site-footer
-# JavaScript: Yes
-```
-### 7. צור Hero Section
-```bash
-create-template create
-# בחר: Hero
-# שם: landing-hero
-# JavaScript: Yes
-```
-## טיפים
-### פתח בדפדפן
-```bash
-cd my-awesome-button
-start index.html  # Windows
-open index.html   # Mac
-xdg-open index.html  # Linux
-```
-### התאמה אישית
-פשוט ערוך את הקבצים שנוצרו:
-- `index.html` - שנה את התוכן
-- `style.css` - שנה את העיצוב
-- `script.js` - שנה את הפונקציונליות
-### שלב בפרויקט קיים
-העתק את הקבצים שנוצרו לפרויקט שלך:
-```bash
-cp -r my-awesome-button/* ../my-project/
-```
-## פקודות CLI
-```bash
-# צור טמפלייט חדש
-create-template create
-# הצג רשימת טמפלייטים
-create-template list
-# עזרה
-create-template --help
-# גרסה
-create-template --version
-```
-## צריך עזרה?
-- 📖 קרא את [README.md](README.md)
-- 🐛 פתח [Issue](https://github.com/benshabbat/create-template-html-css/issues)
-- 💬 שאל שאלות ב-GitHub Discussions
----
-**Happy Coding!** 🎨✨

package/SECURITY.md DELETED Viewed

@@ -1,95 +0,0 @@
-# Security Policy
-## Reporting Security Issues
-If you discover a security vulnerability in this project, please send an email to [your-email@example.com]. All security vulnerabilities will be promptly addressed.
-Please do **not** report security vulnerabilities through public GitHub issues.
-## Security Measures
-### Input Validation
-- **Component Names**: Validated against a whitelist of allowed components
-- **Filename Sanitization**: Removes path traversators (../, ..\\), path separators, and dangerous characters
-- **Alphanumeric Validation**: Ensures filenames contain at least one alphanumeric character
-- **Length Validation**: Enforces maximum name length of 100 characters via CLI validation
-### Path Traversal Protection
-The generator implements multiple layers of protection:
-1. Component names are validated against a strict whitelist
-2. User-provided names are sanitized to remove:
-   - Path separators (`/`, `\\`)
-   - Parent directory references (`..`)
-   - Dangerous characters (`<>:"|?*`)
-3. Empty or invalid names are rejected
-### Dependencies
-All dependencies are regularly audited using `npm audit`. Current status:
-- ✅ No known vulnerabilities
-- All dependencies use stable, maintained versions
-## Dependency Versions
-- commander: ^11.1.0
-- inquirer: ^9.2.12
-- chalk: ^4.1.2
-## Safe Usage
-### Creating Templates
-```bash
-# Safe usage
-create-template create
-# Follow the prompts and provide valid names
-# Avoid
-- Using path separators in names (/, \\)
-- Using parent directory references (..)
-- Using empty names
-```
-### Security Best Practices
-1. Always use the latest version of this tool
-2. Run `npm audit` regularly
-3. Review generated files before deploying
-4. Don't expose the CLI to untrusted users
-5. Use this tool in trusted environments only
-## Vulnerability Response
-### Severity Levels
-- **Critical**: Immediate fix and patch release
-- **High**: Fix within 7 days
-- **Medium**: Fix within 30 days
-- **Low**: Fix in next planned release
-### Security Updates
-Security updates will be released as patch versions and clearly marked in the CHANGELOG.
-## Supported Versions
-| Version | Supported          |
-| ------- | ------------------ |
-| 1.x.x   | :white_check_mark: |
-## Code Security Features
-### Generator (src/generator.js)
-- Whitelist validation for component names
-- Filename sanitization function
-- Input validation before file system operations
-- Safe path joining using Node.js path module
-### CLI (bin/cli.js)
-- Interactive prompts with validation
-- Input length limits
-- Character validation (no path separators)
-- Error handling and user feedback
-## Responsible Disclosure
-We encourage responsible disclosure of security vulnerabilities. We commit to:
-- Acknowledge your email within 48 hours
-- Provide regular updates about our progress
-- Credit you in the security advisory (unless you prefer to remain anonymous)
-Thank you for helping keep this project and its users safe!