alegio/docs.html at main · ekorangin/alegio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alegio.js — The Boundaryless, Local-First, Resumable Web Framework</title>
  <link rel="stylesheet" href="docs.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
  <!-- Navigation Header -->
  <nav class="navbar">
    <div class="nav-container">
      <div class="logo">
        <span class="logo-icon">⚡</span>
        <span class="logo-text">Alegio<span class="logo-ext">.js</span></span>
        <span class="version-badge">v0.1.0-alpha</span>
      </div>
      <div class="nav-links">
        <a href="#features">Key Features</a>
        <a href="#benchmarks">Benchmarks</a>
        <a href="#playground">Playground</a>
        <a href="#docs">API Reference</a>
        <a href="/nexus.html" class="btn-demo">Launch Demo App 🔥</a>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <header class="hero">
    <div class="hero-container">
      <div class="pill-badge">
        <span class="pulse"></span> Next-Gen Web Framework Architecture
      </div>
      <h1 class="hero-title">
        The Boundaryless Web Framework<br>
        <span class="gradient-text">Boundaryless, Local-First & Resumable</span>
      </h1>
      <p class="hero-subtitle">
        Eliminating the boundaries between Server, Client, Database, and Browser Storage. Unified reactivity from DB to DOM with zero-hydration CPU overhead and zero API route boilerplate.
      </p>

      <div class="hero-buttons">
        <a href="#docs" class="btn btn-primary btn-lg">📖 Explore Documentation</a>
        <div class="terminal-copy" id="copy-cmd">
          <code>npx create-alegio-app my-app</code>
          <button class="copy-btn" title="Copy command">📋</button>
        </div>
      </div>
    </div>
  </header>

  <!-- Feature Matrix Section -->
  <section id="features" class="section">
    <div class="container">
      <h2 class="section-title">Why Choose Alegio.js?</h2>
      <p class="section-subtitle">Engineered to eliminate accidental complexity in modern full-stack web development.</p>

      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">🚀</div>
          <h3>Native Resumability</h3>
          <p>Server-rendered HTML arrives ready to go. The browser skips re-executing JavaScript (Zero Hydration) and attaches event listeners lazily without Virtual DOM.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🔄</div>
          <h3>Full-Stack LiveSignal</h3>
          <p>Unified reactivity bridging Database to Client DOM automatically via background Server-Sent Events (SSE) streaming.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📶</div>
          <h3>Local-First & Offline Native</h3>
          <p>Applications work 100% offline via IndexedDB/LocalStorage. Data deltas reconcile automatically when connectivity returns.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🛡️</div>
          <h3>Zero-Boundary Compiler</h3>
          <p>No <code>'use client'</code> or <code>'use server'</code> pragmas required. Sensitive DB queries & secrets are automatically isolated to edge runners.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Performance Benchmarks Section -->
  <section id="benchmarks" class="section section-dark">
    <div class="container">
      <h2 class="section-title">Performance Benchmarks</h2>
      <div class="benchmark-grid">
        <div class="benchmark-card">
          <h4>Client Boot & Hydration Time</h4>
          <div class="bar-group">
            <div class="bar-label"><span>Alegio.js (Resumable)</span> <strong>0.3 ms</strong></div>
            <div class="bar-track"><div class="bar-fill alegio-bar" style="width: 5%;"></div></div>
          </div>
          <div class="bar-group">
            <div class="bar-label"><span>SolidJS / Svelte</span> <strong>4.2 ms</strong></div>
            <div class="bar-track"><div class="bar-fill svelte-bar" style="width: 25%;"></div></div>
          </div>
          <div class="bar-group">
            <div class="bar-label"><span>React 19 / Next.js (RSC)</span> <strong>42.8 ms</strong></div>
            <div class="bar-track"><div class="bar-fill react-bar" style="width: 95%;"></div></div>
          </div>
        </div>

        <div class="benchmark-card">
          <h4>Boilerplate Code Lines (Real-Time Sync)</h4>
          <div class="bar-group">
            <div class="bar-label"><span>Alegio.js (liveSignal)</span> <strong>4 Code Lines</strong></div>
            <div class="bar-track"><div class="bar-fill alegio-bar" style="width: 10%;"></div></div>
          </div>
          <div class="bar-group">
            <div class="bar-label"><span>React + Redux + WS + Express</span> <strong>120+ Code Lines</strong></div>
            <div class="bar-track"><div class="bar-fill react-bar" style="width: 90%;"></div></div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Live Code Playground Section -->
  <section id="playground" class="section">
    <div class="container">
      <h2 class="section-title">Interactive Live Code Playground</h2>
      <p class="section-subtitle">Test Alegio.js <code>createSignal</code> reactivity interactively below:</p>

      <div class="playground-window">
        <div class="playground-header">
          <span class="dot red"></span>
          <span class="dot yellow"></span>
          <span class="dot green"></span>
          <span class="title">App.jsx — Alegio.js Editor</span>
        </div>
        <div class="playground-body">
          <div class="code-editor">
            <pre><code id="code-input" contenteditable="true" spellcheck="false">// Initialize Alegio.js Reactive Signal
const [count, setCount] = Alegio.createSignal(0);

// Render Native DOM Element without Virtual DOM
const button = document.createElement('button');
button.textContent = `Counter Value: ${count()}`;

button.addEventListener('click', () => {
  setCount(c => c + 1);
  button.textContent = `Counter Value: ${count()}`;
});

document.getElementById('playground-output').replaceChildren(button);</code></pre>
          </div>
          <div class="code-preview">
            <div class="preview-header">Live Preview Result:</div>
            <div id="playground-output" class="preview-output"></div>
            <button id="run-playground" class="btn btn-primary btn-sm mt-3">⚡ Run Code</button>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- API Documentation Section -->
  <section id="docs" class="section section-dark">
    <div class="container">
      <h2 class="section-title">Alegio.js API Reference</h2>

      <div class="docs-tabs">
        <button class="doc-tab active" data-tab="livesignal">liveSignal()</button>
        <button class="doc-tab" data-tab="createsignal">createSignal()</button>
        <button class="doc-tab" data-tab="jsx">JSX Runtime</button>
        <button class="doc-tab" data-tab="router">createRouter()</button>
      </div>

      <div class="docs-content">
        <!-- LiveSignal Doc -->
        <div class="doc-panel active" id="panel-livesignal">
          <h3><code>liveSignal(storageKey, initialValue)</code></h3>
          <p>Primary full-stack reactivity primitive binding Local Storage (IndexedDB/LocalStorage) and Server Database via Real-Time SSE Streams automatically.</p>
          <pre><code>import { liveSignal } from 'alegio';

// State persisted locally & synced automatically with server
const [todos, setTodos] = liveSignal('todos_state', [
  { id: '1', title: 'Learn Alegio.js', completed: false }
]);

// Add item (Instant Optimistic Update + Storage Persist + Server Broadcast)
setTodos(prev => [...prev, { id: '2', title: 'Build App', completed: false }]);</code></pre>
        </div>

        <!-- CreateSignal Doc -->
        <div class="doc-panel" id="panel-createsignal">
          <h3><code>createSignal(initialValue)</code></h3>
          <p>Lightweight client memory signal for managing local component state.</p>
          <pre><code>import { createSignal, createEffect } from 'alegio';

const [name, setName] = createSignal('Alegio');

createEffect(() => {
  console.log('Name changed to:', name());
});

setName('Alegio.js Framework');</code></pre>
        </div>

        <!-- JSX Doc -->
        <div class="doc-panel" id="panel-jsx">
          <h3><code>JSX Runtime (`alegio/jsx-runtime`)</code></h3>
          <p>Supports JSX syntax compiled directly to native DOM elements without Virtual DOM overhead.</p>
          <pre><code>/** @jsxImportSource alegio */
import { createSignal } from 'alegio';

export function Counter() {
  const [count, setCount] = createSignal(0);

  return (
    &lt;button onClick={() => setCount(c => c + 1)}&gt;
      Clicked {count} times
    &lt;/button&gt;
  );
}</code></pre>
        </div>

        <!-- Router Doc -->
        <div class="doc-panel" id="panel-router">
          <h3><code>createRouter(routes)</code></h3>
          <p>Lightweight Single Page Application (SPA) router primitive integrated with Alegio reactivity.</p>
          <pre><code>import { createRouter } from 'alegio';

const router = createRouter({
  '/': HomeView,
  '/about': AboutView
});

console.log('Current route:', router.route());
router.navigate('/about');</code></pre>
        </div>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <p>Alegio.js Framework — Released under the MIT License.</p>
      <p class="subfooter">Built with passion for next-generation web performance.</p>
    </div>
  </footer>

  <script src="docs.js"></script>
</body>
</html>