Port logo generator to vanilla JS + Vite

Restructure the single-file demo into a Vite project:

- src/logo.js: framework-agnostic core (shadow-layer geometry,
  inline text-shadow, generated CSS snippet, defaults, font list)
- src/main.js: DOM wiring (state read, live render, copy, native reset)
- src/style.css, index.html: markup + styles with the accessibility
  fixes (labels, aria, <details>/<summary>, <form> reset, focus rings)

The original single-file version lives on the 'html' branch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.gitignore

@@ -1,5 +1,4 @@
 node_modules
 dist
-.astro
 *.log
 .DS_Store

astro.config.mjs

@@ -1,5 +0,0 @@
-import { defineConfig } from 'astro/config';
-
-// Astro builds with Vite under the hood. The page ships as static HTML;
-// the interactive logic lives in a bundled client <script> in index.astro.
-export default defineConfig({});

index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Logo-Generator</title>
+  <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bowlby+One&family=Bebas+Neue&family=Bungee&family=Passion+One:wght@900&family=Ultra&display=swap" rel="stylesheet">
+</head>
+<body>
+  <div class="logo" id="logo">LIBRE
+TECH</div>
+
+  <details class="disclosure" id="panel" open>
+    <summary class="toggle-panel">Panel ein/aus</summary>
+
+    <div class="panel">
+      <h1>Logo-Generator</h1>
+
+      <form id="logoForm">
+        <h2>Inhalt</h2>
+        <p class="hint" id="hint-text">Mehrere Zeilen mit Enter trennen.</p>
+        <textarea id="text" rows="2" aria-label="Logo-Text" aria-describedby="hint-text">LIBRE
+TECH</textarea>
+
+        <h2>Schrift</h2>
+        <select id="font" aria-label="Schriftart">
+          <option value="Anton">Anton</option>
+          <option value="Bowlby One">Bowlby One</option>
+          <option value="Bebas Neue">Bebas Neue</option>
+          <option value="Bungee">Bungee</option>
+          <option value="Passion One">Passion One</option>
+          <option value="Ultra">Ultra</option>
+          <option value="Impact">Impact (System)</option>
+        </select>
+        <div class="row-2col">
+          <div>
+            <label for="fs">Größe: <span class="val" id="v-fs">18</span>vw</label>
+            <input type="range" id="fs" min="6" max="30" step="0.5" value="18">
+          </div>
+          <div>
+            <label for="lh">Zeilenabstand: <span class="val" id="v-lh">1.05</span></label>
+            <input type="range" id="lh" min="0.5" max="2" step="0.05" value="1.05">
+          </div>
+        </div>
+        <label for="ls">Buchstabenabstand: <span class="val" id="v-ls">0.010</span>em</label>
+        <input type="range" id="ls" min="-0.15" max="0.3" step="0.005" value="0.01">
+
+        <h2>Farben</h2>
+        <div class="color-row">
+          <input type="color" id="c-bg" value="#362582" aria-labelledby="lbl-bg">
+          <span class="swatch-label" id="lbl-bg">Hintergrund</span>
+          <span class="hex" id="hex-bg">#362582</span>
+        </div>
+        <div class="color-row">
+          <input type="color" id="c-face" value="#f6d939" aria-labelledby="lbl-face">
+          <span class="swatch-label" id="lbl-face">Face</span>
+          <span class="hex" id="hex-face">#f6d939</span>
+        </div>
+        <div class="color-row">
+          <input type="color" id="c-depth" value="#ea741e" aria-labelledby="lbl-depth">
+          <span class="swatch-label" id="lbl-depth">Tiefe</span>
+          <span class="hex" id="hex-depth">#ea741e</span>
+        </div>
+        <div class="color-row">
+          <input type="color" id="c-shadow" value="#221953" aria-labelledby="lbl-shadow">
+          <span class="swatch-label" id="lbl-shadow">Schatten &amp; Kontur</span>
+          <span class="hex" id="hex-shadow">#221953</span>
+        </div>
+
+        <h2>Lichtrichtung</h2>
+        <p class="hint">Steuert alle Versätze gleichzeitig — Schatten geht in Lichtrichtung, Tiefe entgegen.</p>
+        <label for="angle">Winkel: <span class="val" id="v-angle">133</span>° (0=oben, 90=rechts, 180=unten)</label>
+        <input type="range" id="angle" min="0" max="359" value="133">
+
+        <h2>Schichten</h2>
+        <p class="hint">Hinten nach vorn: Schatten · Tiefe · Kontur · Face</p>
+        <label for="shadow">Schatten-Länge: <span class="val" id="v-shadow">30</span>px</label>
+        <input type="range" id="shadow" min="0" max="80" value="30">
+        <label for="depth">Tiefe (in Gegenrichtung): <span class="val" id="v-depth">15</span>px</label>
+        <input type="range" id="depth" min="0" max="30" value="15">
+        <label for="contour">Kontur (vor der Tiefe): <span class="val" id="v-contour">11</span>px</label>
+        <input type="range" id="contour" min="0" max="20" value="11">
+
+        <h2>Komposition</h2>
+        <div class="row-2col">
+          <div>
+            <label for="rot">Drehung: <span class="val" id="v-rot">-10</span>°</label>
+            <input type="range" id="rot" min="-25" max="25" value="-10">
+          </div>
+          <div>
+            <label for="skew">Schräge: <span class="val" id="v-skew">-8</span>°</label>
+            <input type="range" id="skew" min="-20" max="20" value="-8">
+          </div>
+        </div>
+
+        <h2>Generiertes CSS</h2>
+        <code id="cssout"></code>
+        <button type="button" class="copy-btn" id="copyBtn">CSS kopieren</button>
+        <button type="reset" class="reset-btn" id="resetBtn">Zurücksetzen</button>
+      </form>
+    </div>
+  </details>
+
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "demo-ecmascript-astro",
+  "name": "demo-ecmascript",
   "version": "1.0.0",
-  "description": "LIBRETECH logo generator — Astro (Vite)",
+  "description": "LIBRETECH logo generator — vanilla JS + Vite",
   "repository": {
     "type": "git",
     "url": "ssh://tengo@git.librete.ch:41240/public/demo-ecmascript.git"
@@ -9,12 +9,11 @@
   "license": "WTFPL",
   "type": "module",
   "scripts": {
-    "dev": "astro dev",
+    "dev": "vite",
-    "build": "astro build",
+    "build": "vite build",
-    "preview": "astro preview",
+    "preview": "vite preview"
-    "astro": "astro"
   },
-  "dependencies": {
+  "devDependencies": {
-    "astro": "^5.1.1"
+    "vite": "^6.0.0"
   }
 }

src/main.js

@@ -0,0 +1,83 @@
+import './style.css';
+import { inlineTextShadow, cssOutput } from './logo.js';
+
+const $ = (id) => document.getElementById(id);
+const logo = $('logo');
+const cssout = $('cssout');
+
+function readState() {
+  return {
+    text: $('text').value || ' ',
+    font: $('font').value,
+    fs: +$('fs').value,
+    lh: +$('lh').value,
+    ls: +$('ls').value,
+    bg: $('c-bg').value,
+    face: $('c-face').value,
+    depth: $('c-depth').value,
+    shadow: $('c-shadow').value,
+    angle: +$('angle').value,
+    shadowLen: +$('shadow').value,
+    depthLen: +$('depth').value,
+    contourLen: +$('contour').value,
+    rot: +$('rot').value,
+    skew: +$('skew').value,
+  };
+}
+
+function render() {
+  const s = readState();
+
+  $('v-fs').textContent = s.fs;
+  $('v-lh').textContent = s.lh.toFixed(2);
+  $('v-ls').textContent = s.ls.toFixed(3);
+  $('v-angle').textContent = s.angle;
+  $('v-shadow').textContent = s.shadowLen;
+  $('v-depth').textContent = s.depthLen;
+  $('v-contour').textContent = s.contourLen;
+  $('v-rot').textContent = s.rot;
+  $('v-skew').textContent = s.skew;
+  $('hex-bg').textContent = s.bg;
+  $('hex-face').textContent = s.face;
+  $('hex-depth').textContent = s.depth;
+  $('hex-shadow').textContent = s.shadow;
+
+  logo.textContent = s.text;
+  logo.style.textShadow = inlineTextShadow(s);
+  logo.style.transform = `rotate(${s.rot}deg) skewX(${s.skew}deg)`;
+  logo.style.fontFamily = `'${s.font}', 'Bebas Neue', Impact, sans-serif`;
+  logo.style.color = s.face;
+  logo.style.fontSize = s.fs + 'vw';
+  logo.style.lineHeight = s.lh;
+  logo.style.letterSpacing = s.ls + 'em';
+  document.body.style.background = s.bg;
+
+  cssout.textContent = cssOutput(s);
+}
+
+document
+  .querySelectorAll('#logoForm input, #logoForm select, #logoForm textarea')
+  .forEach((el) => el.addEventListener('input', render));
+
+$('copyBtn').addEventListener('click', async () => {
+  try {
+    await navigator.clipboard.writeText(cssout.textContent);
+    const btn = $('copyBtn');
+    btn.textContent = 'Kopiert!';
+    btn.classList.add('copied');
+    setTimeout(() => {
+      btn.textContent = 'CSS kopieren';
+      btn.classList.remove('copied');
+    }, 1500);
+  } catch {
+    alert('Kopieren fehlgeschlagen — bitte manuell aus dem Code-Feld kopieren.');
+  }
+});
+
+// Native <button type="reset"> restores every field to its value= attribute;
+// re-render on the next tick once the reset has applied.
+const form = $('logoForm');
+form.addEventListener('reset', () => setTimeout(render, 0));
+form.addEventListener('submit', (e) => e.preventDefault());
+
+render();

src/pages/index.astro

@@ -1,200 +0,0 @@
----
-import { defaults, fonts } from '../logo.js';
-import '../styles/style.css';
-
-const FONT_LABELS = { Impact: 'Impact (System)' };
----
-
-<!doctype html>
-<html lang="de">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Logo-Generator</title>
-  <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bowlby+One&family=Bebas+Neue&family=Bungee&family=Passion+One:wght@900&family=Ultra&display=swap" rel="stylesheet" />
-</head>
-<body>
-  <div class="logo" id="logo">{defaults.text}</div>
-
-  <details class="disclosure" id="panel" open>
-    <summary class="toggle-panel">Panel ein/aus</summary>
-
-    <div class="panel">
-      <h1>Logo-Generator</h1>
-
-      <form id="logoForm">
-        <h2>Inhalt</h2>
-        <p class="hint" id="hint-text">Mehrere Zeilen mit Enter trennen.</p>
-        <textarea id="text" rows="2" aria-label="Logo-Text" aria-describedby="hint-text">{defaults.text}</textarea>
-
-        <h2>Schrift</h2>
-        <select id="font" aria-label="Schriftart">
-          {fonts.map((f) => <option value={f}>{FONT_LABELS[f] ?? f}</option>)}
-        </select>
-
-        <div class="row-2col">
-          <div>
-            <label for="fs">Größe: <span class="val" id="v-fs">{defaults.fs}</span>vw</label>
-            <input type="range" id="fs" min="6" max="30" step="0.5" value={defaults.fs} />
-          </div>
-          <div>
-            <label for="lh">Zeilenabstand: <span class="val" id="v-lh">{defaults.lh.toFixed(2)}</span></label>
-            <input type="range" id="lh" min="0.5" max="2" step="0.05" value={defaults.lh} />
-          </div>
-        </div>
-        <label for="ls">Buchstabenabstand: <span class="val" id="v-ls">{defaults.ls.toFixed(3)}</span>em</label>
-        <input type="range" id="ls" min="-0.15" max="0.3" step="0.005" value={defaults.ls} />
-
-        <h2>Farben</h2>
-        <div class="color-row">
-          <input type="color" id="c-bg" value={defaults.bg} aria-labelledby="lbl-bg" />
-          <span class="swatch-label" id="lbl-bg">Hintergrund</span>
-          <span class="hex" id="hex-bg">{defaults.bg}</span>
-        </div>
-        <div class="color-row">
-          <input type="color" id="c-face" value={defaults.face} aria-labelledby="lbl-face" />
-          <span class="swatch-label" id="lbl-face">Face</span>
-          <span class="hex" id="hex-face">{defaults.face}</span>
-        </div>
-        <div class="color-row">
-          <input type="color" id="c-depth" value={defaults.depth} aria-labelledby="lbl-depth" />
-          <span class="swatch-label" id="lbl-depth">Tiefe</span>
-          <span class="hex" id="hex-depth">{defaults.depth}</span>
-        </div>
-        <div class="color-row">
-          <input type="color" id="c-shadow" value={defaults.shadow} aria-labelledby="lbl-shadow" />
-          <span class="swatch-label" id="lbl-shadow">Schatten &amp; Kontur</span>
-          <span class="hex" id="hex-shadow">{defaults.shadow}</span>
-        </div>
-
-        <h2>Lichtrichtung</h2>
-        <p class="hint">Steuert alle Versätze gleichzeitig — Schatten geht in Lichtrichtung, Tiefe entgegen.</p>
-        <label for="angle">Winkel: <span class="val" id="v-angle">{defaults.angle}</span>° (0=oben, 90=rechts, 180=unten)</label>
-        <input type="range" id="angle" min="0" max="359" value={defaults.angle} />
-
-        <h2>Schichten</h2>
-        <p class="hint">Hinten nach vorn: Schatten · Tiefe · Kontur · Face</p>
-        <label for="shadow-len">Schatten-Länge: <span class="val" id="v-shadow">{defaults.shadowLen}</span>px</label>
-        <input type="range" id="shadow-len" min="0" max="80" value={defaults.shadowLen} />
-        <label for="depth-len">Tiefe (in Gegenrichtung): <span class="val" id="v-depth">{defaults.depthLen}</span>px</label>
-        <input type="range" id="depth-len" min="0" max="30" value={defaults.depthLen} />
-        <label for="contour-len">Kontur (vor der Tiefe): <span class="val" id="v-contour">{defaults.contourLen}</span>px</label>
-        <input type="range" id="contour-len" min="0" max="20" value={defaults.contourLen} />
-
-        <h2>Komposition</h2>
-        <div class="row-2col">
-          <div>
-            <label for="rot">Drehung: <span class="val" id="v-rot">{defaults.rot}</span>°</label>
-            <input type="range" id="rot" min="-25" max="25" value={defaults.rot} />
-          </div>
-          <div>
-            <label for="skew">Schräge: <span class="val" id="v-skew">{defaults.skew}</span>°</label>
-            <input type="range" id="skew" min="-20" max="20" value={defaults.skew} />
-          </div>
-        </div>
-
-        <h2>Generiertes CSS</h2>
-        <code id="cssout"></code>
-        <button type="button" class="copy-btn" id="copyBtn">CSS kopieren</button>
-        <button type="reset" class="reset-btn" id="resetBtn">Zurücksetzen</button>
-      </form>
-    </div>
-  </details>
-
-  <script>
-    import { inlineTextShadow, cssOutput } from '../logo.js';
-
-    const $ = (id) => document.getElementById(id);
-    const logo = $('logo');
-    const cssout = $('cssout');
-
-    const NUM = {
-      fs: 'fs',
-      lh: 'lh',
-      ls: 'ls',
-      angle: 'angle',
-      shadowLen: 'shadow-len',
-      depthLen: 'depth-len',
-      contourLen: 'contour-len',
-      rot: 'rot',
-      skew: 'skew',
-    };
-
-    function readState() {
-      return {
-        text: $('text').value || ' ',
-        font: $('font').value,
-        fs: +$('fs').value,
-        lh: +$('lh').value,
-        ls: +$('ls').value,
-        bg: $('c-bg').value,
-        face: $('c-face').value,
-        depth: $('c-depth').value,
-        shadow: $('c-shadow').value,
-        angle: +$('angle').value,
-        shadowLen: +$('shadow-len').value,
-        depthLen: +$('depth-len').value,
-        contourLen: +$('contour-len').value,
-        rot: +$('rot').value,
-        skew: +$('skew').value,
-      };
-    }
-
-    function render() {
-      const s = readState();
-
-      $('v-fs').textContent = s.fs;
-      $('v-lh').textContent = s.lh.toFixed(2);
-      $('v-ls').textContent = s.ls.toFixed(3);
-      $('v-angle').textContent = s.angle;
-      $('v-shadow').textContent = s.shadowLen;
-      $('v-depth').textContent = s.depthLen;
-      $('v-contour').textContent = s.contourLen;
-      $('v-rot').textContent = s.rot;
-      $('v-skew').textContent = s.skew;
-      $('hex-bg').textContent = s.bg;
-      $('hex-face').textContent = s.face;
-      $('hex-depth').textContent = s.depth;
-      $('hex-shadow').textContent = s.shadow;
-
-      logo.textContent = s.text;
-      logo.style.textShadow = inlineTextShadow(s);
-      logo.style.transform = `rotate(${s.rot}deg) skewX(${s.skew}deg)`;
-      logo.style.fontFamily = `'${s.font}', 'Bebas Neue', Impact, sans-serif`;
-      logo.style.color = s.face;
-      logo.style.fontSize = s.fs + 'vw';
-      logo.style.lineHeight = s.lh;
-      logo.style.letterSpacing = s.ls + 'em';
-      document.body.style.background = s.bg;
-
-      cssout.textContent = cssOutput(s);
-    }
-
-    document
-      .querySelectorAll('#logoForm input, #logoForm select, #logoForm textarea')
-      .forEach((el) => el.addEventListener('input', render));
-
-    $('copyBtn').addEventListener('click', async () => {
-      try {
-        await navigator.clipboard.writeText(cssout.textContent);
-        const btn = $('copyBtn');
-        btn.textContent = 'Kopiert!';
-        btn.classList.add('copied');
-        setTimeout(() => {
-          btn.textContent = 'CSS kopieren';
-          btn.classList.remove('copied');
-        }, 1500);
-      } catch {
-        alert('Kopieren fehlgeschlagen — bitte manuell aus dem Code-Feld kopieren.');
-      }
-    });
-
-    // Native reset restores each field to its value= attribute; re-render next tick.
-    const form = $('logoForm');
-    form.addEventListener('reset', () => setTimeout(render, 0));
-    form.addEventListener('submit', (e) => e.preventDefault());
-
-    render();
-  </script>
-</body>
-</html>

vite.config.js

@@ -0,0 +1,5 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  // index.html at project root is the single entry; defaults are fine.
+});