Initial code commit (#1)

First (rushed 😦) release of the Vegvisir website.

Reviewed-on: https://codeberg.org/vegvisir/website/pulls/1
Co-authored-by: vlw <victor@vlw.se>
Co-committed-by: vlw <victor@vlw.se>

README.md

@@ -1,2 +1,9 @@
-# website
+# Vegvisir Website
 
+Source code for the [Vegvisir website](https://vegvisir.vlw.se). The website is build from the ground up using the [Vegvisir](https://codeberg.org/vegvisir/vegvisir) web framework to highlight the framework's features.
+
+# Installation
+
+To run this website locally, follow the [installation instructions for the Vegvisir framework](https://vegvisir.vlw.se/docs/installation). After that, all you have to do is clone this repo and point Vegvisir to the cloned folder.
+
+No additional steps are required!

modules/docs/contribute.php

@@ -0,0 +1,12 @@
+<style><?= VV::css("modules/docs/contribute/style.css") ?></style>
+<section class="contribute">
+	<container>
+		<h1>Contribute? 💕</h1>
+		<p>Have you found a problem om this page? Would you like to help make this little project a bit better?</p>
+		<ul>
+			<li><a href="/"><button class="solid"><p>Quick-report a problem on this page</p></button></a></li>
+			<li><a href="/"><button class="shade"><p>Report a bug</p></button></a></li>
+			<li><a href="/"><button class="shade"><p>Learn how to contribute</p></button></a></li>
+		</ul>
+	</container>
+</section>

modules/docs/contribute/style.css

@@ -0,0 +1,29 @@
+section.contribute {
+	grid-area: contribute;
+	width: 100%;
+	background-color: rgba(var(--primer-color-deep), .1);
+}
+
+section.contribute container {
+	justify-content: center;
+	flex-direction: column;
+}
+
+section.contribute ul {
+	display: flex;
+	padding: var(--padding);
+	list-style: none;
+	gap: var(--padding);
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section.contribute ul {
+		flex-direction: column;
+	}
+
+	section.contribute button {
+		width: 100%;
+	}
+}

modules/docs/legend-js.php

@@ -0,0 +1,24 @@
+<ul>
+	<li><a href="/docs/API/JS/Navigation"><button><p><code>vegvisir.Navigation</code></p></button></a></li>
+	<ul>
+		<p>Instance variables</p>
+		<li><a href="/docs/API/JS/Navigation/abort"><button><p><code>Navigation.abort</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/options"><button><p><code>Navigation.options</code></p></button></a></li>
+	</ul>
+	<ul>
+		<p>Instance methods</p>
+		<li><a href="/docs/API/JS/Navigation/constructor"><button><p><code>Navigation.constructor</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/navigate"><button><p><code>Navigation.navigate()</code></p></button></a></li>
+	</ul>
+	<ul>
+		<p>Static variables</p>
+		<li><a href="/docs/API/JS/Navigation/MODE"><button><p><code>vegvisir.Navigation.MODE</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/TARGET"><button><p><code>vegvisir.Navigation.TARGET</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/EVENTS"><button><p><code>vegvisir.Navigation.EVENTS</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/POSITION"><button><p><code>vegvisir.Navigation.POSITION</code></p></button></a></li>
+	</ul>
+	<ul>
+		<p>Static methods</p>
+		<li><a href="/docs/API/JS/Navigation/bindElements"><button><p><code>vegvisir.Navigation.bindElements()</code></p></button></a></li>
+	</ul>
+</ul>

modules/docs/legend-php.php

@@ -0,0 +1,12 @@
+<ul>
+	<li><a href="/docs/API/PHP/VV"><button><p><code>VV</code></p></button></a></li>
+	<ul>
+		<p>Static methods</p>
+		<li><a href="/docs/API/PHP/VV/js"><button><p><code>VV::js()</code></p></button></a></li>
+		<li><a href="/docs/API/PHP/VV/css"><button><p><code>VV::css()</code></p></button></a></li>
+		<li><a href="/docs/API/PHP/VV/root"><button><p><code>VV::root()</code></p></button></a></li>
+		<li><a href="/docs/API/PHP/VV/embed"><button><p><code>VV::embed()</code></p></button></a></li>
+		<li><a href="/docs/API/PHP/VV/shell"><button><p><code>VV::shell()</code></p></button></a></li>
+		<li><a href="/docs/API/PHP/VV/include"><button><p><code>VV::include()</code></p></button></a></li>
+	</ul>
+</ul>

modules/snippet/Snippet.php

@@ -0,0 +1,33 @@
+<?php
+
+	enum Snippet: string {
+		// Path relative from root
+		private const REL_BASE_PATH = "modules/snippet/snippets/";
+
+		// Languages
+		case JAVASCRIPT = ".js";
+		case CSS        = ".css";
+		case PLAINTEXT  = ".txt";
+		case PHP        = ".php";
+
+		public static function put(string $name, self $lang): string {
+				// Create path relative from base with filename and language extension (from enum value)
+				$path = VV::root(self::REL_BASE_PATH . $name . $lang->value);
+
+				// Bail out if snippet can't be found
+				if (!is_file($path)) {
+						return "<pre><code class='language-plaintext'>!REF#</code></pre>";
+				}
+
+				// Use enum name in lowercase as highlight.js lanuage definer
+				$output = "<pre><code class='language-" . strtolower($lang->name) . "'>";
+				$output .= htmlspecialchars(file_get_contents($path));
+				$output .= "</code></pre>";
+
+				return $output;
+		}
+	}
+
+?>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/github-dark.min.css"/>
+<script type="module"><?= VV::js("modules/snippet/snippet.js") ?></script>

modules/snippet/snippet.js

@@ -0,0 +1,19 @@
+import hljs from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/highlight.min.js";
+
+import php from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/php.min.js";
+import css from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/css.min.js";
+import plaintext from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/plaintext.min.js";
+import javascript from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/es/languages/javascript.min.js";
+
+hljs.registerLanguage("php", php);
+hljs.registerLanguage("css", css);
+hljs.registerLanguage("plaintext", plaintext);
+hljs.registerLanguage("javascript", javascript);
+
+// Initialize syntax highlighting for all code snippets on this page
+const highlightElements = () => {
+	[...document.querySelectorAll("pre code")].forEach(element => hljs.highlightElement(element));
+}
+
+document.querySelector("[vv-shell-id='6ccb0465']").addEventListener(vegvisir.Navigation.EVENTS.FINISHED, () => highlightElements);
+highlightElements();

modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description-additional.js

@@ -0,0 +1,3 @@
+{
+	target: HTMLElement
+}

modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/description.js

@@ -0,0 +1,4 @@
+static Navigation.EVENTS = {
+	STARTED: "navstarted",
+	FINISHED: "navfinished"
+}

modules/snippet/snippets/docs/API/JS/Navigation/EVENTS/example-0-0.js

@@ -0,0 +1,3 @@
+document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, (event) => {
+	console.log(event.detail.target);
+});

modules/snippet/snippets/docs/API/JS/Navigation/MODE/description.js

@@ -0,0 +1,4 @@
+static Navigation.MODE = {
+	REPLACE: "replace",
+	INSERT: "insert"
+}

modules/snippet/snippets/docs/API/JS/Navigation/POSITION/description.js

@@ -0,0 +1,6 @@
+static Navigation.POSITION = {
+	AFTEREND: "afterend",
+	BEFOREEND: "beforeend",
+	AFTERBEGIN: "afterbegin",
+	BEFOREBEGIN: "beforebegin"
+}

modules/snippet/snippets/docs/API/JS/Navigation/TARGET/description.js

@@ -0,0 +1,6 @@
+static Navigation.TARGET = {
+	TOP: "_top",
+	SELF: "_self",
+	BLANK: "_blank",
+	PARENT: "_parent"
+};

modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-0.php

@@ -0,0 +1 @@
+<a href="/some-page" target="_self">Click here to replace this button with the contents of /some-page</a>

modules/snippet/snippets/docs/API/JS/Navigation/TARGET/example-0-1.php

@@ -0,0 +1,4 @@
+<div vv-loading="false" vv-page="/">
+	<p>...</p>
+	<a href="/some-page" target="_parent">Click here to replace this button and its siblings with /some-page</a>	
+</a>

modules/snippet/snippets/docs/API/JS/Navigation/abort/description.js

@@ -0,0 +1 @@
+Navigation.abort: AbortController

modules/snippet/snippets/docs/API/JS/Navigation/bindElements/description.js

@@ -0,0 +1 @@
+static Navigation.bindElements(): void

modules/snippet/snippets/docs/API/JS/Navigation/bindElements/example-0-0.js

@@ -0,0 +1,5 @@
+// The programatically appended anchor tag will not have Vegvisir event listeners on it yet
+document.body.appendChild(document.createElement("a"));
+
+// It will have Vegvisir event listeners after this method is called
+vegvisir.Navigation.bindElements();

modules/snippet/snippets/docs/API/JS/Navigation/constructor/description.js

@@ -0,0 +1,4 @@
+new globalThis.vegvisir.Navigation(
+	URL|String url = window.location,
+	Object options = vegvisir.Navigation.options
+): Navigation

modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-0.js

@@ -0,0 +1,2 @@
+// Pathname string with leading slash
+const nav = new vegvisir.Navigation("/some-page");

modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-1.js

@@ -0,0 +1,2 @@
+// Pathname string without leading slash and a search parameter
+const nav = new vegvisir.Navigation("some-page?foo=bar");

modules/snippet/snippets/docs/API/JS/Navigation/constructor/example-0-2.js

@@ -0,0 +1,6 @@
+// URL object with a pathname and search parameter
+const url = new URL(window.location);
+url.pathname = "/some-page";
+url.searchParams.set("foo", "bar");
+
+const nav = new vegvisir.Navigation(url);

modules/snippet/snippets/docs/API/JS/Navigation/navigate/0.js

@@ -0,0 +1,4 @@
+const nav = new vegvisir.Navigation("/some-page");
+
+// Will navigate the top shell to /some-page
+nav.navigate();

modules/snippet/snippets/docs/API/JS/Navigation/navigate/1.js

@@ -0,0 +1,5 @@
+const target = document.querySelector("#target");
+const nav = new vegvisir.Navigation("/some-page");
+
+// Will replace the contents of an element with id #target with the contents of /some-page
+nav.navigate(target);

modules/snippet/snippets/docs/API/JS/Navigation/navigate/2.js

@@ -0,0 +1,8 @@
+const target = document.querySelector("#target");
+const nav = new vegvisir.Navigation("/some-page");
+
+// Will place the contents of /some-page after the target element as a sibling
+nav.navigate(target, vegvisir.Navigation.POSITION.AFTEREND);
+
+// Tip: You can also pass an insertAdjacentElement position string directly
+nav.navigate(target, "afterend");

modules/snippet/snippets/docs/API/JS/Navigation/navigate/description.js

@@ -0,0 +1,5 @@
+Navigation.navigate(
+	target: HTMLELement = Navigation.#rootShellElement
+	position: Navigation.POSITION = Navigation.POSITION.BEFOREEND,
+	mode: Navigation.MODE = Navigation.MODE.REPLACE
+): void 

modules/snippet/snippets/docs/API/JS/Navigation/navigate/example-0-0.js

@@ -0,0 +1,6 @@
+const target = document.querySelector("#update-this-element");
+const button = document.querySelector("#click-me-to-refresh");
+
+const nav = new vegvisir.Navigation("/page-with-new-content");
+
+button.addEventListener("click", () => nav.navigate(target));

modules/snippet/snippets/docs/API/JS/Navigation/options/description.js

@@ -0,0 +1,3 @@
+{
+	pushHistory: boolean
+}

modules/snippet/snippets/docs/API/PHP/VV/css/0.php

@@ -0,0 +1,4 @@
+<style><?= VV::css("public/asssets/css/style.css") ?></style>
+
+// Without file extension (appended automatically)
+<style><?= VV::css("public/asssets/css/style.css") ?></style>

modules/snippet/snippets/docs/API/PHP/VV/css/1.php

@@ -0,0 +1 @@
+<style><?= VV::css("/var/www/other-project/.../style.css", true) ?></style>

modules/snippet/snippets/docs/API/PHP/VV/css/2.php

@@ -0,0 +1 @@
+"const hello = ()=>console.log('Hello world');hello()"

modules/snippet/snippets/docs/API/PHP/VV/css/description.php

@@ -0,0 +1,4 @@
+VV::css(
+	string $pathname,
+	bool $relative = true
+): string

modules/snippet/snippets/docs/API/PHP/VV/css/example-1-0.css

@@ -0,0 +1,6 @@
+/* File: /var/www/my-website/public/assets/css/style.css */
+
+p {
+	color: blue;
+	background-color: red;
+}

modules/snippet/snippets/docs/API/PHP/VV/css/example-1-1.php

@@ -0,0 +1,4 @@
+// File: /var/www/my-website/public/index.php
+
+<style><?= VV::js("public/assets/css/style.css") ?></style>
+<p>Some content...</p>

modules/snippet/snippets/docs/API/PHP/VV/embed/0.php

@@ -0,0 +1,4 @@
+<style><?= VV::css("public/asssets/css/style.css") ?></style>
+
+// Without file extension (appended automatically)
+<style><?= VV::css("public/asssets/css/style.css") ?></style>

modules/snippet/snippets/docs/API/PHP/VV/embed/1.php

@@ -0,0 +1 @@
+<style><?= VV::css("/var/www/other-project/.../style.css", true) ?></style>

modules/snippet/snippets/docs/API/PHP/VV/embed/2.php

@@ -0,0 +1 @@
+"const hello = ()=>console.log('Hello world');hello()"

modules/snippet/snippets/docs/API/PHP/VV/embed/description.php

@@ -0,0 +1,4 @@
+VV::embed(
+	string $pathname,
+	bool $relative = true
+): string

modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-0.php

@@ -0,0 +1,3 @@
+/* File: /var/www/my-website/public/assets/media/logo.svg */
+
+<svg viewBox="0 0 0 0" xmlns="http://www.w3.org/2000/svg">...</svg>

modules/snippet/snippets/docs/API/PHP/VV/embed/example-1-1.php

@@ -0,0 +1,5 @@
+// File: /var/www/my-website/shells/document.php
+
+<header>
+	<?= VV::embed("public/assets/media/logo.svg") ?>
+</header>

modules/snippet/snippets/docs/API/PHP/VV/include/0.php

@@ -0,0 +1,4 @@
+<?= VV::include("public/modules/banner.php") ?>
+
+// Without file extension (appended automatically)
+<?= VV::include("public/modules/banner") ?>

modules/snippet/snippets/docs/API/PHP/VV/include/1.php

@@ -0,0 +1 @@
+<?= VV::include("/var/www/other-project/.../banner.php", true) ?>

modules/snippet/snippets/docs/API/PHP/VV/include/2.php

@@ -0,0 +1 @@
+"const hello = ()=>console.log('Hello world');hello()"

modules/snippet/snippets/docs/API/PHP/VV/include/description.php

@@ -0,0 +1,4 @@
+VV::include(
+	string $pathname,
+	bool $relative = true
+): never

modules/snippet/snippets/docs/API/PHP/VV/include/example-1-0.php

@@ -0,0 +1,5 @@
+/* File: /var/www/my-website/modules/banner.php */
+
+<banner>
+	<p>Important text!</p>
+</banner>

modules/snippet/snippets/docs/API/PHP/VV/include/example-1-1.php

@@ -0,0 +1,6 @@
+// File: /var/www/my-website/public/index.php
+
+<header>
+	<p>Some header content</p>
+	<?= VV::include("modules/banner") ?>
+</header>

modules/snippet/snippets/docs/API/PHP/VV/js/0.php

@@ -0,0 +1,4 @@
+<script><?= VV::js("public/asssets/js/script.js") ?></script>
+
+// Without file extension (appended automatically)
+<script><?= VV::js("public/asssets/js/script") ?></script>

modules/snippet/snippets/docs/API/PHP/VV/js/1.php

@@ -0,0 +1 @@
+<script><?= VV::js("/var/www/other-project/.../script.js", true) ?></script>

modules/snippet/snippets/docs/API/PHP/VV/js/2.php

@@ -0,0 +1 @@
+"const hello = ()=>console.log('Hello world');hello()"

modules/snippet/snippets/docs/API/PHP/VV/js/description.php

@@ -0,0 +1,4 @@
+VV::js(
+	string $pathname,
+	bool $relative = true
+): string

modules/snippet/snippets/docs/API/PHP/VV/js/example-1-0.js

@@ -0,0 +1,5 @@
+// File: /var/www/my-website/public/assets/js/script.js
+
+const hello = () => {
+	console.log("Hello world!");
+}

modules/snippet/snippets/docs/API/PHP/VV/js/example-1-1.php

@@ -0,0 +1,4 @@
+// File: /var/www/my-website/public/index.php
+
+<p>Some content...</p>
+<script><?= VV::js("public/assets/js/script.js") ?></script>

modules/snippet/snippets/docs/API/PHP/VV/root/0.php

@@ -0,0 +1 @@
+VV::root("/src/databases");

modules/snippet/snippets/docs/API/PHP/VV/root/1.txt

@@ -0,0 +1 @@
+"/var/www/my-website/src/databases"

modules/snippet/snippets/docs/API/PHP/VV/root/2.php

@@ -0,0 +1,9 @@
+// File: /var/www/my-website/src/MyClass.php
+
+<?php
+
+	namespace MyWebsite\Src;
+
+	class MyClass {
+		// ...
+	}

modules/snippet/snippets/docs/API/PHP/VV/root/3.php

@@ -0,0 +1,11 @@
+// File: /var/www/my-website/public/index.php
+
+<?php
+
+	use MyWebsite\Src\MyClass;
+
+	// Leading slash is optional!
+	require_once VV::root("/src/MyClass.php");
+
+?>
+<p>A normal Vegvisir page whch has access to MyClass</p>

modules/snippet/snippets/docs/API/PHP/VV/root/description.php

@@ -0,0 +1,3 @@
+VV::root(
+	string $pathname = ""
+): string

modules/snippet/snippets/docs/API/PHP/VV/shell/0.php

@@ -0,0 +1 @@
+<?= VV::shell("shells/docs") ?>

modules/snippet/snippets/docs/API/PHP/VV/shell/description.php

@@ -0,0 +1,3 @@
+VV::shell(
+	string $pathname = ""
+): never

modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-0.php

@@ -0,0 +1,4 @@
+// File: /var/www/my-website/public/some-page.php
+
+<p>Inner content</p>
+<?= VV::shell("shells/outer-content") ?>

modules/snippet/snippets/docs/API/PHP/VV/shell/example-0-1.php

@@ -0,0 +1,5 @@
+// File: /var/www/my-website/shells/some-shell.php
+
+<p>This paragraph will be above the wrapped content</p>
+<vv-shell></vv-shell>
+<p>This parahraph will be below the wrapped content</p>

modules/snippet/snippets/docs/installation/0.txt

@@ -0,0 +1 @@
+git clone https://codeberg.org/vegvisir/vegvisir.git --depth 1

modules/snippet/snippets/docs/installation/1.txt

@@ -0,0 +1 @@
+composer install --optimize-autoloader

modules/snippet/snippets/docs/installation/2.txt

@@ -0,0 +1,16 @@
+# You might need to alter this block to suit your NGINX configuration
+# The important thing is that all requests should be routed to /public/index.php
+
+server {
+	listen 80;
+	server_name _;
+
+	root /var/www/vegvisir/public;
+
+	location / {
+		try_files /index.php =503;
+		
+		include snippets/fastcgi-php.conf;
+		fastcgi_pass unix:/run/php/php8.3-fpm.sock;
+	}
+}

modules/snippet/snippets/docs/installation/3.txt

@@ -0,0 +1 @@
+mkdir /var/www/my-website

modules/snippet/snippets/docs/installation/4.txt

@@ -0,0 +1 @@
+cp -p /var/www/vegvisir/.env.example.ini /var/www/vegvisir/.env.ini

modules/snippet/snippets/docs/installation/5.txt

@@ -0,0 +1,10 @@
+# /var/www/vegvisir/.env.ini
+
+; +--------------------+
+; | Base configuration |
+; +--------------------+
+
+; An absolute path to the root directory of your website
+root_path = "/var/www/my-website"
+
+...

public/assets/css/document.css

@@ -0,0 +1,267 @@
+:root {
+	--primer-color-deep: 0, 128, 255;
+	--primer-color-light: 135, 255, 255;
+	--color-deep: rgba(var(--primer-color-deep));
+	--color-light: rgba(var(--primer-color-light));
+
+	--border-style-width: 1px;
+	--border-style: solid var(--border-style-width) rgba(var(--primer-color-deep), .2);
+
+    --padding: 10px;
+	--running-size: 70px;
+	--max-width: 1400px;
+}
+
+/* # Cornerstones */
+
+* {
+    margin: 0;
+    color: inherit;
+	font-size: inherit;
+    box-sizing: border-box;
+	font-family: monospace;
+}
+
+body {
+	font-size: 15px;
+	overflow-x: hidden;
+    overscroll-behavior: none;
+}
+
+body.menuOpen {
+	overflow: hidden;
+}
+
+a {
+	color: inherit;
+    display: contents;
+    text-decoration: none;
+}
+
+/* # Components */
+
+:is(h1, h2, h3, p, li) > a {
+	--underline-tickness: 3px;
+
+    display: initial;
+    text-decoration: underline;
+    text-decoration-color: var(--color-accent);
+	text-underline-offset: var(--underline-tickness);
+    text-decoration-thickness: var(--underline-tickness);
+}
+
+@media (hover: hover) {
+	:is(h1, h2, h3, p, li) > a:hover {
+		text-decoration-color: var(--color-deep);
+	}
+}
+
+h1 {
+	font-size: 30px;
+	color: var(--color-accent);
+}
+
+h2 {
+	font-size: 25px;
+}
+
+h3 {
+	font-size: 18px;
+}
+
+/* ## Container */
+
+container {
+	margin: auto;
+	height: 100%;
+	display: flex;
+	width: clamp(200px, 100%, 80vw);
+	max-width: var(--max-width);
+	align-items: center;
+	gap: var(--padding);
+	padding: var(--padding) 0;
+}
+
+container.split {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+}
+
+container.split.reverse div:last-child {
+	order: -1;
+}
+
+container.split > div {
+	display: flex;
+	flex-direction: column;
+	align-items: baseline;
+	gap: var(--padding);
+}
+
+/* ## Button */
+
+button {
+	border: unset;
+	fill: black;
+	cursor: pointer;
+	padding: 10px 15px;
+	border-radius: 4px;
+	background-color: rgba(0, 0, 0, 0);
+	border: solid var(--border-style-width) transparent;
+}
+
+button.solid {
+	fill: white;
+	color: white;
+	background-color: var(--color-deep);
+}
+
+button.shade {
+	background-color: rgba(0, 0, 0, .05);
+}
+
+@media (hover: hover) {
+	button:hover {
+		background-color: rgba(var(--primer-color-light), .3);
+	}
+
+	button.solid:hover {
+		color: var(--color-light);
+		background-color: var(--color-deep);
+	}
+}
+
+button svg {
+	fill: inherit;
+	width: 1em;
+}
+
+/* # Content */
+
+/* ## Runners */
+
+:is(header, footer) ul {
+	display: flex;
+	padding-left: 0;
+	list-style: none;
+	gap: var(--padding);
+}
+
+:is(header, footer) ul:last-of-type {
+	margin-left: auto;
+}
+
+:is(header, footer) container > button {
+	display: none;
+	margin-left: auto;
+}
+
+/* ### Header */
+
+header {
+	--border-width: 2px;
+
+	top: 0px;
+	position: sticky;
+	background-color: white;
+	height: calc(var(--running-size) + var(--border-style-width));
+	border-bottom: var(--border-style);
+	z-index: 1000;
+}
+
+header .logo {
+	height: 40px;
+	padding: 5px;
+	border-radius: 4px;
+	background-color: var(--color-deep);
+}
+
+[vv-top-page="/"] header:not(.transparent) a[href="/"] button,
+[vv-top-page="/help"] header a[href="/help"] button,
+[vv-top-page^="/docs"] header a[href="/docs"] button,
+[vv-top-page="/demos"] header a[href="/demos"] button,
+[vv-top-page="/why"] header a[href="/why"] button {
+	font-weight: bold;
+	color: var(--color-deep);
+	border: var(--border-style);
+}
+
+/* ### Footer */
+
+footer {
+	padding: var(--padding);
+	color: var(--color-light);
+	background-color: var(--color-deep);
+}
+
+/* ### Menu */
+
+menu {
+	display: none;
+	position: fixed;
+	top: var(--running-size);
+	left: 0;
+	width: 100svw;
+	padding: calc(var(--padding) * 2);
+	height: calc(100svh - var(--running-size));
+	background-color: var(--color-deep);
+}
+
+body.menuOpen menu {
+	display: initial;
+}
+
+menu ul {
+	list-style: none;
+	padding-left: unset;
+}
+
+menu button {
+	color: white;
+	width: 100%;
+	margin-top: var(--padding);
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	container {
+		min-width: unset;
+		width: 100%;
+		padding: calc(var(--padding) * 2);
+	}
+
+	container.split {
+		display: flex;
+		flex-direction: column;
+	}
+
+	container.split.reverse {
+		flex-direction: column-reverse;
+	}
+
+	header ul button.solid,
+	:is(header, footer) ul:not(:last-of-type) {
+		display: none;
+	}
+
+	:is(header, footer) container > button {
+		display: initial;
+	}
+
+	footer :is(container, ul) {
+		flex-direction: column;
+	}
+
+	footer button,
+	footer ul:last-of-type {
+		width: 100%;
+		margin-left: unset;
+	}
+}
+
+@media (min-width: 950px) {
+	body.menuOpen menu {
+		display: none;
+	}
+}

public/assets/css/pages/demos.css

@@ -0,0 +1,26 @@
+/* # WIP */
+
+section#wip {
+	background-color: rgba(var(--primer-color-light), .3);
+}
+
+section#wip container {
+	flex-direction: column;
+	gap: var(--padding);
+}
+
+/* # Websites */
+
+section#websites container {
+	flex-direction: column;
+}
+
+section#websites ul {
+	list-style: none;
+	padding-left: unset;
+}
+
+section#websites button {
+	margin-top: var(--padding);
+	width: 100%;
+}

public/assets/css/pages/index.css

@@ -0,0 +1,188 @@
+:root {
+	--wavelength: 20vw;
+}
+
+body {
+	background-color: var(--color-deep);
+}
+
+section h2 {
+	color: white;
+	background-color: black;
+}
+
+header.transparent {
+	color: white;
+	background-color: transparent;
+	border-color: rgba(255, 255, 255, .1);
+}
+
+header.transparent .logo {
+	fill: var(--color-deep);
+}
+
+header.transparent button {
+	fill: white;
+}
+
+header.transparent button.solid {
+	fill: var(--color-deep);
+	color: var(--color-deep);
+	background-color: white;
+}
+
+/* # Sections */
+
+/* ## Divider */
+
+section.divider {
+    width: 100%;
+    overflow: hidden;
+    line-height: 0;
+	background-color: white;
+}
+
+section.divider svg {
+    position: relative;
+    display: block;
+    width: calc(148% + 1.3px);
+    height: 79px;
+}
+
+section.divider .shape-fill {
+    fill: var(--color-deep);
+}
+
+/* ## Intro */
+
+section#intro {
+	display: grid;
+	color: white;
+	min-height: 300px;
+}
+
+section#intro h1 {
+	font-size: 50px;
+}
+
+section#intro div {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: baseline;
+}
+
+/* ### Waves */
+
+section.waves {
+	--easing: .2;
+
+	position: relative;
+	height: 300px;
+	user-select: none;
+	pointer-events: none;
+	z-index: -1;
+}
+
+section.waves img {
+	margin: auto;
+	margin-top: -14%;
+	width: 50%;
+	transform-origin: 50% 100%;
+	animation: ship 6s alternate infinite ease;
+}
+
+@keyframes ship {
+	0% {
+		transform: translate(0, -7px) rotate(-7deg);
+	}
+
+	100% {
+		transform: translate(5px, 10px) rotate(4deg);
+	}
+}
+
+section.waves .wave {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	transform: scale(1.5);
+	bottom: 70px;
+	animation: wave 7s alternate infinite cubic-bezier(var(--easing), 0, calc(1 - var(--easing)), 1);
+}
+
+@keyframes wave {
+	to { transform: scale(1.5) translateX(100px); }
+}
+
+section.waves + section {
+	background-color: #4ca6ff;
+}
+
+section.waves .wave:first-child {
+	background-image: url("/assets/media/waves/0.svg");
+}
+
+section.waves .wave:last-child {
+	animation-duration: 5s;
+	background-image: url("/assets/media/waves/1.svg");
+}
+
+/* ## Softnav */
+
+section#softnav {
+	color: white;
+	background: linear-gradient(0deg, rgba(0,128,255,1) 0%, rgba(76,166,255,1) 100%);
+}
+
+/* ## BYOE */
+
+section.info {
+	background-color: white;
+}
+
+section.info container {
+	min-height: 400px;
+}
+
+section.info svg {
+	justify-self: center;
+	width: 400px;
+}
+
+/* ## Lead */
+
+section#lead h1 {
+	color: white;
+	text-align: center;
+	font-weight: normal;
+}
+
+/* ## Free */
+
+section#free {
+	box-shadow: inset 0 0 20px 20px white, inset 0 0 140px 20px white;
+	background-color: rgba(255, 255, 255, .9);
+	background-blend-mode: screen;
+	background-image: url("/assets/media/gnu.png");
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	section.waves {
+		display: none;
+	}
+
+	section.info container {
+		min-height: unset;
+	}
+
+	section.info svg {
+		width: 300px;
+	}
+
+	section#lead h1 {
+		font-size: 20px;
+	}
+}

public/assets/css/pages/why.css

@@ -0,0 +1,15 @@
+/* # Sections */
+
+/* ## Free */
+
+section#freedom {
+	background-position: 50% 50%;
+	background-size: 400px;
+	background-color: var(--color-deep);
+	background-blend-mode: lighten;
+	background-image: url("/assets/media/gnu.png");
+}
+
+section#freedom svg {
+	filter: drop-shadow(0 0 40px rgba(255, 255, 255, .3));
+}

public/assets/css/shells/docs.css

@@ -0,0 +1,274 @@
+body {
+	background-color: rgba(var(--primer-color-deep), .01);
+}
+
+[vv-shell-id="/"] {
+	display: grid;
+	min-height: calc(100svh - var(--running-size) - var(--border-style-width));
+	grid-template-areas:
+		"aside main"
+		"contribute contribute"
+	;
+	grid-template-columns: 400px 1fr;
+	grid-template-rows: 1fr 200px;
+	gap: calc(var(--padding) * 2);
+	margin: auto;
+}
+
+[vv-shell-id="6ccb0465"] {
+	grid-area: main;
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--padding) * 2);
+	margin-top: calc(var(--padding) * 2);
+	padding-right: calc(var(--padding) * 2);
+}
+
+hr {
+	border: unset;
+	border-top: var(--border-style);
+}
+
+/* # Aside */
+
+aside {
+	grid-area: aside;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: var(--padding) 0;
+	padding-left: calc(var(--padding) * 2);
+	border-right: var(--border-style);
+}
+
+aside button {
+	width: calc(100% - (var(--padding) * 2));
+	text-align: left;
+}
+
+aside hr {
+	margin: calc(var(--padding) * 2) 0;
+}
+
+aside ul {
+	list-style: none;
+	padding-left: 0;
+}
+
+aside ul ul {
+	padding-left: var(--padding);
+}
+
+aside ul > p {
+	margin: var(--padding) 0;
+}
+
+/* ---- */
+
+aside .cc + ul {
+	display: none;
+}
+
+aside .cc.php button {
+	background-color: rgba(122, 134, 184, .2);
+}
+
+aside .cc.js button {
+	background-color: rgba(240, 219, 79, .3);
+}
+
+[vv-page^="/docs/API/PHP"] aside .cc.php + ul,
+[vv-page^="/docs/API/JS"] aside .cc.js + ul {
+	display: initial;
+}
+
+/* # Collapsible */
+
+details {
+	border: 1px solid #aaa;
+	border-radius: 4px;
+	padding: 0.5em 0.5em 0;
+}
+  
+summary {
+	margin: -0.5em -0.5em 0;
+	padding: 0.5em;
+	cursor: pointer;
+}
+  
+details[open] {
+	width: 100%;
+	padding: 0.5em;
+}
+  
+details[open] summary {
+	border-bottom: 1px solid #aaa;
+	margin-bottom: 0.5em;
+}
+
+/* # Sections */
+
+/* ## Inset */
+
+section.inset {
+	padding-left: var(--padding);
+}
+
+/* ## Markdown */
+
+section.md container {
+	padding-top: 0;
+	flex-direction: column;
+	align-items: baseline;
+}
+
+section.md :is(h1, h2, h3) {
+	cursor: pointer;
+}
+
+section.md h1::before {
+	content: "#";
+	opacity: 1;
+	padding: 0 10px;
+	margin-right: .5em;
+	color: var(--color-light);
+	background-color: var(--color-deep);
+}
+
+section.md h2::before {
+	content: "#";
+	opacity: 1;
+	margin-right: .5em;
+	color: var(--color-deep);
+}
+
+/* ## Code inline */
+
+:is(h1, h2, h3, a, p, quote) > code {
+	padding: 5px;
+	border-radius: 6px;
+	white-space: nowrap;
+	font-family: 'Courier New', monospace;
+	background-color: rgba(0, 0, 0, .05);
+}
+
+code.tag::before {
+	content: "<";
+}
+
+code.tag::after {
+	content: ">";
+}
+
+/* ## Code block */
+
+section.md pre {
+	width: 100%;
+	max-width: calc(100svw - (var(--padding) * 4));
+	tab-size: 3;
+	overflow: scroll;
+}
+
+section.md pre code {
+	--copy-size: 37px;
+	--copy-inset: 5px;
+	--copy-border-size: 1px;
+
+	overflow: scroll;
+	position: relative;
+	padding-right: calc(var(--copy-size) + (var(--copy-inset) * 2) + var(--padding));
+	border-radius: 6px;
+}
+
+section.md pre code::after {
+	content: "📋";
+	display: grid;
+	font-size: 20px;
+	cursor: pointer;
+	position: absolute;
+	border-radius: 4px;
+	align-items: center;
+	justify-items: center;
+	top: var(--copy-inset);
+	width: var(--copy-size);
+	right: var(--copy-inset);
+	height: var(--copy-size);
+	border: solid 1px rgba(255, 255, 255, .1);
+	background-color: rgba(255, 255, 255, .1);
+}
+
+@media (hover: hover) {
+	section.md h1:hover::before {
+		background-color: black;
+	}
+
+	section.md :is(h1, h2, h3):hover::after {
+		content: " <- click to copy link";
+		font-size: .5em;
+		opacity: .5;
+	}
+
+	section.md pre code:hover::after {
+		border: solid 1px rgba(255, 255, 255, .3);
+		background-color: rgba(255, 255, 255, .2);
+	}
+}
+
+/* ## Menu */
+
+section.menu {
+	display: none;
+	fill: white;
+	color: white;
+	grid-area: menu;
+	cursor: pointer;
+	background-color: rgba(var(--primer-color-deep), .8);
+}
+
+section.menu container svg {
+	width: 1em;
+}
+
+section.menu p::before {
+	content: "Open ";
+}
+
+/* # Size queries */
+
+@media (max-width: 950px) {
+	[vv-shell-id="/"] {
+		grid-template-areas:
+			"menu"
+			"main"
+			"contribute"
+		;
+		grid-template-columns: 1fr;
+		grid-template-rows: var(--running-size) 1fr 300px;
+	}
+
+	body.docsMenuOpen [vv-shell-id="/"] {
+		grid-template-areas:
+			"menu"
+			"aside"
+		;
+		grid-template-rows: var(--running-size) 1fr;
+	}
+
+	body.docsMenuOpen [vv-shell-id="6ccb0465"],
+	body.docsMenuOpen section.contribute,
+	body:not(.docsMenuOpen) aside {
+		display: none;
+	}
+
+	/* ---- */
+	
+	[vv-shell-id="6ccb0465"] {
+		margin-top: unset;
+	}
+
+	/* ---- */
+
+	section.menu {
+		display: initial;
+	}
+}

public/assets/js/pages/index.js

@@ -0,0 +1,10 @@
+const headerElement = document.querySelector("header");
+
+const updateHeader = () => {
+	document.documentElement.scrollTop > 0
+		? headerElement.classList.remove("transparent")
+		: headerElement.classList.add("transparent")
+}
+
+window.addEventListener("scroll", updateHeader);
+updateHeader();

public/assets/js/shells/docs.js

@@ -0,0 +1,9 @@
+// Handle docs menu open/close
+{
+	const CLASSNAME_DOCS_MENU_OPEN = "docsMenuOpen";
+
+	// Toggle docs menu on button click
+	document.querySelector("section.menu").addEventListener("click", () => document.body.classList.toggle(CLASSNAME_DOCS_MENU_OPEN));
+	// Hide docs menu on navigation
+	document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, () => document.body.classList.remove(CLASSNAME_DOCS_MENU_OPEN));
+}

public/assets/js/shells/document.js

@@ -0,0 +1,9 @@
+// Handle global menu open/close events
+{
+	const CLASSNAME_MENU_OPEN = "menuOpen";
+	
+	// Toggle menu on menu button click
+	document.querySelector("header .menuToggle").addEventListener("click", () => document.body.classList.toggle(CLASSNAME_MENU_OPEN));
+	// Close menu on navigation
+	document.addEventListener(vegvisir.Navigation.EVENTS.STARTED, () => document.body.classList.remove(CLASSNAME_MENU_OPEN));
+}

public/assets/media/icons/codeberg.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 85.495 82.004" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M11.955.49A12 12 0 0 0 0 12.49a12 12 0 0 0 1.832 6.373L11.838 5.928a.187.14 0 0 1 .324 0l10.006 12.935A12 12 0 0 0 24 12.49a12 12 0 0 0-12-12 12 12 0 0 0-.045 0zm.375 6.467 4.416 16.553a12 12 0 0 0 5.137-4.213z" transform="matrix(3.56228 0 0 3.56228 0 -1.745)"/></svg>

public/assets/media/icons/email.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 5.292 4.233" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Zm320-280L160-640v400h640v-400zm0-80 320-200H160ZM160-640v-80 480z" transform="matrix(.00661 0 0 .00661 -.53 5.292)"/></svg>

public/assets/media/icons/matrix.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 8.467 8.467" version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-71.169 -138.242)"><g transform="matrix(.26458 0 0 .26458 71.169 138.242)"><path d="M30 2v28h-3v2h5V0h-5v2z"/><path d="M9.952 10.594v1.544h.044a4.461 4.461 0 0 1 1.487-1.368c.58-.323 1.245-.485 1.993-.485.72 0 1.377.14 1.972.42.595.279 1.047.771 1.355 1.477.338-.5.796-.941 1.377-1.323.58-.383 1.266-.574 2.06-.574.602 0 1.16.074 1.674.22.514.148.954.383 1.322.707.366.323.653.746.859 1.268.205.522.308 1.15.308 1.887V22h-3.127v-6.464c0-.383-.016-.743-.044-1.082a2.302 2.302 0 0 0-.242-.882 1.473 1.473 0 0 0-.584-.596c-.257-.146-.606-.22-1.047-.22-.44 0-.796.085-1.068.253-.272.17-.485.39-.64.662-.159.287-.263.602-.307.927a7.074 7.074 0 0 0-.078 1.048V22h-3.128v-6.398c0-.338-.008-.673-.022-1.004a2.825 2.825 0 0 0-.188-.916 1.411 1.411 0 0 0-.55-.673c-.258-.168-.636-.253-1.135-.253a2.328 2.328 0 0 0-.584.1 1.94 1.94 0 0 0-.705.374c-.228.184-.422.449-.584.794-.16.346-.242.798-.242 1.357V22H7V10.59Z"/><path d="M2 2v28h3v2H0V0h5v2z"/></g></g></svg>

public/assets/media/icons/menu.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 4.762 3.175" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M120-240v-80h720v80zm0-200v-80h720v80zm0-200v-80h720v80z" transform="matrix(.00661 0 0 .00661 -.794 4.763)"/></svg>

public/assets/media/logo.svg

@@ -0,0 +1 @@
+<svg class="logo" viewBox="0 0 42.911 41.957" xmlns="http://www.w3.org/2000/svg"><g><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/></g><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/></g></svg>

public/assets/media/replace.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 180.663 62.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:#fff;fill-opacity:1;stroke:none;stroke-width:3.96084;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M147.956 81.213h69.902a5 5 45 0 1 5 5v60.775a5 5 135 0 1-5 5h-69.902a5 5 45 0 1-5-5V86.213a5 5 135 0 1 5-5z" transform="matrix(.53267 0 0 .53614 61.954 -25.021)"/><path style="opacity:1;fill:#fff;fill-opacity:.3;stroke:none;stroke-width:2.54323;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M137.88 104.883h66.71a4 4 45 0 1 4 4v52.39a4 4 135 0 1-4 4h-66.71a4 4 45 0 1-4-4v-52.39a4 4 135 0 1 4-4z" transform="matrix(.9999 0 0 1.03777 -133.867 -108.844)"/><path style="fill:#fff;fill-opacity:1;stroke:none;stroke-width:3.96084;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M147.956 81.213h69.902a5 5 45 0 1 5 5v60.775a5 5 135 0 1-5 5h-69.902a5 5 45 0 1-5-5V86.213a5 5 135 0 1 5-5z" transform="matrix(.53267 0 0 .53614 -50.268 -25.021)"/><path style="opacity:.3;fill:#fff;fill-opacity:1;stroke:none;stroke-width:2.11667;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M145.85 122.263h11.914a2 2 45 0 1 2 2v33.945a2 2 135 0 1-2 2H145.85a2 2 45 0 1-2-2v-33.945a2 2 135 0 1 2-2z" transform="translate(-137.588 -103.743)"/><path style="opacity:.3;fill:#fff;fill-opacity:1;stroke:none;stroke-width:2.11667;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M142.146 109.947h58.179a2 2 45 0 1 2 2v4.612a2 2 135 0 1-2 2h-58.18a2 2 45 0 1-2-2v-4.612a2 2 135 0 1 2-2z" transform="translate(-133.884 -103.743)"/><path style="opacity:.5;fill:#fff;fill-opacity:1;stroke:none;stroke-width:1.78668;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="M216.777 139.26h33.331v3.952h-33.33z" transform="rotate(180 172.076 89.364)"/><path style="opacity:.5;fill:#fff;fill-opacity:1;stroke:none;stroke-width:2.11667;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:0;stroke-dasharray:none;stroke-opacity:1;paint-order:normal" d="m253.413 124.175-8.602 4.966a1.155 1.155 30 0 1-1.732-1v-9.933a1.155 1.155 150 0 1 1.732-1l8.602 4.967a1.155 1.155 90 0 1 0 2z" transform="matrix(-1.02203 0 0 -1.02544 342.479 163.8)"/></svg>

public/assets/media/waves/0.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 800"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="hsla(0, 0%, 100%, 1.00)" offset="0%"/><stop stop-color="#0080ffff" offset="100%"/></linearGradient></defs><path d="M0 337.466q257.143 228.65 342.857-43.026Q600 484.322 685.714 363.274q257.143 161.704 342.857-60.051 257.143 316.379 342.858 74.764 257.142 112.31 342.857-47.243 257.143 197.325 342.857-40.287Q2314.286 461.742 2400 375.936V800H0V336.499Z" transform="translate(0 54.771)" opacity="NaN" fill="url(#a)"/></svg>

public/assets/media/waves/1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 800"><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a"><stop stop-color="hsla(0, 0%, 100%, 1.00)" offset="0%"/><stop stop-color="#0080ffff" offset="100%"/></linearGradient></defs><g fill="url(#a)" transform="translate(0 -115.971)"><path d="M0 433.06q257.143 284.425 342.857-74.118Q600 625.662 685.714 451.544q257.143 210.104 342.857-21.634 257.143 308.024 342.858-37.478Q1628.57 706.827 1714.286 398q257.143 309.153 342.857-3.915Q2314.286 730.111 2400 442.904V891H0V404.337Z" opacity=".05"/><path d="M0 524.06q257.143 284.425 342.857-74.118Q600 716.662 685.714 542.544q257.143 210.104 342.857-21.634 257.143 308.024 342.858-37.478Q1628.57 797.827 1714.286 489q257.143 309.153 342.857-3.915Q2314.286 821.111 2400 533.904V982H0V495.337Z" opacity=".53"/><path d="M0 615.06q257.143 284.425 342.857-74.118Q600 807.662 685.714 633.544q257.143 210.104 342.857-21.634 257.143 308.024 342.858-37.478Q1628.57 888.827 1714.286 580q257.143 309.153 342.857-3.915Q2314.286 912.111 2400 624.904V1073H0V586.337Z"/></g></svg>

public/demos.php

@@ -0,0 +1,18 @@
+<style><?= VV::css("public/assets/css/pages/demos.css") ?></style>
+<section id="wip">
+	<container>
+		<h1>WIP</h1>
+		<p>Sorry, this whole website is a work in progress.. this page especially so.</p>
+	</container>
+</section>
+<section id="websites">
+	<container>
+		<h1>Websites built with Vegvisir</h1>
+		<ul>
+			<li><a href="https://vlw.se" target="_blank"><button class="shade">https://vlw.se</button></a></li>
+			<li><a href="https://icellate.com" target="_blank"><button class="shade">https://icellate.com</button></a></li>
+			<li><a href="https://genemate.se" target="_blank"><button class="shade">https://genemate.se</button></a></li>
+			<li><a href="https://codeberg.org/vegvisir/website" target="_blank"><button class="shade">..and this website! (view source)</a></li>
+		</ul>
+	</container>
+</section>

public/docs/API/JS/Navigation/EVENTS.php

@@ -0,0 +1,75 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 3)</p>
+		<h1><code>vegvisir.Navigation.EVENTS</code></h1>
+		<p>Various navigation <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent" target="_blank"><code>CustomEvent</code></a>s that can be listened for.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/EVENTS/description", Snippet::JAVASCRIPT) ?>
+		<p>All events will also fire on <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" target="_blank"><code>document</code></a> as a catch-all interface.</p>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Values</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>navstarted</code></h3>
+		<p>This <a href=""><code>CustomEvent</code></a> will be fired on the navigation <a href=""><code>target</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" target="_blank"><code>document</code></a> when a navigation is started with <a href=""><code>.navigate()</code></a>.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>navfinished</code></h3>
+		<p>This <a href=""><code>CustomEvent</code></a> will be fired on the navigation <a href=""><code>target</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" target="_blank"><code>document</code></a> when a navigation with <a href=""><code>.navigate()</code></a> has finished completely.</p>
+		<p>A navigation is considered finished when the page has been fully loaded and all <a href="">element attributes</a> have been updated.</p>
+	</container>
+</section>
+
+<section class="md">
+	<container>
+		<h1><code>CustomEvent.detail</code> property</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/EVENTS/description-additional", Snippet::JAVASCRIPT) ?>
+		<p>Accessing the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail" target="_blank"><code>.detail</code></a> property on a captured Vegvisir event will contain the following object.</p>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Values</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>target</code></h3>
+		<p>The <a href=""><code>target</code></a> element that is used/was used for the navigation.</p>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>This example logs the <a href=""><code>target</code></a> element of all navigations on this page.</p>
+		<?= Snippet::put("docs/API/JS/Navigation/EVENTS/example-0-0", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/MODE.php

@@ -0,0 +1,51 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 3)</p>
+		<h1><code>vegvisir.Navigation.MODE</code></h1>
+		<p>Change if content should be replaced or inserted when used in <a href=""><code>.navigate()</code></a>.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/MODE/description", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Values</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>REPLACE</code></h3>
+		<p>Content of the destination URL will replace the content at <a href=""><code>vegvisir.Navigation.POSITION</code></a>.</p>
+		<ul>
+			<li><p>Position: <code>beforebegin</code> = Replace the <a href=""><code>target</code></a> element itself.</p></li>
+			<li><p>Position: <code>afterbegin</code> = Replace the inner contents of the <a href=""><code>target</code></a> element.</li>
+			<li><p>Position: <code>beforeend</code> = Replace the inner contents of the <a href=""><code>target</code></a> element.</li>
+			<li><p>Position: <code>afterend</code> = Replace the <a href=""><code>target</code></a> element itself.</p></li>
+		</ul>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>INSERT</code></h3>
+		<p>Content of the destination URL will append/prepend to the existing content at <a href=""><code>vegvisir.Navigation.POSITION</code></a>.</p>
+		<p>Setting the mode to <code>INSERT</code> will make <a href=""><code>.navigate()</code></a> behave exactly like <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement"><code>HTMLElement.insertAdjacentElement()</code></a>.</p>
+		<ul>
+			<li><p>Position: <code>beforebegin</code> = Prepend before the <a href=""><code>target</code></a> element itself.</p></li>
+			<li><p>Position: <code>afterbegin</code> = Prepend just inside the <a href=""><code>target</code></a> element, before its first child.</p></li>
+			<li><p>Position: <code>beforeend</code> = Append just inside the <a href=""><code>target</code></a> element, after its last child.</p></li>
+			<li><p>Position: <code>afterend</code> = Append after the <a href=""><code>target</code></a> element itself.</p></li>
+		</ul>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/POSITION.php

@@ -0,0 +1,65 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 3)</p>
+		<h1><code>vegvisir.Navigation.POSITION</code></h1>
+		<p>Change where content should be placed when <a href=""><code>.navigate()</code></a> is used.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/POSITION/description", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Values</h2>
+		<p>The effect of <code>Navigation.POSITION</code> depend on the <a href=""><code>Navigation.MODE</code></a> used for the current navigation.</p>
+		<p>The default <code>Navigation.POSITION</code> for <a href=""><code>.navigate()</code></a> is <a href=""><code>beforeend</code></a> and the default mode is <a href=""><code>replace</code></a>.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>afterend</code></h3>
+		<ul>
+			<li><p>Mode: <code>replace</code> = Replace the <a href=""><code>target</code></a> element itself.</li>
+			<li><p>Mode: <code>insert</code> = Append after the <a href=""><code>target</code></a> element itself.</p></li>
+		</ul>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>beforeend</code></h3>
+		<p>This is the default position for <a href=""><code>.navigate()</code></a>.</p>
+		<ul>
+			<li><p>Mode: <code>replace</code> = Replace the inner contents of the <a href=""><code>target</code></a> element.</li>
+			<li><p>Mode: <code>insert</code> = Append just inside the <a href=""><code>target</code></a> element, after its last child.</p></li>
+		</ul>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>afterbegin</code></h3>
+		<ul>
+			<li><p>Mode: <code>replace</code> = Replace the inner contents of the <a href=""><code>target</code></a> element.</li>
+			<li><p>Mode: <code>insert</code> = Prepend just inside the <a href=""><code>target</code></a> element, before its first child.</p></li>
+		</ul>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>beforebegin</code></h3>
+		<ul>
+			<li><p>Mode: <code>replace</code> = Replace the <a href=""><code>target</code></a> element itself.</p></li>
+			<li><p>Mode: <code>insert</code> = Prepend before the <a href=""><code>target</code></a> element itself.</p></li>
+		</ul>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/TARGET.php

@@ -0,0 +1,77 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 3)</p>
+		<h1><code>vegvisir.Navigation.TARGET</code></h1>
+		<p>Defines the <a href=""><code>target</code></a> element of a navigation triggered from a <a href="">bound element</a>.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/TARGET/description", Snippet::JAVASCRIPT) ?>
+		<p>This object follows the same syntax as the <code>target</code> attribute of <a href=""><code>HTMLAnchorElement</code></a>.</p>
+		<p>If a string is provided to a <code>target</code> attribute of the <a href="">bound element</a> that <strong>isn't</strong> in this enumerable, the string will be treated as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors" target="_blank">CSS selector</a>.</p>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Values</h2>
+		<p>These values correspond to the value of a <code>target</code> attribute on a <a href="">bound element</a>.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>_top</code></h3>
+		<p>Target <a href=""><code>vegvisir.Navigation.rootShellElement</code></a>. This is the same as performing a normal soft-navigation.</p>
+		<p>This is the default behavior if a <code>target</code> attribute is omitted or equals an empty string.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>_self</code></h3>
+		<p>Target the <a href="">bound element</a> itself with the defaults <a href=""><code>vegvisir.Navigation.POSITION.BEFOREEND</code></a> and <a href=""><code>vegvisir.Navigation.MODE.REPLACE</code></a>, which will replace the <a href="">bound element</a> itself with the contents of the destination URL.</p>
+		<p>The default position and mode behavior can be overridden with by setting a <a href=""><code>vv-position</code></a> and <a href=""><code>vv-mode</code></a> attribute on the <a href="">bound element</a> respectivly.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>_blank</code></h3>
+		<p>Default browser behavior. The destination URL will open in a new tab or window.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>_parent</code></h3>
+		<p>Target the closest parent <a href="">HTMLElement</a> that has a <a href=""><code>vv-page</code></a> attribute.</p>
+		<p><a href=""><code>vegvisir.Navigation.rootShellElement</code></a> will become the target if no parent is found.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3>default</h3>
+		<p>The value of the <a href="">bound element</a>'s <code>target</code> attribute will be treated as a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors" target="_blank">CSS selector</a> if the string value does not equal an entry in this enumerable.</p>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>Here's an example that uses a native anchor tag to do various navigations.</p>
+		<?= Snippet::put("docs/API/JS/Navigation/TARGET/example-0-0", Snippet::PHP) ?>
+		<?= Snippet::put("docs/API/JS/Navigation/TARGET/example-0-1", Snippet::PHP) ?>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/abort.php

@@ -0,0 +1,33 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>Navigation.abort</code></h1>
+		<p>Interrupt a navigation started with <a href=""><code>.navigate()</code></a>.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/abort/description", Snippet::JAVASCRIPT) ?>
+		<p><code>Navigation.abort</code> is an instance of <a href="https://developer.mozilla.org/en-US/docs/Web/API/AbortController">AbortController</a> which gets contructed automatically with new <a href=""><code>vegvisir.Navigation</code></a> instances.</p>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Parameters</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>.abort()</code></h3>
+		<p>Call <code>Navigation.abort.abort()</code> to interrupt a Vegvisir navigation in progress.</p>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/bindElements.php

@@ -0,0 +1,35 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>vegvisir.Navigation.bindElements()</code></h1>
+		<p>Trigger automatic binding of unbound tags.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/bindElements/description", Snippet::JAVASCRIPT) ?>
+		<p>Bind event listeners for <a href=""><code>HTMLAnchorElement</code></a> tags and other tags with a <a href=""><code>vv</code></a> attribute that haven't already been bound.</p>
+		<p>This method is runned automatically after a finished Vegvisir navigation.</p>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>In this example we will programatically create and append an anchor tag to the DOM and use this method to bind it.</p>
+		<?= Snippet::put("docs/API/JS/Navigation/bindElements/example-0-0", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/constructor.php

@@ -0,0 +1,69 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>vegvisir.Navigation()</code> constructor</h1>
+		<p>The Vegvisir navigation constructor is used to create a new instance of <code>Navigation</code>. This is the first step to creating a custom navigation.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/constructor/description", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Parameters</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>url</code></h3>
+		<p>A <a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/URL"><code>URL</code></a> object or string with to a location on the same origin as the initiator.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>options</code></h3>
+		<p>An optional object containing <a href=""><code>vegvisir.Navigation.options</code></a> overrides.</p>
+	</container>
+</section>
+
+<?php // Method return values ?>
+<section class="md">
+	<container>
+		<h2>Return values</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>Navigation</code> instance</h3>
+		<p>A <code>Navigation</code> object instance. Use the instance method <a href=""><code>.navigate()</code></a> to navigate an, or many element(s) in the DOM.</p>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>Different ways to initialize <code>vegvisir.Navigation</code> with a location that will open <code>/public/some-page.php</code> relative from <a href="">project root</a>.</p>
+		<p>With strings:</p>
+		<?= Snippet::put("docs/API/JS/Navigation/constructor/example-0-0", Snippet::JAVASCRIPT) ?>
+		<?= Snippet::put("docs/API/JS/Navigation/constructor/example-0-1", Snippet::JAVASCRIPT) ?>
+		<p>With URL objects:</p>
+		<?= Snippet::put("docs/API/JS/Navigation/constructor/example-0-2", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/index.php

@@ -0,0 +1,13 @@
+<section class="md">
+	<container>
+		<h1><code>vegvisir.Navigation</code></h1>
+		<p>The Vegvisir <code>Navigation</code> class contains APIs for triggering navigations of any element programmatically.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Quickstart</h2>
+		<p>A new navigation can be initialized by constructing the <code>vegvisir.Navigation</code> class.</p>
+	</container>
+</section>
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/navigate.php

@@ -0,0 +1,92 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>Navigation.navigate()</code></h1>
+		<p>Perform a soft-navigation on an element.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/navigate/description", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Parameters</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>target</code></h3>
+		<p>An optional instance of an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank"><code>HTMLElement</code></a> which will be the target of this navigation.</p>
+		<p><a href=""><code>Vegivisr.rootShellElement</code></a> will be used if no argument is passed to this parameter.</p>
+		<details>
+			<summary>Examples</summary>
+			<p>Passing nothing to this parameter will target the top shell. This would be equivalent to clicking a link.</p>
+			<?= Snippet::put("docs/API/JS/Navigation/navigate/0", Snippet::JAVASCRIPT) ?>
+			<p>Passing an <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement" target="_blank"><code>HTMLElement</code></a> to this parameter would in this example with no other arguments changed, replace the innerHTML of the target element with the response from <code>/some-page</code>.</p>
+			<?= Snippet::put("docs/API/JS/Navigation/navigate/1", Snippet::JAVASCRIPT) ?>
+		</details>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>position</code></h3>
+		<p>This parameter takes an optional <a href=""><code>Navigation.POSITION</code></a> string which can be used to change where content from the destination URL should be placed relative to the <a href=""><code>target</code></a> element.</p>
+		<details>
+			<summary>Examples</summary>
+			<p>Passing nothing to this parameter will replace the innerHTML of <a href=""><code>target</code></a>.</p>
+			<?= Snippet::put("docs/API/JS/Navigation/navigate/1", Snippet::JAVASCRIPT) ?>
+			<p>Passing an position string will in this example place the contents afterEnd from target.</p>
+			<?= Snippet::put("docs/API/JS/Navigation/navigate/2", Snippet::JAVASCRIPT) ?>
+		</details>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>mode</code></h3>
+		<p>This parameter takes an optional <a href=""><code>Navigation.MODE</code></a> string which can be used to change how the contents of the destination URL should be placed relative to existing content around the <a href=""><code>target</code></a> element.</p>
+	</container>
+</section>
+
+<?php // Method return values ?>
+<section class="md">
+	<container>
+		<h2>Return values</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<p>This method will not return anything, but a navigation in progress can be aborted with <a href=""><code>Navigation.abort</code></a>.</p>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>Programmatically invoke a top navigation - as if a user clicked a link.</p>
+		<?= Snippet::put("docs/API/JS/Navigation/navigate/0", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Click to refresh</h2>
+		<p>An example how a simple "click to refresh" button can be implemented.</p>
+		<?= Snippet::put("docs/API/JS/Navigation/navigate/example-0-0", Snippet::JAVASCRIPT) ?>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/Navigation/options.php

@@ -0,0 +1,64 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>Navigation.options</code></h1>
+		<p>Override default Vegvisir navigation behavior.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/JS/Navigation/options/description", Snippet::JAVASCRIPT) ?>
+		<p>This object should be passed as the second argument when constructing a <a href=""><code>vegvisir.Navigation</code></a> instance.</p>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Parameters</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>pushHistory</code></h3>
+		<p><strong>This option has no default value:</strong></p>
+		<p>The default behavior of any Vegvisir <strong>top</strong> navigation is to push the new URL to the history stack. Ie. History API entry and browser pathname changes.</p>
+		<p>Any navigation that is <strong>not</strong> a top navigation will not push to the history stack.</p>
+		<hr>
+		<p>By setting the <code>pushHistory</code> option to:</p>
+		<ul>
+			<li>
+				<p><code>true</code></p>
+				<p>Force all navigations with <a href=""><code>.navigate()</code></a> on this instance will push to the history stack. Including non-top navigations.</p>
+			</li>
+			<li>
+				<p><code>false</code></p>
+				<p>Force no navigations with <a href=""><code>.navigate()</code></a> on this instance will push to the history stack. Including top navigations.</p>
+			</li>
+		</ul>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>Here is an example the embeds an SVG file directly on a page.</p>
+		<p>This can come in handy for inlining small vector icons.</p>
+		<?= Snippet::put("docs/API/PHP/VV/embed/example-1-0", Snippet::PHP) ?>
+		<?= Snippet::put("docs/API/PHP/VV/embed/example-1-1", Snippet::PHP) ?>
+		<p>By using <code>VV::css()</code> inside a <code class="tag">style</code>, we've enabled this stylesheet for that specific page.</p>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/JS/index.php

@@ -0,0 +1,14 @@
+<section class="md">
+	<container>
+		<h1>JavaScript Cheat Sheet</h1>
+		<p>Vegvisir will automatically bind <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a> tags and perform soft-navigation between pages on the same <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin" target="_blank">origin</a>.</p>
+		<p>The <a href=""><code>Navigation</code></a> lets you interact with, and expand Vegvisirs front-end behavior.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Manual pages</h2>
+		<?= VV::include("modules/docs/legend-js") ?>
+	</container>
+</section>
+<?= VV::shell("shells/docs") ?>

public/docs/API/PHP/VV/css.php

@@ -0,0 +1,82 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>VV::css()</code></h1>
+		<p>Import and minify a CSS file.</p>
+		<p>The syntax is identical to <a href=""><code>VV::js()</code></a>, and <a href=""><code>VV::embed()</code></a>.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/PHP/VV/css/description", Snippet::PHP) ?>
+		<p><code>VV::css()</code> imports and minifies a CSS styleheet file and returns it as a string.</p>
+	</container>
+</section>
+
+<?php // Method parameters ?>
+<section class="md">
+	<container>
+		<h2>Parameters</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>pathname</code></h3>
+		<p>Path to a CSS stylesheet file to import relative from <a href="">project root</a>.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/css/0", Snippet::PHP) ?>
+		</details>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>relative</code></h3>
+		<p>Path provided to <a href=""><code>pathname</code></a> will be a relative when this parameter is <code>true</code> (default). Set to <code>false</code> to make path absolute.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/css/1", Snippet::PHP) ?>
+		</details>
+	</container>
+</section>
+
+<?php // Method return values ?>
+<section class="md">
+	<container>
+		<h2>Return values</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h3><code>string</code></h3>
+		<p>A string containing minified CSS. Please note that <a href="https://www.php.net/manual/en/reserved.constants.php#constant.php-eol">linebreaks</a> are preserved.</p>
+		<p>Will return an empty string if the path provided to <a href=""><code>pathname</code></a> is not a valid CSS stylesheet file, or if it failed to import.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/css/2", Snippet::PHP) ?>
+		</details>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>Let's take the following CSS stylesheet file and put it into a page.</p>
+		<?= Snippet::put("docs/API/PHP/VV/css/example-1-0", Snippet::CSS) ?>
+		<?= Snippet::put("docs/API/PHP/VV/css/example-1-1", Snippet::PHP) ?>
+		<p>By using <code>VV::css()</code> inside a <code class="tag">style</code>, we've enabled this stylesheet for that specific page.</p>
+	</container>
+</section>
+
+<?php // Contribute ?>
+
+<?= VV::shell("shells/docs") ?>