ether-code 0.3.4 → 0.3.6

package/cli/ether.js

@@ -6,7 +6,7 @@ const http = require('http')
 const { EtherCompiler } = require('./compiler')
 const { Watcher } = require('./watcher')
 
-const VERSION = '0.3.4'
+const VERSION = '0.3.6'
 
 const COLORS = {
   reset: '\x1b[0m',
@@ -76,6 +76,331 @@ const FAVICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 499 50
   <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"/>
 </svg>`
 
+const STYLES_CSS = `:root {
+  --color-primary: #6366f1;
+  --color-secondary: #8b5cf6;
+  --color-accent: #06b6d4;
+  --color-bg: #16162a;
+  --color-bg-light: #1e1e3a;
+  --color-surface: #252545;
+  --color-text: #e2e8f0;
+  --color-text-muted: #94a3b8;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-light) 50%, var(--color-bg) 100%);
+  color: var(--color-text);
+  line-height: 1.6;
+  min-height: 100vh;
+}
+
+.hero {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    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%);
+  pointer-events: none;
+}
+
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 5%;
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 100;
+  background: rgba(22, 22, 42, 0.85);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.logo-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
+.nav-links {
+  display: flex;
+  list-style: none;
+  gap: 2.5rem;
+  margin-left: auto;
+  padding-right: 1rem;
+}
+
+.nav-links a {
+  color: var(--color-text-muted);
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 0.95rem;
+  transition: color 0.2s ease;
+}
+
+.nav-links a:hover {
+  color: var(--color-accent);
+}
+
+.hero-content {
+  position: relative;
+  text-align: center;
+  padding: 10rem 5% 6rem;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.hero-title {
+  font-size: 4rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+
+.gradient-text {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.hero-subtitle {
+  font-size: 1.25rem;
+  color: var(--color-text-muted);
+  margin-bottom: 2.5rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+  line-height: 1.7;
+}
+
+.hero-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.9rem 2rem;
+  border-radius: 0.75rem;
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border: none;
+  cursor: pointer;
+}
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+  color: white;
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+}
+
+.btn-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
+}
+
+.btn-secondary {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--color-text);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.btn-secondary:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.features {
+  padding: 6rem 5%;
+  position: relative;
+}
+
+.section-title {
+  text-align: center;
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 3.5rem;
+  letter-spacing: -0.01em;
+}
+
+.features-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.feature-card {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 2rem;
+  border-radius: 1rem;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-4px);
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(99, 102, 241, 0.3);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+}
+
+.feature-icon {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+}
+
+.feature-card h3 {
+  margin-bottom: 0.75rem;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.feature-card p {
+  color: var(--color-text-muted);
+  font-size: 0.95rem;
+  line-height: 1.6;
+}
+
+.examples {
+  padding: 6rem 5%;
+  background: var(--color-bg-light);
+}
+
+.code-comparison {
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+  gap: 1.5rem;
+  flex-wrap: wrap;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.code-block {
+  background: var(--color-bg);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 1rem;
+  overflow: hidden;
+  min-width: 320px;
+  flex: 1;
+}
+
+.code-header {
+  background: rgba(99, 102, 241, 0.15);
+  padding: 0.875rem 1.25rem;
+  font-weight: 600;
+  font-size: 0.9rem;
+  color: var(--color-accent);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.code-block pre {
+  padding: 1.5rem;
+  margin: 0;
+  overflow-x: auto;
+}
+
+.code-block code {
+  font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.7;
+  color: var(--color-text-muted);
+  white-space: pre;
+  display: block;
+}
+
+.code-arrow {
+  display: flex;
+  align-items: center;
+  font-size: 2rem;
+  color: var(--color-primary);
+  padding: 0 0.5rem;
+}
+
+.footer {
+  text-align: center;
+  padding: 3rem 5%;
+  background: var(--color-bg);
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.footer p {
+  color: var(--color-text-muted);
+}
+
+.heart {
+  color: #ef4444;
+}
+
+.copyright {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+
+@media (max-width: 768px) {
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .nav-links {
+    display: none;
+  }
+  
+  .code-arrow {
+    transform: rotate(90deg);
+    padding: 1rem 0;
+  }
+  
+  .code-comparison {
+    flex-direction: column;
+  }
+  
+  .code-block {
+    min-width: 100%;
+  }
+}
+`
+
 function log(msg, color) {
   console.log((color || '') + msg + COLORS.reset)
 }
@@ -298,13 +623,13 @@ document
   corps
     entete classe: "hero"
       nav classe: "navbar"
-        div classe: "logo"
+        lien href: "/", classe: "logo"
           image src: "/images/logo.svg", alt: "Ether", classe: "logo-icon"
           span "Ether"
         liste-non-ordonnee classe: "nav-links"
           element-liste
             lien href: "#features"
-              "Fonctionnalités"
+              "Fonctionnalites"
           element-liste
             lien href: "#examples"
               "Exemples"
@@ -314,7 +639,7 @@ document
       
       div classe: "hero-content"
         titre1 classe: "hero-title"
-          "Écrivez du code"
+          "Ecrivez du code"
           saut-ligne
           span classe: "gradient-text"
             "comme vous pensez"
@@ -335,17 +660,17 @@ document
             div classe: "feature-icon"
               "🎯"
             titre3 "Intuitif"
-            paragraphe "Écrivez du code en langage naturel. Plus besoin de mémoriser des syntaxes complexes."
+            paragraphe "Ecrivez du code en langage naturel. Plus besoin de memoriser des syntaxes complexes."
           article classe: "feature-card"
             div classe: "feature-icon"
               "⚡"
             titre3 "Rapide"
-            paragraphe "Compilation instantanée avec rechargement automatique en mode développement."
+            paragraphe "Compilation instantanee avec rechargement automatique en mode developpement."
           article classe: "feature-card"
             div classe: "feature-icon"
               "🌍"
             titre3 "Multilingue"
-            paragraphe "Codez en français, anglais, espagnol et plus. Votre langue, votre code."
+            paragraphe "Codez en francais, anglais, espagnol et plus. Votre langue, votre code."
           article classe: "feature-card"
             div classe: "feature-icon"
               "🔧"
@@ -354,271 +679,45 @@ document
       
       section id: "examples", classe: "examples"
         titre2 classe: "section-title"
-          "Simple et élégant"
+          "Simple et elegant"
         div classe: "code-comparison"
           div classe: "code-block"
             div classe: "code-header"
               "Ether"
             pre
-              code
-                "document\\n  corps\\n    titre1 \\"Bonjour\\"\\n    paragraphe \\"Le monde\\""
+              code classe: "ether-code"
+                "document\n  corps\n    titre1 Bonjour\n    paragraphe Le monde"
           div classe: "code-arrow"
             "→"
           div classe: "code-block"
             div classe: "code-header"
               "HTML"
             pre
-              code
-                "&lt;!DOCTYPE html&gt;\\n&lt;html&gt;\\n  &lt;body&gt;\\n    &lt;h1&gt;Bonjour&lt;/h1&gt;\\n    &lt;p&gt;Le monde&lt;/p&gt;\\n  &lt;/body&gt;\\n&lt;/html&gt;"
+              code classe: "html-code"
+                "html\n  body\n    h1 Bonjour\n    p Le monde"
     
     pied classe: "footer"
       paragraphe
-        "Créé avec"
+        "Cree avec "
         span classe: "heart"
-          " ♥ "
-        "par la communauté Ether"
+          "♥"
+        " par la communaute Ether"
       paragraphe classe: "copyright"
         "© 2025 Ether. MIT License."
     
     script src: "app.js"
 `
 
-  const stylesContent = `// cible: css
-
-racine
-  couleur-primaire: "#6366f1"
-  couleur-secondaire: "#8b5cf6"
-  couleur-accent: "#06b6d4"
-  couleur-fond: "#0f0f23"
-  couleur-surface: "#1a1a2e"
-  couleur-texte: "#e2e8f0"
-  couleur-texte-pale: "#94a3b8"
-
-*
-  marge: 0
-  remplissage: 0
-  modele-boite: border-box
-
-corps
-  famille-police: "system-ui", "-apple-system", "sans-serif"
-  couleur-fond: var(--couleur-fond)
-  couleur: var(--couleur-texte)
-  hauteur-ligne: 1.6
-
-.hero
-  min-hauteur: 100vh
-  fond: "linear-gradient(135deg, var(--couleur-fond) 0%, var(--couleur-surface) 100%)"
-  position: relative
-  debordement: cache
-
-.navbar
-  affichage: flex
-  justifier-contenu: space-between
-  aligner-elements: center
-  remplissage: "1.5rem 5%"
-  position: fixed
-  largeur: 100%
-  haut: 0
-  z-index: 100
-  fond: "rgba(15, 15, 35, 0.9)"
-  flou-fond: "10px"
-
-.logo
-  affichage: flex
-  aligner-elements: center
-  espace: "0.75rem"
-  taille-police: "1.5rem"
-  poids-police: 700
-
-.logo-icon
-  largeur: "2.5rem"
-  hauteur: "2.5rem"
-
-.nav-links
-  affichage: flex
-  liste-style: none
-  espace: "2rem"
-
-.nav-links lien
-  couleur: var(--couleur-texte-pale)
-  decoration-texte: none
-  transition: "couleur 0.3s"
-  au survol
-    couleur: var(--couleur-primaire)
-
-.hero-content
-  texte-aligne: center
-  remplissage: "12rem 5% 5rem"
-  max-largeur: "800px"
-  marge: "0 auto"
-
-.hero-title
-  taille-police: "3.5rem"
-  poids-police: 800
-  marge-bas: "1.5rem"
-  hauteur-ligne: 1.2
-
-.gradient-text
-  fond: "linear-gradient(90deg, var(--couleur-primaire), var(--couleur-accent))"
-  decoupe-fond: text
-  couleur: transparent
-
-.hero-subtitle
-  taille-police: "1.25rem"
-  couleur: var(--couleur-texte-pale)
-  marge-bas: "2.5rem"
-  max-largeur: "600px"
-  marge-gauche: auto
-  marge-droite: auto
-
-.hero-buttons
-  affichage: flex
-  espace: "1rem"
-  justifier-contenu: center
-
-.btn
-  remplissage: "0.875rem 2rem"
-  rayon-bordure: "0.5rem"
-  taille-police: "1rem"
-  poids-police: 600
-  decoration-texte: none
-  transition: "transform 0.2s, box-shadow 0.2s"
-  au survol
-    transformation: "translateY(-2px)"
-
-.btn-primary
-  fond: "linear-gradient(90deg, var(--couleur-primaire), var(--couleur-secondaire))"
-  couleur: white
-  au survol
-    ombre-boite: "0 10px 30px rgba(99, 102, 241, 0.4)"
-
-.btn-secondary
-  fond: transparent
-  couleur: var(--couleur-texte)
-  bordure: "2px solid var(--couleur-primaire)"
-  au survol
-    fond: "rgba(99, 102, 241, 0.1)"
-
-.features
-  remplissage: "6rem 5%"
-
-.section-title
-  texte-aligne: center
-  taille-police: "2.5rem"
-  marge-bas: "3rem"
-
-.features-grid
-  affichage: grid
-  colonnes-grille: "repeat(auto-fit, minmax(250px, 1fr))"
-  espace: "2rem"
-  max-largeur: "1200px"
-  marge: "0 auto"
-
-.feature-card
-  fond: var(--couleur-surface)
-  remplissage: "2rem"
-  rayon-bordure: "1rem"
-  texte-aligne: center
-  transition: "transform 0.3s"
-  au survol
-    transformation: "translateY(-5px)"
-
-.feature-icon
-  taille-police: "3rem"
-  marge-bas: "1rem"
-
-.feature-card titre3
-  marge-bas: "0.75rem"
-  taille-police: "1.25rem"
-
-.feature-card paragraphe
-  couleur: var(--couleur-texte-pale)
-
-.examples
-  remplissage: "6rem 5%"
-  fond: var(--couleur-surface)
-
-.code-comparison
-  affichage: flex
-  aligner-elements: center
-  justifier-contenu: center
-  espace: "2rem"
-  flex-wrap: wrap
-  max-largeur: "1000px"
-  marge: "0 auto"
-
-.code-block
-  fond: var(--couleur-fond)
-  rayon-bordure: "0.75rem"
-  debordement: cache
-  min-largeur: "300px"
-
-.code-header
-  fond: "rgba(99, 102, 241, 0.2)"
-  remplissage: "0.75rem 1rem"
-  poids-police: 600
-  couleur: var(--couleur-primaire)
-
-.code-block pre
-  remplissage: "1.5rem"
-  marge: 0
-
-.code-block code
-  famille-police: "Fira Code", "Monaco", monospace
-  taille-police: "0.9rem"
-  blanc: pre
-
-.code-arrow
-  taille-police: "2rem"
-  couleur: var(--couleur-primaire)
-
-.footer
-  texte-aligne: center
-  remplissage: "3rem 5%"
-  fond: var(--couleur-fond)
-
-.heart
-  couleur: "#ef4444"
-
-.copyright
-  marge-haut: "0.5rem"
-  couleur: var(--couleur-texte-pale)
-  taille-police: "0.875rem"
-
-@media (max-largeur: 768px)
-  .hero-title
-    taille-police: "2.5rem"
-  .nav-links
-    affichage: none
-  .code-arrow
-    transformation: "rotate(90deg)"
-`
-
   const appContent = `// cible: js
 
-constante annee = nouveau Date().getFullYear()
-
-fonction initialiser()
-  constante copyright = document.querySelector(".copyright")
-  si copyright
-    copyright.textContent = "© " + annee + " Ether. MIT License."
-  
-  constante liens = document.querySelectorAll("a[href^='#']")
-  pour chaque lien dans liens
-    lien.addEventListener "click", fonction(e)
-      e.preventDefault()
-      constante cible = document.querySelector(this.getAttribute("href"))
-      si cible
-        cible.scrollIntoView({ behavior: "smooth" })
-
-document.addEventListener "DOMContentLoaded", initialiser
+console.log("Ether v0.3.5 ready!")
 `
 
   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'
 
   fs.writeFileSync(path.join(projectDir, 'ether.config.js'), configContent)
   fs.writeFileSync(path.join(srcDir, 'index.eth'), indexContent)
-  fs.writeFileSync(path.join(srcDir, 'styles.eth'), stylesContent)
+  fs.writeFileSync(path.join(distDir, 'styles.css'), STYLES_CSS)
   fs.writeFileSync(path.join(srcDir, 'app.eth'), appContent)
   fs.writeFileSync(path.join(projectDir, 'package.json'), packageContent)
   
@@ -626,8 +725,8 @@ document.addEventListener "DOMContentLoaded", initialiser
   console.log('')
   logInfo('Structure creee:')
   console.log('  src/index.eth')
-  console.log('  src/styles.eth')
   console.log('  src/app.eth')
+  console.log('  dist/styles.css')
   console.log('  public/images/logo.svg')
   console.log('  public/favicon.svg')
   console.log('  public/videos/')

package/ether-parser.js

@@ -451,6 +451,7 @@ class EtherParser {
         .replace(/\s+\)/g, ')')
         .replace(/\s+,/g, ',')
         .replace(/-\s+/g, '-')
+        .replace(/(\d+)\s+(%|px|em|rem|vh|vw|vmin|vmax|fr|s|ms|deg)/gi, '$1$2')
         .replace(/\s+/g, ' ')
         .trim()
     }

package/generators/css-generator.js

@@ -358,7 +358,13 @@ class CSSGenerator {
       'en-ligne': 'inline',
       'bloc-en-ligne': 'inline-block',
       'flex-en-ligne': 'inline-flex',
-      'grille-en-ligne': 'inline-grid'
+      'grille-en-ligne': 'inline-grid',
+      'espace-blanc': 'white-space',
+      'blanc-espace': 'white-space',
+      'pre': 'pre',
+      'pre-ligne': 'pre-line',
+      'pre-enveloppe': 'pre-wrap',
+      'sans-retour': 'nowrap'
     }
 
     const lower = text.toLowerCase()
@@ -497,13 +503,14 @@ class CSSGenerator {
   generateRule(node) {
     const selectors = node.selectors || [node.selector]
     const translatedSelectors = selectors.map(s => this.translateSelector(s))
+    const isRoot = translatedSelectors.some(s => s === ':root')
 
     this.writeLine(`${translatedSelectors.join(', ')} {`)
     this.indent++
 
     const declarations = node.declarations || node.properties || []
     for (const decl of declarations) {
-      this.generateDeclaration(decl)
+      this.generateDeclaration(decl, isRoot)
     }
 
     if (node.children) {
@@ -523,13 +530,18 @@ class CSSGenerator {
     }
   }
 
-  generateDeclaration(decl) {
+  generateDeclaration(decl, isRoot = false) {
     if (!decl) return
 
     let property = decl.property || decl.name
     let value = decl.value
 
-    property = this.translateProperty(property)
+    if (isRoot) {
+      property = '--' + property.toLowerCase()
+    } else {
+      property = this.translateProperty(property)
+    }
+    
     value = this.translateValue(value)
     
     if (typeof value === 'object' && value.type === 'animation') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ether-code",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Ether - Le langage intentionnel",
   "main": "cli/compiler.js",
   "bin": {