wip: 2024-08-14T08:34:08+0200 (1723617248)

modules/docs/contribute.php

@@ -0,0 +1,11 @@
+<section class="md">
+	<container>
+		<h1>Contribute 💕</h1>
+		<p>Have you found a problem om this page? Would you like to help make Vegvisir better?</p>
+		<ul>
+			<li><a href="/"><button><p>Quick-report a problem on this page</p></button></a></li>
+			<li><a href="/"><button><p>Report a bug</p></button></a></li>
+			<li><a href="/"><button><p>Learn how to contribute</p></button></a></li>
+		</ul>
+	</container>
+</section>

modules/docs/legend-js.php

@@ -0,0 +1,24 @@
+<ul>
+	<li><a href="/docs/API/JS/Navigation"><button><p><code>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>Navigation.MODE</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/TARGET"><button><p><code>Navigation.TARGET</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/EVENTS"><button><p><code>Navigation.EVENTS</code></p></button></a></li>
+		<li><a href="/docs/API/JS/Navigation/POSITION"><button><p><code>Navigation.POSITION</code></p></button></a></li>
+	</ul>
+	<ul>
+		<p>Static methods</p>
+		<li><a href="/docs/API/JS/Navigation/bindElements"><button><p><code>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/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.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/embed/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/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.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/include/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/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

@@ -4,8 +4,12 @@
 	--color-deep: rgba(var(--primer-color-deep));
 	--color-light: rgba(var(--primer-color-light));
 
+	--border-style-width: 3px;
+	--border-style: solid var(--border-style-width) rgba(var(--primer-color-deep), .1);
+
     --padding: 10px;
 	--running-size: 70px;
+	--max-width: 1400px;
 }
 
 /* # Cornerstones */
@@ -43,6 +47,12 @@ a {
     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);
@@ -53,7 +63,7 @@ h2 {
 }
 
 h3 {
-	font-size: 25px;
+	font-size: 18px;
 }
 
 /* ## Sections */
@@ -64,7 +74,9 @@ container {
 	margin: auto;
 	height: 100%;
 	display: flex;
-	width: clamp(900px, 80vw, 1400px);
+	min-width: 900px;
+	width: clamp(900px, 100%, 80vw);
+	max-width: var(--max-width);
 	align-items: center;
 	gap: var(--padding);
 	padding: var(--padding) 0;
@@ -120,8 +132,8 @@ header {
 	top: 0px;
 	position: sticky;
 	background-color: white;
-	height: calc(var(--running-size) + var(--border-width));
+	height: calc(var(--running-size) + var(--border-style-width));
-	border-bottom: solid var(--border-width) rgba(var(--primer-color-deep), .1);
+	border-bottom: var(--border-style);
 	z-index: 1000;
 }
 
@@ -144,7 +156,7 @@ header ul:last-child {
 }
 
 [vv-top-page="/help"] header a[href="/help"] button,
-[vv-top-page="/docs"] header a[href="/docs"] 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;

public/assets/css/shells/docs.css

@@ -0,0 +1,200 @@
+[vv-shell-id="/"] {
+	display: grid;
+	min-height: calc(100svh - var(--running-size) - var(--border-style-width));
+	grid-template-columns: 400px 1fr;
+	max-width: var(--max-width);
+	gap: calc(var(--padding) * 2);
+	margin: auto;
+}
+
+[vv-shell-id="6ccb0465"] {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--padding) * 2);
+	margin-top: calc(var(--padding) * 2);
+}
+
+hr {
+	border: unset;
+	border-top: var(--border-style);
+}
+
+/* # Aside */
+
+aside {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	padding: var(--padding) 0;
+	border-right: var(--border-style);
+}
+
+aside button {
+	width: calc(100% - var(--padding));
+	text-align: left;
+}
+
+aside hr {
+	margin: var(--padding) 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%;
+	tab-size: 3;
+}
+
+section.md pre code {
+	--copy-size: 37px;
+	--copy-inset: 5px;
+	--copy-border-size: 1px;
+
+	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);
+	}
+}

public/docs/API/JS/index.php

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

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

@@ -0,0 +1,83 @@
+<?= 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::include("modules/docs/contribute") ?>
+
+<?= VV::shell("shells/docs") ?>

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

@@ -0,0 +1,72 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>VV::embed()</code></h1>
+		<p>Import and inline the contents of any file without executing code.</p>
+		<p>The syntax is identical to <a href=""><code>VV::js()</code></a>, and <a href=""><code>VV::css()</code></a>.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/PHP/VV/embed/description", Snippet::PHP) ?>
+		<p><code>VV::embed()</code> returns the contents of any file 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 file to embed relative from <a href="">project root</a>.</p>
+	</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>
+	</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 the raw contents of the file. File encoding is preserved.</p>
+		<p>Will return an empty string if the path provided to <a href=""><code>pathname</code></a> is not a valid file, or if it failed to import.</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 is an example the embeds an SVG file directly on a page.</p>
+		<p>This can come in handy for small icons stored in a separate directory as an example.</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::include("modules/docs/contribute") ?>
+
+<?= VV::shell("shells/docs") ?>

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

@@ -0,0 +1,77 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>VV::include()</code></h1>
+		<p>Inline contents of one page inside another page.</p>
+		<p>The syntax and functionality is similar to <a href=""><code>VV::embed()</code></a>, except it executes included code.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/PHP/VV/include/description", Snippet::PHP) ?>
+		<p><code>VV::include()</code> lets you put the contents of one page into another page.</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 PHP file to import and evaluate relative from <a href="">project root</a>.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/include/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/include/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>
+		<p>This method will return whatever the compiled output of the included PHP file will be.</p>
+	</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::include("modules/docs/contribute") ?>
+
+<?= VV::shell("shells/docs") ?>

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

@@ -0,0 +1,15 @@
+<section class="md">
+	<container>
+		<h1><code>VV</code></h1>
+		<p>The <code>VV</code> (two "V"'s, not a W) contains everything needed to interact with Vegvisir's PHP features.</p>
+		<p>The class can not be instanced since it only contains static methods.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Namespace</h2>
+		<p>The <code>VV</code> class is accessible <strong>without</strong> a namespace from <strong>any</strong> PHP file within your project.</p>
+		<p>The class intentionally lacks a namespace to reduce the (all be it short) boilerplate code that would be required to import and <code>use</code> it on every page of your project.</p>
+	</container>
+</section>
+<?= VV::shell("shells/docs") ?>

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

@@ -0,0 +1,83 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 2, Vegvisir 3)</p>
+		<h1><code>VV::js()</code></h1>
+		<p>Import and minify a JavaScript file.</p>
+		<p>The syntax is identical to <a href=""><code>VV::css()</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/js/description", Snippet::PHP) ?>
+		<p><code>VV::js()</code> imports and minifies a JavaScript 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 JavaScript file to import relative from <a href="">project root</a>.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/js/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/js/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 JavaScript. 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 JavaScript file, or if it failed to import.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/js/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 JavaScript file and put it into a page.</p>
+		<?= Snippet::put("docs/API/PHP/VV/js/example-1-0", Snippet::JAVASCRIPT) ?>
+		<?= Snippet::put("docs/API/PHP/VV/js/example-1-1", Snippet::PHP) ?>
+		<p>By using <code>VV::js()</code> inside a <code class="tag">script</code>, we've enabled the code for that specific page.</p>
+	</container>
+</section>
+
+<?php // Contribute ?>
+<?= VV::include("modules/docs/contribute") ?>
+
+<?= VV::shell("shells/docs") ?>

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

@@ -0,0 +1,77 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 3)</p>
+		<h1><code>VV::root()</code></h1>
+		<p>Return an absolute path to a file or folder relative from <a href="">project root</a>.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/PHP/VV/root/description", Snippet::PHP) ?>
+		<p>Return an absolute path to a file or folder relative from <a href="">project root</a>. This method does not process the entity at the provided location in any way. It simply returns an absolute path to it, which can be used with other functions.</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 location relative from <a href="">project root</a>. This parameter is an empty string by default, which will return an absolute path to <a href="">project root</a> itself.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/root/0", 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>An absolute path to the relative location provided by <a href=""><code>pathname</code></a>.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/root/1", Snippet::PLAINTEXT) ?>
+		</details>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p><code>VV::root()</code> doesn't do anything on its own other than "convert" a relative path into an absolute one.</p>
+		<p>This can come in really handy when importing other PHP classes within your project. Let's import a PHP class from one location in the project into a public page.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<?= Snippet::put("docs/API/PHP/VV/root/2", Snippet::PHP) ?>
+		<p>Let's import and use this class on our page with <code>VV::root()</code>.</p>
+		<?= Snippet::put("docs/API/PHP/VV/root/3", Snippet::PHP) ?>
+
+	</container>
+</section>
+
+<?php // Contribute ?>
+<?= VV::include("modules/docs/contribute") ?>
+
+<?= VV::shell("shells/docs") ?>

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

@@ -0,0 +1,75 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<?php // General information ?>
+<section class="md">
+	<container>
+		<p>(Vegvisir 3)</p>
+		<h1><code>VV::shell()</code></h1>
+		<p>Wrap contents of a page within another page.</p>
+		<p>This method is similar to <a href=""><code>VV::include()</code></a> except it lets you place persistent content around the included page.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Description</h1>
+		<?= Snippet::put("docs/API/PHP/VV/shell/description", Snippet::PHP) ?>
+		<p><code>VV::shell()</code> is a powerful method which lets you put the contents of one page into a <code class="tag">vv-shell</code> tag on another page.</p>
+		<p>Subsequent navigations to pages using the same shell will preserve the outer shell's state. The shell will not be fetched again.</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 PHP shell page relative from <a href="">project root</a> which the contents of the initiator page will be wrapped inside.</p>
+		<details>
+			<summary>Example</summary>
+			<?= Snippet::put("docs/API/PHP/VV/shell/0", Snippet::PHP) ?>
+		</details>
+	</container>
+</section>
+
+<?php // Method return values ?>
+<section class="md">
+	<container>
+		<h2>Return values</h2>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<p>This method is buffered and will flush the buffer contents to <code>stdout</code> when the last shell has been imported.</p>
+	</container>
+</section>
+
+<?php // Examples ?>
+<section class="md">
+	<container>
+		<h1>Examples</h1>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<h2>Basic usage</h2>
+		<p>If we want the contents of page <code>/public/some-page.php</code> wrapped inside the contents of <code>/shells/some-shell.php</code>, we can do the following:</p>
+		<?= Snippet::put("docs/API/PHP/VV/shell/example-0-0", Snippet::PHP) ?>
+		<p>Place a <code>VV::shell()</code> snippet <strong>at the end</strong> of the page you wish to wrap.</p>
+	</container>
+</section>
+<section class="md inset">
+	<container>
+		<p>Now let's add a <code class="tag">vv-shell</code> tag somewhere in our <code>/shells/some-shell.php</code> file.</p>
+		<?= Snippet::put("docs/API/PHP/VV/shell/example-0-1", Snippet::PHP) ?>
+		<p>The contents of <code>/public/some-page.php</code> will <strong>replace</strong> the <strong>inner</strong> contents of the <code>vv-shell</code> tag.</p>
+		<p>The shell file acts like any other Vegvisir page, which means you have access to all <a href=""><code>VV</code></a> methods.</p>
+	</container>
+</section>
+
+<?php // Contribute ?>
+<?= VV::include("modules/docs/contribute") ?>
+
+<?= VV::shell("shells/docs") ?>

public/docs/API/PHP/index.php

@@ -0,0 +1,26 @@
+<section class="md">
+	<container>
+		<h1>PHP Cheat Sheet</h1>
+		<p>Vegvisir only has one class you need to worry about. The <a href="/docs/API/PHP/VV"><code>VV</code></a> class contains everything needed to interact with Vegvisir functions from project pages.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Useful thoughts</h2>
+		<p>Here are some one-liners to help remember what things do.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h3>Difference between <code>VV::include()</code> and <code>VV::shell()</code></h3>
+		<p><a href=""><code>VV::include()</code></a> puts content inside another page.</p>
+		<p><a href=""><code>VV::shell()</code></a> puts a page inside other content.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Manual pages</h2>
+		<?= VV::include("modules/docs/legend-php") ?>
+	</container>
+</section>
+<?= VV::shell("shells/docs") ?>

public/docs/API/index.php

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

public/docs/index.php

@@ -0,0 +1,15 @@
+<section class="md">
+	<container>
+		<h1>Introduction</h1>
+		<p>Vegvisir is a PHP and JavaScript web framework developed by <a href="https://vlw.se">Victor Westerlund</a> as a hobby project.</p>
+		<p>This framework is not intended to replace the true-and-tested like Laravel, it would be interesting of course if it gained some users but my goal is to keep this project small and flexible.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h1>Scope</h1>
+		<p>This documentation only covers the new experimental version of Vegvisir, which is version 3.</p>
+		<p>The older versions of Vegvisir can be found here. They lack proper documentation and function a bit differently than Vegvisir 3 which has been largely rewritten from scratch. The main addition to version 3 are what I call "shells".</p>
+	</container>
+</section>
+<?= VV::shell("shells/docs") ?>

public/docs/installation.php

@@ -0,0 +1,85 @@
+<?= VV::include("modules/snippet/Snippet.php") ?>
+<section class="md">
+	<container>
+		<h1>Installation</h1>
+		<p>In this guide we will be installing Vegvisir on a Debian-based system with NGINX as the web server. The process should be similar for other configurations as well.</p>
+		<p><a href="/help">Please contact me if you need help</a></p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Prerequisites</h2>
+		<ul>
+			<li>PHP 8.0 or newer (PHP 8.3 is recommended)</li>
+			<li>A web server (NGINX is used in this guide)</li>
+		</ul>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Step 1: Clone the repo</h2>
+		<p>Let's start by cloning Vegvisir to a folder. The code for Vegvisir will be separate from the code for your project.</p>
+		<?= Snippet::put("docs/installation/0", Snippet::PLAINTEXT) ?>
+		<p>I have cloned this into the folder <code>/var/www/vegvisir</code> but you can put it wherever you want.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Step 2: Install dependencies</h2>
+		<p>Vegvisir only has one dependency, let's <code>cd</code> into our folder and install it with <a href="https://getcomposer.org/" target="_blank">Composer</a>.</p>
+		<?= Snippet::put("docs/installation/1", Snippet::PLAINTEXT) ?>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Step 3: Configure virtual host</h2>
+		<p>We will be pointing a virtual host to the <code>/public/index.php</code> file from the Vegvisir root directory.</p>
+		<p>Since your project files will live in a different directory, this can be set-and-forget.</p>
+		<?= Snippet::put("docs/installation/2", Snippet::PLAINTEXT) ?>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Step 4: Create project folder</h2>
+		<p>We're almost done here. We want to create a separate folder which will hold our project files.</p>
+		<p>Let's create a folder <code>/var/www/my-website</code> as an example - you can put this wherever you want!</p>
+		<?= Snippet::put("docs/installation/3", Snippet::PLAINTEXT) ?>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Step 5: Point Vegvisir to project folder</h2>
+		<p>Now let's finish up by pointing Vegvisir to the folder we just created.</p>
+		<p>Make a copy of the <code>.env.example.ini</code> file from Vegvisir's root directory and place it in the same spot as <code>.env.ini</code></p>
+		<?= Snippet::put("docs/installation/4", Snippet::PLAINTEXT) ?>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<p>There is only one line we need to change inside the <code>.env.ini</code> file we just created. It should be the top most variable called <code>root_path</code>.</p>
+		<p>Change the value of this variable to an absolute path to your project <strong>root</strong> folder. In our case it will be <code>/var/www/my-website</code>.</p>
+		<?= Snippet::put("docs/installation/5", Snippet::PLAINTEXT) ?>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<h2>Done!</h2>
+		<p>That's all there is to it. Restart your webserver if you haven't and navigate to your published website.</p>
+		<p>If everything worked correctly, you should see a default landing page with a summary.</p>
+	</container>
+</section>
+<hr>
+<section class="md">
+	<container>
+		<h1>Static assets</h1>
+		<p>Vegvisir will automatically serve anything that isn't a <code>.php</code> file under <code>/public</code> in your project directory as a static asset. You can for example put your <code>robots.txt</code> file under <code>/public/robots.txt</code> and it will be returned as a <code>text/plain</code> document.</p>
+		<p>While this works fine for smaller assets, they still have to be passed through the PHP CGI. This process is a bit slower than serving assets with your web server directly - and might be a lot slower for larger files.</p>
+		<p>To fix this, let's add an optional <code>location</code> block to our NGINX configuration which will handle assets. The process should be similar for other web servers - <a href="/help">contact me if you need help</a>.</p>
+	</container>
+</section>
+<section class="md">
+	<container>
+		<p>Let's add the following <code>location</code> block to our NGINX virtual host that we set up in <a href="#asd">Step X</a>.</p>
+	</container>
+</section>
+<?= VV::shell("shells/docs") ?>

public/index.php

@@ -13,7 +13,7 @@
 </section>
 <section id="example">
 	<container>
-		<p>hi</p>
+		<h1>Freedom to CREATE</h1>
 	</container>
 </section>
 <script><?= VV::js("public/assets/js/pages/index.js") ?></script>

public/why.php

@@ -9,9 +9,8 @@
 <section class="text">
 	<container class="split">
 		<div>
-			<h2>Sorry, did I studder?</h2>
 			<p>By loading what's needed and changing only what needs to change on a page, Vegvisir can compile a custom server-side rendered response body for each request depending on what the client already has loaded.</p>
-			<p>For example, why should the header on this page be loaded again when you navigate to another page on this site? Your browser has already fetched, compiled, and rendered everything needed to display it. And when you for example navigate to the documentation page, why should the documentation pages inner "shell" be replaced when you navigate the documentation pages?</p>
+			<p>For example, why should the header on this page be loaded again when you navigate to another page on this site? Your browser has already fetched, compiled, and rendered everything needed to display it. And when you navigate to the documentation page, why should the documentation page inner "shell" be replaced when you navigate the documentation pages?</p>
 			<p>Each Vegvisir navigation request contains a list of all loaded shells, which the Vegvisir back-end uses to determine what content should be returned depending on what the client has already loaded.</p>
 		</div>
 	</container>

shells/docs.php

@@ -0,0 +1,17 @@
+<style><?= VV::css("public/assets/css/shells/docs.css") ?></style>
+<aside>
+	<ul>
+		<li><a href="/docs"><button><p>Introduction</p></button></a></li>
+		<li><a href="/docs/installation"><button><p>Installation</p></button></a></li>
+	</ul>
+	<hr>
+	
+	<a href="/docs/API/PHP" class="cc php"><button><p>PHP Cheat Sheet</p></button></a>
+	<?= VV::include("modules/docs/legend-php") ?>
+	<hr>
+	<a href="/docs/API/JS" class="cc js"><button><p>JavaScript Cheat Sheet</p></button></a>
+	<?= VV::include("modules/docs/legend-js") ?>
+
+</aside>
+<vv-shell></vv-shell>
+<script type="module"><?= VV::js("public/assets/js/shells/docs.js") ?></script>