a reactive (signals based) hypermedia web framework (wip)
stormlightlabs.github.io/volt/
desertthunder.dev
hypermedia
frontend
signals
1/**
2 * Generate a styles-only project with VoltX.js CSS but no JavaScript framework.
3 */
4export function generateStylesHTML(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 class="container">
16 <h1>Welcome to ${projectName}</h1>
17
18 <div class="card">
19 <h2>VoltX.js CSS</h2>
20 <p>This project uses VoltX.js CSS utility classes without the reactive framework.</p>
21 <p>Style your HTML with utility classes and semantic CSS variables.</p>
22 </div>
23
24 <div class="button-group">
25 <button class="btn btn-primary">Primary</button>
26 <button class="btn btn-secondary">Secondary</button>
27 <button class="btn btn-danger">Danger</button>
28 </div>
29
30 <div class="grid">
31 <div class="card">
32 <h3>Card 1</h3>
33 <p>Build with semantic CSS.</p>
34 </div>
35 <div class="card">
36 <h3>Card 2</h3>
37 <p>No JavaScript required.</p>
38 </div>
39 <div class="card">
40 <h3>Card 3</h3>
41 <p>Just HTML and CSS.</p>
42 </div>
43 </div>
44 </div>
45</body>
46</html>
47`;
48}
49
50export function generateStylesCSS(): string {
51 return `/* Custom styles for your project */
52
53body {
54 margin: 0;
55 font-family: system-ui, -apple-system, sans-serif;
56 background: #f5f5f5;
57 color: #333;
58}
59
60.container {
61 max-width: 900px;
62 margin: 0 auto;
63 padding: 2rem;
64}
65
66h1 {
67 text-align: center;
68 margin-bottom: 3rem;
69 color: #2563eb;
70}
71
72.card {
73 background: white;
74 padding: 1.5rem;
75 border-radius: 8px;
76 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
77 margin-bottom: 2rem;
78}
79
80.card h2,
81.card h3 {
82 margin-top: 0;
83 color: #1e40af;
84}
85
86.button-group {
87 display: flex;
88 gap: 1rem;
89 justify-content: center;
90 margin: 2rem 0;
91}
92
93.btn {
94 padding: 0.75rem 1.5rem;
95 border: none;
96 border-radius: 6px;
97 font-size: 1rem;
98 font-weight: 500;
99 cursor: pointer;
100 transition: all 0.2s;
101}
102
103.btn-primary {
104 background: #2563eb;
105 color: white;
106}
107
108.btn-primary:hover {
109 background: #1e40af;
110}
111
112.btn-secondary {
113 background: #64748b;
114 color: white;
115}
116
117.btn-secondary:hover {
118 background: #475569;
119}
120
121.btn-danger {
122 background: #dc2626;
123 color: white;
124}
125
126.btn-danger:hover {
127 background: #b91c1c;
128}
129
130.grid {
131 display: grid;
132 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
133 gap: 1.5rem;
134 margin-top: 2rem;
135}
136
137.grid .card {
138 margin-bottom: 0;
139}
140`;
141}
142
143export function generateStylesPackageJSON(projectName: string): string {
144 return JSON.stringify(
145 {
146 name: projectName,
147 version: "0.1.0",
148 scripts: { dev: "voltx dev", build: "voltx build" },
149 devDependencies: { "create-voltx": "^0.1.0" },
150 },
151 null,
152 2,
153 );
154}
155
156export function generateStylesREADME(projectName: string): string {
157 return `# ${projectName}
158
159A styles-only project using VoltX.js CSS utilities.
160
161## Getting Started
162
1631. Install dependencies:
164 \`\`\`bash
165 pnpm install
166 \`\`\`
167
1682. Start the development server:
169 \`\`\`bash
170 pnpm dev
171 \`\`\`
172
1733. Open your browser to the URL shown in the terminal.
174
175## What's Included
176
177This project uses VoltX.js CSS for styling without the reactive framework:
178
179- Utility classes for common patterns
180- CSS custom properties for theming
181- Semantic HTML with clean CSS
182
183## Adding VoltX.js Reactivity
184
185To add reactivity to this project later:
186
187\`\`\`bash
188# Add data-volt attributes to your HTML
189# Import and initialize VoltX.js in a script tag
190\`\`\`
191
192See the [VoltX.js Documentation](https://stormlightlabs.github.io/volt) for more information.
193`;
194}