Skip to content

Commit bf81ba9

Browse files
bikallembikallem
committed
docs: move Examples section after Quick Start and link to live demos
Reorder README to surface examples earlier. Each example name now links to its live GitHub Pages deployment.
1 parent f32810b commit bf81ba9

1 file changed

Lines changed: 57 additions & 57 deletions

File tree

‎src/README.mbt.md‎

Lines changed: 57 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Type-safe MoonBit bindings for Web Platform APIs, automatically generated from W
1010
- [Counter Example](#counter-example)
1111
- [WebSocket Example](#websocket-example)
1212
- [Canvas Drawing Example](#canvas-drawing-example)
13+
- [Examples](#examples)
1314
- [API Patterns](#api-patterns)
1415
- [Global Objects](#global-objects)
1516
- [Type Casting with `into()`](#type-casting-with-into)
@@ -22,7 +23,6 @@ Type-safe MoonBit bindings for Web Platform APIs, automatically generated from W
2223
- [Enum Generation](#enum-generation)
2324
- [Dictionary Generation](#dictionary-generation)
2425
- [Inheritance](#inheritance)
25-
- [Examples](#examples)
2626
- [Supported Specifications](#supported-specifications)
2727
- [Building from Source](#building-from-source)
2828
- [License](#license)
@@ -146,6 +146,62 @@ fn readme_canvas() -> Unit {
146146
}
147147
```
148148

149+
## Examples
150+
151+
Browser examples demonstrating MoonBit WebAPI bindings. Each example targets both JS and wasm-gc backends. Click an example name to see the live demo.
152+
153+
| Example | Description |
154+
|---------|-------------|
155+
| [calculator](https://bikallem.github.io/webapi/examples/calculator/calculator.js.html) | Interactive calculator with keyboard support |
156+
| [canvas](https://bikallem.github.io/webapi/examples/canvas/canvas.js.html) | 2D canvas drawing with shapes, gradients, and animation |
157+
| [classlist](https://bikallem.github.io/webapi/examples/classlist/classlist.js.html) | Add/remove/toggle CSS classes via `DOMTokenList` |
158+
| [clipboard-apis](https://bikallem.github.io/webapi/examples/clipboard-apis/clipboard-apis.js.html) | Read/write clipboard content |
159+
| [console](https://bikallem.github.io/webapi/examples/console/console.js.html) | Console API (log, warn, error, table) |
160+
| [counter](https://bikallem.github.io/webapi/examples/counter/counter.js.html) | Simple click counter |
161+
| [dom](https://bikallem.github.io/webapi/examples/dom/dom.js.html) | Create, modify, and remove DOM elements |
162+
| [element-ops](https://bikallem.github.io/webapi/examples/element-ops/element-ops.js.html) | Insert, replace, and clone elements |
163+
| [encoding](https://bikallem.github.io/webapi/examples/encoding/encoding.js.html) | TextEncoder/TextDecoder for UTF-8 |
164+
| [events](https://bikallem.github.io/webapi/examples/events/events.js.html) | Mouse, keyboard, and custom event handling |
165+
| [fetch](https://bikallem.github.io/webapi/examples/fetch/fetch.js.html) | HTTP requests with `fetch()` |
166+
| [fetch-async](https://bikallem.github.io/webapi/examples/fetch-async/fetch-async.js.html) | Async/await fetch with `JsPromise` (JS only) |
167+
| [file-api](https://bikallem.github.io/webapi/examples/file-api/file-api.js.html) | File reading and blob creation |
168+
| [forms](https://bikallem.github.io/webapi/examples/forms/forms.js.html) | Form input handling and validation |
169+
| [fullscreen](https://bikallem.github.io/webapi/examples/fullscreen/fullscreen.js.html) | Fullscreen API toggle |
170+
| [geometry](https://bikallem.github.io/webapi/examples/geometry/geometry.js.html) | DOMRect, DOMMatrix geometry types |
171+
| [indexeddb](https://bikallem.github.io/webapi/examples/indexeddb/indexeddb.js.html) | IndexedDB object store operations |
172+
| [intersection-observer](https://bikallem.github.io/webapi/examples/intersection-observer/intersection-observer.js.html) | Lazy-load with visibility detection |
173+
| [notifications](https://bikallem.github.io/webapi/examples/notifications/notifications.js.html) | Desktop notification API |
174+
| [performance](https://bikallem.github.io/webapi/examples/performance/performance.js.html) | High-resolution timing measurements |
175+
| [pointerevents](https://bikallem.github.io/webapi/examples/pointerevents/pointerevents.js.html) | Pointer event tracking |
176+
| [resize-observer](https://bikallem.github.io/webapi/examples/resize-observer/resize-observer.js.html) | Element resize monitoring |
177+
| [screen-orientation](https://bikallem.github.io/webapi/examples/screen-orientation/screen-orientation.js.html) | Screen orientation detection |
178+
| [selection-api](https://bikallem.github.io/webapi/examples/selection-api/selection-api.js.html) | Text selection and range handling |
179+
| [storage](https://bikallem.github.io/webapi/examples/storage/storage.js.html) | localStorage get/set/remove/clear |
180+
| [streams](https://bikallem.github.io/webapi/examples/streams/streams.js.html) | ReadableStream processing |
181+
| [svg](https://bikallem.github.io/webapi/examples/svg/svg.js.html) | SVG element creation and manipulation |
182+
| [timers](https://bikallem.github.io/webapi/examples/timers/timers.js.html) | `setTimeout` and `setInterval` |
183+
| [todo](https://bikallem.github.io/webapi/examples/todo/todo.js.html) | Full todo app with persistence |
184+
| [touch-events](https://bikallem.github.io/webapi/examples/touch-events/touch-events.js.html) | Multi-touch gesture handling |
185+
| [url](https://bikallem.github.io/webapi/examples/url/url.js.html) | URL parsing and manipulation |
186+
| [vibration](https://bikallem.github.io/webapi/examples/vibration/vibration.js.html) | Device vibration API |
187+
| [web-animations](https://bikallem.github.io/webapi/examples/web-animations/web-animations.js.html) | Keyframe animations |
188+
| [wc-counter](https://bikallem.github.io/webapi/examples/wc-counter/wc-counter.js.html) | Custom elements with Shadow DOM |
189+
| [wc-edit-word](https://bikallem.github.io/webapi/examples/wc-edit-word/wc-edit-word.js.html) | Inline editable text web component |
190+
| [websockets](https://bikallem.github.io/webapi/examples/websockets/websockets.js.html) | WebSocket connect/send/receive |
191+
| [xhr](https://bikallem.github.io/webapi/examples/xhr/xhr.js.html) | XMLHttpRequest |
192+
193+
### Running Examples
194+
195+
```bash
196+
# Build examples for both targets
197+
cd examples && moon build --target js --release
198+
cd examples && moon build --target wasm-gc --release
199+
200+
# Serve from the repo root
201+
npx serve .
202+
# then open http://localhost:3000/examples/index.html
203+
```
204+
149205
## API Patterns
150206

151207
### Global Objects
@@ -352,62 +408,6 @@ pub impl TNode for Element
352408
pub impl TEventTarget for Element
353409
```
354410

355-
## Examples
356-
357-
Browser examples demonstrating MoonBit WebAPI bindings. Each example targets both JS and wasm-gc backends.
358-
359-
| Example | Description |
360-
|---------|-------------|
361-
| calculator | Interactive calculator with keyboard support |
362-
| canvas | 2D canvas drawing with shapes, gradients, and animation |
363-
| classlist | Add/remove/toggle CSS classes via `DOMTokenList` |
364-
| clipboard-apis | Read/write clipboard content |
365-
| console | Console API (log, warn, error, table) |
366-
| counter | Simple click counter |
367-
| dom | Create, modify, and remove DOM elements |
368-
| element-ops | Insert, replace, and clone elements |
369-
| encoding | TextEncoder/TextDecoder for UTF-8 |
370-
| events | Mouse, keyboard, and custom event handling |
371-
| fetch | HTTP requests with `fetch()` |
372-
| fetch-async | Async/await fetch with `JsPromise` (JS only) |
373-
| file-api | File reading and blob creation |
374-
| forms | Form input handling and validation |
375-
| fullscreen | Fullscreen API toggle |
376-
| geometry | DOMRect, DOMMatrix geometry types |
377-
| indexeddb | IndexedDB object store operations |
378-
| intersection-observer | Lazy-load with visibility detection |
379-
| notifications | Desktop notification API |
380-
| performance | High-resolution timing measurements |
381-
| pointerevents | Pointer event tracking |
382-
| resize-observer | Element resize monitoring |
383-
| screen-orientation | Screen orientation detection |
384-
| selection-api | Text selection and range handling |
385-
| storage | localStorage get/set/remove/clear |
386-
| streams | ReadableStream processing |
387-
| svg | SVG element creation and manipulation |
388-
| timers | `setTimeout` and `setInterval` |
389-
| todo | Full todo app with persistence |
390-
| touch-events | Multi-touch gesture handling |
391-
| url | URL parsing and manipulation |
392-
| vibration | Device vibration API |
393-
| web-animations | Keyframe animations |
394-
| wc-edit-word | Inline editable text web component |
395-
| wc-counter | Custom elements with Shadow DOM |
396-
| websockets | WebSocket connect/send/receive |
397-
| xhr | XMLHttpRequest |
398-
399-
### Running Examples
400-
401-
```bash
402-
# Build examples for both targets
403-
cd examples && moon build --target js --release
404-
cd examples && moon build --target wasm-gc --release
405-
406-
# Serve from the repo root
407-
npx serve .
408-
# then open http://localhost:3000/examples/index.html
409-
```
410-
411411
## Supported Specifications
412412

413413
The generator processes the following WebIDL specifications:

0 commit comments

Comments
 (0)