a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1/**
2 * Plugins Section
3 * Demonstrates persist, scroll, and URL plugins
4 */
5
6import * as dom from "../utils";
7
8export function createPluginsSection(): HTMLElement {
9 return dom.article(
10 { id: "plugins" },
11 dom.h2(null, "Plugin Demos"),
12 dom.section(
13 null,
14 dom.h3(null, "Persist Plugin"),
15 dom.p(
16 null,
17 "The persist plugin syncs signals with localStorage, sessionStorage, or IndexedDB.",
18 dom.small(
19 null,
20 "Try incrementing the counter, then refresh the page. The value persists! This uses localStorage by default.",
21 ),
22 ),
23 dom.p(null, "Persisted Count: ", dom.strong({ "data-volt-text": "persistedCount" }, "0")),
24 dom.div(
25 { "data-volt-persist:persistedCount": "localStorage" },
26 dom.button({ "data-volt-on-click": "persistedCount.set(persistedCount + 1)" }, "Increment Persisted"),
27 " ",
28 dom.button({ "data-volt-on-click": "persistedCount.set(0)" }, "Reset Persisted"),
29 ),
30 ),
31 dom.section(
32 null,
33 dom.h3(null, "Scroll Plugin"),
34 dom.p(
35 null,
36 "The scroll plugin provides scroll tracking and smooth scrolling utilities.",
37 dom.small(
38 null,
39 "Current scroll position is tracked in real-time. The scroll position updates as you scroll the page, and you can jump to sections smoothly.",
40 ),
41 ),
42 dom.p(
43 null,
44 "Current Scroll Position: ",
45 dom.strong({ "data-volt-text": "Math.round(scrollPosition)" }, "0"),
46 "px",
47 ),
48 dom.div(
49 { style: "display: flex; gap: 0.5rem; flex-wrap: wrap;" },
50 dom.button({ "data-volt-on-click": "$helpers.scrollToTop()" }, "Scroll to Top"),
51 dom.button({ "data-volt-on-click": "$helpers.scrollToSection('typography')" }, "Go to Typography"),
52 dom.button({ "data-volt-on-click": "$helpers.scrollToSection('forms')" }, "Go to Forms"),
53 dom.button({ "data-volt-on-click": "$helpers.scrollToSection('plugins')" }, "Go to Plugins"),
54 ),
55 ),
56 dom.section(
57 null,
58 dom.h3(null, "URL Plugin"),
59 dom.p(
60 null,
61 "The URL plugin syncs signals with URL query parameters or hash.",
62 dom.small(
63 null,
64 "Try typing in the input below. Notice how the URL updates automatically! Bookmark the URL and return later - the state is preserved.",
65 ),
66 ),
67 dom.div(
68 { "data-volt-url:urlParam": "query", "style": "max-width: var(--content-width);" },
69 ...dom.labelFor("URL Parameter (synced with ?urlParam=...)", {
70 type: "text",
71 id: "url-input",
72 "data-volt-model": "urlParam",
73 placeholder: "Type to update URL...",
74 }),
75 dom.p(null, "Current value: ", dom.strong({ "data-volt-text": "urlParam || '(empty)'" }, "Loading...")),
76 ),
77 ),
78 );
79}