@wowoengine/sawitdb 2.4.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.
@@ -0,0 +1,727 @@
1
+ <!DOCTYPE html>
2
+ <html lang="id" class="scroll-smooth">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>SawitDB - Tani Edition Documentation</title>
8
+ <meta name="description"
9
+ content="SawitDB: The most agricultural database in the world. Feature-rich, single-file, and based on Indonesian wisdom.">
10
+ <meta name="keywords"
11
+ content="sawitdb, database, nosql, indonesian, agricultural query language, nodejs, embedded database">
12
+ <meta name="author" content="SawitDB Community">
13
+
14
+ <!-- Open Graph / Facebook -->
15
+ <meta property="og:type" content="website">
16
+ <meta property="og:url" content="https://github.com/WowoEngine/SawitDB">
17
+ <meta property="og:title" content="SawitDB - Tani Edition Documentation">
18
+ <meta property="og:description"
19
+ content="Database infrastruktur langit? No. Ini database infrastruktur darat. Hemat, kuat, dan merakyat.">
20
+ <meta property="og:image" content="https://raw.githubusercontent.com/WowoEngine/SawitDB/main/docs/sawitdb.jpg">
21
+
22
+ <!-- Twitter -->
23
+ <meta property="twitter:card" content="summary_large_image">
24
+ <meta property="twitter:url" content="https://github.com/WowoEngine/SawitDB">
25
+ <meta property="twitter:title" content="SawitDB - Tani Edition Documentation">
26
+ <meta property="twitter:description"
27
+ content="Database infrastruktur langit? No. Ini database infrastruktur darat. Hemat, kuat, dan merakyat.">
28
+ <meta property="twitter:image" content="https://raw.githubusercontent.com/WowoEngine/SawitDB/main/docs/sawitdb.jpg">
29
+ <!-- Tailwind CSS -->
30
+ <script src="https://cdn.tailwindcss.com"></script>
31
+ <!-- Google Fonts -->
32
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
33
+ <script>
34
+ tailwind.config = {
35
+ theme: {
36
+ extend: {
37
+ fontFamily: {
38
+ sans: ['Inter', 'sans-serif'],
39
+ },
40
+ colors: {
41
+ sawit: {
42
+ 50: '#f0fdf4',
43
+ 100: '#dcfce7',
44
+ 500: '#22c55e',
45
+ 600: '#16a34a',
46
+ 700: '#15803d',
47
+ 800: '#166534',
48
+ 900: '#14532d',
49
+ }
50
+ }
51
+ }
52
+ }
53
+ }
54
+ </script>
55
+ <style>
56
+ /* Custom scrollbar for sidebar */
57
+ .scrollbar-hide::-webkit-scrollbar {
58
+ display: none;
59
+ }
60
+
61
+ .scrollbar-hide {
62
+ -ms-overflow-style: none;
63
+ scrollbar-width: none;
64
+ }
65
+ </style>
66
+ </head>
67
+
68
+ <body class="bg-gray-50 text-slate-800 font-sans antialiased">
69
+
70
+ <!-- Mobile Header -->
71
+ <div class="lg:hidden flex items-center justify-between p-4 bg-sawit-900 text-white sticky top-0 z-50 shadow-md">
72
+ <div class="flex items-center space-x-3">
73
+ <span class="font-bold text-lg">SawitDB</span>
74
+ </div>
75
+ <button onclick="document.getElementById('mobile-menu').classList.toggle('hidden')"
76
+ class="p-2 focus:outline-none">
77
+ <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
78
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
79
+ </path>
80
+ </svg>
81
+ </button>
82
+ </div>
83
+
84
+ <!-- Mobile Menu Overlay -->
85
+ <div id="mobile-menu"
86
+ class="hidden lg:hidden fixed inset-0 bg-gray-800 bg-opacity-95 z-40 p-4 transition-all duration-300">
87
+ <div class="flex justify-end mb-4">
88
+ <button onclick="document.getElementById('mobile-menu').classList.add('hidden')"
89
+ class="text-white p-2">✕</button>
90
+ </div>
91
+ <nav class="flex flex-col space-y-4 text-center">
92
+ <a href="#intro" class="text-white text-lg font-medium hover:text-sawit-400"
93
+ onclick="toggleMenu()">Introduction</a>
94
+ <a href="#features" class="text-white text-lg font-medium hover:text-sawit-400"
95
+ onclick="toggleMenu()">Features</a>
96
+ <a href="#filosofi" class="text-white text-lg font-medium hover:text-sawit-400"
97
+ onclick="toggleMenu()">Filosofi</a>
98
+ <a href="#installation" class="text-white text-lg font-medium hover:text-sawit-400"
99
+ onclick="toggleMenu()">Installation</a>
100
+ <a href="#syntax" class="text-white text-lg font-medium hover:text-sawit-400" onclick="toggleMenu()">AQL
101
+ Syntax</a>
102
+ <a href="#network" class="text-white text-lg font-medium hover:text-sawit-400"
103
+ onclick="toggleMenu()">Network</a>
104
+ <a href="#client-api" class="text-white text-lg font-medium hover:text-sawit-400"
105
+ onclick="toggleMenu()">Client API</a>
106
+ <a href="#cli" class="text-white text-lg font-medium hover:text-sawit-400" onclick="toggleMenu()">CLI
107
+ Tool</a>
108
+ </nav>
109
+ </div>
110
+
111
+ <div class="flex min-h-screen">
112
+ <!-- Desktop Sidebar -->
113
+ <aside class="hidden lg:flex flex-col w-72 bg-sawit-900 fixed h-screen overflow-y-auto z-30 shadow-xl">
114
+ <div class="p-6 border-b border-sawit-800">
115
+ <h1 class="text-2xl font-bold text-white tracking-wide">SawitDB</h1>
116
+ </div>
117
+
118
+ <nav class="flex-1 p-4 space-y-1">
119
+ <a href="#intro"
120
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
121
+ Introduction
122
+ </a>
123
+ <a href="#features"
124
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
125
+ Features
126
+ </a>
127
+ <a href="#filosofi"
128
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
129
+ Filosofi
130
+ </a>
131
+ <a href="#installation"
132
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
133
+ Installation
134
+ </a>
135
+ <a href="#syntax"
136
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
137
+ Query Syntax
138
+ </a>
139
+ <a href="#network"
140
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
141
+ Network
142
+ </a>
143
+ <a href="#client-api"
144
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
145
+ Client API
146
+ </a>
147
+ <a href="#cli"
148
+ class="flex items-center px-4 py-3 text-gray-300 hover:bg-sawit-800 hover:text-white rounded-lg transition-colors group cursor-pointer">
149
+ CLI Tool
150
+ </a>
151
+ </nav>
152
+
153
+ <div class="p-6 border-t border-sawit-800">
154
+ <p class="text-xs text-gray-300">&copy; 2025 SawitDB Core Team</p>
155
+ </div>
156
+ </aside>
157
+
158
+ <!-- Main Content Area -->
159
+ <main class="flex-1 lg:ml-72 px-4 py-8 lg:p-12 max-w-5xl mx-auto w-full overflow-x-hidden">
160
+
161
+ <!-- Intro Section -->
162
+ <section id="intro" class="mb-16 scroll-mt-24">
163
+ <h2 class="text-4xl font-extrabold text-sawit-900 mb-6 border-b-4 border-sawit-500 inline-block pb-2">
164
+ Introduction</h2>
165
+ <div
166
+ class="bg-white rounded-2xl shadow-sm border border-gray-100 p-8 hover:shadow-md transition-shadow">
167
+ <p class="text-lg leading-relaxed text-gray-600 mb-6">
168
+ <strong class="text-sawit-700">SawitDB</strong> is a revolutionary database solution stored in
169
+ single <code class="bg-gray-100 text-red-500 px-2 py-1 rounded text-sm font-mono">.sawit</code>
170
+ binary files.
171
+ It combines the reliability of a Paged Heap File architecture with the charm of localized
172
+ wisdom.
173
+ </p>
174
+ <p class="text-gray-600 leading-relaxed">
175
+ What differentiates SawitDB is its unique <strong>Agricultural Query Language (AQL)</strong>,
176
+ which replaces standard SQL keywords with Indonesian farming terminology, making database
177
+ management as intuitive as managing a plantation.
178
+ </p>
179
+ </div>
180
+
181
+ <!-- Alert Box -->
182
+ <div
183
+ class="mt-8 bg-amber-50 border-l-4 border-amber-500 p-6 rounded-r-xl shadow-sm flex flex-col md:flex-row items-start md:items-center justify-between">
184
+ <div>
185
+ <h3 class="text-amber-800 font-bold text-lg mb-1">🚨 Emergency: Aceh Flood Relief</h3>
186
+ <p class="text-amber-700 text-sm">Please support our brothers and sisters in Aceh.</p>
187
+ </div>
188
+ <a href="https://kitabisa.com/campaign/donasipedulibanjiraceh" target="_blank"
189
+ class="mt-4 md:mt-0 inline-flex items-center px-4 py-2 bg-amber-600 hover:bg-amber-700 text-white text-sm font-medium rounded-lg transition-colors shadow-sm">
190
+ Donate via Kitabisa
191
+ <svg class="ml-2 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
192
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
193
+ d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z">
194
+ </path>
195
+ </svg>
196
+ </a>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- Features -->
201
+ <section id="features" class="mb-16 scroll-mt-24">
202
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
203
+ Features
204
+ </h2>
205
+ <div class="grid md:grid-cols-2 gap-6">
206
+ <div
207
+ class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
208
+ <h3 class="font-bold text-xl text-sawit-800 mb-2">Paged Architecture</h3>
209
+ <p class="text-gray-600 text-sm">Data stored in 4096-byte binary pages. Optimized for low memory
210
+ footprint.</p>
211
+ </div>
212
+ <div
213
+ class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
214
+ <h3 class="font-bold text-xl text-sawit-800 mb-2">Single File Storage</h3>
215
+ <p class="text-gray-600 text-sm">All data, schema, and indexes reside in a single
216
+ <code>.sawit</code> file.
217
+ </p>
218
+ </div>
219
+ <div
220
+ class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
221
+ <h3 class="font-bold text-xl text-sawit-800 mb-2">High Stability</h3>
222
+ <p class="text-gray-600 text-sm">Uses 4KB atomic pages. More stable than a coalition government.
223
+ </p>
224
+ </div>
225
+ <div
226
+ class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
227
+ <h3 class="font-bold text-xl text-sawit-800 mb-2">Anti-Korupsi Integrity</h3>
228
+ <p class="text-gray-600 text-sm">Strict <code>fsync</code> protocols ensure data is safe and
229
+ never "mysteriously disappears".</p>
230
+ </div>
231
+ <div
232
+ class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
233
+ <h3 class="font-bold text-xl text-sawit-800 mb-2">Zero Bureaucracy</h3>
234
+ <p class="text-gray-600 text-sm">Pure Node.js. Zero dependencies. No "Vendor Pengadaan" or
235
+ markups.</p>
236
+ </div>
237
+ <div
238
+ class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 hover:border-sawit-200 transition-colors">
239
+ <h3 class="font-bold text-xl text-sawit-800 mb-2">Transparansi</h3>
240
+ <p class="text-gray-600 text-sm">Clear query language. No "Pasal Karet" (ambiguous laws).</p>
241
+ </div>
242
+ </div>
243
+ </section>
244
+
245
+ <!-- Benchmarks -->
246
+ <section id="benchmarks" class="mb-16 scroll-mt-24">
247
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
248
+ Benchmark Performance
249
+ </h2>
250
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
251
+ <div class="p-6 bg-gray-50 border-b border-gray-100">
252
+ <p class="text-sm text-gray-600">
253
+ <strong>Environment:</strong> Single Thread, Windows Node.js (Local NVMe)
254
+ </p>
255
+ </div>
256
+ <div class="overflow-x-auto">
257
+ <table class="w-full text-sm text-left">
258
+ <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
259
+ <tr>
260
+ <th class="px-6 py-4 font-bold">Operation</th>
261
+ <th class="px-6 py-4 font-bold">Ops/Sec</th>
262
+ <th class="px-6 py-4 font-bold">Latency (avg)</th>
263
+ </tr>
264
+ </thead>
265
+ <tbody class="divide-y divide-gray-100">
266
+ <tr class="bg-white hover:bg-gray-50">
267
+ <td class="px-6 py-4 font-medium text-gray-900">INSERT</td>
268
+ <td class="px-6 py-4 text-green-600 font-bold">~3,125</td>
269
+ <td class="px-6 py-4 text-gray-600">0.32 ms</td>
270
+ </tr>
271
+ <tr class="bg-white hover:bg-gray-50">
272
+ <td class="px-6 py-4 font-medium text-gray-900">SELECT (PK Index)</td>
273
+ <td class="px-6 py-4 text-green-600 font-bold">~3,846</td>
274
+ <td class="px-6 py-4 text-gray-600">0.26 ms</td>
275
+ </tr>
276
+ <tr class="bg-white hover:bg-gray-50">
277
+ <td class="px-6 py-4 font-medium text-gray-900">SELECT (Scan)</td>
278
+ <td class="px-6 py-4 text-green-600 font-bold">~4,762</td>
279
+ <td class="px-6 py-4 text-gray-600">0.21 ms</td>
280
+ </tr>
281
+ <tr class="bg-white hover:bg-gray-50">
282
+ <td class="px-6 py-4 font-medium text-gray-900">UPDATE</td>
283
+ <td class="px-6 py-4 text-green-600 font-bold">~3,571</td>
284
+ <td class="px-6 py-4 text-gray-600">0.28 ms</td>
285
+ </tr>
286
+ </tbody>
287
+ </table>
288
+ </div>
289
+ </div>
290
+ </section>
291
+
292
+ <!-- Filosofi -->
293
+ <section id="filosofi" class="mb-16 scroll-mt-24">
294
+ <div
295
+ class="bg-gradient-to-br from-sawit-800 to-sawit-900 rounded-2xl p-8 md:p-12 text-white shadow-lg relative overflow-hidden">
296
+ <div class="absolute top-0 right-0 opacity-10 transform translate-x-10 -translate-y-10">
297
+ <svg width="300" height="300" viewBox="0 0 24 24" fill="currentColor">
298
+ <path d="M12 2L2 22h20L12 2zm0 3.5L18.5 20h-13L12 5.5z" />
299
+ </svg>
300
+ </div>
301
+
302
+ <h2 class="text-3xl font-bold mb-8 border-b border-gray-600 pb-4 inline-block">Filosofi</h2>
303
+
304
+ <div class="grid md:grid-cols-2 gap-10">
305
+ <div>
306
+ <h3 class="text-xl font-bold text-sawit-300 mb-4 flex items-center">Filosofi (ID)</h3>
307
+ <p class="text-sawit-100 leading-relaxed text-sm">
308
+ SawitDB dibangun dengan semangat "Kemandirian Data". Kami percaya database yang handal
309
+ tidak butuh <strong>Infrastruktur Langit</strong> yang harganya triliunan tapi sering
310
+ <em>down</em>. Berbeda dengan proyek negara yang mahal di <em>budget</em> tapi murah di
311
+ kualitas, SawitDB menggunakan arsitektur <strong>Single File</strong> yang hemat biaya.
312
+ </p>
313
+ </div>
314
+ <div>
315
+ <h3 class="text-xl font-bold text-sawit-300 mb-4 flex items-center">Philosophy (EN)
316
+ </h3>
317
+ <p class="text-sawit-100 leading-relaxed text-sm">
318
+ SawitDB is built with the spirit of "Data Sovereignty". We believe a reliable database
319
+ doesn't need <strong>"Sky Infrastructure"</strong> that costs trillions yet goes
320
+ <em>down</em> often. SawitDB uses a cost-effective <strong>Single File</strong>
321
+ architecture. Data integrity is non-negotiable.
322
+ </p>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </section>
327
+
328
+ <!-- Installation -->
329
+ <section id="installation" class="mb-16 scroll-mt-24">
330
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
331
+ Installation
332
+ </h2>
333
+
334
+ <div class="bg-gray-900 rounded-xl p-6 shadow-xl mb-8 overflow-x-auto">
335
+ <div class="flex items-center space-x-2 mb-4">
336
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
337
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
338
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
339
+ <span class="text-gray-500 text-xs ml-2">bash</span>
340
+ </div>
341
+ <code class="block font-mono text-sm text-green-400">
342
+ git clone https://github.com/WowoEngine/SawitDB.git<br>
343
+ cd SawitDB<br>
344
+ npm install <span class="text-gray-500"># Pure Node.js, no heavy deps!</span>
345
+ </code>
346
+ </div>
347
+
348
+ <h3 class="text-xl font-bold text-gray-700 mb-4">Initialization</h3>
349
+ <div class="bg-gray-900 rounded-xl p-6 shadow-xl overflow-x-auto">
350
+ <code class="font-mono text-sm text-gray-300">
351
+ <span class="text-purple-400">const</span> SawitDB = <span class="text-blue-400">require</span>(<span class="text-green-300">'./src/WowoEngine'</span>);<br>
352
+ <span class="text-purple-400">const</span> path = <span class="text-blue-400">require</span>(<span class="text-green-300">'path'</span>);<br><br>
353
+ <span class="text-gray-500">// Initialize the engine. File created automatically.</span><br>
354
+ <span class="text-purple-400">const</span> db = <span class="text-purple-400">new</span> <span class="text-yellow-300">SawitDB</span>(path.<span class="text-blue-400">join</span>(__dirname, <span class="text-green-300">'plantation.sawit'</span>));
355
+ </code>
356
+ </div>
357
+ </section>
358
+
359
+ <!-- Syntax -->
360
+ <section id="syntax" class="mb-16 scroll-mt-24">
361
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 flex items-center">
362
+ Query Syntax (AQL)
363
+ </h2>
364
+ <p class="text-gray-600 mb-8">SawitDB uses intuitive farming metaphors for all database operations. It
365
+ also supports Generic SQL for easier adoption.</p>
366
+
367
+ <!-- Dual Syntax Table -->
368
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-12">
369
+ <div class="p-4 bg-gray-50 border-b border-gray-100">
370
+ <h3 class="font-bold text-gray-800">Dual Syntax Comparison</h3>
371
+ </div>
372
+ <div class="overflow-x-auto">
373
+ <table class="w-full text-sm text-left">
374
+ <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
375
+ <tr>
376
+ <th class="px-6 py-4 font-bold">Operation</th>
377
+ <th class="px-6 py-4 font-bold">Agricultural Query Language (AQL)</th>
378
+ <th class="px-6 py-4 font-bold">Generic SQL (Standard)</th>
379
+ </tr>
380
+ </thead>
381
+ <tbody class="divide-y divide-gray-100">
382
+ <tr class="bg-white hover:bg-gray-50">
383
+ <td class="px-6 py-4 font-medium">Create DB</td>
384
+ <td class="px-6 py-4 text-green-600 font-mono">BUKA WILAYAH sales_db</td>
385
+ <td class="px-6 py-4 text-blue-600 font-mono">CREATE DATABASE sales_db</td>
386
+ </tr>
387
+ <tr class="bg-white hover:bg-gray-50">
388
+ <td class="px-6 py-4 font-medium">Use DB</td>
389
+ <td class="px-6 py-4 text-green-600 font-mono">MASUK WILAYAH sales_db</td>
390
+ <td class="px-6 py-4 text-blue-600 font-mono">USE sales_db</td>
391
+ </tr>
392
+ <tr class="bg-white hover:bg-gray-50">
393
+ <td class="px-6 py-4 font-medium">Show DBs</td>
394
+ <td class="px-6 py-4 text-green-600 font-mono">LIHAT WILAYAH</td>
395
+ <td class="px-6 py-4 text-blue-600 font-mono">SHOW DATABASES</td>
396
+ </tr>
397
+ <tr class="bg-white hover:bg-gray-50">
398
+ <td class="px-6 py-4 font-medium">Create Table</td>
399
+ <td class="px-6 py-4 text-green-600 font-mono">LAHAN products</td>
400
+ <td class="px-6 py-4 text-blue-600 font-mono">CREATE TABLE products</td>
401
+ </tr>
402
+ <tr class="bg-white hover:bg-gray-50">
403
+ <td class="px-6 py-4 font-medium">Insert</td>
404
+ <td class="px-6 py-4 text-green-600 font-mono">TANAM KE products (...) BIBIT (...)
405
+ </td>
406
+ <td class="px-6 py-4 text-blue-600 font-mono">INSERT INTO products (...) VALUES
407
+ (...)</td>
408
+ </tr>
409
+ <tr class="bg-white hover:bg-gray-50">
410
+ <td class="px-6 py-4 font-medium">Select</td>
411
+ <td class="px-6 py-4 text-green-600 font-mono">PANEN * DARI products ...</td>
412
+ <td class="px-6 py-4 text-blue-600 font-mono">SELECT * FROM products ...</td>
413
+ </tr>
414
+ <tr class="bg-white hover:bg-gray-50">
415
+ <td class="px-6 py-4 font-medium">Update</td>
416
+ <td class="px-6 py-4 text-green-600 font-mono">PUPUK products DENGAN ...</td>
417
+ <td class="px-6 py-4 text-blue-600 font-mono">UPDATE products SET ...</td>
418
+ </tr>
419
+ <tr class="bg-white hover:bg-gray-50">
420
+ <td class="px-6 py-4 font-medium">Delete</td>
421
+ <td class="px-6 py-4 text-green-600 font-mono">GUSUR DARI products ...</td>
422
+ <td class="px-6 py-4 text-blue-600 font-mono">DELETE FROM products ...</td>
423
+ </tr>
424
+ </tbody>
425
+ </table>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="grid lg:grid-cols-2 gap-8 mb-8">
430
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
431
+ <div class="bg-sawit-50 p-4 border-b border-sawit-100">
432
+ <h3 class="font-bold text-sawit-800">Management</h3>
433
+ </div>
434
+ <div class="p-4 space-y-4">
435
+ <div>
436
+ <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Create
437
+ Table</span>
438
+ <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">LAHAN [name]
439
+ </div>
440
+ </div>
441
+ <div>
442
+ <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Show
443
+ Tables</span>
444
+ <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">LIHAT LAHAN
445
+ </div>
446
+ </div>
447
+ <div>
448
+ <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Drop Table</span>
449
+ <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">BAKAR LAHAN
450
+ [name]</div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+
455
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
456
+ <div class="bg-blue-50 p-4 border-b border-blue-100">
457
+ <h3 class="font-bold text-blue-800">Data Manipulation</h3>
458
+ </div>
459
+ <div class="p-4 space-y-4">
460
+ <div>
461
+ <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Insert
462
+ (Plant)</span>
463
+ <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">TANAM KE
464
+ [table] (cols) BIBIT (vals)</div>
465
+ </div>
466
+ <div>
467
+ <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Select
468
+ (Harvest)</span>
469
+ <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">PANEN * DARI
470
+ [table] DIMANA [cond]</div>
471
+ </div>
472
+ <div>
473
+ <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Update
474
+ (Fertilize)</span>
475
+ <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">PUPUK [table]
476
+ DENGAN x=y DIMANA [cond]</div>
477
+ </div>
478
+ <div>
479
+ <span class="text-xs font-bold text-gray-400 uppercase tracking-wider">Delete
480
+ (Evict)</span>
481
+ <div class="bg-gray-100 p-2 rounded mt-1 font-mono text-sm text-gray-800">GUSUR DARI
482
+ [table] DIMANA [cond]</div>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="bg-gray-900 text-gray-300 p-6 rounded-xl font-mono text-sm shadow-lg overflow-x-auto mb-12">
489
+ <span class="text-gray-500">// Create Land</span>
490
+ <span class="text-green-400">LAHAN</span> sawit_blok_a
491
+
492
+ <span class="text-gray-500">// Plant Seeds (Insert)</span>
493
+ <span class="text-green-400">TANAM KE</span> sawit (id, bibit, umur) <span
494
+ class="text-green-400">BIBIT</span> (1, 'Tenera', 5)
495
+
496
+ <span class="text-gray-500">// Harvest (Select)</span>
497
+ <span class="text-green-400">PANEN</span> * <span class="text-green-400">DARI</span> sawit <span
498
+ class="text-green-400">DIMANA</span> umur > 3
499
+
500
+ <span class="text-gray-500">// Fertilize (Update)</span>
501
+ <span class="text-green-400">PUPUK</span> sawit <span class="text-green-400">DENGAN</span>
502
+ status='Panen' <span class="text-green-400">DIMANA</span> umur >= 10
503
+
504
+ <span class="text-gray-500">// Evict (Delete)</span>
505
+ <span class="text-green-400">GUSUR DARI</span> sawit <span class="text-green-400">DIMANA</span> id =
506
+ 99
507
+ </div>
508
+
509
+ <!-- Operators Table -->
510
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-12">
511
+ <div class="p-4 bg-gray-50 border-b border-gray-100">
512
+ <h3 class="font-bold text-gray-800">Supported Operators</h3>
513
+ </div>
514
+ <div class="overflow-x-auto">
515
+ <table class="w-full text-sm text-left">
516
+ <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
517
+ <tr>
518
+ <th class="px-6 py-4 font-bold">Operator</th>
519
+ <th class="px-6 py-4 font-bold">Syntax Example</th>
520
+ <th class="px-6 py-4 font-bold">Description</th>
521
+ </tr>
522
+ </thead>
523
+ <tbody class="divide-y divide-gray-100">
524
+ <tr class="bg-white hover:bg-gray-50">
525
+ <td class="px-6 py-4 font-medium">Comparison</td>
526
+ <td class="px-6 py-4 font-mono">=, !=, >, <,>=, <=< /td>
527
+ <td class="px-6 py-4 text-gray-600">Standard value comparison</td>
528
+ </tr>
529
+ <tr class="bg-white hover:bg-gray-50">
530
+ <td class="px-6 py-4 font-medium">Logical</td>
531
+ <td class="px-6 py-4 font-mono">AND, OR</td>
532
+ <td class="px-6 py-4 text-gray-600">Combine multiple conditions</td>
533
+ </tr>
534
+ <tr class="bg-white hover:bg-gray-50">
535
+ <td class="px-6 py-4 font-medium">In List</td>
536
+ <td class="px-6 py-4 font-mono">IN ('coffee', 'tea')</td>
537
+ <td class="px-6 py-4 text-gray-600">Matches any value in the list</td>
538
+ </tr>
539
+ <tr class="bg-white hover:bg-gray-50">
540
+ <td class="px-6 py-4 font-medium">Pattern</td>
541
+ <td class="px-6 py-4 font-mono">LIKE 'Jwa%'</td>
542
+ <td class="px-6 py-4 text-gray-600">Wildcard matching (%)</td>
543
+ </tr>
544
+ <tr class="bg-white hover:bg-gray-50">
545
+ <td class="px-6 py-4 font-medium">Range</td>
546
+ <td class="px-6 py-4 font-mono">BETWEEN 10 AND 50</td>
547
+ <td class="px-6 py-4 text-gray-600">Inclusive range check</td>
548
+ </tr>
549
+ <tr class="bg-white hover:bg-gray-50">
550
+ <td class="px-6 py-4 font-medium">Null Check</td>
551
+ <td class="px-6 py-4 font-mono">IS NULL, IS NOT NULL</td>
552
+ <td class="px-6 py-4 text-gray-600">Check for existence</td>
553
+ </tr>
554
+ <tr class="bg-white hover:bg-gray-50">
555
+ <td class="px-6 py-4 font-medium">Pagination</td>
556
+ <td class="px-6 py-4 font-mono">LIMIT 10 OFFSET 5</td>
557
+ <td class="px-6 py-4 text-gray-600">Restrict and skip rows</td>
558
+ </tr>
559
+ </tbody>
560
+ </table>
561
+ </div>
562
+ </div>
563
+
564
+ <!-- Full Feature Comparison -->
565
+ <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
566
+ <div class="p-4 bg-gray-50 border-b border-gray-100">
567
+ <h3 class="font-bold text-gray-800">Full Feature Comparison</h3>
568
+ </div>
569
+ <div class="overflow-x-auto">
570
+ <table class="w-full text-sm text-left">
571
+ <thead class="text-xs text-gray-700 uppercase bg-gray-50 border-b">
572
+ <tr>
573
+ <th class="px-6 py-4 font-bold">Feature</th>
574
+ <th class="px-6 py-4 font-bold">Tani Edition (AQL)</th>
575
+ <th class="px-6 py-4 font-bold">Generic SQL</th>
576
+ <th class="px-6 py-4 font-bold">Notes</th>
577
+ </tr>
578
+ </thead>
579
+ <tbody class="divide-y divide-gray-100">
580
+ <tr class="bg-white hover:bg-gray-50">
581
+ <td class="px-6 py-4 font-medium">Create DB</td>
582
+ <td class="px-6 py-4 font-mono text-green-600">BUKA WILAYAH [db]</td>
583
+ <td class="px-6 py-4 font-mono text-blue-600">CREATE DATABASE [db]</td>
584
+ <td class="px-6 py-4 text-gray-500 text-xs">Creates .sawit file</td>
585
+ </tr>
586
+ <tr class="bg-white hover:bg-gray-50">
587
+ <td class="px-6 py-4 font-medium">Show Tables</td>
588
+ <td class="px-6 py-4 font-mono text-green-600">LIHAT LAHAN</td>
589
+ <td class="px-6 py-4 font-mono text-blue-600">SHOW TABLES</td>
590
+ <td class="px-6 py-4 text-gray-500 text-xs">Lists tables</td>
591
+ </tr>
592
+ <tr class="bg-white hover:bg-gray-50">
593
+ <td class="px-6 py-4 font-medium">Aggregation</td>
594
+ <td class="px-6 py-4 font-mono text-green-600">HITUNG SUM(x) DARI [t]</td>
595
+ <td class="px-6 py-4 font-mono text-blue-600">SELECT SUM(x) FROM [t]</td>
596
+ <td class="px-6 py-4 text-gray-500 text-xs">COUNT, SUM, AVG</td>
597
+ </tr>
598
+ <tr class="bg-white hover:bg-gray-50">
599
+ <td class="px-6 py-4 font-medium">Index</td>
600
+ <td class="px-6 py-4 font-mono text-green-600">INDEKS [t] PADA [f]</td>
601
+ <td class="px-6 py-4 font-mono text-blue-600">CREATE INDEX ON [t] ([f])</td>
602
+ <td class="px-6 py-4 text-gray-500 text-xs">B-Tree Indexing</td>
603
+ </tr>
604
+ </tbody>
605
+ </table>
606
+ </div>
607
+ </div>
608
+ </section>
609
+
610
+ <!-- Network -->
611
+ <section id="network" class="mb-16 scroll-mt-24">
612
+ <div class="flex items-center justify-between mb-8">
613
+ <h2 class="text-3xl font-bold text-gray-800 flex items-center">
614
+ Network
615
+ </h2>
616
+ <span
617
+ class="bg-red-100 text-red-600 px-3 py-1 rounded-full text-sm font-bold border border-red-200">v2.0
618
+ NEW</span>
619
+ </div>
620
+
621
+ <p class="text-gray-600 mb-6">Connect using the <code
622
+ class="text-red-500 bg-gray-100 px-1 rounded">sawitdb://</code> protocol and manage your data
623
+ remotely.</p>
624
+
625
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
626
+ <div class="bg-white p-5 rounded-lg border border-gray-200 shadow-sm">
627
+ <h4 class="font-bold text-gray-800 mb-2">MongoDB - Style Connection</h4>
628
+ <code class="text-sm bg-gray-50 p-1 block rounded">sawitdb://host:port/database</code>
629
+ </div>
630
+ <div class="bg-white p-5 rounded-lg border border-gray-200 shadow-sm">
631
+ <h4 class="font-bold text-gray-800 mb-2">Advanced Features</h4>
632
+ <ul class="text-sm text-gray-600 list-disc ml-4 space-y-1">
633
+ <li>Multi-database Support</li>
634
+ <li>B-Tree Indexing</li>
635
+ <li>Aggregations (COUNT, SUM, etc.)</li>
636
+ <li>Optional Authentication</li>
637
+ </ul>
638
+ </div>
639
+ </div>
640
+
641
+ <div class="bg-gray-800 rounded-xl p-6 text-white shadow-lg">
642
+ <h4 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">Start Server</h4>
643
+ <div class="overflow-x-auto mb-6">
644
+ <pre class="font-mono text-sm text-green-400">node bin/sawit-server.js --port 7878</pre>
645
+ </div>
646
+
647
+ <h4 class="text-xs font-bold text-gray-400 uppercase tracking-widest mb-3">Environment Variables
648
+ </h4>
649
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4 font-mono text-sm text-gray-300 overflow-x-auto">
650
+ <div class="border-b border-gray-700 pb-2">SAWIT_PORT=7878</div>
651
+ <div class="border-b border-gray-700 pb-2">SAWIT_HOST=0.0.0.0</div>
652
+ <div class="border-b border-gray-700 pb-2">SAWIT_DATA_DIR=./data</div>
653
+ <div class="border-b border-gray-700 pb-2">SAWIT_AUTH=user:pass</div>
654
+ </div>
655
+ </div>
656
+ </section>
657
+
658
+ <!-- Client API & CLI -->
659
+ <section id="tools-section" class="mb-16 scroll-mt-24">
660
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
661
+
662
+ <div id="client-api" class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
663
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
664
+ Client API
665
+ </h2>
666
+ <div class="bg-gray-900 p-4 rounded-lg overflow-x-auto">
667
+ <pre class="font-mono text-xs text-blue-200 leading-relaxed">
668
+ const SawitClient = require('./src/SawitClient');
669
+
670
+ // Connect
671
+ const client = new SawitClient(
672
+ 'sawitdb://localhost:7878/plantation'
673
+ );
674
+ await client.connect();
675
+
676
+ // Query
677
+ const result = await client.query(
678
+ 'PANEN * DARI sawit'
679
+ );
680
+
681
+ // Disconnect
682
+ client.disconnect();</pre>
683
+ </div>
684
+ </div>
685
+
686
+ <div id="cli" class="bg-white p-6 md:p-8 rounded-2xl shadow-sm border border-gray-100">
687
+ <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
688
+ CLI Tool
689
+ </h2>
690
+ <p class="text-sm text-gray-600 mb-4">Manage your database directly from the terminal.</p>
691
+
692
+ <div class="space-y-4">
693
+ <div>
694
+ <div class="text-xs font-bold text-gray-500 uppercase mb-1">Local CLI</div>
695
+ <code
696
+ class="block bg-gray-100 text-gray-800 p-2 rounded text-sm font-mono border border-gray-200">node cli/local.js</code>
697
+ </div>
698
+ <div>
699
+ <div class="text-xs font-bold text-gray-500 uppercase mb-1">Network CLI</div>
700
+ <code
701
+ class="block bg-gray-100 text-gray-800 p-2 rounded text-sm font-mono border border-gray-200">node cli/remote.js [url]</code>
702
+ </div>
703
+ </div>
704
+
705
+ <div class="mt-6 bg-yellow-50 text-yellow-800 text-sm p-3 rounded-lg border border-yellow-200">
706
+ <strong>Pro Tip:</strong> Use <code>.help</code> inside the CLI to see available commands.
707
+ </div>
708
+ </div>
709
+
710
+ </div>
711
+ </section>
712
+
713
+ </main>
714
+ </div>
715
+
716
+ <!-- Mobile Menu Script -->
717
+ <script>
718
+ function toggleMenu() {
719
+ const menu = document.getElementById('mobile-menu');
720
+ if (!menu.classList.contains('hidden')) {
721
+ menu.classList.add('hidden');
722
+ }
723
+ }
724
+ </script>
725
+ </body>
726
+
727
+ </html>