a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1/**
2 * Generate a VoltX.js project with all plugins pre-registered.
3 */
4export function generatePluginsHTML(projectName: string): string {
5 return `<!DOCTYPE html>
6<html lang="en">
7<head>
8 <meta charset="UTF-8">
9 <meta name="viewport" content="width=device-width, initial-scale=1.0">
10 <title>${projectName}</title>
11 <link rel="stylesheet" href="voltx.min.css">
12 <link rel="stylesheet" href="styles.css">
13</head>
14<body>
15 <div data-volt data-volt-state='{"count": 0, "message": "Hello VoltX!"}'>
16 <div class="container">
17 <h1 data-volt-text="message"></h1>
18
19 <!-- Persist plugin demo -->
20 <div class="card">
21 <h2>Persist Plugin</h2>
22 <p>This counter persists to localStorage:</p>
23 <div class="counter">
24 <button data-volt-on-click="count.set(count.get() - 1)">-</button>
25 <span data-volt-text="count" data-volt-persist="count"></span>
26 <button data-volt-on-click="count.set(count.get() + 1)">+</button>
27 </div>
28 <p class="hint">Refresh the page - your count is saved!</p>
29 </div>
30
31 <!-- Scroll plugin demo -->
32 <div class="card">
33 <h2>Scroll Plugin</h2>
34 <p>Smooth scroll to sections:</p>
35 <button data-volt-scroll-to="#section-1">Scroll to Section 1</button>
36 <button data-volt-scroll-to="#section-2">Scroll to Section 2</button>
37 </div>
38
39 <!-- URL plugin demo -->
40 <div class="card">
41 <h2>URL Plugin</h2>
42 <p>State synced with URL params:</p>
43 <input type="text" data-volt-model="message" data-volt-url-param="msg">
44 <p class="hint">Your message is in the URL!</p>
45 </div>
46
47 <!-- Surge plugin demo -->
48 <div class="card">
49 <h2>Surge Plugin (Animations)</h2>
50 <button data-volt-on-click="$scope.toggle('showBox', !$scope.get('showBox'))">
51 Toggle Box
52 </button>
53 <div
54 data-volt-if="$scope.get('showBox')"
55 data-volt-surge="fade"
56 class="animated-box"
57 >
58 I fade in and out!
59 </div>
60 </div>
61
62 <div id="section-1" class="section">
63 <h3>Section 1</h3>
64 <p>This is a scrollable section.</p>
65 </div>
66
67 <div id="section-2" class="section">
68 <h3>Section 2</h3>
69 <p>Scroll here with smooth animations!</p>
70 </div>
71 </div>
72 </div>
73
74 <script type="module">
75 import {
76 charge,
77 registerPlugin,
78 persistPlugin,
79 scrollPlugin,
80 urlPlugin,
81 surgePlugin,
82 navigatePlugin
83 } from './voltx.min.js';
84
85 // Register all plugins
86 registerPlugin('persist', persistPlugin);
87 registerPlugin('scroll', scrollPlugin);
88 registerPlugin('url', urlPlugin);
89 registerPlugin('surge', surgePlugin);
90 registerPlugin('navigate', navigatePlugin);
91
92 charge();
93 </script>
94</body>
95</html>
96`;
97}
98
99export function generatePluginsCSS(): string {
100 return `/* Custom styles for your VoltX.js app */
101
102body {
103 margin: 0;
104 font-family: system-ui, -apple-system, sans-serif;
105 background: #f5f5f5;
106 color: #333;
107}
108
109.container {
110 max-width: 900px;
111 margin: 2rem auto;
112 padding: 2rem;
113}
114
115h1 {
116 text-align: center;
117 margin-bottom: 3rem;
118 color: #2563eb;
119}
120
121.card {
122 background: white;
123 padding: 2rem;
124 border-radius: 8px;
125 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
126 margin-bottom: 2rem;
127}
128
129.card h2 {
130 margin-top: 0;
131 color: #1e40af;
132}
133
134.counter {
135 display: flex;
136 gap: 1rem;
137 justify-content: center;
138 align-items: center;
139 margin: 1.5rem 0;
140}
141
142.counter button {
143 width: 48px;
144 height: 48px;
145 font-size: 1.5rem;
146 border: 2px solid #2563eb;
147 background: white;
148 color: #2563eb;
149 border-radius: 8px;
150 cursor: pointer;
151 transition: all 0.2s;
152}
153
154.counter button:hover {
155 background: #2563eb;
156 color: white;
157}
158
159.counter span {
160 font-size: 2rem;
161 font-weight: bold;
162 min-width: 60px;
163 text-align: center;
164}
165
166button:not(.counter button) {
167 padding: 0.75rem 1.5rem;
168 background: #2563eb;
169 color: white;
170 border: none;
171 border-radius: 6px;
172 font-size: 1rem;
173 font-weight: 500;
174 cursor: pointer;
175 transition: all 0.2s;
176 margin-right: 0.5rem;
177}
178
179button:not(.counter button):hover {
180 background: #1e40af;
181}
182
183input[type="text"] {
184 width: 100%;
185 padding: 0.75rem;
186 border: 1px solid #ddd;
187 border-radius: 4px;
188 font-size: 1rem;
189 margin: 1rem 0;
190}
191
192input[type="text"]:focus {
193 outline: none;
194 border-color: #2563eb;
195}
196
197.hint {
198 color: #666;
199 font-size: 0.9rem;
200 margin-top: 1rem;
201}
202
203.animated-box {
204 margin-top: 1.5rem;
205 padding: 2rem;
206 background: #dbeafe;
207 border: 2px solid #2563eb;
208 border-radius: 8px;
209 text-align: center;
210 font-weight: 500;
211 color: #1e40af;
212}
213
214.section {
215 margin-top: 3rem;
216 padding: 3rem;
217 background: white;
218 border-radius: 8px;
219 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
220 min-height: 300px;
221}
222
223.section h3 {
224 margin-top: 0;
225 color: #2563eb;
226}
227`;
228}
229
230export function generatePluginsPackageJSON(projectName: string): string {
231 return JSON.stringify(
232 {
233 name: projectName,
234 version: "0.1.0",
235 type: "module",
236 scripts: { dev: "voltx dev", build: "voltx build" },
237 devDependencies: { "create-voltx": "^0.1.0" },
238 },
239 null,
240 2,
241 );
242}
243
244export function generatePluginsREADME(projectName: string): string {
245 return `# ${projectName}
246
247A VoltX.js application with all plugins pre-registered.
248
249## Getting Started
250
2511. Install dependencies:
252 \`\`\`bash
253 pnpm install
254 \`\`\`
255
2562. Start the development server:
257 \`\`\`bash
258 pnpm dev
259 \`\`\`
260
2613. Open your browser to the URL shown in the terminal.
262
263## Included Plugins
264
265This project includes all VoltX.js plugins:
266
267- **Persist Plugin**: Save state to localStorage/sessionStorage
268- **Scroll Plugin**: Smooth scrolling and scroll restoration
269- **URL Plugin**: Sync state with URL parameters
270- **Surge Plugin**: Declarative animations (fade, slide, scale)
271- **Navigate Plugin**: Client-side routing
272
273## Learn More
274
275- [VoltX.js Documentation](https://stormlightlabs.github.io/volt)
276- [Plugin Reference](https://stormlightlabs.github.io/volt/plugins)
277`;
278}