ether-code 0.3.7 → 0.3.9

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/cli/ether.js +289 -335
  2. package/generators/css-generator.js +13 -0
  3. package/package.json +1 -1
package/cli/ether.js CHANGED
@@ -6,7 +6,7 @@ const http = require('http')
6
6
  const { EtherCompiler } = require('./compiler')
7
7
  const { Watcher } = require('./watcher')
8
8
 
9
- const VERSION = '0.3.7'
9
+ const VERSION = '0.3.9'
10
10
 
11
11
  const COLORS = {
12
12
  reset: '\x1b[0m',
@@ -76,329 +76,282 @@ const FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 50
76
76
  <path fill="url(#f3)" d="M213.282,235.909c14.12-20.019,28.129-36.342,31.945-40.798c5.362-6.26,5.762-5.197,8.629-5.197c2.869,0,132.714,0.003,132.714,0.003s2.916-0.469,4.863,1.864c1.029,1.235-0.298,5.654-0.298,5.654l-9.552,40.332c0,0-1.318,5.72-6.366,5.649C334.696,242.847,208.748,250.903,213.282,235.909"/>
77
77
  </svg>`
78
78
 
79
- const STYLES_CSS = `:root {
80
- --color-primary: #6366f1;
81
- --color-secondary: #8b5cf6;
82
- --color-accent: #06b6d4;
83
- --color-bg: #16162a;
84
- --color-bg-light: #1e1e3a;
85
- --color-surface: #252545;
86
- --color-text: #e2e8f0;
87
- --color-text-muted: #94a3b8;
88
- }
89
-
90
- * {
91
- margin: 0;
92
- padding: 0;
93
- box-sizing: border-box;
94
- }
95
-
96
- body {
97
- font-family: 'Inter', system-ui, -apple-system, sans-serif;
98
- background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-light) 50%, var(--color-bg) 100%);
99
- color: var(--color-text);
100
- line-height: 1.6;
101
- min-height: 100vh;
102
- }
103
-
104
- .hero {
105
- min-height: 100vh;
106
- position: relative;
107
- overflow: hidden;
108
- }
109
-
110
- .hero::before {
111
- content: '';
112
- position: absolute;
113
- top: 0;
114
- left: 0;
115
- right: 0;
116
- bottom: 0;
117
- background:
118
- radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
119
- radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
120
- radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
121
- pointer-events: none;
122
- }
123
-
124
- .navbar {
125
- display: flex;
126
- justify-content: space-between;
127
- align-items: center;
128
- padding: 1.25rem 5%;
129
- position: fixed;
130
- width: 100%;
131
- top: 0;
132
- z-index: 100;
133
- background: rgba(22, 22, 42, 0.85);
134
- backdrop-filter: blur(12px);
135
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
136
- }
137
-
138
- .logo {
139
- display: flex;
140
- align-items: center;
141
- gap: 0.75rem;
142
- font-size: 1.5rem;
143
- font-weight: 700;
144
- color: var(--color-text);
145
- text-decoration: none;
146
- }
147
-
148
- .logo-icon {
149
- width: 2.5rem;
150
- height: 2.5rem;
151
- }
152
-
153
- .nav-links {
154
- display: flex;
155
- list-style: none;
156
- gap: 2.5rem;
157
- margin-left: auto;
158
- padding-right: 1rem;
159
- }
160
-
161
- .nav-links a {
162
- color: var(--color-text-muted);
163
- text-decoration: none;
164
- font-weight: 500;
165
- font-size: 0.95rem;
166
- transition: color 0.2s ease;
167
- }
168
-
169
- .nav-links a:hover {
170
- color: var(--color-accent);
171
- }
172
-
173
- .hero-content {
174
- position: relative;
175
- text-align: center;
176
- padding: 10rem 5% 6rem;
177
- max-width: 900px;
178
- margin: 0 auto;
179
- }
180
-
181
- .hero-title {
182
- font-size: 4rem;
183
- font-weight: 800;
184
- margin-bottom: 1.5rem;
185
- line-height: 1.1;
186
- letter-spacing: -0.02em;
187
- }
188
-
189
- .gradient-text {
190
- background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
191
- -webkit-background-clip: text;
192
- -webkit-text-fill-color: transparent;
193
- background-clip: text;
194
- }
195
-
196
- .hero-subtitle {
197
- font-size: 1.25rem;
198
- color: var(--color-text-muted);
199
- margin-bottom: 2.5rem;
200
- max-width: 600px;
201
- margin-left: auto;
202
- margin-right: auto;
203
- line-height: 1.7;
204
- }
205
-
206
- .hero-buttons {
207
- display: flex;
208
- gap: 1rem;
209
- justify-content: center;
210
- flex-wrap: wrap;
211
- }
212
-
213
- .btn {
214
- display: inline-flex;
215
- align-items: center;
216
- padding: 0.9rem 2rem;
217
- border-radius: 0.75rem;
218
- font-size: 1rem;
219
- font-weight: 600;
220
- text-decoration: none;
221
- transition: all 0.2s ease;
222
- border: none;
223
- cursor: pointer;
224
- }
225
-
226
- .btn-primary {
227
- background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
228
- color: white;
229
- box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
230
- }
231
-
232
- .btn-primary:hover {
233
- transform: translateY(-2px);
234
- box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
235
- }
236
-
237
- .btn-secondary {
238
- background: rgba(255, 255, 255, 0.05);
239
- color: var(--color-text);
240
- border: 1px solid rgba(255, 255, 255, 0.1);
241
- }
242
-
243
- .btn-secondary:hover {
244
- background: rgba(255, 255, 255, 0.1);
245
- border-color: rgba(255, 255, 255, 0.2);
246
- }
247
-
248
- .features {
249
- padding: 6rem 5%;
250
- position: relative;
251
- }
252
-
253
- .section-title {
254
- text-align: center;
255
- font-size: 2.5rem;
256
- font-weight: 700;
257
- margin-bottom: 3.5rem;
258
- letter-spacing: -0.01em;
259
- }
260
-
261
- .features-grid {
262
- display: grid;
263
- grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
264
- gap: 1.5rem;
265
- max-width: 1200px;
266
- margin: 0 auto;
267
- }
268
-
269
- .feature-card {
270
- background: rgba(255, 255, 255, 0.03);
271
- border: 1px solid rgba(255, 255, 255, 0.06);
272
- padding: 2rem;
273
- border-radius: 1rem;
274
- text-align: center;
275
- transition: all 0.3s ease;
276
- }
277
-
278
- .feature-card:hover {
279
- transform: translateY(-4px);
280
- background: rgba(255, 255, 255, 0.05);
281
- border-color: rgba(99, 102, 241, 0.3);
282
- box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
283
- }
284
-
285
- .feature-icon {
286
- font-size: 2.5rem;
287
- margin-bottom: 1rem;
288
- }
289
-
290
- .feature-card h3 {
291
- margin-bottom: 0.75rem;
292
- font-size: 1.25rem;
293
- font-weight: 600;
294
- color: var(--color-text);
295
- }
296
-
297
- .feature-card p {
298
- color: var(--color-text-muted);
299
- font-size: 0.95rem;
300
- line-height: 1.6;
301
- }
302
-
303
- .examples {
304
- padding: 6rem 5%;
305
- background: var(--color-bg-light);
306
- }
307
-
308
- .code-comparison {
309
- display: flex;
310
- align-items: stretch;
311
- justify-content: center;
312
- gap: 1.5rem;
313
- flex-wrap: wrap;
314
- max-width: 1000px;
315
- margin: 0 auto;
316
- }
317
-
318
- .code-block {
319
- background: var(--color-bg);
320
- border: 1px solid rgba(255, 255, 255, 0.08);
321
- border-radius: 1rem;
322
- overflow: hidden;
323
- min-width: 320px;
324
- flex: 1;
325
- }
326
-
327
- .code-header {
328
- background: rgba(99, 102, 241, 0.15);
329
- padding: 0.875rem 1.25rem;
330
- font-weight: 600;
331
- font-size: 0.9rem;
332
- color: var(--color-accent);
333
- border-bottom: 1px solid rgba(255, 255, 255, 0.05);
334
- }
335
-
336
- .code-block pre {
337
- padding: 1.5rem;
338
- margin: 0;
339
- overflow-x: auto;
340
- }
341
-
342
- .code-block code {
343
- font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
344
- font-size: 0.875rem;
345
- line-height: 1.7;
346
- color: var(--color-text-muted);
347
- white-space: pre;
348
- display: block;
349
- }
350
-
351
- .code-arrow {
352
- display: flex;
353
- align-items: center;
354
- font-size: 2rem;
355
- color: var(--color-primary);
356
- padding: 0 0.5rem;
357
- }
358
-
359
- .footer {
360
- text-align: center;
361
- padding: 3rem 5%;
362
- background: var(--color-bg);
363
- border-top: 1px solid rgba(255, 255, 255, 0.05);
364
- }
365
-
366
- .footer p {
367
- color: var(--color-text-muted);
368
- }
369
-
370
- .heart {
371
- color: #ef4444;
372
- }
373
-
374
- .copyright {
375
- margin-top: 0.5rem;
376
- font-size: 0.875rem;
377
- opacity: 0.7;
378
- }
379
-
380
- @media (max-width: 768px) {
381
- .hero-title {
382
- font-size: 2.5rem;
383
- }
384
-
385
- .nav-links {
386
- display: none;
387
- }
388
-
389
- .code-arrow {
390
- transform: rotate(90deg);
391
- padding: 1rem 0;
392
- }
393
-
394
- .code-comparison {
395
- flex-direction: column;
396
- }
397
-
398
- .code-block {
399
- min-width: 100%;
400
- }
401
- }
79
+ const STYLES_ETH = `// cible: css
80
+
81
+ :root
82
+ color-primary: #6366f1
83
+ color-secondary: #8b5cf6
84
+ color-accent: #06b6d4
85
+ color-bg: #16162a
86
+ color-bg-light: #1e1e3a
87
+ color-surface: #252545
88
+ color-text: #e2e8f0
89
+ color-text-muted: #94a3b8
90
+
91
+ *
92
+ marge: 0
93
+ remplissage: 0
94
+ modele-boite: border-box
95
+
96
+ corps
97
+ famille-police: Inter, system-ui, -apple-system, sans-serif
98
+ fond: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-light) 50%, var(--color-bg) 100%)
99
+ couleur: var(--color-text)
100
+ hauteur-ligne: 1.6
101
+ min-hauteur: 100vh
102
+
103
+ .hero
104
+ min-hauteur: 100vh
105
+ position: relative
106
+ debordement: hidden
107
+
108
+ .hero::before
109
+ contenu: ""
110
+ position: absolute
111
+ haut: 0
112
+ gauche: 0
113
+ droite: 0
114
+ bas: 0
115
+ fond: radial-gradient(ellipse at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 70%)
116
+ evenements-pointeur: none
117
+
118
+ .navbar
119
+ affichage: flex
120
+ justifier-contenu: space-between
121
+ aligner-elements: center
122
+ remplissage: 1.25rem 5%
123
+ position: fixed
124
+ largeur: 100%
125
+ haut: 0
126
+ z-index: 100
127
+ fond: rgba(22, 22, 42, 0.85)
128
+ flou-fond: blur(12px)
129
+ bordure-bas: 1px solid rgba(255, 255, 255, 0.05)
130
+
131
+ .logo
132
+ affichage: flex
133
+ aligner-elements: center
134
+ ecart: 0.75rem
135
+ taille-police: 1.5rem
136
+ poids-police: 700
137
+ couleur: var(--color-text)
138
+ decoration-texte: none
139
+
140
+ .logo-icon
141
+ largeur: 2.5rem
142
+ hauteur: 2.5rem
143
+
144
+ .nav-links
145
+ affichage: flex
146
+ liste-style: none
147
+ ecart: 2.5rem
148
+ marge-gauche: auto
149
+ remplissage-droite: 1rem
150
+
151
+ .nav-links lien
152
+ couleur: var(--color-text-muted)
153
+ decoration-texte: none
154
+ poids-police: 500
155
+ taille-police: 0.95rem
156
+ transition: color 0.2s ease
157
+
158
+ .nav-links lien:hover
159
+ couleur: var(--color-accent)
160
+
161
+ .hero-content
162
+ position: relative
163
+ alignement-texte: center
164
+ remplissage: 10rem 5% 6rem
165
+ max-largeur: 900px
166
+ marge: 0 auto
167
+
168
+ .hero-title
169
+ taille-police: 4rem
170
+ poids-police: 800
171
+ marge-bas: 1.5rem
172
+ hauteur-ligne: 1.1
173
+ espacement-lettres: -0.02em
174
+
175
+ .gradient-text
176
+ fond: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%)
177
+ decoupe-fond: text
178
+ couleur-remplissage-texte: transparent
179
+
180
+ .hero-subtitle
181
+ taille-police: 1.25rem
182
+ couleur: var(--color-text-muted)
183
+ marge-bas: 2.5rem
184
+ max-largeur: 600px
185
+ marge-gauche: auto
186
+ marge-droite: auto
187
+ hauteur-ligne: 1.7
188
+
189
+ .hero-buttons
190
+ affichage: flex
191
+ ecart: 1rem
192
+ justifier-contenu: center
193
+ enveloppe-flex: wrap
194
+
195
+ .btn
196
+ affichage: inline-flex
197
+ aligner-elements: center
198
+ remplissage: 0.9rem 2rem
199
+ rayon-bordure: 0.75rem
200
+ taille-police: 1rem
201
+ poids-police: 600
202
+ decoration-texte: none
203
+ transition: all 0.2s ease
204
+ bordure: none
205
+ curseur: pointer
206
+
207
+ .btn-primary
208
+ fond: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%)
209
+ couleur: white
210
+ ombre-boite: 0 4px 15px rgba(99, 102, 241, 0.3)
211
+
212
+ .btn-primary:hover
213
+ transformation: translateY(-2px)
214
+ ombre-boite: 0 8px 25px rgba(99, 102, 241, 0.4)
215
+
216
+ .btn-secondary
217
+ fond: rgba(255, 255, 255, 0.05)
218
+ couleur: var(--color-text)
219
+ bordure: 1px solid rgba(255, 255, 255, 0.1)
220
+
221
+ .btn-secondary:hover
222
+ fond: rgba(255, 255, 255, 0.1)
223
+ couleur-bordure: rgba(255, 255, 255, 0.2)
224
+
225
+ .features
226
+ remplissage: 6rem 5%
227
+ position: relative
228
+
229
+ .section-title
230
+ alignement-texte: center
231
+ taille-police: 2.5rem
232
+ poids-police: 700
233
+ marge-bas: 3.5rem
234
+ espacement-lettres: -0.01em
235
+
236
+ .features-grid
237
+ affichage: grid
238
+ colonnes-grille: repeat(auto-fit, minmax(280px, 1fr))
239
+ ecart: 1.5rem
240
+ max-largeur: 1200px
241
+ marge: 0 auto
242
+
243
+ .feature-card
244
+ fond: rgba(255, 255, 255, 0.03)
245
+ bordure: 1px solid rgba(255, 255, 255, 0.06)
246
+ remplissage: 2rem
247
+ rayon-bordure: 1rem
248
+ alignement-texte: center
249
+ transition: all 0.3s ease
250
+
251
+ .feature-card:hover
252
+ transformation: translateY(-4px)
253
+ fond: rgba(255, 255, 255, 0.05)
254
+ couleur-bordure: rgba(99, 102, 241, 0.3)
255
+ ombre-boite: 0 20px 40px rgba(0, 0, 0, 0.2)
256
+
257
+ .feature-icon
258
+ taille-police: 2.5rem
259
+ marge-bas: 1rem
260
+
261
+ .feature-card titre3
262
+ marge-bas: 0.75rem
263
+ taille-police: 1.25rem
264
+ poids-police: 600
265
+ couleur: var(--color-text)
266
+
267
+ .feature-card paragraphe
268
+ couleur: var(--color-text-muted)
269
+ taille-police: 0.95rem
270
+ hauteur-ligne: 1.6
271
+
272
+ .examples
273
+ remplissage: 6rem 5%
274
+ fond: var(--color-bg-light)
275
+
276
+ .code-comparison
277
+ affichage: flex
278
+ aligner-elements: stretch
279
+ justifier-contenu: center
280
+ ecart: 1.5rem
281
+ max-largeur: 900px
282
+ marge: 0 auto
283
+
284
+ .code-block
285
+ fond: var(--color-bg)
286
+ bordure: 1px solid rgba(255, 255, 255, 0.08)
287
+ rayon-bordure: 1rem
288
+ debordement: hidden
289
+ flex: 1
290
+ max-largeur: 400px
291
+
292
+ .code-header
293
+ fond: rgba(99, 102, 241, 0.15)
294
+ remplissage: 0.75rem 1rem
295
+ poids-police: 600
296
+ taille-police: 0.85rem
297
+ couleur: var(--color-accent)
298
+ bordure-bas: 1px solid rgba(255, 255, 255, 0.05)
299
+
300
+ .code-block pre
301
+ remplissage: 1.25rem
302
+ marge: 0
303
+ debordement-x: auto
304
+
305
+ .code-block code
306
+ famille-police: "Fira Code", Monaco, Consolas, monospace
307
+ taille-police: 0.8rem
308
+ hauteur-ligne: 1.6
309
+ couleur: var(--color-text-muted)
310
+ espace-blanc: pre
311
+ affichage: block
312
+
313
+ .code-arrow
314
+ affichage: flex
315
+ aligner-elements: center
316
+ taille-police: 1.5rem
317
+ couleur: var(--color-primary)
318
+ remplissage: 0 0.5rem
319
+
320
+ .footer
321
+ alignement-texte: center
322
+ remplissage: 3rem 5%
323
+ fond: var(--color-bg)
324
+ bordure-haut: 1px solid rgba(255, 255, 255, 0.05)
325
+
326
+ .footer paragraphe
327
+ couleur: var(--color-text-muted)
328
+
329
+ .heart
330
+ couleur: #ef4444
331
+
332
+ .copyright
333
+ marge-haut: 0.5rem
334
+ taille-police: 0.875rem
335
+ opacite: 0.7
336
+
337
+ @media (max-width: 768px)
338
+ .hero-title
339
+ taille-police: 2.5rem
340
+
341
+ .nav-links
342
+ affichage: none
343
+
344
+ .code-comparison
345
+ direction-flex: column
346
+ aligner-elements: center
347
+
348
+ .code-block
349
+ max-largeur: 100%
350
+ largeur: 100%
351
+
352
+ .code-arrow
353
+ transformation: rotate(90deg)
354
+ remplissage: 1rem 0
402
355
  `
403
356
 
404
357
  function log(msg, color) {
@@ -687,10 +640,9 @@ document
687
640
  pre
688
641
  code classe: "ether-code"
689
642
  "document"
690
- "corps"
691
- "titre1 Bonjour"
692
- "paragraphe Le monde"
693
-
643
+ " corps"
644
+ " titre1 Bonjour"
645
+ " paragraphe Le monde"
694
646
  div classe: "code-arrow"
695
647
  "→"
696
648
  div classe: "code-block"
@@ -699,9 +651,11 @@ document
699
651
  pre
700
652
  code classe: "html-code"
701
653
  "<html>"
702
- "<body>"
703
- "<h1>Bonjour</h1>"
704
- "<p>Le monde</p>"
654
+ " <body>"
655
+ " <h1>Bonjour</h1>"
656
+ " <p>Le monde</p>"
657
+ " </body>"
658
+ "</html>"
705
659
 
706
660
  pied classe: "footer"
707
661
  paragraphe
@@ -717,14 +671,14 @@ document
717
671
 
718
672
  const appContent = `// cible: js
719
673
 
720
- console.log("Ether v0.3.5 ready!")
674
+ console.log("Ether v0.3.8 ready!")
721
675
  `
722
676
 
723
677
  const packageContent = '{\n "name": "mon-projet-ether",\n "version": "1.0.0",\n "scripts": {\n "dev": "ether dev",\n "build": "ether build"\n }\n}\n'
724
678
 
725
679
  fs.writeFileSync(path.join(projectDir, 'ether.config.js'), configContent)
726
680
  fs.writeFileSync(path.join(srcDir, 'index.eth'), indexContent)
727
- fs.writeFileSync(path.join(distDir, 'styles.css'), STYLES_CSS)
681
+ fs.writeFileSync(path.join(srcDir, 'styles.eth'), STYLES_ETH)
728
682
  fs.writeFileSync(path.join(srcDir, 'app.eth'), appContent)
729
683
  fs.writeFileSync(path.join(projectDir, 'package.json'), packageContent)
730
684
 
@@ -732,8 +686,8 @@ console.log("Ether v0.3.5 ready!")
732
686
  console.log('')
733
687
  logInfo('Structure creee:')
734
688
  console.log(' src/index.eth')
689
+ console.log(' src/styles.eth')
735
690
  console.log(' src/app.eth')
736
- console.log(' dist/styles.css')
737
691
  console.log(' public/images/logo.svg')
738
692
  console.log(' public/favicon.svg')
739
693
  console.log(' public/videos/')
@@ -946,4 +900,4 @@ function main() {
946
900
  console.log('Tapez "ether help" pour voir les commandes disponibles')
947
901
  }
948
902
 
949
- main()
903
+ main()
package/generators/css-generator.js CHANGED
@@ -244,6 +244,7 @@ class CSSGenerator {
244
244
  'attachement-fond': 'background-attachment',
245
245
  'origine-fond': 'background-origin',
246
246
  'decoupe-fond': 'background-clip',
247
+ 'couleur-remplissage-texte': '-webkit-text-fill-color',
247
248
  'selection-utilisateur': 'user-select',
248
249
  'evenements-pointeur': 'pointer-events',
249
250
  'accrochage-defilement': 'scroll-snap-type',
@@ -554,6 +555,18 @@ class CSSGenerator {
554
555
  value += ' !important'
555
556
  }
556
557
 
558
+ const needsWebkitPrefix = [
559
+ 'background-clip',
560
+ 'box-decoration-break',
561
+ 'text-stroke',
562
+ 'text-stroke-width',
563
+ 'text-stroke-color'
564
+ ]
565
+
566
+ if (needsWebkitPrefix.includes(property) && !property.startsWith('-webkit-')) {
567
+ this.writeLine(`-webkit-${property}: ${value};`)
568
+ }
569
+
557
570
  this.writeLine(`${property}: ${value};`)
558
571
  }
559
572
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ether-code",
3
- "version": "0.3.7",
3
+ "version": "0.3.9",
4
4
  "description": "Ether - Le langage intentionnel",
5
5
  "main": "cli/compiler.js",
6
6
  "bin": {