Skip to content

Commit 6c884a1

Browse files
NeaByteLabNeaByteLab
committed
docs(examples): add helper demo and clarify index vs index2 📌
- Add index2.html demo using el helper (create(el.root(...)), render()) - Update README with index.html vs index2.html descriptions - Update What you see with separate bullets per demo
1 parent b415e1b commit 6c884a1

File tree

2 files changed

+212
-3
lines changed

2 files changed

+212
-3
lines changed

‎examples/README.md‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
# Example
1+
# Examples
22

3-
Browser demo: one schema drives the whole page. You run `create(definition)` then `render(schema, container)`; the content (header, text, image, list, table, link) comes from the schema in `index.html`.
3+
Browser demos: a schema drives the whole page. You run `create(definition)` then `render(schema, container)`.
4+
5+
- **index.html** — Raw definition: `create({ root: [ ... ] })`.
6+
- **index2.html** — Helper (el): `create(el.root(el.header(...), el.main(...)))`.
47

58
## Prerequisites
69

@@ -25,4 +28,5 @@ npm run build
2528

2629
## What you see
2730

28-
The page is rendered from the schema: header (“Schema2UI”), intro text, an image (placeholder), a list of element types, a key/description table, and a “View on GitHub” button at the bottom. No framework — just the schema and the built bundle.
31+
- **index.html** — Page rendered from a raw definition: header (“Schema2UI”), intro text, image, list, table, link. No framework — just the schema and the built bundle.
32+
- **index2.html** — Same layout built with the `el` helper: `el.root()`, `el.header()`, `el.div()`, `el.img()`, `el.table()`, etc., then `create(el.root(...))` and `render()`.

‎examples/index2.html‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Schema2UI Example — Helper (el)</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
<style>
14+
:root {
15+
--bg: #0c0c0f;
16+
--surface: #141419;
17+
--surface-2: #1a1a22;
18+
--border: #2a2a36;
19+
--text: #e4e4e7;
20+
--text-muted: #a1a1aa;
21+
--accent: #0d9488;
22+
--accent-hover: #14b8a6;
23+
}
24+
* {
25+
box-sizing: border-box;
26+
}
27+
body {
28+
margin: 0;
29+
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
30+
min-height: 100vh;
31+
background: var(--bg);
32+
color: var(--text);
33+
line-height: 1.6;
34+
-webkit-font-smoothing: antialiased;
35+
}
36+
#app {
37+
min-height: 100vh;
38+
display: flex;
39+
flex-direction: column;
40+
}
41+
#app header {
42+
border-bottom: 1px solid var(--border);
43+
padding: 0 1.5rem;
44+
display: flex;
45+
align-items: center;
46+
}
47+
#app header .header-title {
48+
margin: 0;
49+
font-size: 1.25rem;
50+
font-weight: 600;
51+
color: var(--text);
52+
}
53+
#app .main-wrap {
54+
flex: 1;
55+
max-width: 640px;
56+
margin: 0 auto;
57+
width: 100%;
58+
padding: 2rem 1.5rem;
59+
}
60+
#app .hero {
61+
font-size: 1.125rem;
62+
color: var(--text-muted);
63+
margin-bottom: 1.5rem;
64+
}
65+
#app .btn {
66+
display: inline-flex;
67+
align-items: center;
68+
padding: 0.625rem 1.25rem;
69+
background: var(--accent);
70+
color: white;
71+
text-decoration: none;
72+
font-weight: 500;
73+
font-size: 0.875rem;
74+
border-radius: 8px;
75+
transition: background 0.2s;
76+
margin-top: 2rem;
77+
}
78+
#app .btn:hover {
79+
background: var(--accent-hover);
80+
}
81+
#app .table-wrap {
82+
margin-top: 2rem;
83+
border-radius: 12px;
84+
border: 1px solid var(--border);
85+
overflow: hidden;
86+
background: var(--surface-2);
87+
}
88+
#app .docs-table {
89+
width: 100%;
90+
border-collapse: collapse;
91+
font-size: 0.875rem;
92+
}
93+
#app .docs-table th {
94+
text-align: left;
95+
font-weight: 600;
96+
color: var(--text-muted);
97+
padding: 0.75rem 1rem;
98+
background: var(--surface);
99+
border-bottom: 1px solid var(--border);
100+
}
101+
#app .docs-table td {
102+
padding: 0.75rem 1rem;
103+
border-bottom: 1px solid var(--border);
104+
}
105+
#app .docs-table tr:last-child td {
106+
border-bottom: none;
107+
}
108+
#app .docs-table td:first-child {
109+
font-weight: 500;
110+
color: var(--accent);
111+
}
112+
#app .section-title {
113+
font-size: 1rem;
114+
font-weight: 600;
115+
color: var(--text);
116+
margin: 2rem 0 0.75rem;
117+
}
118+
#app .section-title:first-of-type {
119+
margin-top: 0;
120+
}
121+
#app .img-wrap {
122+
margin-top: 0.5rem;
123+
border-radius: 12px;
124+
overflow: hidden;
125+
border: 1px solid var(--border);
126+
}
127+
#app .img-wrap img {
128+
display: block;
129+
width: 100%;
130+
height: auto;
131+
}
132+
#app .img-caption {
133+
font-size: 0.8125rem;
134+
color: var(--text-muted);
135+
margin-top: 0.5rem;
136+
}
137+
#app .example-list {
138+
list-style: none;
139+
padding: 0;
140+
margin: 0.5rem 0 0;
141+
}
142+
#app .example-list li {
143+
padding: 0.5rem 0;
144+
border-bottom: 1px solid var(--border);
145+
font-size: 0.875rem;
146+
}
147+
#app .example-list li:last-child {
148+
border-bottom: none;
149+
}
150+
</style>
151+
</head>
152+
<body>
153+
<div id="app"></div>
154+
<script type="module">
155+
import { create, render, el } from '../dist/index.mjs'
156+
157+
const schema = create(el.root(
158+
el.header(
159+
{ id: 'header', layout: { width: '100%', height: 64 }, style: { fill: 'var(--surface)', stroke: 'none' } },
160+
el.h1({ id: 'title', attrs: { className: 'header-title' } }, 'Schema2UI')
161+
),
162+
el.main(
163+
{ attrs: { className: 'main-wrap' }, layout: { width: '100%', flex: 1, gap: 0 } },
164+
el.p({ attrs: { className: 'hero' } }, 'This page uses the helper: create(el.root(...)) then render().'),
165+
el.h2({ attrs: { className: 'section-title' } }, 'Example: Image'),
166+
el.div(
167+
{ attrs: { className: 'img-wrap' }, layout: { width: '100%' } },
168+
el.img({ src: 'https://picsum.photos/640/240', alt: 'Placeholder image' })
169+
),
170+
el.p({ attrs: { className: 'img-caption' } }, 'el.img(props) — void tag, props only.'),
171+
el.h2({ attrs: { className: 'section-title' } }, 'Example: List'),
172+
el.ul(
173+
{ attrs: { className: 'example-list' } },
174+
el.li({}, 'Block: div, header, main, section'),
175+
el.li({}, 'Text: p, h1–h6, span'),
176+
el.li({}, 'Media: img (void), svg'),
177+
el.li({}, 'Table: table, thead, tbody, tr, th, td'),
178+
el.li({}, 'List: ul, ol, li')
179+
),
180+
el.h2({ attrs: { className: 'section-title' } }, 'Example: Table'),
181+
el.div(
182+
{ attrs: { className: 'table-wrap' }, layout: { width: '100%' } },
183+
el.table(
184+
{ attrs: { className: 'docs-table' }, layout: { width: '100%' } },
185+
el.thead(
186+
el.tr(
187+
el.th({}, 'Key'),
188+
el.th({}, 'Description')
189+
)
190+
),
191+
el.tbody(
192+
el.tr(el.td({}, 'type'), el.td({}, 'HTML tag name (div, table, a, …)')),
193+
el.tr(el.td({}, 'layout'), el.td({}, 'width, height, flex, gap → CSS')),
194+
el.tr(el.td({}, 'attrs'), el.td({}, 'Arbitrary HTML attributes (href, class, …)'))
195+
)
196+
)
197+
),
198+
el.a({ attrs: { href: 'https://github.com/NeaByteLab/Schema2UI', className: 'btn' } }, 'View on GitHub')
199+
)
200+
))
201+
202+
render(schema, document.getElementById('app'))
203+
</script>
204+
</body>
205+
</html>

0 commit comments

Comments
 (0)