wip: 2025-02-14T15:43:55+0100 (1739544235)

This commit is contained in:
Victor Westerlund 2025-02-14 15:44:06 +01:00
parent 09781225f9
commit 573dcb7062
39 changed files with 596 additions and 140 deletions

View file

@ -43,23 +43,34 @@
?>
<code-demo>
<div class="header">
<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
<button class="inline" data-lang="<?= $HTMLCodeDemoElement::language($file) ?>" data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
<?= VV::embed(ICONS_DIR . "languages/{$HTMLCodeDemoElement::language($file)}.svg") ?>
<p><?= substr($file, 0, strlen($file) - 4) ?></p>
<?php if ($HTMLCodeDemoElement->valid): ?>
<div class="header">
<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
<button class="inline" data-lang="<?= $HTMLCodeDemoElement::language($file) ?>" data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
<?= VV::embed(ICONS_DIR . "languages/{$HTMLCodeDemoElement::language($file)}.svg") ?>
<p><?= substr($file, 0, strlen($file) - 4) ?></p>
</button>
<?php endforeach; ?>
</div>
<div class="body">
<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
<div data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
<?= VV::include($HTMLCodeDemoElement->file_path($file)) ?>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<div class="header">
<button>
<p>Not Found</p>
</button>
<?php endforeach; ?>
</div>
<div class="body"><p>404</p></div>
<?php endif; ?>
</div>
<div class="body">
<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
<div data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
<?= VV::include($HTMLCodeDemoElement->file_path($file)) ?>
</div>
<?php endforeach; ?>
</div>
</code-demo>
<script type="module" src="/assets/js/elements/HTMLCodeDemoElement.mjs"></script>

0
public/about.php Normal file
View file

View file

@ -3,8 +3,10 @@ code-demo {
--color-base: rgb(var(--primer-color-base));
--height: calc(var(--padding) * 2.5);
display: block;
min-width: 700px;
border-radius: 12px;
font-family: monospace;
background-color: var(--color-base);
}
@ -37,6 +39,11 @@ code-demo .header button.inline + button.inline {
/* ## Active */
code-demo .header button {
--primer-color-accent: 255, 255, 255;
--color-accent: rgb(var(--primer-color-accent));
}
code-demo .header button.active {
border-top: solid 4px var(--color-accent);
pointer-events: none;
@ -78,32 +85,4 @@ code-demo .body [data-file] {
code-demo .body [data-file].active {
display: initial;
}
/* # Syntax highliting */
code-demo .mtk1 { color: #cccccc; }
code-demo .mtk2 { color: #1f1f1f; }
code-demo .mtk3 { color: #d4d4d4; }
code-demo .mtk4 { color: #000080; }
code-demo .mtk5 { color: #6a9955; }
code-demo .mtk6 { color: #569cd6; }
code-demo .mtk7 { color: #b5cea8; }
code-demo .mtk8 { color: #646695; }
code-demo .mtk9 { color: #d7ba7d; }
code-demo .mtk10 { color: #9cdcfe; }
code-demo .mtk11 { color: #f44747; }
code-demo .mtk12 { color: #ce9178; }
code-demo .mtk13 { color: #6796e6; }
code-demo .mtk14 { color: #808080; }
code-demo .mtk15 { color: #d16969; }
code-demo .mtk16 { color: #dcdcaa; }
code-demo .mtk17 { color: #4ec9b0; }
code-demo .mtk18 { color: #c586c0; }
code-demo .mtk19 { color: #4fc1ff; }
code-demo .mtk20 { color: #c8c8c8; }
code-demo .mtk21 { color: #cd9731; }
code-demo .mtk22 { color: #b267e6; }
code-demo .mtki { font-style: italic; }
code-demo .mtkb { font-weight: bold; }
code-demo .mtks { text-decoration: line-through; }
}

View file

@ -12,7 +12,7 @@
margin: 0;
fill: inherit;
box-sizing: border-box;
font-family: "Roboto Mono", sans-serif;
font-family: inherit;
color: inherit;
font-size: inherit;
}
@ -31,6 +31,7 @@ body {
overflow-x: hidden;
min-height: 100svh;
font-size: 15px;
font-family: "Roboto Mono", sans-serif;
}
body::before {

View file

@ -0,0 +1,40 @@
aside {
grid-area: aside;
padding: var(--padding);
}
aside nav {
display: flex;
flex-direction: column;
gap: calc(var(--padding) / 2);
}
aside .spacer {
width: 100%;
height: 1px;
background-color: rgba(var(--primer-color-accent), .1);
margin: var(--padding) 0;
}
/* # Nav states */
vv-shell[vv-page="/docs"] aside a[href="/docs"] button,
vv-shell[vv-page="/docs/PHP"] aside a[href="/docs/PHP"] button,
vv-shell[vv-page="/docs/PHP/VV"] aside a[href="/docs/PHP/VV"] button,
vv-shell[vv-page="/docs/PHP/VV/css"] aside a[href="/docs/PHP/VV/css"] button,
vv-shell[vv-page="/docs/get-started"] aside a[href="/docs/get-started"] button,
vv-shell[vv-page="/docs/PHP/VV/embed"] aside a[href="/docs/PHP/VV/embed"] button {
font-weight: 900;
background: none;
pointer-events: none;
color: var(--color-accent);
}
vv-shell[vv-page="/docs"] aside a[href="/docs"] button svg,
vv-shell[vv-page="/docs/PHP"] aside a[href="/docs/PHP"] button svg,
vv-shell[vv-page="/docs/PHP/VV"] aside a[href="/docs/PHP/VV"] button svg,
vv-shell[vv-page="/docs/PHP/VV/css"] aside a[href="/docs/PHP/VV/css"] button svg,
vv-shell[vv-page="/docs/get-started"] aside a[href="/docs/get-started"] button svg,
vv-shell[vv-page="/docs/PHP/VV/embed"] aside a[href="/docs/PHP/VV/embed"] button svg {
display: none;
}

View file

@ -12,14 +12,17 @@ header {
section.header {
top: 0;
width: 100%;
z-index: 100;
display: flex;
color: white;
position: sticky;
overflow: hidden;
grid-area: header;
align-items: stretch;
height: calc(var(--running-size) - var(--padding));
grid-template-rows: var(--running-size);
background-color: var(--color-accent);
box-shadow: 0 2px 0 0 white;
}
/* ### Nav */

View file

@ -0,0 +1,48 @@
vv-shell {
display: grid;
grid-template-areas:
"header header"
"aside main"
"footer footer"
;
grid-template-columns: 300px 1fr;
grid-template-rows: calc(var(--running-size) - var(--padding)) 1fr var(--running-size);
}
/* # Main */
main {
--primer-color-accent: 0, 0, 0;
--color-accent: black;
display: flex;
grid-area: main;
font-family: sans-serif;
flex-direction: column;
padding: var(--padding);
gap: calc(var(--padding) / 2);
}
main code {
color: white;
padding: 0 5px;
border-radius: 6px;
font-weight: normal;
font-family: monospace;
background-color: #212121;
}
main h2 {
font-size: 1.5em;
}
main h3 {
font-size: 1em;
margin-bottom: 5px;
}
main ol li {
margin: calc(var(--padding) / 2) 0;
}
/* # Sections */

View file

@ -4,6 +4,7 @@ footer {
color: white;
position: sticky;
overflow: hidden;
grid-area: footer;
align-items: stretch;
height: var(--running-size);
grid-template-rows: var(--running-size);

View file

@ -0,0 +1,27 @@
/* # Syntax highliting */
.mtk1 { color: #cccccc; }
.mtk2 { color: #1f1f1f; }
.mtk3 { color: #d4d4d4; }
.mtk4 { color: #000080; }
.mtk5 { color: #6a9955; }
.mtk6 { color: #569cd6; }
.mtk7 { color: #b5cea8; }
.mtk8 { color: #646695; }
.mtk9 { color: #d7ba7d; }
.mtk10 { color: #9cdcfe; }
.mtk11 { color: #f44747; }
.mtk12 { color: #ce9178; }
.mtk13 { color: #6796e6; }
.mtk14 { color: #808080; }
.mtk15 { color: #d16969; }
.mtk16 { color: #dcdcaa; }
.mtk17 { color: #4ec9b0; }
.mtk18 { color: #c586c0; }
.mtk19 { color: #4fc1ff; }
.mtk20 { color: #c8c8c8; }
.mtk21 { color: #cd9731; }
.mtk22 { color: #b267e6; }
.mtki { font-style: italic; }
.mtkb { font-weight: bold; }
.mtks { text-decoration: line-through; }

0
public/demos.php Normal file
View file

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "PHP/VV/css"); ?>

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "PHP/VV/embed"); ?>

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "PHP/VV/error"); ?>

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "PHP/VV/include"); ?>

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "PHP/VV/init"); ?>

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "PHP/VV/js"); ?>

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "PHP/index"); ?>

View file

@ -0,0 +1,7 @@
<?php
use const VVWebsite\VERSION_LATEST;
require_once VV::root("src/Consts.php");
?>
<?= VV::include(VERSION_LATEST . "get-started"); ?>

View file

@ -0,0 +1,53 @@
<?= VV::include("snippets/docs/v3.1.3/shell") ?>
<main>
<?= VV::include("snippets/docs/version-select"); ?>
<section>
<h1>VV::css()</h1>
<p>Include a CSS file into a page which will be automatically minified and inlined.</p>
</section>
<section>
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/css/description") ?>
</section>
<section>
<h1>Parameters</h1>
</section>
<section class="param">
<h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2>
<p>Path to a CSS stylehseet file.</p>
<p>Appending ".css" to the filename is optional. If omitted, the extension is infered.</p>
</section>
<section class="param">
<h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p>
<ol>
<li class="default">
<code class="mtk6">true</code>
<p>Will make <code class="mtk10">$pathname</code> look for a CSS file relative to <a href=""><code>root_path</code></a>.</p>
</li>
<li>
<code class="mtk6">false</code>
<p>Will make <code class="mtk10">$pathname</code> look for a CSS file relative to the root of the whole filesystem.</p>
</li>
</ol>
</section>
<section>
<h1>Return value</h1>
</section>
<section>
<h3><code class="mtk6">string</code></h3>
<p>Returns a minified version of the included stylesheet as a string. If a stylesheet can not be found at <code class="mtk10">$pathname</code>, an empty string is returned.</p>
</section>
<hr>
<section>
<h1>Examples</h1>
</section>
<section>
<h2>Importing a stylesheet</h2>
<p>In this example we're importing a stylesheet from <code>/public/assets/css/style.css</code> relative from <a href=""><code>root_path</code></a>.</p>
</section>
<section>
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/css/example_import") ?>
</section>
</main>

View file

@ -0,0 +1,53 @@
<?= VV::include("snippets/docs/v3.1.3/shell") ?>
<main>
<?= VV::include("snippets/docs/version-select"); ?>
<section>
<h1>VV::embed()</h1>
<p>Inline the contents of any file.</p>
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
</section>
<section>
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/description") ?>
</section>
<section>
<h1>Parameters</h1>
</section>
<section class="param">
<h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2>
<p>Path to an asset to inline.</p>
</section>
<section class="param">
<h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p>
<ol>
<li class="default">
<code class="mtk6">true</code>
<p>Will make <code class="mtk10">$pathname</code> look for a file relative to <a href=""><code>root_path</code></a>.</p>
</li>
<li>
<code class="mtk6">false</code>
<p>Will make <code class="mtk10">$pathname</code> look for a file relative to the root of the whole filesystem.</p>
</li>
</ol>
</section>
<section>
<h1>Return value</h1>
</section>
<section>
<h3><code class="mtk6">string</code></h3>
<p>Returns the contents of a file passed to <code class="mtk10">$pathname</code> as a string. If a file can not be found at <code class="mtk10">$pathname</code>, an empty string is returned.</p>
</section>
<hr>
<section>
<h1>Examples</h1>
</section>
<section>
<h2>Inlining an SVG icon</h2>
<p>In this example we will be inlining an SVG icon from <code>/public/assets/icon.svg</code> directly into our page as if it were hardcoded.</p>
</section>
<section>
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/embed/example_import") ?>
</section>
</main>

View file

@ -0,0 +1,7 @@
<?= VV::include("snippets/docs/v3.1.3/shell") ?>
<main>
<?= VV::include("snippets/docs/version-select"); ?>
<section>
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/description") ?>
</section>
</main>

View file

@ -0,0 +1,53 @@
<?= VV::include("snippets/docs/v3.1.3/shell") ?>
<main>
<?= VV::include("snippets/docs/version-select"); ?>
<section>
<h1>VV::js()</h1>
<p>Include a JavaScript source file into a page which will be automatically minified and inlined.</p>
</section>
<section>
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/js/description") ?>
</section>
<section>
<h1>Parameters</h1>
</section>
<section class="param">
<h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2>
<p>Path to a JavaScript source file.</p>
<p>Appending ".js" to the filename is optional. If omitted, the extension is infered.</p>
</section>
<section class="param">
<h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p>
<ol>
<li class="default">
<code class="mtk6">true</code>
<p>Will make <code class="mtk10">$pathname</code> look for a JavaScript source file relative to <a href=""><code>root_path</code></a>.</p>
</li>
<li>
<code class="mtk6">false</code>
<p>Will make <code class="mtk10">$pathname</code> look for a JavaScript source file relative to the root of the whole filesystem.</p>
</li>
</ol>
</section>
<section>
<h1>Return value</h1>
</section>
<section>
<h3><code class="mtk6">string</code></h3>
<p>Returns a minified version of the included JavaScript source file as a string. If a file can not be found at <code class="mtk10">$pathname</code>, an empty string is returned.</p>
</section>
<hr>
<section>
<h1>Examples</h1>
</section>
<section>
<h2>Importing a JavaScript source file</h2>
<p>In this example we're importing a JavaScript source file from <code>/public/assets/js/script.js</code> relative from <a href=""><code>root_path</code></a>.</p>
</section>
<section>
<?= VV::include("elements/HTMLCodeDemoElement?id=docs/v3.1.3/PHP/VV/js/example_import") ?>
</section>
</main>

View file

@ -0,0 +1,27 @@
<?= VV::include("snippets/docs/v3.1.3/shell") ?>
<main>
<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>
</container>
</section>
</main>

View file

@ -0,0 +1,18 @@
<?= VV::include("snippets/docs/v3.1.3/shell") ?>
<main>
<?= VV::include("snippets/docs/version-select"); ?>
<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>
</main>

View file

@ -1,4 +1,4 @@
<?= VV::include("snippets/docs/shell") ?>
<?= VV::include("snippets/docs/v3.1.3/shell") ?>
<main>
<?= VV::include("snippets/docs/version-select"); ?>
<section class="md">

View file

@ -1,84 +1,86 @@
<?= VV::include("snippets/docs/version-select"); ?>
<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::include("snippets/docs/v1.3.1/shell"); ?>
<main>
<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>
</main>

View file

@ -45,6 +45,7 @@
</script>
<style><?= VV::css("public/assets/css/fonts") ?></style>
<style><?= VV::css("public/assets/css/syntax") ?></style>
<style><?= VV::css("public/assets/css/shell") ?></style>
<title>Vegvisir</title>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk6">&lt;?php</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">string</span><span class="mtk3">&nbsp;</span><span class="mtk10">$pathname</span><span class="mtk3">,</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">bool</span><span class="mtk3">&nbsp;</span><span class="mtk10">$relative</span><span class="mtk3">&nbsp;=&nbsp;</span><span class="mtk6">true</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;</span><span class="mtk6">string</span></span></div></div>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14">&lt;</span><span class="mtk6">style</span><span class="mtk14">&gt;</span><span class="mtk6">&lt;?=</span><span class="mtk3">&nbsp;</span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"public/assets/css/style.css"</span><span class="mtk3">)&nbsp;</span><span class="mtk6">?</span><span class="mtk6">&gt;</span><span class="mtk14">&lt;/</span><span class="mtk6">style</span><span class="mtk14">&gt;</span></span></div></div>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk6">&lt;?php</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">embed</span><span class="mtk3">(</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">string</span><span class="mtk3">&nbsp;</span><span class="mtk10">$pathname</span><span class="mtk3">,</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">bool</span><span class="mtk3">&nbsp;</span><span class="mtk10">$relative</span><span class="mtk3">&nbsp;=&nbsp;</span><span class="mtk6">true</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;</span><span class="mtk6">string</span></span></div></div>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14">&lt;</span><span class="mtk6">button</span><span class="mtk14">&gt;</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">svg</span><span class="mtk1">&nbsp;</span><span class="mtk10">xmlns</span><span class="mtk1">=</span><span class="mtk12">"</span><span class="mtk12 detected-link">http://www.w3.org/2000/svg</span><span class="mtk12">"</span><span class="mtk1">&nbsp;</span><span class="mtk10">viewBox</span><span class="mtk1">=</span><span class="mtk12">"0&nbsp;0&nbsp;36&nbsp;22"</span><span class="mtk14">&gt;&lt;</span><span class="mtk6">g</span><span class="mtk14">&gt;&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"solid"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M12&nbsp;22&nbsp;0&nbsp;0h24Z"</span><span class="mtk14">/&gt;&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"stroke"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M12&nbsp;17.823&nbsp;20.63&nbsp;2H3.37L12&nbsp;17.823M12&nbsp;22&nbsp;0&nbsp;0h24L12</span><span class="mtk12">&nbsp;22Z"</span><span class="mtk14">/&gt;&lt;</span><span class="mtk6">g</span><span class="mtk1">&nbsp;</span><span class="mtk10">opacity</span><span class="mtk1">=</span><span class="mtk12">".5"</span><span class="mtk14">&gt;&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"solid"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M24&nbsp;22&nbsp;12&nbsp;0h24Z"</span><span class="mtk14">/&gt;&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"stroke"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M24&nbsp;17.823&nbsp;32.63&nbsp;2H15.37L24&nbsp;17.823M24&nbsp;22&nbsp;12&nbsp;0h24L</span><span class="mtk12">24&nbsp;22Z"</span><span class="mtk14">/&gt;&lt;/</span><span class="mtk6">g</span><span class="mtk14">&gt;&lt;/</span><span class="mtk6">g</span><span class="mtk14">&gt;&lt;/</span><span class="mtk6">svg</span><span class="mtk14">&gt;</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">p</span><span class="mtk14">&gt;</span><span class="mtk1">Cool&nbsp;button</span><span class="mtk14">&lt;/</span><span class="mtk6">p</span><span class="mtk14">&gt;</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk14">&lt;/</span><span class="mtk6">button</span><span class="mtk14">&gt;</span></span></div></div>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14">&lt;</span><span class="mtk6">svg</span><span class="mtk1">&nbsp;</span><span class="mtk10">xmlns</span><span class="mtk1">=</span><span class="mtk12">"</span><span class="mtk12 detected-link">http://www.w3.org/2000/svg</span><span class="mtk12">"</span><span class="mtk1">&nbsp;</span><span class="mtk10">viewBox</span><span class="mtk1">=</span><span class="mtk12">"0&nbsp;0&nbsp;36&nbsp;22"</span><span class="mtk14">&gt;</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">g</span><span class="mtk14">&gt;</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"solid"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M12&nbsp;22&nbsp;0&nbsp;0h24Z"</span><span class="mtk14">/&gt;</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"stroke"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M12&nbsp;17.823&nbsp;20.63&nbsp;2H3.37L12&nbsp;17.823M12&nbsp;22&nbsp;0&nbsp;0h24L12</span><span class="mtk12">&nbsp;22Z"</span><span class="mtk14">/&gt;</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">g</span><span class="mtk1">&nbsp;</span><span class="mtk10">opacity</span><span class="mtk1">=</span><span class="mtk12">".5"</span><span class="mtk14">&gt;</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"solid"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M24&nbsp;22&nbsp;12&nbsp;0h24Z"</span><span class="mtk14">/&gt;</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">path</span><span class="mtk1">&nbsp;</span><span class="mtk10">class</span><span class="mtk1">=</span><span class="mtk12">"stroke"</span><span class="mtk1">&nbsp;</span><span class="mtk10">d</span><span class="mtk1">=</span><span class="mtk12">"M24&nbsp;17.823&nbsp;32.63&nbsp;2H15.37L24&nbsp;17.823M24&nbsp;22&nbsp;12&nbsp;0h24L</span><span class="mtk12">24&nbsp;22Z"</span><span class="mtk14">/&gt;</span></span></div><div style="top:133px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;/</span><span class="mtk6">g</span><span class="mtk14">&gt;</span></span></div><div style="top:152px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;/</span><span class="mtk6">g</span><span class="mtk14">&gt;</span></span></div><div style="top:171px;height:19px;" class="view-line"><span><span class="mtk14">&lt;/</span><span class="mtk6">svg</span><span class="mtk14">&gt;</span></span></div></div>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14">&lt;</span><span class="mtk6">button</span><span class="mtk14">&gt;</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">&lt;?=</span><span class="mtk3">&nbsp;</span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">embed</span><span class="mtk3">(</span><span class="mtk12">"public/assets/icon.svg"</span><span class="mtk3">)&nbsp;</span><span class="mtk6">?</span><span class="mtk6">&gt;</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk14">&lt;</span><span class="mtk6">p</span><span class="mtk14">&gt;</span><span class="mtk1">Cool&nbsp;button</span><span class="mtk14">&lt;/</span><span class="mtk6">p</span><span class="mtk14">&gt;</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk14">&lt;/</span><span class="mtk6">button</span><span class="mtk14">&gt;</span></span></div></div>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk6">&lt;?php</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">js</span><span class="mtk3">(</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">string</span><span class="mtk3">&nbsp;</span><span class="mtk10">$pathname</span><span class="mtk3">,</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">bool</span><span class="mtk3">&nbsp;</span><span class="mtk10">$relative</span><span class="mtk3">&nbsp;=&nbsp;</span><span class="mtk6">true</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk3">&nbsp;&nbsp;&nbsp;&nbsp;):&nbsp;</span><span class="mtk6">string</span></span></div></div>

View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14">&lt;</span><span class="mtk6">script</span><span class="mtk14">&gt;</span><span class="mtk6">&lt;?=</span><span class="mtk3">&nbsp;</span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">js</span><span class="mtk3">(</span><span class="mtk12">"public/assets/js/script.js"</span><span class="mtk3">)&nbsp;</span><span class="mtk6">?</span><span class="mtk6">&gt;</span><span class="mtk14">&lt;/</span><span class="mtk6">script</span><span class="mtk14">&gt;</span></span></div></div>

View file

@ -1,2 +0,0 @@
<?= VV::include("snippets/docs/header") ?>
<?= VV::include("snippets/docs/aside") ?>

View file

@ -0,0 +1,65 @@
<?php
use const VVWebsite\DEFAULT_BUTTON_ICON;
require_once VV::root("src/Consts.php");
?>
<style><?= VV::css("public/assets/css/snippets/docs/aside") ?></style>
<aside>
<nav>
<a href="/docs"><button class="inline">
<p>introduction</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/get-started"><button class="inline solid">
<p>get started guide</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
</nav>
<div class="spacer"></div>
<nav>
<a href="/docs/PHP"><button class="inline">
<p>environment variables</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
</nav>
<div class="spacer"></div>
<nav>
<a href="/docs/PHP"><button class="inline">
<p>PHP</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/PHP/VV/css"><button class="inline sly">
<p>VV::css()</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/PHP/VV/embed"><button class="inline sly">
<p>VV::embed()</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/PHP/VV/error"><button class="inline sly">
<p>VV::error()</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/PHP/VV/include"><button class="inline sly">
<p>VV::include()</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/PHP/VV/init"><button class="inline sly">
<p>VV::init()</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/PHP/VV/js"><button class="inline sly">
<p>VV::js()</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
</nav>
<div class="spacer"></div>
<nav>
<a href="/docs/JS"><button class="inline">
<p>JavaScript</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
</nav>
</aside>

View file

@ -8,19 +8,20 @@
<style><?= VV::css("public/assets/css/snippets/docs/header") ?></style>
<section class="header">
<nav>
<a href="/"><button class="inline sly">
<a href="/docs"><button class="inline sly">
<p>introduction</p>
</button></a>
<a href="/about"><button class="inline sly">
<p>get started</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/about"><button class="inline sly">
<a href="/docs/installation"><button class="inline sly">
<p>installation</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs"><button class="inline sly">
<p>cheat sheets</p>
<a href="/docs/PHP"><button class="inline sly">
<p>PHP</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
<a href="/docs/JS"><button class="inline sly">
<p>JavaScript</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
</button></a>
</nav>

View file

@ -0,0 +1,4 @@
<style><?= VV::css("public/assets/css/snippets/docs/shell") ?></style>
<?= VV::include("snippets/docs/v3.1.3/header") ?>
<?= VV::include("snippets/docs/v3.1.3/aside") ?>
<?= VV::include("snippets/footer") ?>