a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
hypermedia
frontend
signals
1/**
2 * Home Section
3 * Landing page with framework overview and feature highlights
4 */
5
6import * as dom from "../utils";
7
8export function createHomeSection(): HTMLElement {
9 return dom.article(
10 { id: "home" },
11 dom.section(
12 null,
13 dom.h2(null, "VoltX.js: Declarative Reactivity for the Modern Web"),
14 dom.p(
15 null,
16 "VoltX.js is a lightweight reactive framework that brings signal-based reactivity to HTML.",
17 dom.small(
18 null,
19 "Build rich, interactive applications using declarative markup without writing JavaScript. No virtual DOM, no build step, no dependencies—just pure reactive primitives and HTML attributes.",
20 ),
21 ),
22 ),
23 dom.section(
24 null,
25 dom.h3(null, "Why VoltX.js?"),
26 dom.dl(
27 null,
28 ...dom.kv([
29 ["< 15KB Gzipped", "Smaller than most icon libraries. Ships only what you need with zero dependencies."],
30 [
31 "Declarative-First",
32 "Build entire applications using only HTML attributes. JavaScript is optional for complex logic.",
33 ],
34 [
35 "Signal-Based Reactivity",
36 "Fine-grained reactivity that updates only what changed. No virtual DOM diffing.",
37 ],
38 ["Zero Build Step", "Import from npm or CDN and start building. No webpack, no rollup, no configuration."],
39 ["Progressive Enhancement", "Works with server-rendered HTML. Add reactivity incrementally where needed."],
40 ["Standards-Based", "Built on standard DOM APIs. No proprietary JSX or template syntax."],
41 ]),
42 ),
43 ),
44 dom.section(
45 null,
46 dom.h3(null, "Quick Start"),
47 dom.p(null, "Get started with VoltX.js in seconds:"),
48 dom.pre(
49 null,
50 dom.code(
51 null,
52 `<!-- Include VoltX.js from CDN -->
53<script type="module">
54 import { charge } from 'https://esm.sh/voltx.js';
55 charge();
56</script>
57
58<!-- Declare reactive state in HTML -->
59<div data-volt data-volt-state='{"count": 0}'
60 data-volt-computed:doubled="count * 2">
61 <p>Count: <span data-volt-text="count"></span></p>
62 <p>Doubled: <span data-volt-text="doubled"></span></p>
63 <button data-volt-on-click="count.set(count + 1)">
64 Increment
65 </button>
66</div>`,
67 ),
68 ),
69 dom.p(
70 null,
71 "That's it! No build step, no configuration, no JavaScript beyond the import. ",
72 dom.strong(null, "The state, reactivity, and interactions are all declared in HTML."),
73 ),
74 ),
75 dom.section(
76 null,
77 dom.h3(null, "Explore the Features"),
78 dom.p(null, "Navigate through the demo to see VoltX.js in action:"),
79 dom.ul(
80 null,
81 dom.li(
82 null,
83 dom.strong(null, "Typography & CSS"),
84 " - Explore Volt CSS, our classless CSS framework with Tufte-style sidenotes",
85 ),
86 dom.li(
87 null,
88 dom.strong(null, "Interactivity"),
89 " - See dialogs, buttons, and event handling with declarative bindings",
90 ),
91 dom.li(null, dom.strong(null, "Forms"), " - Two-way data binding with all standard form elements"),
92 dom.li(null, dom.strong(null, "Reactivity"), " - Conditional rendering, list rendering, and computed values"),
93 dom.li(null, dom.strong(null, "Plugins"), " - Persistence, scroll management, URL synchronization, and more"),
94 dom.li(
95 null,
96 dom.strong(null, "Animations"),
97 " - Built-in transitions and keyframe animations with zero configuration",
98 ),
99 ),
100 dom.p(null, "Use the navigation above to explore each section."),
101 ),
102 dom.section(
103 null,
104 dom.h3(null, "Learn More"),
105 dom.p(
106 null,
107 dom.a({ href: "https://github.com/stormlightlabs/volt" }, "GitHub Repository"),
108 " | ",
109 dom.a({ href: "https://stormlightlabs.github.io/volt" }, "Documentation"),
110 " | ",
111 dom.a({ href: "https://www.npmjs.com/package/voltx.js" }, "npm Package"),
112 " | ",
113 dom.a({ href: "https://jsr.io/@voltx/core" }, "JSR Package"),
114 ),
115 ),
116 );
117}