Getting Started

Create a Project

You should have NodeJS installed on your system.

Create a Webpan project using the setup wizard.
```
$ npm create webpan@latest
```
Start Webpan in live preview mode in the project folder
```
$ npm run watch
```
In a separate terminal, start an HTTP server
```
$ npx live-server build/dist
```

This opens a browser window showing the current state of the project.

Rules and Processors

Each processor takes one file from src/ and outputs any number of files to build/dist/
Rules orchestrate processors to generate the site you want, such as this page.

Example

src/wrules.json is a rules file.

{
  "processors": {
    "**/": "index",
    "**": "copy"
  }
}

index and copy are processors.
Each processor is an npm package, to install e.g. index, run
```
$ npm install wp-index
```
The rules specifies which files to apply the processors to.

Processor	Applied to	Purpose
index	All folders	Generates `index.html`, listing all generated files.
copy	All files	Outputs a copy of the file to `build/dist/`

Processor Ordering

A processor does not declare which files it will output before running, so index needs to wait for all copy processors to complete before it can know which files are in build/dist/.

Giving us a dependency graph of

Webpan will figure this out on its own based on wrules.json.

Have a Guess

How do you think the dependency graph of this docs site looks like?

wrules.json
{
  "processors": {
    "/": [
        "vitepress-resources", // output CSS for docs
        "dir-toc"              // compute table of content
    ],
    "**/*.yml": "yaml-parse",  // parse .yml files
    "**.md": {
      "vitepress-doc": {},     // generate the final HTML file
      "unified": {             // convert markdown to HTML
        "stack": [
          "remark-parse",
          "remark-math",
          "remark-gfm",
          "remark-frontmatter"
          "remark-rehype",
          "rehype-external-links",
          "rehype-katex",
          "rehype-mermaid",
          "rehype-starry-night",
          "rehype-stringify"
        ]
      }
    }
  }
}
Click to reveal

What's next?

Join the Webpan Matrix room, since Webpan is under active development, I need a way to notify you about bugfixes and breaking changes.
To create a docs site with Webpan, proceed to the Vitepress-like Docs Guide.

Note: it is not actually Vitepress, it just looks like it.
To create your own processor, read the Processor Dev Guide.