a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
hypermedia
frontend
signals
1/**
2 * Generate a minimal VoltX.js project with declarative mode.
3 */
4export function generateMinimalHTML(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 <div class="counter">
20 <button data-volt-on-click="count.set(count.get() - 1)">-</button>
21 <span data-volt-text="count"></span>
22 <button data-volt-on-click="count.set(count.get() + 1)">+</button>
23 </div>
24
25 <p class="hint">Edit this file to start building your app!</p>
26 </div>
27 </div>
28
29 <script type="module">
30 import { charge, registerPlugin, persistPlugin } from './voltx.min.js';
31
32 registerPlugin('persist', persistPlugin);
33 charge();
34 </script>
35</body>
36</html>
37`;
38}
39
40export function generateMinimalCSS(): string {
41 return `/* Custom styles for your VoltX.js app */
42
43body {
44 margin: 0;
45 font-family: system-ui, -apple-system, sans-serif;
46 background: #f5f5f5;
47 color: #333;
48}
49
50.container {
51 max-width: 600px;
52 margin: 4rem auto;
53 padding: 2rem;
54 background: white;
55 border-radius: 8px;
56 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
57 text-align: center;
58}
59
60h1 {
61 margin: 0 0 2rem;
62 color: #2563eb;
63}
64
65.counter {
66 display: flex;
67 gap: 1rem;
68 justify-content: center;
69 align-items: center;
70 margin: 2rem 0;
71}
72
73.counter button {
74 width: 48px;
75 height: 48px;
76 font-size: 1.5rem;
77 border: 2px solid #2563eb;
78 background: white;
79 color: #2563eb;
80 border-radius: 8px;
81 cursor: pointer;
82 transition: all 0.2s;
83}
84
85.counter button:hover {
86 background: #2563eb;
87 color: white;
88}
89
90.counter span {
91 font-size: 2rem;
92 font-weight: bold;
93 min-width: 60px;
94}
95
96.hint {
97 margin-top: 2rem;
98 color: #666;
99 font-size: 0.9rem;
100}
101`;
102}
103
104export function generateMinimalPackageJSON(projectName: string): string {
105 return JSON.stringify(
106 {
107 name: projectName,
108 version: "0.1.0",
109 type: "module",
110 scripts: { dev: "voltx dev", build: "voltx build" },
111 devDependencies: { "create-voltx": "^0.1.0" },
112 },
113 null,
114 2,
115 );
116}
117
118export function generateMinimalREADME(projectName: string): string {
119 return `# ${projectName}
120
121A minimal VoltX.js application.
122
123## Getting Started
124
1251. Install dependencies:
126 \`\`\`bash
127 pnpm install
128 \`\`\`
129
1302. Start the development server:
131 \`\`\`bash
132 pnpm dev
133 \`\`\`
134
1353. Open your browser to the URL shown in the terminal.
136
137## Project Structure
138
139- \`index.html\` - Main HTML file with declarative VoltX.js markup
140- \`styles.css\` - Custom styles
141- \`voltx.min.js\` - VoltX.js framework (ES module)
142- \`voltx.min.css\` - VoltX.js base styles
143
144## Learn More
145
146- [VoltX.js Documentation](https://stormlightlabs.github.io/volt)
147- [API Reference](https://stormlightlabs.github.io/volt/api)
148`;
149}