feat: Create user guide

TODO:
- Watching: re-rendering descendants of removed pages
- Investigate bug: when watching, only the most recently rendered collection page will be rendered. If the page depending on a collection gets re-rendered, no collection pages will be rendered.
- Include page contexts when rendering descendant layouts; lowest layout should include chained parent contexts up to the first non-layout page (perhaps by making `page` a list of pages rather than just the immediate parent page?)
- Parallelise building
- `meta` context
- Finish user guide
- Document `main.rs`
- Create logo

site/guide/cli.vox

@@ -0,0 +1,5 @@
+---
+title = "Command-Line Interface"
+layout = "page"
+permalink = "none"
+---

site/guide/frontmatter.vox

@@ -0,0 +1,72 @@
+---
+title = "Frontmatter"
+layout = "page"
+permalink = "none"
+---
+
+{% markdown %}
+
+## Overview
+
+Frontmatter is the bit of TOML at the top of each page that specifies its metadata.
+It can be empty:
+{% raw %}
+```toml
+---
+---
+```
+{% endraw %}
+
+More often, it will likely not be:
+{% raw %}
+```toml
+---
+title = "DAG Visualisation & Watching"
+date = 2024-05-29T00:00:00+00:00
+layout = "post"
+permalink = "date"
+---
+```
+{% endraw %}
+
+## Date
+The `date` field is an [RFC 3339](https://tools.ietf.org/html/rfc3339) formatted date-time. This field is optional, and provides [many properties](https://emmyoh.github.io/vox/vox/date/struct.Date.html) to a page's `date` context, such as a page's `date.year`.
+
+## Layout
+The `layout` field specifies the layout of a page. Layouts, like other pages, require frontmatters and can have a layout too.
+
+## Permalink
+The `permalink` field is a string specifying the relative output location of a page. It can contain Liquid templating as well.
+There are a variety of shorthand options for the `permalink` field:
+{% raw %}
+
+| Shorthand  | Expanded                                                                                                                 |
+|------------|--------------------------------------------------------------------------------------------------------------------------|
+| `date`     | `/{{ page.collection }}/{{ page.date.year }}/{{ page.date.month }}/{{ page.date.day }}/{{ page.data.title }}.html`       |
+| `pretty`   | `/{{ page.collection }}/{{ page.date.year }}/{{ page.date.month }}/{{ page.date.day }}/{{ page.data.title }}/index.html` |
+| `ordinal`  | `/{{ page.collection }}/{{ page.date.year }}/{{ page.date.y_day }}/{{ page.data.title }}.html`                           |
+| `weekdate` | `/{{ page.collection }}/{{ page.date.year }}/W{{ page.date.week }}/{{ page.date.short_day }}/{{ page.data.title }}.html` |
+| `none`     | `/{{ page.collection }}/{{ page.data.title }}.html`                                                                      |
+
+{% endraw %}
+
+Upon rendering, this field is used to provide a page's `url` property.
+
+## Collections
+Suppose you're trying to build an index page for your blog. Its frontmatter will resemble something like:
+{% raw %}
+```toml
+---
+layout = "default"
+collections = ["posts"]
+permalink = "index.html"
+---
+```
+{% endraw %}
+
+The `collections` property indicates the page collections that this page depends on. A templating context is provided for each requested collection; in this example, there will be a `posts` context containing all pages in the `posts` collection.
+
+## Data
+All other fields fall under a page's `data` property.
+
+{% endmarkdown %}

site/guide/pipeline.vox

@@ -0,0 +1,47 @@
+---
+title = "Rendering Pipeline"
+layout = "page"
+permalink = "none"
+---
+
+{% markdown %}
+
+Vox's rendering pipeline centres around the [directed acyclic graph (DAG)](https://en.wikipedia.org/wiki/Directed_acyclic_graph) data structure.
+Builds begin with constructing a DAG where the children of pages are their layouts (a layout appearing in the DAG as often as it was used), and the parents of non-layout pages are the pages in the collections they depend on.
+As an illustrative example, the DAG of this site looks like the following:
+
+<object id="dag" data="http://localhost:80/dag.svg" style="overflow: scroll;max-height: 6rem;"></object>
+
+Then, pages are rendered recursively, with every root page (ie, every page without any parents) having its descendants rendered.
+
+When changes are made, rebuilding can be done selectively:
+1. A new DAG is constructed.
+2. The difference is obtained between the old and new DAGs.
+    - A page is considered modified if it has the same path, but its page is different (not comparing `url` or `rendered`).
+        - If a node's page is the same (excluding `url` or `rendered`), it is unchanged.
+    - A page is considered added if its path appears in the new DAG, but not the old one.
+    - A page is considered removed if its path appears in the old DAG, but not the new one.
+3. A list of pages needing rendering is computed.
+    - All pages that were modified need to be re-rendered.
+        - Their descendants in the new DAG also need to be rendered.
+    - All pages that were added need to be rendered.
+        - Their descendants in the new DAG also need to be rendered.
+    - All pages that were removed need their descendants in the old DAG rendered.
+4. The DAGs are merged.
+    - In the new DAG, all pages not needing rendering are replaced with their rendered counterparts from the old DAG.
+5. Pages are rendered.
+
+{% endmarkdown %}
+
+<script>
+window.addEventListener('load', function () {
+    var svg = document.getElementById("dag").getSVGDocument().rootElement;
+    var bbox = svg.getBBox();
+    var width = bbox.x + bbox.width + bbox.x;
+    var height = bbox.y + bbox.height + bbox.y;
+    var viewBox = "0 0 " + width + " " + height;
+    svg.setAttribute("width", width);
+    svg.setAttribute("height", height);
+    svg.setAttribute("viewBox", viewBox);
+})
+</script>

site/pages/guide_index.vox

@@ -3,5 +3,5 @@ layout = "default"
 collections = ["guide"]
 permalink = "guide/index.html"
 ---
-{% assign posts = guide | sort: "guide.date" %}
+{% assign posts = guide | sort: "guide.data.title" | reverse %}
 {% include index.voxs posts = posts minimal = true %}