create-zen 1.1.0 → 1.2.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.
Files changed (3) hide show
  1. package/README.md +9 -16
  2. package/index.js +62 -54
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -47,22 +47,15 @@ You can create a new project using `npm create`:
47
47
  npm create zen@latest
48
48
  ```
49
49
 
50
- The tool will interactively prompt you to enter your project name, making it easy to get started without remembering command line arguments.
51
-
52
- Alternatively, you can clone the repository manually:
53
-
54
- 1. Clone the repository:
55
- ```bash
56
- git clone https://github.com/dmitry-conquer/zen-starter.git
57
- ```
58
- 2. Navigate to the project directory:
59
- ```bash
60
- cd zen-starter
61
- ```
62
- 3. Install the dependencies:
63
- ```bash
64
- npm install
65
- ```
50
+ **Why `@latest`?** This ensures you always get the most recent version of the ZEN starter kit. Without it, npm might use a cached or outdated version.
51
+
52
+ The tool will interactively prompt you to:
53
+ 1. **Enter your project name** (with a default fallback)
54
+ 2. **Choose between two versions**:
55
+ - **Standard Version**: Full-featured with all components
56
+ - **Lite Version**: Lightweight for static sites
57
+
58
+ This makes it easy to get started without remembering command line arguments and gives you flexibility to choose the right version for your needs.
66
59
 
67
60
  <img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
68
61
 
package/index.js CHANGED
@@ -5,74 +5,77 @@ const fs = require('fs');
5
5
  const path = require('path');
6
6
  const readline = require('readline');
7
7
 
8
- // Color functions for beautiful output
8
+ // Modern color palette matching the ZEN design
9
9
  const colors = {
10
10
  reset: '\x1b[0m',
11
11
  bright: '\x1b[1m',
12
12
  dim: '\x1b[2m',
13
+
14
+ // Primary colors from ZEN design
15
+ green: '\x1b[38;2;5;247;195m', // Bright green accent (#05F7C3)
16
+ white: '\x1b[37m', // Pure white text
17
+ lightGrey: '\x1b[38;2;156;163;175m', // Light grey (#9CA3AF)
18
+ darkGrey: '\x1b[38;2;55;65;81m', // Dark grey (#374151)
19
+
20
+ // Additional colors
13
21
  red: '\x1b[31m',
14
- green: '\x1b[32m',
15
22
  yellow: '\x1b[33m',
16
23
  blue: '\x1b[34m',
17
24
  magenta: '\x1b[35m',
18
- cyan: '\x1b[36m',
19
- white: '\x1b[37m',
20
- bgRed: '\x1b[41m',
21
- bgGreen: '\x1b[42m',
22
- bgYellow: '\x1b[43m',
23
- bgBlue: '\x1b[44m',
24
- bgMagenta: '\x1b[45m',
25
- bgCyan: '\x1b[46m'
25
+ cyan: '\x1b[36m'
26
26
  };
27
27
 
28
- const colorize = (color, text) => `${colors[color]}${text}${colors.reset}`;
28
+ // Elegant text styling functions
29
+ const logo = (text) => `${colors.bright}${colors.green}${text}${colors.reset}`;
30
+ const heading = (text) => `${colors.bright}${colors.white}${text}${colors.reset}`;
31
+ const accent = (text) => `${colors.green}${text}${colors.reset}`;
32
+ const body = (text) => `${colors.lightGrey}${text}${colors.reset}`;
33
+ const muted = (text) => `${colors.dim}${colors.lightGrey}${text}${colors.reset}`;
34
+ const error = (text) => `${colors.red}${text}${colors.reset}`;
35
+ const warning = (text) => `${colors.yellow}${text}${colors.reset}`;
36
+ const success = (text) => `${colors.green}${text}${colors.reset}`;
29
37
 
30
- // Beautiful text styling
31
- const title = (text) => colorize('bright', colorize('cyan', text));
32
- const success = (text) => colorize('green', text);
33
- const warning = (text) => colorize('yellow', text);
34
- const error = (text) => colorize('red', text);
35
- const info = (text) => colorize('blue', text);
36
- const highlight = (text) => colorize('magenta', text);
37
-
38
- // Create readline interface for user input
38
+ // Create readline interface
39
39
  const rl = readline.createInterface({
40
40
  input: process.stdin,
41
41
  output: process.stdout
42
42
  });
43
43
 
44
- // Function to display beautiful header
44
+ // Display elegant header
45
45
  const displayHeader = () => {
46
46
  console.clear();
47
47
  console.log();
48
- console.log(' ' + '='.repeat(60));
49
- console.log(' ' + ' '.repeat(20) + title('✨ WELCOME TO ZEN ✨') + ' '.repeat(20));
50
- console.log(' ' + ' '.repeat(15) + info('🚀 Modern Web Development Starter Kit') + ' '.repeat(15));
51
- console.log(' ' + '='.repeat(60));
48
+ console.log(' ' + '─'.repeat(80));
49
+ console.log();
50
+ console.log(' ' + ' '.repeat(35) + logo('ZEN') + ' '.repeat(35));
51
+ console.log();
52
+ console.log(' ' + ' '.repeat(20) + body('Professional Starter Kit • MIT License') + ' '.repeat(20));
53
+ console.log();
54
+ console.log(' ' + '─'.repeat(80));
52
55
  console.log();
53
56
  };
54
57
 
55
- // Function to get project name from user input
58
+ // Get project name with elegant styling
56
59
  const getProjectName = () => {
57
60
  return new Promise((resolve) => {
58
- rl.question(' 📝 ' + info('Enter your project name: ') + colorize('dim', ' (press Enter for zen-starter-app) '), (answer) => {
61
+ rl.question(' 📝 ' + body('Enter your project name: ') + muted(' (press Enter for zen-starter-app) '), (answer) => {
59
62
  const projectName = answer.trim() || 'zen-starter-app';
60
63
  resolve(projectName);
61
64
  });
62
65
  });
63
66
  };
64
67
 
65
- // Function to get project version choice
68
+ // Get project version choice with elegant styling
66
69
  const getProjectVersion = () => {
67
70
  return new Promise((resolve) => {
68
71
  console.log();
69
- console.log(' ' + highlight('Choose your ZEN starter version:'));
72
+ console.log(' ' + heading('Choose your ZEN starter version:'));
70
73
  console.log();
71
- console.log(' ' + colorize('dim', '1.') + ' ' + title('Standard Version') + ' - Full-featured with all components');
72
- console.log(' ' + colorize('dim', '2.') + ' ' + title('Lite Version') + ' - Lightweight for static sites');
74
+ console.log(' ' + muted('1.') + ' ' + accent('Standard Version') + ' ' + body('- Full-featured with all components'));
75
+ console.log(' ' + muted('2.') + ' ' + accent('Lite Version') + ' ' + body('- Lightweight for static sites'));
73
76
  console.log();
74
77
 
75
- rl.question(' 🎯 ' + info('Select version (1 or 2): ') + colorize('dim', ' (default: 1) '), (answer) => {
78
+ rl.question(' 🎯 ' + body('Select version (1 or 2): ') + muted(' (default: 1) '), (answer) => {
76
79
  const choice = answer.trim() || '1';
77
80
  const isLite = choice === '2';
78
81
  resolve(isLite);
@@ -80,7 +83,7 @@ const getProjectVersion = () => {
80
83
  });
81
84
  };
82
85
 
83
- // Function to get repository URL based on choice
86
+ // Get repository URL based on choice
84
87
  const getRepositoryUrl = (isLite) => {
85
88
  if (isLite) {
86
89
  return 'https://github.com/dmitry-conquer/zen-starter-lite.git';
@@ -88,7 +91,7 @@ const getRepositoryUrl = (isLite) => {
88
91
  return 'https://github.com/dmitry-conquer/zen-starter.git';
89
92
  };
90
93
 
91
- // Function to get version description
94
+ // Get version description
92
95
  const getVersionDescription = (isLite) => {
93
96
  if (isLite) {
94
97
  return 'Lite Version - Lightweight for static sites';
@@ -96,6 +99,19 @@ const getVersionDescription = (isLite) => {
96
99
  return 'Standard Version - Full-featured with all components';
97
100
  };
98
101
 
102
+ // Display project summary
103
+ const displaySummary = (projectName, versionDesc, repoUrl) => {
104
+ console.log();
105
+ console.log(' ' + '─'.repeat(80));
106
+ console.log(' 📋 ' + heading('Project Summary'));
107
+ console.log(' ' + '─'.repeat(80));
108
+ console.log(' 🏷️ ' + accent('Project Name:') + ' ' + heading(projectName));
109
+ console.log(' 🎯 ' + accent('Version:') + ' ' + heading(versionDesc));
110
+ console.log(' 🔗 ' + accent('Repository:') + ' ' + muted(repoUrl));
111
+ console.log(' ' + '─'.repeat(80));
112
+ console.log();
113
+ };
114
+
99
115
  // Main function
100
116
  const main = async () => {
101
117
  try {
@@ -106,19 +122,11 @@ const main = async () => {
106
122
  const REPO_URL = getRepositoryUrl(isLite);
107
123
  const VERSION_DESC = getVersionDescription(isLite);
108
124
 
109
- console.log();
110
- console.log(' ' + '─'.repeat(60));
111
- console.log(' 📋 ' + info('Project Summary:'));
112
- console.log(' ' + '─'.repeat(60));
113
- console.log(' 🏷️ ' + highlight('Project Name:') + ' ' + title(PROJECT_NAME));
114
- console.log(' 🎯 ' + highlight('Version:') + ' ' + title(VERSION_DESC));
115
- console.log(' 🔗 ' + highlight('Repository:') + ' ' + colorize('dim', REPO_URL));
116
- console.log(' ' + '─'.repeat(60));
117
- console.log();
125
+ displaySummary(PROJECT_NAME, VERSION_DESC, REPO_URL);
118
126
 
119
127
  if (fs.existsSync(PROJECT_NAME)) {
120
128
  console.log(' ' + error('⛔ Directory "' + PROJECT_NAME + '" already exists!'));
121
- console.log(' 💡 ' + info('Please choose a different name or remove the existing directory.'));
129
+ console.log(' 💡 ' + body('Please choose a different name or remove the existing directory.'));
122
130
  process.exit(1);
123
131
  }
124
132
 
@@ -136,21 +144,21 @@ const main = async () => {
136
144
  fs.rmSync(path.join(PROJECT_NAME, '.git'), { recursive: true, force: true });
137
145
 
138
146
  console.log();
139
- console.log(' ' + '='.repeat(60));
147
+ console.log(' ' + '─'.repeat(80));
140
148
  console.log(' ' + success('✅ SUCCESS! Your project is ready to go!') + ' 🎉');
141
- console.log(' ' + '='.repeat(60));
149
+ console.log(' ' + '─'.repeat(80));
142
150
  console.log();
143
- console.log(' 🚀 ' + info('Next steps:'));
151
+ console.log(' 🚀 ' + heading('Next steps:'));
144
152
  console.log();
145
- console.log(' 📁 ' + highlight(`cd ${PROJECT_NAME}`));
146
- console.log(' 📦 ' + highlight('npm install'));
147
- console.log(' 🧑‍💻 ' + highlight('npm run dev'));
153
+ console.log(' 📁 ' + accent(`cd ${PROJECT_NAME}`));
154
+ console.log(' 📦 ' + accent('npm install'));
155
+ console.log(' 🧑‍💻 ' + accent('npm run dev'));
148
156
  console.log();
149
- console.log(' 🌟 ' + title('Happy coding with ZEN!') + ' ✨');
157
+ console.log(' 🌟 ' + logo('Happy coding with ZEN!') + ' ✨');
150
158
  console.log();
151
- console.log(' ' + '─'.repeat(60));
152
- console.log(' 💡 ' + colorize('dim', 'Need help? Check out the README.md file in your project!'));
153
- console.log(' ' + '─'.repeat(60));
159
+ console.log(' ' + '─'.repeat(80));
160
+ console.log(' 💡 ' + muted('Need help? Check out the README.md file in your project!'));
161
+ console.log(' ' + '─'.repeat(80));
154
162
  console.log();
155
163
 
156
164
  } catch (error) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-zen",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "description": "✨ Create a new web development project with modern setup powered by Vite 🚀",
5
5
  "bin": {
6
6
  "create-zen": "./index.js"