<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CLI Reference</title>
<meta name="description" content="A programming language that compiles to HTML, CSS, and JavaScript. Build SPAs and static sites with built-in components, reactivity, routing, i18n, and animations.">
<link rel="stylesheet" href="../styles.css">
</head>
<body>
<div id="app">
<div class="wf-row">
<div class="wf-container wf-animate-fadeIn">
<div class="wf-spacer"></div>
<h1 class="wf-heading wf-heading--h1">CLI Reference</h1>
<p class="wf-text wf-text--muted">The WebFluent command-line interface.</p>
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">wf init</h2>
<p class="wf-text">Create a new WebFluent project.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">wf init <name> [--template spa|static|pdf]</code>
</div>
</div>
<div class="wf-spacer"></div>
<table class="wf-table">
<thead>
<td>Argument</td>
<td>Description</td>
</thead>
<tr>
<td>name</td>
<td>Project name (creates a directory)</td>
</tr>
<tr>
<td>--template, -t</td>
<td>Template: spa (default), static, or pdf</td>
</tr>
</table>
<div class="wf-spacer"></div>
<p class="wf-text wf-text--muted">SPA: interactive app with routing and state. Static: SSG site with i18n. PDF: document generation with tables, headings, and auto page breaks.</p>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">wf build</h2>
<p class="wf-text">Compile .wf files to HTML, CSS, and JavaScript.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">wf build [--dir DIR]</code>
</div>
</div>
<div class="wf-spacer"></div>
<table class="wf-table">
<thead>
<td>Option</td>
<td>Description</td>
</thead>
<tr>
<td>--dir, -d</td>
<td>Project directory (default: current directory)</td>
</tr>
</table>
<div class="wf-spacer"></div>
<p class="wf-text wf-text--muted">The build pipeline: Lex all .wf files, parse to AST, run accessibility linter, generate HTML + CSS + JS, write to output directory.</p>
<div class="wf-spacer"></div>
<p class="wf-text">Output depends on config:</p>
<div class="wf-stack">
<p class="wf-text">SPA mode (default): single index.html + app.js + styles.css</p>
<p class="wf-text">SSG mode (ssg: true): one HTML per page + app.js + styles.css</p>
<p class="wf-text">PDF mode (output_type: pdf): a single .pdf file</p>
</div>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">wf serve</h2>
<p class="wf-text">Start a development server that serves the built output.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">wf serve [--dir DIR]</code>
</div>
</div>
<div class="wf-spacer"></div>
<p class="wf-text wf-text--muted">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).</p>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">wf generate</h2>
<p class="wf-text">Scaffold a new page, component, or store.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">wf generate <kind> <name> [--dir DIR]</code>
</div>
</div>
<div class="wf-spacer"></div>
<table class="wf-table">
<thead>
<td>Kind</td>
<td>Creates</td>
<td>Example</td>
</thead>
<tr>
<td>page</td>
<td>src/pages/Name.wf</td>
<td>wf generate page About</td>
</tr>
<tr>
<td>component</td>
<td>src/components/Name.wf</td>
<td>wf generate component Header</td>
</tr>
<tr>
<td>store</td>
<td>src/stores/name.wf</td>
<td>wf generate store CartStore</td>
</tr>
</table>
<div class="wf-spacer"></div>
<hr class="wf-divider">
<div class="wf-spacer"></div>
<h2 class="wf-heading wf-heading--h2">Configuration</h2>
<p class="wf-text">All config is in webfluent.app.json at the project root.</p>
<div class="wf-spacer"></div>
<div class="wf-card wf-card--outlined">
<div class="wf-card__body">
<code class="wf-code">{
"name": "My App",
"version": "1.0.0",
"author": "Your Name",
"theme": {
"name": "default",
"mode": "light",
"tokens": { "color-primary": "#6366F1" }
},
"build": {
"output": "./build",
"minify": true,
"ssg": false,
"output_type": "spa",
"pdf": {
"page_size": "A4",
"default_font": "Helvetica",
"output_filename": "report.pdf"
}
},
"dev": { "port": 3000 },
"meta": {
"title": "My App",
"description": "Built with WebFluent",
"lang": "en"
},
"i18n": {
"defaultLocale": "en",
"locales": ["en", "ar"],
"dir": "src/translations"
}
}</code>
</div>
</div>
<div class="wf-spacer"></div>
</div>
</div>
</div>
<script src="../app.js"></script>
</body>
</html>