Page Cli (path: "/cli", title: "CLI Reference") {
Container(fadeIn) {
Spacer()
Heading("CLI Reference", h1)
Text("The WebFluent command-line interface.", muted)
Spacer()
Heading("wf init", h2)
Text("Create a new WebFluent project.")
Spacer(sm)
Card(outlined) {
Card.Body {
Code("wf init <name> [--template spa|static|pdf]", block)
}
}
Spacer(sm)
Table {
Thead { Tcell("Argument") Tcell("Description") }
Trow { Tcell("name") Tcell("Project name (creates a directory)") }
Trow { Tcell("--template, -t") Tcell("Template: spa (default), static, or pdf") }
}
Spacer(sm)
Text("SPA: interactive app with routing and state. Static: SSG site with i18n. PDF: document generation with tables, headings, and auto page breaks.", muted)
Spacer()
Divider()
Spacer()
Heading("wf build", h2)
Text("Compile .wf files to HTML, CSS, and JavaScript.")
Spacer(sm)
Card(outlined) {
Card.Body {
Code("wf build [--dir DIR]", block)
}
}
Spacer(sm)
Table {
Thead { Tcell("Option") Tcell("Description") }
Trow { Tcell("--dir, -d") Tcell("Project directory (default: current directory)") }
}
Spacer(sm)
Text("The build pipeline: Lex all .wf files, parse to AST, run accessibility linter, generate HTML + CSS + JS, write to output directory.", muted)
Spacer(sm)
Text("Output depends on config:")
Stack(gap: sm) {
Text("SPA mode (default): single index.html + app.js + styles.css")
Text("SSG mode (ssg: true): one HTML per page + app.js + styles.css")
Text("PDF mode (output_type: pdf): a single .pdf file")
}
Spacer()
Divider()
Spacer()
Heading("wf serve", h2)
Text("Start a development server that serves the built output.")
Spacer(sm)
Card(outlined) {
Card.Body {
Code("wf serve [--dir DIR]", block)
}
}
Spacer(sm)
Text("Serves files from the build directory. SPA fallback: all routes serve index.html so client-side routing works. Port is configured in webfluent.app.json (default: 3000).", muted)
Spacer()
Divider()
Spacer()
Heading("wf generate", h2)
Text("Scaffold a new page, component, or store.")
Spacer(sm)
Card(outlined) {
Card.Body {
Code("wf generate <kind> <name> [--dir DIR]", block)
}
}
Spacer(sm)
Table {
Thead { Tcell("Kind") Tcell("Creates") Tcell("Example") }
Trow { Tcell("page") Tcell("src/pages/Name.wf") Tcell("wf generate page About") }
Trow { Tcell("component") Tcell("src/components/Name.wf") Tcell("wf generate component Header") }
Trow { Tcell("store") Tcell("src/stores/name.wf") Tcell("wf generate store CartStore") }
}
Spacer()
Divider()
Spacer()
Heading("Configuration", h2)
Text("All config is in webfluent.app.json at the project root.")
Spacer(sm)
Card(outlined) {
Card.Body {
Code("\{\n \"name\": \"My App\",\n \"version\": \"1.0.0\",\n \"author\": \"Your Name\",\n \"theme\": \{\n \"name\": \"default\",\n \"mode\": \"light\",\n \"tokens\": \{ \"color-primary\": \"#6366F1\" \}\n \},\n \"build\": \{\n \"output\": \"./build\",\n \"minify\": true,\n \"ssg\": false,\n \"output_type\": \"spa\",\n \"pdf\": \{\n \"page_size\": \"A4\",\n \"default_font\": \"Helvetica\",\n \"output_filename\": \"report.pdf\"\n \}\n \},\n \"dev\": \{ \"port\": 3000 \},\n \"meta\": \{\n \"title\": \"My App\",\n \"description\": \"Built with WebFluent\",\n \"lang\": \"en\"\n \},\n \"i18n\": \{\n \"defaultLocale\": \"en\",\n \"locales\": [\"en\", \"ar\"],\n \"dir\": \"src/translations\"\n \}\n\}", block)
}
}
Spacer(xl)
}
}