docs(#418): Add building guide

packages/website/components/sidebar.js

@@ -1,7 +1,7 @@
 import { defineComponent, html } from '@tybalt/core';
 
 const PACKAGES = ['cli', 'core', 'eleventy-plugin', 'esbuild-plugin', 'eslint-plugin', 'parser', 'test-utils', 'validator'];
-const GUIDES = ['props', 'events', 'slots', 'new-website', 'styling-your-component', 'writing-tests', 'custom-validator', 'data-fetching'];
+const GUIDES = ['props', 'events', 'slots', 'new-website', 'styling-your-component', 'writing-tests', 'custom-validator', 'data-fetching', 'linting', 'building'];
 
 defineComponent({
     name: 'tybalt-sidebar',

packages/website/pages/building-guide.md

@@ -0,0 +1,74 @@
+---
+layout: layout.html
+title: Building
+---
+
+# Building
+
+## Using the cli
+
+The easiest way to get started building your project is to use the tybalt cli with npx.
+
+```shell
+npx @tybalt/cli build
+```
+
+However, if you will have many collaborators on a project, you'll likely want to standardize your build step, especially if you have to set flags or options when building your project.
+
+First, install the cli
+
+```shell
+yarn add -D @tybalt/cli
+```
+
+You can also add a new script to your package.json
+
+```json
+{
+    "scripts": {
+        "build": "tybalt build"
+    }
+}
+```
+
+Now you can run the build using `yarn run build`.
+
+You can see the [cli documentation](/pages/cli) for more details on how to use the cli to build your project, like how to specify entry points or the output directory.
+
+## Using the esbuild plugin
+
+For more complex projects, such as projects that want to use css preprocessors, you'll need to set up your build to use `@tybalt/esbuild-plugin` instead of using the cli.
+
+First, install the dependencies
+
+```shell
+yarn add -D esbuild @tybalt/esbuild-plugin
+```
+
+Then create a new file, such as `scripts/build.js`, to house your new build script
+
+```js
+import tybaltPlugin from '@tybalt/esbuild-plugin';
+import esbuild from 'esbuild';
+
+esbuild.build({
+    bundle: true,
+    entryPoints: ['path/to/my/entry-points/*.ts'],
+    outdir: 'path/to/my/output/directory/',
+    assetNames: 'assets/[name]-[hash]',
+    chunkNames: '[ext]/[name]-[hash]',
+    plugins: [tybaltPlugin()],
+});
+```
+
+And finally update your `package.json` to have an alias to call the new script
+
+```json
+{
+    "scripts": {
+        "build": "node scripts/build.js"
+    }
+}
+```
+
+You can see the [esbuild plugin documentation](/pages/esbuild-plugin) and in the [esbuild documentation](https://esbuild.github.io/getting-started/#build-scripts) for more details on building using the esbuild plugin with a build script.

packages/website/pages/linting-guide.md

@@ -1,6 +1,6 @@
 ---
 layout: layout.html
-title: Events
+title: Linting
 ---
 
 # Linting
@@ -13,10 +13,12 @@ The easiest way to get set up with linting your project is using the Tybalt cli.
 npx @tybalt/cli lint
 ```
 
-However, if you will have many collaborators on a project, you'll likely want to standardize your lint step. First, install the cli
+However, if you will have many collaborators on a project, you'll likely want to standardize your lint step, especially if you have to set flags or options when building your project.
+
+First, install the cli
 
 ```shell
-yarn install -D @tybalt/cli
+yarn add -D @tybalt/cli
 ```
 
 You can also add a new script to your package.json
@@ -29,9 +31,9 @@ You can also add a new script to your package.json
 }
 ```
 
-Now you can run the linter using `npm run lint`.
+Now you can run the linter using your package manager's script runner, for instance `yarn run lint` or `npm run lint`.
 
-You can see the [cli documentation](/pages/cli) for more details on setting up linting using the cli.
+You can see the [cli documentation](/pages/cli) for more details on setting up linting using the cli, like how to provide a pattern of files to lint.
 
 ## Using @tybalt/eslint-plugin
 
@@ -64,4 +66,4 @@ And finally add a script to your `package.json`
 
 And now you can run `npm run lint` to lint your code!
 
-You can see the [eslint plugin documentation](/pages/eslint-plugin) for more details on setting up linting using the eslint plugin.
+You can see the [eslint plugin documentation](/pages/eslint-plugin) and the [eslint documentation](https://eslint.org/docs/latest/use/configure/) for more details on setting up linting using the eslint plugin.