create-template-html-css 1.0.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.
@@ -0,0 +1,62 @@
1
+ # Contributing to Create Template HTML/CSS
2
+
3
+ תודה שאתה מעוניין לתרום לפרויקט! 🎉
4
+
5
+ ## כיצד לתרום
6
+
7
+ ### 1. Fork הפרויקט
8
+ Fork את הריפו ללקוח GitHub שלך
9
+
10
+ ### 2. Clone את הפרויקט
11
+ ```bash
12
+ git clone https://github.com/YOUR_USERNAME/create-template-html-css.git
13
+ cd create-template-html-css
14
+ ```
15
+
16
+ ### 3. התקן תלויות
17
+ ```bash
18
+ npm install
19
+ ```
20
+
21
+ ### 4. צור branch חדש
22
+ ```bash
23
+ git checkout -b feature/amazing-feature
24
+ ```
25
+
26
+ ### 5. בצע שינויים
27
+ עשה את השינויים שלך בקוד
28
+
29
+ ### 6. Commit
30
+ ```bash
31
+ git add .
32
+ git commit -m "Add some amazing feature"
33
+ ```
34
+
35
+ ### 7. Push
36
+ ```bash
37
+ git push origin feature/amazing-feature
38
+ ```
39
+
40
+ ### 8. צור Pull Request
41
+ פתח Pull Request ב-GitHub
42
+
43
+ ## הוספת טמפלייט חדש
44
+
45
+ 1. צור תיקייה חדשה תחת `templates/`
46
+ 2. הוסף את הקבצים:
47
+ - `index.html`
48
+ - `style.css`
49
+ - `script.js` (אופציונלי)
50
+ 3. עדכן את `bin/cli.js` להוסיף את הטמפלייט לרשימה
51
+ 4. בדוק שהטמפלייט עובד
52
+ 5. עדכן את README.md
53
+
54
+ ## קווי דרך
55
+
56
+ - השתמש בעברית או אנגלית
57
+ - וודא שהקוד נקי ומתועד
58
+ - בדוק שהכל עובד לפני שליחה
59
+ - השתמש בעיצוב responsive
60
+ - הוסף הערות בקוד
61
+
62
+ תודה! ❤️
package/INSERT-DEMO.md ADDED
@@ -0,0 +1,142 @@
1
+ # Insert Feature Demo
2
+
3
+ ## How to Use the Insert Command
4
+
5
+ The `insert` command allows you to add pre-styled components to your existing HTML pages without creating new projects.
6
+
7
+ ## Example Usage
8
+
9
+ ### 1. Basic Usage
10
+
11
+ ```bash
12
+ npm run insert
13
+ ```
14
+
15
+ Follow the interactive prompts:
16
+ 1. **Enter path to your HTML file**: `index.html`
17
+ 2. **Choose component**: Button, Card, Form, Navigation, Modal, Footer, or Hero
18
+ 3. **CSS mode**: Inline, Separate file, or Skip
19
+ 4. **JS mode**: Inline, Separate file, or Skip
20
+
21
+ ### 2. Real Example
22
+
23
+ Let's say you have this HTML file:
24
+
25
+ **index.html (before):**
26
+ ```html
27
+ <!DOCTYPE html>
28
+ <html lang="en">
29
+ <head>
30
+ <meta charset="UTF-8">
31
+ <title>My Website</title>
32
+ </head>
33
+ <body>
34
+ <h1>Welcome to My Site</h1>
35
+ <p>This is my existing content.</p>
36
+ </body>
37
+ </html>
38
+ ```
39
+
40
+ Run the command:
41
+ ```bash
42
+ npm run insert
43
+ # Path: index.html
44
+ # Component: Button
45
+ # CSS: Inline
46
+ # JS: Inline
47
+ ```
48
+
49
+ **index.html (after):**
50
+ ```html
51
+ <!DOCTYPE html>
52
+ <html lang="en">
53
+ <head>
54
+ <meta charset="UTF-8">
55
+ <title>My Website</title>
56
+ <style>
57
+ /* BUTTON Component Styles */
58
+ .btn {
59
+ padding: 12px 30px;
60
+ /* ... full button styles ... */
61
+ }
62
+ </style>
63
+ </head>
64
+ <body>
65
+ <h1>Welcome to My Site</h1>
66
+ <p>This is my existing content.</p>
67
+
68
+ <!-- BUTTON Component -->
69
+ <div class="container">
70
+ <button class="btn btn-primary">Click Here</button>
71
+ <!-- ... all button variations ... -->
72
+ </div>
73
+
74
+ <script>
75
+ // BUTTON Component Script
76
+ document.querySelectorAll('.btn').forEach(button => {
77
+ // ... button functionality ...
78
+ });
79
+ </script>
80
+ </body>
81
+ </html>
82
+ ```
83
+
84
+ ### 3. Separate Files Example
85
+
86
+ If you choose "Separate file" for CSS and JS:
87
+
88
+ ```bash
89
+ npm run insert
90
+ # Path: products.html
91
+ # Component: Card
92
+ # CSS: Separate file
93
+ # JS: Separate file
94
+ ```
95
+
96
+ **Result:**
97
+ - `products.html` - Updated with card HTML and links
98
+ - `card-component.css` - Created with all card styles
99
+ - `card-component.js` - Created with card functionality
100
+
101
+ **products.html:**
102
+ ```html
103
+ <head>
104
+ <!-- ... existing head content ... -->
105
+ <link rel="stylesheet" href="card-component.css">
106
+ </head>
107
+ <body>
108
+ <!-- ... existing content ... -->
109
+
110
+ <!-- CARD Component -->
111
+ <div class="cards-grid">
112
+ <!-- ... card HTML ... -->
113
+ </div>
114
+
115
+ <script src="card-component.js"></script>
116
+ </body>
117
+ ```
118
+
119
+ ## Benefits
120
+
121
+ ✅ **No manual copy-paste** - Components are automatically inserted
122
+ ✅ **Flexible integration** - Choose inline or separate files
123
+ ✅ **Safe insertion** - HTML structure is preserved
124
+ ✅ **Clean organization** - Components are clearly marked
125
+ ✅ **Quick prototyping** - Add components in seconds
126
+
127
+ ## Tips
128
+
129
+ 1. **Inline mode** - Best for quick prototyping or single-use components
130
+ 2. **Separate files** - Best for reusable styles across multiple pages
131
+ 3. **Skip mode** - Use when you already have custom CSS/JS
132
+
133
+ ## Available Components
134
+
135
+ All 7 templates are available for insertion:
136
+ - Button - Styled button variations
137
+ - Card - Product/content cards
138
+ - Form - Contact/input forms
139
+ - Navigation - Responsive navbar
140
+ - Modal - Dialog popups
141
+ - Footer - Page footer
142
+ - Hero - Hero sections with CTA
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Ben Shabbat
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/QUICKSTART.md ADDED
@@ -0,0 +1,195 @@
1
+ # Quick Start Guide 🚀
2
+
3
+ ## Quick Installation
4
+
5
+ ```bash
6
+ # Clone the repository
7
+ git clone https://github.com/benshabbat/create-template-html-css.git
8
+ cd create-template-html-css
9
+
10
+ # Install dependencies
11
+ npm install
12
+
13
+ # Link globally (optional)
14
+ npm link
15
+ ```
16
+
17
+ ## Usage Examples
18
+
19
+ ### Mode 1: Create New Project
20
+
21
+ Create a standalone project with HTML, CSS, and JavaScript files.
22
+
23
+ #### 1. Create Styled Button
24
+
25
+ ```bash
26
+ create-template create
27
+ # or
28
+ npm run create
29
+ # Choose: Button
30
+ # Name: my-awesome-button
31
+ # JavaScript: Yes
32
+ ```
33
+
34
+ **Result:**
35
+ ```
36
+ my-awesome-button/
37
+ ├── index.html
38
+ ├── style.css
39
+ └── script.js
40
+ ```
41
+
42
+ #### 2. Create Product Card
43
+
44
+ ```bash
45
+ npm run create
46
+ # Choose: Card
47
+ # Name: product-card
48
+ # JavaScript: No
49
+ ```
50
+
51
+ #### 3. Create Contact Form
52
+
53
+ ```bash
54
+ npm run create
55
+ # Choose: Form
56
+ # Name: contact-form
57
+ # JavaScript: Yes
58
+ ```
59
+
60
+ ### Mode 2: Insert into Existing Page
61
+
62
+ Add components to your existing HTML files without creating new projects.
63
+
64
+ #### 1. Add Button to Existing Page
65
+
66
+ ```bash
67
+ create-template insert
68
+ # or
69
+ npm run insert
70
+ # Enter path: index.html
71
+ # Choose: Button
72
+ # CSS: Inline (inside <style> tag)
73
+ # JS: Inline (inside <script> tag)
74
+ ```
75
+
76
+ **What happens:**
77
+ - Button HTML is inserted before `</body>`
78
+ - CSS is added in a `<style>` tag in the `<head>`
79
+ - JavaScript is added in a `<script>` tag before `</body>`
80
+
81
+ #### 2. Add Card with Separate Files
82
+
83
+ ```bash
84
+ npm run insert
85
+ # Enter path: products.html
86
+ # Choose: Card
87
+ # CSS: Separate file
88
+ # JS: Separate file
89
+ ```
90
+
91
+ **Result:**
92
+ - Card HTML inserted into products.html
93
+ - card-component.css created and linked
94
+ - card-component.js created and linked
95
+
96
+ #### 3. Add Navigation (Skip JS)
97
+
98
+ ```bash
99
+ npm run insert
100
+ # Enter path: about.html
101
+ # Choose: Navigation
102
+ # CSS: Inline
103
+ # JS: Skip (I'll add it manually)
104
+ ```
105
+
106
+ **Result:**
107
+ - Navigation HTML inserted
108
+ - CSS added inline
109
+ - No JavaScript added (you can add later)
110
+
111
+ ### More Examples
112
+
113
+ #### 4. Create Navigation Bar
114
+
115
+ ```bash
116
+ create-template create
117
+ # Choose: Navigation
118
+ # Name: main-nav
119
+ # JavaScript: Yes
120
+ ```
121
+
122
+ #### 5. Create Modal Dialog
123
+
124
+ ```bash
125
+ create-template create
126
+ # Choose: Modal
127
+ # Name: popup-modal
128
+ # JavaScript: Yes
129
+ ```
130
+
131
+ #### 6. Create Footer
132
+
133
+ ```bash
134
+ create-template create
135
+ # בחר: Footer
136
+ # שם: site-footer
137
+ # JavaScript: Yes
138
+ ```
139
+
140
+ ### 7. צור Hero Section
141
+
142
+ ```bash
143
+ create-template create
144
+ # בחר: Hero
145
+ # שם: landing-hero
146
+ # JavaScript: Yes
147
+ ```
148
+
149
+ ## טיפים
150
+
151
+ ### פתח בדפדפן
152
+ ```bash
153
+ cd my-awesome-button
154
+ start index.html # Windows
155
+ open index.html # Mac
156
+ xdg-open index.html # Linux
157
+ ```
158
+
159
+ ### התאמה אישית
160
+ פשוט ערוך את הקבצים שנוצרו:
161
+ - `index.html` - שנה את התוכן
162
+ - `style.css` - שנה את העיצוב
163
+ - `script.js` - שנה את הפונקציונליות
164
+
165
+ ### שלב בפרויקט קיים
166
+ העתק את הקבצים שנוצרו לפרויקט שלך:
167
+ ```bash
168
+ cp -r my-awesome-button/* ../my-project/
169
+ ```
170
+
171
+ ## פקודות CLI
172
+
173
+ ```bash
174
+ # צור טמפלייט חדש
175
+ create-template create
176
+
177
+ # הצג רשימת טמפלייטים
178
+ create-template list
179
+
180
+ # עזרה
181
+ create-template --help
182
+
183
+ # גרסה
184
+ create-template --version
185
+ ```
186
+
187
+ ## צריך עזרה?
188
+
189
+ - 📖 קרא את [README.md](README.md)
190
+ - 🐛 פתח [Issue](https://github.com/benshabbat/create-template-html-css/issues)
191
+ - 💬 שאל שאלות ב-GitHub Discussions
192
+
193
+ ---
194
+
195
+ **Happy Coding!** 🎨✨
package/README.md ADDED
Binary file
package/SECURITY.md ADDED
@@ -0,0 +1,95 @@
1
+ # Security Policy
2
+
3
+ ## Reporting Security Issues
4
+
5
+ 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.
6
+
7
+ Please do **not** report security vulnerabilities through public GitHub issues.
8
+
9
+ ## Security Measures
10
+
11
+ ### Input Validation
12
+ - **Component Names**: Validated against a whitelist of allowed components
13
+ - **Filename Sanitization**: Removes path traversators (../, ..\\), path separators, and dangerous characters
14
+ - **Alphanumeric Validation**: Ensures filenames contain at least one alphanumeric character
15
+ - **Length Validation**: Enforces maximum name length of 100 characters via CLI validation
16
+
17
+ ### Path Traversal Protection
18
+ The generator implements multiple layers of protection:
19
+ 1. Component names are validated against a strict whitelist
20
+ 2. User-provided names are sanitized to remove:
21
+ - Path separators (`/`, `\\`)
22
+ - Parent directory references (`..`)
23
+ - Dangerous characters (`<>:"|?*`)
24
+ 3. Empty or invalid names are rejected
25
+
26
+ ### Dependencies
27
+ All dependencies are regularly audited using `npm audit`. Current status:
28
+ - ✅ No known vulnerabilities
29
+ - All dependencies use stable, maintained versions
30
+
31
+ ## Dependency Versions
32
+ - commander: ^11.1.0
33
+ - inquirer: ^9.2.12
34
+ - chalk: ^4.1.2
35
+
36
+ ## Safe Usage
37
+
38
+ ### Creating Templates
39
+ ```bash
40
+ # Safe usage
41
+ create-template create
42
+ # Follow the prompts and provide valid names
43
+
44
+ # Avoid
45
+ - Using path separators in names (/, \\)
46
+ - Using parent directory references (..)
47
+ - Using empty names
48
+ ```
49
+
50
+ ### Security Best Practices
51
+ 1. Always use the latest version of this tool
52
+ 2. Run `npm audit` regularly
53
+ 3. Review generated files before deploying
54
+ 4. Don't expose the CLI to untrusted users
55
+ 5. Use this tool in trusted environments only
56
+
57
+ ## Vulnerability Response
58
+
59
+ ### Severity Levels
60
+ - **Critical**: Immediate fix and patch release
61
+ - **High**: Fix within 7 days
62
+ - **Medium**: Fix within 30 days
63
+ - **Low**: Fix in next planned release
64
+
65
+ ### Security Updates
66
+ Security updates will be released as patch versions and clearly marked in the CHANGELOG.
67
+
68
+ ## Supported Versions
69
+
70
+ | Version | Supported |
71
+ | ------- | ------------------ |
72
+ | 1.x.x | :white_check_mark: |
73
+
74
+ ## Code Security Features
75
+
76
+ ### Generator (src/generator.js)
77
+ - Whitelist validation for component names
78
+ - Filename sanitization function
79
+ - Input validation before file system operations
80
+ - Safe path joining using Node.js path module
81
+
82
+ ### CLI (bin/cli.js)
83
+ - Interactive prompts with validation
84
+ - Input length limits
85
+ - Character validation (no path separators)
86
+ - Error handling and user feedback
87
+
88
+ ## Responsible Disclosure
89
+
90
+ We encourage responsible disclosure of security vulnerabilities. We commit to:
91
+ - Acknowledge your email within 48 hours
92
+ - Provide regular updates about our progress
93
+ - Credit you in the security advisory (unless you prefer to remain anonymous)
94
+
95
+ Thank you for helping keep this project and its users safe!