a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
hypermedia
frontend
signals
1/**
2 * Generate a VoltX.js project with router plugin.
3 */
4export function generateRouterHTML(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>
16 <nav class="nav">
17 <a href="/" data-volt-navigate>Home</a>
18 <a href="/about" data-volt-navigate>About</a>
19 <a href="/contact" data-volt-navigate>Contact</a>
20 </nav>
21
22 <main class="container">
23 <!-- Home page -->
24 <div data-volt-url="/" data-volt-url-exact>
25 <h1>Home</h1>
26 <p>Welcome to ${projectName}!</p>
27 <p>This is a VoltX.js app with client-side routing.</p>
28 </div>
29
30 <!-- About page -->
31 <div data-volt-url="/about">
32 <h1>About</h1>
33 <p>This project demonstrates VoltX.js routing capabilities.</p>
34 <ul>
35 <li>Client-side navigation</li>
36 <li>Clean URLs with History API</li>
37 <li>Declarative route matching</li>
38 </ul>
39 </div>
40
41 <!-- Contact page -->
42 <div data-volt-url="/contact">
43 <h1>Contact</h1>
44 <p>Get in touch with us!</p>
45 <form>
46 <label>
47 Name:
48 <input type="text" placeholder="Your name">
49 </label>
50 <label>
51 Email:
52 <input type="email" placeholder="your@email.com">
53 </label>
54 <label>
55 Message:
56 <textarea rows="4" placeholder="Your message"></textarea>
57 </label>
58 <button type="submit">Send</button>
59 </form>
60 </div>
61
62 <!-- 404 page -->
63 <div data-volt-url-fallback>
64 <h1>404 - Page Not Found</h1>
65 <p>The page you're looking for doesn't exist.</p>
66 <a href="/" data-volt-navigate>Go back home</a>
67 </div>
68 </main>
69 </div>
70
71 <script type="module">
72 import { charge, registerPlugin, navigatePlugin, urlPlugin } from './voltx.min.js';
73
74 registerPlugin('navigate', navigatePlugin);
75 registerPlugin('url', urlPlugin);
76 charge();
77 </script>
78</body>
79</html>
80`;
81}
82
83export function generateRouterCSS(): string {
84 return `/* Custom styles for your VoltX.js app */
85
86body {
87 margin: 0;
88 font-family: system-ui, -apple-system, sans-serif;
89 background: #f5f5f5;
90 color: #333;
91}
92
93.nav {
94 background: #2563eb;
95 padding: 1rem 2rem;
96 display: flex;
97 gap: 2rem;
98 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
99}
100
101.nav a {
102 color: white;
103 text-decoration: none;
104 font-weight: 500;
105 padding: 0.5rem 1rem;
106 border-radius: 4px;
107 transition: background 0.2s;
108}
109
110.nav a:hover {
111 background: rgba(255, 255, 255, 0.1);
112}
113
114.nav a[aria-current="page"] {
115 background: rgba(255, 255, 255, 0.2);
116}
117
118.container {
119 max-width: 800px;
120 margin: 2rem auto;
121 padding: 2rem;
122 background: white;
123 border-radius: 8px;
124 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
125}
126
127h1 {
128 margin-top: 0;
129 color: #2563eb;
130}
131
132form {
133 display: flex;
134 flex-direction: column;
135 gap: 1rem;
136 margin-top: 2rem;
137}
138
139label {
140 display: flex;
141 flex-direction: column;
142 gap: 0.5rem;
143 font-weight: 500;
144}
145
146input,
147textarea {
148 padding: 0.75rem;
149 border: 1px solid #ddd;
150 border-radius: 4px;
151 font-size: 1rem;
152 font-family: inherit;
153}
154
155input:focus,
156textarea:focus {
157 outline: none;
158 border-color: #2563eb;
159}
160
161button[type="submit"] {
162 padding: 0.75rem 1.5rem;
163 background: #2563eb;
164 color: white;
165 border: none;
166 border-radius: 4px;
167 font-size: 1rem;
168 font-weight: 500;
169 cursor: pointer;
170 transition: background 0.2s;
171 align-self: flex-start;
172}
173
174button[type="submit"]:hover {
175 background: #1e40af;
176}
177`;
178}
179
180export function generateRouterPackageJSON(projectName: string): string {
181 return JSON.stringify(
182 {
183 name: projectName,
184 version: "0.1.0",
185 type: "module",
186 scripts: { dev: "voltx dev", build: "voltx build" },
187 devDependencies: { "create-voltx": "^0.1.0" },
188 },
189 null,
190 2,
191 );
192}
193
194export function generateRouterREADME(projectName: string): string {
195 return `# ${projectName}
196
197A VoltX.js application with client-side routing.
198
199## Getting Started
200
2011. Install dependencies:
202 \`\`\`bash
203 pnpm install
204 \`\`\`
205
2062. Start the development server:
207 \`\`\`bash
208 pnpm dev
209 \`\`\`
210
2113. Open your browser to the URL shown in the terminal.
212
213## Features
214
215This project demonstrates:
216
217- Client-side routing with the History API
218- Declarative route matching with \`data-volt-url\`
219- Navigation with \`data-volt-navigate\`
220- 404 fallback pages
221- Clean URLs without hash routing
222
223## Project Structure
224
225- \`index.html\` - Main HTML file with routes
226- \`styles.css\` - Custom styles
227- \`voltx.min.js\` - VoltX.js framework with router
228- \`voltx.min.css\` - VoltX.js base styles
229
230## Learn More
231
232- [VoltX.js Documentation](https://stormlightlabs.github.io/volt)
233- [Routing Guide](https://stormlightlabs.github.io/volt/guides/routing)
234`;
235}