vegvisir/website
1
0
Fork 0
mirror of https://codeberg.org/vegvisir/website.git synced 2025-09-14 00:43:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

wip: 2025-02-28T14:52:40+0100 (1740750760)

Browse source
This commit is contained in:
Victor Westerlund 2025-02-28 17:00:34 +01:00
parent c7d8aba184
commit 73c3d7f14a
36 changed files with 249 additions and 337 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/assets/css/pages/docs/aside.css
View file

@ -3,6 +3,11 @@ aside {
padding: var(--padding); padding: var(--padding);
} }
aside > p {
text-align: center;
margin: var(--padding) 0;
}
aside nav { aside nav {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

2
public/assets/css/pages/docs/layout.css
View file

@ -44,7 +44,7 @@ main h3 {
/* # Sections */ /* # Sections */
section.md { section.md {
gap: calc(var(--padding) / 2); gap: 5px;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
flex-direction: column; flex-direction: column;

2
public/docs/Reference/JavaScript/POSITION.php
View file

@ -4,4 +4,4 @@
require_once VV::root("src/Consts.php"); require_once VV::root("src/Consts.php");
?> ?>
<?= VV::include(VERSION_LATEST . "Reference/JavaScript/POSTITION"); ?> <?= VV::include(VERSION_LATEST . "Reference/JavaScript/POSITION"); ?>

9
public/docs/header.php
View file

@ -1,10 +1,3 @@
<?php
use const VVWebsite\ICONS_DIR;
require_once VV::root("src/Consts.php");
?>
<style><?= VV::css("public/assets/css/pages/docs/header") ?></style> <style><?= VV::css("public/assets/css/pages/docs/header") ?></style>
<section class="header"> <section class="header">
<nav> <nav>
@ -22,7 +15,7 @@
</button></a> </button></a>
</nav> </nav>
<button class="inline menu"> <button class="inline menu">
<?= VV::embed(ICONS_DIR . "hamburger.svg") ?> <?= VV::embed("public/assets/media/icons/hamburger.svg") ?>
<p>docs menu</p> <p>docs menu</p>
</button> </button>
</section> </section>

48
public/docs/v3.1.4/Reference/JavaScript/EVENTS.php
View file

@ -1,52 +1,30 @@
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?> <?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main> <main>
<section> <section>
<h1>VV::embed()</h1> <h1>Navigation.EVENTS</h1>
<p>Inline the contents of any file.</p> <p>A set of <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent"><code class="mtk17">CustomEvent</code></a> instances dispatched when various Vegvisir navigations are performed.</p>
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
</section> </section>
<section> <section>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?> <?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/events/description") ?>
</section> </section>
<section> <section>
<h1>Parameters</h1> <h1>Properties</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h2 class="default"><code class="mtk19">STARTED</code></h2>
<h2><code class="mtk10">$pathname</code></h2> <p>An event dispatched with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#type"><code>type</code></a> of <code class="mtk12">"navstarted"</code> on the <a href=""><code>target</code></a> element when a navigation has started. This event is also dispatched on <code>document.body</code>.</p>
<p>Path to an asset to inline.</p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail"><code>detail</code></a> property of this event returns the <a href=""><code class="mtk17">Navigation</code></a> instance that initiated the navigation.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h2 class="default"><code class="mtk19">FINISHED</code></h2>
<h2><code class="mtk10">$relative</code></h2> <p>An event dispatched with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#type"><code>type</code></a> of <code class="mtk12">"navfinished"</code> on the <a href=""><code>target</code></a> element when a navigation has finished loading completely (content has been injected). This event is also dispatched on <code>document.body</code>.</p>
<p>Flag which when set to:</p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail"><code>detail</code></a> property of this event returns the <a href=""><code class="mtk17">Navigation</code></a> instance that initiated the navigation.</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> </section>
<hr> <hr>
<section> <section>
<h1>Examples</h1> <h1>Examples</h1>
</section> </section>
<section> <section>
<h2>Inlining an SVG icon</h2> <p>No examples available.</p>
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
</section> </section>
</main> </main>

47
public/docs/v3.1.4/Reference/JavaScript/MODE.php
View file

@ -1,52 +1,29 @@
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?> <?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main> <main>
<section> <section>
<h1>VV::embed()</h1> <h1>Navigation.MODE</h1>
<p>Inline the contents of any file.</p> <p>A static object of <a href=""><code class="mtk17">Navigation</code></a> that alters the injection method of the <a href=""><code>target</code></a> element of <a href=""><code>.navigate()</code></a></p>
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
</section> </section>
<section> <section>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?> <?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/mode/description") ?>
</section> </section>
<section> <section>
<h1>Parameters</h1> <h1>Properties</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h2 class="default"><code class="mtk19">REPLACE</code></h2>
<h2><code class="mtk10">$pathname</code></h2> <p>The inner DOM of the <a href=""><code>target</code></a> element of <a href=""><code>.navigate()</code></a> will be <strong>replaced</strong> with the contents of <a href=""><code>href</code></a> from a <a href=""><code class="mtk17">Navigation</code></a> instance.</p>
<p>Path to an asset to inline.</p> <p>This is the default behavior.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h2><code class="mtk19">REPLACE</code></h2>
<h2><code class="mtk10">$relative</code></h2> <p>The contents of <a href=""><code>href</code></a> from a <a href=""><code class="mtk17">Navigation</code></a> instance will be <strong>inserted</strong>(appended) to the end of the existing DOM of the <a href=""><code>target</code></a> element of <a href=""><code>.navigate()</code></a></p>
<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> </section>
<hr> <hr>
<section> <section>
<h1>Examples</h1> <h1>Examples</h1>
</section> </section>
<section> <section>
<h2>Inlining an SVG icon</h2> <p>No examples available.</p>
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
</section> </section>
</main> </main>

53
public/docs/v3.1.4/Reference/JavaScript/POSITION.php
View file

@ -1,52 +1,39 @@
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?> <?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main> <main>
<section> <section>
<h1>VV::embed()</h1> <h1>Navigation.POSITION</h1>
<p>Inline the contents of any file.</p> <p>A static object of <a href=""><code class="mtk17">Navigation</code></a> that adheres to the same concept as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement#position"><code>position</code> of <code>.insertAdjacentElement()</code></a></p>
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
</section> </section>
<section> <section>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?> <?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/position/description") ?>
</section> </section>
<section> <section>
<h1>Parameters</h1> <h1>Properties</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h2><code class="mtk19">AFTEREND</code></h2>
<h2><code class="mtk10">$pathname</code></h2> <p><a href="">Inserts/replaces</a> the DOM <strong>after</strong> the <a href=""><code>target</code></a> element with the contents of <a href=""><code>href</code></a> from a <a href=""><code class="mtk17">Navigation</code></a> instance.</p>
<p>Path to an asset to inline.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h2 class="default"><code class="mtk19">BEFOREEND</code></h2>
<h2><code class="mtk10">$relative</code></h2> <p>This is the default behavior.</p>
<p>Flag which when set to:</p> <p><a href="">Inserts/replaces</a> the DOM <strong>right before closing</strong> the <a href=""><code>target</code></a> element with the contents of <a href=""><code>href</code></a> from a <a href=""><code class="mtk17">Navigation</code></a> instance.</p>
<ol> <p><a href=""><code><span class="mtk17">Navigation</span>.<span class="mtk19">MODE</span>.<span class="mtk19">REPLACE</span></code></a> makes this perform the same operation as <code class="mtk19">AFTERBEGIN</code>.</p>
<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>
<section> <section class="md param">
<h1>Return value</h1> <h2><code class="mtk19">AFTERBEGIN</code></h2>
<p><a href="">Inserts/replaces</a> the DOM <strong>right after opening</strong> the <a href=""><code>target</code></a> element with the contents of <a href=""><code>href</code></a> from a <a href=""><code class="mtk17">Navigation</code></a> instance.</p>
<p><a href=""><code><span class="mtk17">Navigation</span>.<span class="mtk19">MODE</span>.<span class="mtk19">REPLACE</span></code></a> makes this perform the same operation as <code class="mtk19">BEFOREEND</code>.</p>
</section> </section>
<section> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h2><code class="mtk19">BEFOREBEGIN</code></h2>
<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> <p><a href="">Inserts/replaces</a> the DOM <strong>before</strong> the <a href=""><code>target</code></a> element with the contents of <a href=""><code>href</code></a> from a <a href=""><code class="mtk17">Navigation</code></a> instance.</p>
</section> </section>
<hr> <hr>
<section> <section>
<h1>Examples</h1> <h1>Examples</h1>
</section> </section>
<section> <section>
<h2>Inlining an SVG icon</h2> <p>No examples available.</p>
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
</section> </section>
</main> </main>

55
public/docs/v3.1.4/Reference/JavaScript/TARGET.php
View file

@ -1,52 +1,41 @@
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?> <?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main> <main>
<section> <section>
<h1>VV::embed()</h1> <h1>Navigation.TARGET</h1>
<p>Inline the contents of any file.</p> <p>A static object of <a href=""><code class="mtk17">Navigation</code></a> that alters where the contents of a navigation should be placed relative to the <a href=""><code>target</code></a> element element for <a href=""><code>.navigate()</code></a>.</p>
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
</section> </section>
<section> <section>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?> <?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/target/description") ?>
</section> </section>
<section> <section>
<h1>Parameters</h1> <h1>Properties</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h2 ><code class="mtk19">TOP</code></h2>
<h2><code class="mtk10">$pathname</code></h2> <p>The inner DOM of the <a href=""><code>target</code></a> element will be <strong>replaced</strong> with the contents of <a href=""><code>href</code></a> from a <a href=""><code class="mtk17">Navigation</code></a> instance.</p>
<p>Path to an asset to inline.</p> <p>This is the default behavior when the <code>vv-shell</code> element (top navigation) is navigated.</p>
<p>Setting this parameter on a <a href=""><code>target</code></a> element that isn't the <code>vv-shell</code> element has the same effect as a normal top navigation. The target is "ignored".</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h2><code class="mtk19">SELF</code></h2>
<h2><code class="mtk10">$relative</code></h2> <p>The contents of the <a href=""><code>target</code></a> element will be navigated.</p>
<p>Flag which when set to:</p> <p>This is the default behavior when an element that <strong>isn't</strong> the <code>vv-shell</code> is navigated.</p>
<ol> <p>Setting this parameter on a <a href=""><code>target</code></a> element that is the <code>vv-shell</code> (top navigation) has the same effect as <code class="mtk19">TOP</code>.</p>
<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>
<section> <section class="md param">
<h1>Return value</h1> <h2><code class="mtk19">BLANK</code></h2>
<p>Performs the browser-default behavior for opening links in a new window. The <a href=""><code>target</code></a> element is ignored.</p>
</section> </section>
<section> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h2><code class="mtk19">PARENT</code></h2>
<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> <p>The closest <code>HTMLElement</code> to the <a href=""><code>target</code></a> element with a <code>vv-page</code> property present will be navigated. If no parent element with that attribute is found, the <code>vv-shell</code> element (top navigation) will be navigated.</p>
<p>Setting this parameter on a <a href=""><code>target</code></a> element that is the <code>vv-shell</code> (top navigation) has the same effect as <code class="mtk19">TOP</code>.</p>
</section> </section>
<hr> <hr>
<section> <section>
<h1>Examples</h1> <h1>Examples</h1>
</section> </section>
<section> <section>
<h2>Inlining an SVG icon</h2> <p>No examples available.</p>
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
</section> </section>
</main> </main>

4
public/docs/v3.1.4/Reference/JavaScript/bindElements.php
View file

@ -11,12 +11,12 @@
<section> <section>
<h1>Parameters</h1> <h1>Parameters</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2> <h2><code class="mtk10">$pathname</code></h2>
<p>Path to an asset to inline.</p> <p>Path to an asset to inline.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2> <h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p> <p>Flag which when set to:</p>

40
public/docs/v3.1.4/Reference/JavaScript/constructor.php
View file

@ -1,52 +1,24 @@
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?> <?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main> <main>
<section> <section>
<h1>VV::embed()</h1> <h1>Navigation.constructor</h1>
<p>Inline the contents of any file.</p> <p>Initialize a new Vegvisir soft-navigation programmatically.</p>
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
</section> </section>
<section> <section>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?> <?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/constructor/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>
<section> <section>
<h1>Return value</h1> <h1>Return value</h1>
</section> </section>
<section> <section>
<h3><code class="mtk6">string</code></h3> <h3><code class="mtk17">Navigation</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> <p>Returns an instance of <code class="mtk17">Navigation</code> which can then be excuted by chaining <a href=""><code>.<span class="mtk16">navigate</span>()</code></a>.</p>
</section> </section>
<hr> <hr>
<section> <section>
<h1>Examples</h1> <h1>Examples</h1>
</section> </section>
<section> <section>
<h2>Inlining an SVG icon</h2> <p>No examples available.</p>
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
</section> </section>
</main> </main>

4
public/docs/v3.1.4/Reference/JavaScript/index.php
View file

@ -2,8 +2,8 @@
<main> <main>
<section class="md"> <section class="md">
<container> <container>
<h1>JavaScript Cheat Sheet</h1> <h1>JavaScript Reference</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>Vegvisir will automatically find and 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> <p>The <a href=""><code>Navigation</code></a> lets you interact with, and expand Vegvisirs front-end behavior.</p>
</container> </container>
</section> </section>

4
public/docs/v3.1.4/Reference/JavaScript/navigate.php
View file

@ -11,12 +11,12 @@
<section> <section>
<h1>Parameters</h1> <h1>Parameters</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2> <h2><code class="mtk10">$pathname</code></h2>
<p>Path to an asset to inline.</p> <p>Path to an asset to inline.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2> <h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p> <p>Flag which when set to:</p>

55
public/docs/v3.1.4/Reference/JavaScript/options.php
View file

@ -1,52 +1,55 @@
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?> <?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main> <main>
<section> <section>
<h1>VV::embed()</h1> <h1>Navigation.options</h1>
<p>Inline the contents of any file.</p> <p>An object containing parameters that can be changed to alter the behavior of a Vegvisir <a href=""><code class="mtk17">Navigation</code></a>.</p>
<p>This can be very useful for bundling SVGs, plaintext files, HTML, and more for faster page loading.</p>
</section> </section>
<section> <section>
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/description") ?> <?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/options/description") ?>
</section> </section>
<section> <section>
<h1>Parameters</h1> <h1>Properties</h1>
</section> </section>
<section class="param"> <section class="md 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> <h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2> <h2><code class="mtk10">pushHistory</code></h2>
<p>Flag which when set to:</p> <p>Flag which when set to:</p>
<ol> <ol>
<li class="default"> <li>
<code class="mtk6">true</code> <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> <p>Will cause navigations performed on an instance of <a href=""><code class="mtk17">Navigation</code></a> to push to the History stack and update the browser pathname.</p>
</li> </li>
<li> <li>
<code class="mtk6">false</code> <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> <p>Will cause a "silent" navigation on an instance of <a href=""><code class="mtk17">Navigation</code></a> that won't update the broweser History stack and won't change the browser pathname.</p>
</li> </li>
</ol> </ol>
<p>The default setting for this property is:</p>
<ul>
<li><code class="mtk6">true</code> when the <a href="">vv-shell</a> (top navigation) is navigated.</li>
<li><code class="mtk6">false</code> when an element that <strong>isn't</strong> the <a href="">vv-shell</a> element is navigated.</li>
</ul>
</section> </section>
<section> <section class="md param">
<h1>Return value</h1> <h3><code class="mtk6">bool</code></h3>
</section> <h2><code class="mtk10">carryRequestOptions</code></h2>
<section> <p>Flag which when set to:</p>
<h3><code class="mtk6">string</code></h3> <ol>
<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> <li>
<code class="mtk6">true</code>
<p>Will cause navigations performed on an instance of <a href=""><code class="mtk17">Navigation</code></a> to carry the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">request method</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Response/body">response body</a> that the initiator page received on load.</p>
</li>
<li class="default">
<code class="mtk6">false</code>
<p>Navigations performed on an instance of <a href=""><code class="mtk17">Navigation</code></a> will be sent as <code>GET</code> requests (without a request body).</p>
</li>
</ol>
</section> </section>
<hr> <hr>
<section> <section>
<h1>Examples</h1> <h1>Examples</h1>
</section> </section>
<section> <section>
<h2>Inlining an SVG icon</h2> <p>No examples available.</p>
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
</section> </section>
</main> </main>

4
public/docs/v3.1.4/Reference/PHP/VV/css.php
View file

@ -10,13 +10,13 @@
<section> <section>
<h1>Parameters</h1> <h1>Parameters</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2> <h2><code class="mtk10">$pathname</code></h2>
<p>Path to a CSS stylehseet file.</p> <p>Path to a CSS stylehseet file.</p>
<p>Appending ".css" to the filename is optional. If omitted, the extension is infered.</p> <p>Appending ".css" to the filename is optional. If omitted, the extension is infered.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2> <h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p> <p>Flag which when set to:</p>

4
public/docs/v3.1.4/Reference/PHP/VV/embed.php
View file

@ -11,12 +11,12 @@
<section> <section>
<h1>Parameters</h1> <h1>Parameters</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2> <h2><code class="mtk10">$pathname</code></h2>
<p>Path to an asset to inline.</p> <p>Path to an asset to inline.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2> <h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p> <p>Flag which when set to:</p>

4
public/docs/v3.1.4/Reference/PHP/VV/include.php
View file

@ -10,12 +10,12 @@
<section> <section>
<h1>Parameters</h1> <h1>Parameters</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2> <h2><code class="mtk10">$pathname</code></h2>
<p>Path to another Vegvisir page or other PHP file.</p> <p>Path to another Vegvisir page or other PHP file.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2> <h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p> <p>Flag which when set to:</p>

2
public/docs/v3.1.4/Reference/PHP/VV/init.php
View file

@ -11,7 +11,7 @@
<section> <section>
<h1>Parameters</h1> <h1>Parameters</h1>
</section> </section>
<section class="param"> <section class="md param">
<p>This method takes no parameters.</p> <p>This method takes no parameters.</p>
</section> </section>
<section> <section>

4
public/docs/v3.1.4/Reference/PHP/VV/js.php
View file

@ -10,13 +10,13 @@
<section> <section>
<h1>Parameters</h1> <h1>Parameters</h1>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">string</code></h3> <h3><code class="mtk6">string</code></h3>
<h2><code class="mtk10">$pathname</code></h2> <h2><code class="mtk10">$pathname</code></h2>
<p>Path to a JavaScript source file.</p> <p>Path to a JavaScript source file.</p>
<p>Appending ".js" to the filename is optional. If omitted, the extension is infered.</p> <p>Appending ".js" to the filename is optional. If omitted, the extension is infered.</p>
</section> </section>
<section class="param"> <section class="md param">
<h3><code class="mtk6">bool</code></h3> <h3><code class="mtk6">bool</code></h3>
<h2><code class="mtk10">$relative</code></h2> <h2><code class="mtk10">$relative</code></h2>
<p>Flag which when set to:</p> <p>Flag which when set to:</p>

23
public/docs/v3.1.4/Reference/PHP/index.php
View file

@ -2,26 +2,9 @@
<main> <main>
<section class="md"> <section class="md">
<container> <container>
<h1>PHP Cheat Sheet</h1> <h1>PHP Reference</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> <p>Vegvisir exposes a single global static class <code>VV</code> that can be used in any script/page loaded with Vegvisir.</p>
</container> <p>This class contains various methods for importing, inlining assets, and returning pathnames.</p>
</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> </container>
</section> </section>
</main> </main>

27
public/docs/v3.1.4/Reference/aside.php
View file

@ -1,62 +1,85 @@
<style><?= VV::css("public/assets/css/pages/docs/aside") ?></style> <style><?= VV::css("public/assets/css/pages/docs/aside") ?></style>
<aside> <aside>
<nav> <nav>
<a href="/docs/PHP"><button class="inline"> <a href="/docs/Env"><button class="inline">
<p>environment variables</p> <p>environment variables</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="/docs/vv-attributes"><button class="inline">
<p>'vv'-attributes</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
<div class="spacer"></div> <div class="spacer"></div>
<p>PHP Reference</p>
<nav> <nav>
<a href="/docs/Reference/PHP"><button class="inline"> <a href="/docs/Reference/PHP"><button class="inline">
<p>PHP</p> <p>PHP</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/PHP/VV/css"><button class="inline sly"> <a href="/docs/Reference/PHP/VV/css"><button class="inline sly">
<p>VV::css()</p> <p>VV::css()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/PHP/VV/embed"><button class="inline sly"> <a href="/docs/Reference/PHP/VV/embed"><button class="inline sly">
<p>VV::embed()</p> <p>VV::embed()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/PHP/VV/include"><button class="inline sly"> <a href="/docs/Reference/PHP/VV/include"><button class="inline sly">
<p>VV::include()</p> <p>VV::include()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/PHP/VV/init"><button class="inline sly"> <a href="/docs/Reference/PHP/VV/init"><button class="inline sly">
<p>VV::init()</p> <p>VV::init()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/PHP/VV/JS"><button class="inline sly"> <a href="/docs/Reference/PHP/VV/js"><button class="inline sly">
<p>VV::js()</p> <p>VV::js()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
<div class="spacer"></div> <div class="spacer"></div>
<p>JavaScript Reference</p>
<nav> <nav>
<a href="/docs/Reference/JavaScript"><button class="inline"> <a href="/docs/Reference/JavaScript"><button class="inline">
<p>JavaScript</p> <p>JavaScript</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/constructor"><button class="inline sly"> <a href="/docs/Reference/JavaScript/constructor"><button class="inline sly">
<p>Navigation.constructor</p> <p>Navigation.constructor</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/abort"><button class="inline sly"> <a href="/docs/Reference/JavaScript/abort"><button class="inline sly">
<p>.abort</p> <p>.abort</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/options"><button class="inline sly"> <a href="/docs/Reference/JavaScript/options"><button class="inline sly">
<p>.options</p> <p>.options</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/navigate"><button class="inline sly"> <a href="/docs/Reference/JavaScript/navigate"><button class="inline sly">
<p>.navigate()</p> <p>.navigate()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/MODE"><button class="inline sly"> <a href="/docs/Reference/JavaScript/MODE"><button class="inline sly">
<p>Navigation.MODE</p> <p>Navigation.MODE</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/TARGET"><button class="inline sly"> <a href="/docs/Reference/JavaScript/TARGET"><button class="inline sly">
<p>Navigation.TARGET</p> <p>Navigation.TARGET</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/EVENTS"><button class="inline sly"> <a href="/docs/Reference/JavaScript/EVENTS"><button class="inline sly">
<p>Navigation.EVENTS</p> <p>Navigation.EVENTS</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/POSITION"><button class="inline sly"> <a href="/docs/Reference/JavaScript/POSITION"><button class="inline sly">
<p>Navigation.POSITION</p> <p>Navigation.POSITION</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript/bindElements"><button class="inline sly"> <a href="/docs/Reference/JavaScript/bindElements"><button class="inline sly">
<p>Navigation.bindElements()</p> <p>Navigation.bindElements()</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
</aside> </aside>

16
public/docs/v3.1.4/Reference/index.php
View file

@ -1 +1,15 @@
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?> <?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
<main>
<section class="md">
<h1>Reference documents</h1>
<p>Here you'll find cheat sheets for Vegvisir's <code>VV</code> PHP static class, and the <code>vegvisir.Navigation</code> JavaScript class.</p>
<a href="/docs/Reference/PHP"><button class="inline">
<p>PHP Reference sheet</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="/docs/Reference/JavaScript"><button class="inline">
<p>JavaScript Reference sheet</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
</section>
</main>

20
public/docs/v3.1.4/aside.php
View file

@ -3,15 +3,31 @@
<nav> <nav>
<a href="/docs"><button class="inline"> <a href="/docs"><button class="inline">
<p>introduction</p> <p>introduction</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/get-started"><button class="inline solid"> <a href="/docs/get-started"><button class="inline solid">
<p>get started guide</p> <p>get started guide</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
<div class="spacer"></div> <div class="spacer"></div>
<p>Reference guides</p>
<nav> <nav>
<a href="/docs/Reference"><button class="inline"> <a href="/docs/Reference/PHP"><button class="inline">
<p>References</p> <p>PHP Reference</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="/docs/Reference/JavaScript"><button class="inline">
<p>JavaScript Reference</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="/docs/Reference/Env"><button class="inline">
<p>Environement variables</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a>
<a href="/docs/Reference/vv-attributes"><button class="inline">
<p>'vv'-attributes</p>
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
</aside> </aside>

11
public/docs/v3.1.4/get-started.php
View file

@ -1,10 +1,3 @@
<?php
use const VVWebsite\{MEDIA_DIR, DEFAULT_BUTTON_ICON};
require_once VV::root("src/Consts.php");
?>
<?= VV::include("public/docs/v3.1.4/layout") ?> <?= VV::include("public/docs/v3.1.4/layout") ?>
<main> <main>
<section class="md"> <section class="md">
@ -24,7 +17,7 @@
<p>There is a template repository on Codeberg which you can clone or generate from which has a bare-bones website ready for us.</p> <p>There is a template repository on Codeberg which you can clone or generate from which has a bare-bones website ready for us.</p>
<a href="https://codeberg.org/vegvisir/template" target="_blank"><button class="inline"> <a href="https://codeberg.org/vegvisir/template" target="_blank"><button class="inline">
<p>Template repository</p> <p>Template repository</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</section> </section>
<section class="md"> <section class="md">
@ -44,7 +37,7 @@
<p>Feel free to experiment or follow the reference guide for more information about each Vegvisir feature.</p> <p>Feel free to experiment or follow the reference guide for more information about each Vegvisir feature.</p>
<a href="/docs/Reference"><button class="inline"> <a href="/docs/Reference"><button class="inline">
<p>Reference guide</p> <p>Reference guide</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</section> </section>
</main> </main>

10
public/docs/v3.1.4/index.php
View file

@ -4,4 +4,14 @@
<h1>Introduction</h1> <h1>Introduction</h1>
<p>Vegvisir is a work in progress, based on a framework I developed for a company a few years ago, which in turn was based on a content injector I built for another company. You can read more about the history of this framework on my <a href="https://vlw.se/work/vlw/vegvisir">personal website</a>.</p> <p>Vegvisir is a work in progress, based on a framework I developed for a company a few years ago, which in turn was based on a content injector I built for another company. You can read more about the history of this framework on my <a href="https://vlw.se/work/vlw/vegvisir">personal website</a>.</p>
</section> </section>
<section class="md">
<h1>Work in progress</h1>
<p>This website (and the framework itself) is a work in progress. I apologize for the rushed, incomplete, confusing documentation on this site. I will make an effort to update these pages as best as I can.</p>
</section>
<section class="md">
<h1>The basics</h1>
<p>The simple answer to what Vegvisir does is that it will automatically find and bind navigation handlers for all <code>HTMLAnchorElement</code>s on a website. If the anchor <code>href</code> points to a page on the same origin; a PHP file (containing HTML and native PHP templating) from the website's <code>public_path</code> will be automatically soft-navigated to.</p>
<p>Another thing that Vegvisir lets you do with those soft-navigated pages is to inject and minify assets such as <a href="/docs/Reference/PHP/VV/css">CSS stylesheets</a>, <a href="/docs/Reference/PHP/VV/js">JavaScript source files</a>, and other assets that <a href="/docs/Reference/PHP/VV/embed">output text</a>.</p>
<p>And the last thing that Vegvisir will offer for you is <a href="/docs/Reference/PHP/VV/include">embeding snippets of PHP code (or another page) into a page</a>.</p>
</section>
</main> </main>

17
public/features.php
View file

@ -1,19 +1,12 @@
<?php
use const VVWebsite\{MEDIA_DIR, DEFAULT_BUTTON_ICON};
require_once VV::root("src/Consts.php");
?>
<style><?= VV::css("public/assets/css/snippets/split") ?></style> <style><?= VV::css("public/assets/css/snippets/split") ?></style>
<style><?= VV::css("public/assets/css/pages/features") ?></style> <style><?= VV::css("public/assets/css/pages/features") ?></style>
<section id="this-stays"> <section id="this-stays">
<?= VV::embed(MEDIA_DIR . "arrow.svg") ?> <?= VV::embed("public/assets/media/arrow.svg") ?>
<div> <div>
<h1>This thing there,</h1> <h1>This thing there,</h1>
<p>That header is present on every page, so it's loaded once and never again.</p> <p>That header is present on every page, so it's loaded once and never again.</p>
</div> </div>
<?= VV::embed(MEDIA_DIR . "arrow.svg") ?> <?= VV::embed("public/assets/media/arrow.svg") ?>
</section> </section>
<section id="softnav" class="split"> <section id="softnav" class="split">
<div class="text"> <div class="text">
@ -22,7 +15,7 @@
<div class="buttons"> <div class="buttons">
<a href="/docs/Reference/JavaScript"><button class="inline"> <a href="/docs/Reference/JavaScript"><button class="inline">
<p>Vegvisir shells</p> <p>Vegvisir shells</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</div> </div>
</div> </div>
@ -37,7 +30,7 @@
<div class="buttons"> <div class="buttons">
<a href="/docs/Reference/JavaScript"><button class="inline"> <a href="/docs/Reference/JavaScript"><button class="inline">
<p>'vv' attributes</p> <p>'vv' attributes</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</div> </div>
</div> </div>
@ -52,7 +45,7 @@
<div class="buttons"> <div class="buttons">
<a href="/docs/Reference/JavaScript"><button class="inline"> <a href="/docs/Reference/JavaScript"><button class="inline">
<p>VV::include()</p> <p>VV::include()</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</div> </div>
</div> </div>

33
public/index.php
View file

@ -1,10 +1,3 @@
<?php
use const VVWebsite\{MEDIA_DIR, DEFAULT_BUTTON_ICON};
require_once VV::root("src/Consts.php");
?>
<style><?= VV::css("public/assets/css/snippets/split") ?></style> <style><?= VV::css("public/assets/css/snippets/split") ?></style>
<style><?= VV::css("public/assets/css/pages/index") ?></style> <style><?= VV::css("public/assets/css/pages/index") ?></style>
<section id="intro" class="split"> <section id="intro" class="split">
@ -14,9 +7,9 @@
<p>developed as a hobby project by <a href="https://vlw.se">Victor Westerlund</a></p> <p>developed as a hobby project by <a href="https://vlw.se">Victor Westerlund</a></p>
</div> </div>
<div class="compass"> <div class="compass">
<?= VV::embed(MEDIA_DIR . "compass-points.svg") ?> <?= VV::embed("public/assets/media/compass-points.svg") ?>
<?= VV::embed(MEDIA_DIR . "compass-points.svg") ?> <?= VV::embed("public/assets/media/compass-points.svg") ?>
<?= VV::embed(MEDIA_DIR . "compass.svg") ?> <?= VV::embed("public/assets/media/compass.svg") ?>
</div> </div>
</section> </section>
<section id="softnav" class="split"> <section id="softnav" class="split">
@ -24,13 +17,13 @@
<h1>Automatic soft navigation</h1> <h1>Automatic soft navigation</h1>
<p>Load the shell of your website once, and soft-navigate between pages on the same host. That's what Vegvisir will automatically handle for you - without any ugly handle attributes.</p> <p>Load the shell of your website once, and soft-navigate between pages on the same host. That's what Vegvisir will automatically handle for you - without any ugly handle attributes.</p>
<div class="buttons"> <div class="buttons">
<a href="/demos"><button class="inline solid"> <a href="/features"><button class="inline solid">
<p>more examples</p> <p>more info</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/JavaScript"><button class="inline"> <a href="/docs/Reference/JavaScript"><button class="inline">
<p>reference</p> <p>reference</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</div> </div>
</div> </div>
@ -43,13 +36,13 @@
<h1>Asset injection</h1> <h1>Asset injection</h1>
<p>Bundle page-specific CSS and JavaScript from separate files directly with your markdown. Vegvisir will import and minify CSS and JavaScript on the fly and return the result as compiled HTML.</p> <p>Bundle page-specific CSS and JavaScript from separate files directly with your markdown. Vegvisir will import and minify CSS and JavaScript on the fly and return the result as compiled HTML.</p>
<div class="buttons"> <div class="buttons">
<a href="/demos"><button class="inline solid"> <a href="/docs"><button class="inline solid">
<p>more examples</p> <p>more info</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs/Reference/PHP/VV/css"><button class="inline"> <a href="/docs/Reference/PHP/VV/css"><button class="inline">
<p>reference</p> <p>reference</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</div> </div>
</div> </div>
@ -64,12 +57,12 @@
<div class="buttons"> <div class="buttons">
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline"> <a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline">
<p>source code</p> <p>source code</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</div> </div>
</div> </div>
<div> <div>
<?= VV::embed(MEDIA_DIR . "gnu.svg") ?> <?= VV::embed("public/assets/media/gnu.svg") ?>
</div> </div>
</section> </section>
<script><?= VV::js("public/assets/js/pages/index") ?></script> <script><?= VV::js("public/assets/js/pages/index") ?></script>

33
public/shell.php
View file

@ -1,10 +1,3 @@
<?php
use const VVWebsite\{MEDIA_DIR, ICONS_DIR, DEFAULT_BUTTON_ICON};
require_once VV::root("src/Consts.php");
?>
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -53,13 +46,13 @@
</head> </head>
<body> <body>
<header> <header>
<a href="/"><?= VV::embed(MEDIA_DIR . "logo.svg") ?></a> <a href="/"><?= VV::embed("public/assets/media/logo.svg") ?></a>
<nav class="m"> <nav class="m">
<a href="/"><button class="inline sly"> <a href="/"><button class="inline sly">
<p>vegvisir</p> <p>vegvisir</p>
</button></a> </button></a>
<button data-menu class="inline solid"> <button data-menu class="inline solid">
<?= VV::embed(ICONS_DIR . "hamburger.svg") ?> <?= VV::embed("public/assets/media/icons/hamburger.svg") ?>
</button> </button>
</nav> </nav>
<nav> <nav>
@ -69,30 +62,30 @@
<div></div> <div></div>
<a href="/features"><button class="inline sly"> <a href="/features"><button class="inline sly">
<p>features</p> <p>features</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs"><button class="inline sly"> <a href="/docs"><button class="inline sly">
<p>documentation</p> <p>documentation</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/examples"><button class="inline sly"> <a href="/examples"><button class="inline sly">
<p>examples</p> <p>examples</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
<nav> <nav>
<a href="mailto:victor@vlw.se"><button class="inline"> <a href="mailto:victor@vlw.se"><button class="inline">
<?= VV::embed(ICONS_DIR . "email.svg") ?> <?= VV::embed("public/assets/media/icons/email.svg") ?>
</button></a> </button></a>
<a href="matrix:@vegvisir:vlw.se"><button class="inline"> <a href="matrix:@vegvisir:vlw.se"><button class="inline">
<?= VV::embed(ICONS_DIR . "matrix.svg") ?> <?= VV::embed("public/assets/media/icons/matrix.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir"><button class="inline"> <a href="https://codeberg.org/vegvisir"><button class="inline">
<?= VV::embed(ICONS_DIR . "codeberg.svg") ?> <?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
</button></a> </button></a>
<a href="/docs/get-started"><button class="inline solid"> <a href="/docs/get-started"><button class="inline solid">
<p>get started</p> <p>get started</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
</header> </header>
@ -108,19 +101,19 @@
<nav> <nav>
<a href="https://vlw.se"><button class="inline sly"> <a href="https://vlw.se"><button class="inline sly">
<p>vlw</p> <p>vlw</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline sly"> <a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline sly">
<p>license</p> <p>license</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir/website"><button class="inline sly"> <a href="https://codeberg.org/vegvisir/website"><button class="inline sly">
<p>website</p> <p>website</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid sly"> <a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid sly">
<p>contribute ❤️</p> <p>contribute ❤️</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
</footer> </footer>

8
snippets/HTMLCodeDemoElement/HTMLCodeDemoElement.php
View file

@ -1,9 +1,5 @@
<?php <?php
use const VVWebsite\ICONS_DIR;
require_once VV::root("src/Consts.php");
$HTMLCodeDemoElement = new class { $HTMLCodeDemoElement = new class {
public bool $valid = false; public bool $valid = false;
@ -38,10 +34,10 @@
public static function icon(string $file): string { public static function icon(string $file): string {
$file = self::language($file); $file = self::language($file);
$path = ICONS_DIR . "languages/{$file}.svg"; $path = "public/assets/media/icons/languages/{$file}.svg";
// Return language icon if exists in icons dir else default to text // Return language icon if exists in icons dir else default to text
return is_file(VV::root($path)) ? VV::embed($path) : VV::embed(ICONS_DIR . "languages/txt.svg"); return is_file(VV::root($path)) ? VV::embed($path) : VV::embed("public/assets/media/icons/languages/txt.svg");
} }
public function file_path(string $file): string { public function file_path(string $file): string {

1
snippets/HTMLCodeDemoElement/docs/v3.1.4/JS/constructor/description/syntax.js.php Normal file
View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk6">new</span><span class="mtk1">&nbsp;</span><span class="mtk17">Navigation</span><span class="mtk1">(</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk10">href</span><span class="mtk1">:&nbsp;</span><span class="mtk17">URL</span><span class="mtk3">|</span><span class="mtk17">String</span><span class="mtk3">|</span><span class="mtk6">null</span><span class="mtk1">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk10">options</span><span class="mtk3">?:</span><span class="mtk1">&nbsp;</span><a href=""><span class="mtk17">Navigation</span><span class="mtk1">.</span><span class="mtk10">options</span></a></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">)&nbsp;</span><span class="mtk3">-</span><span class="mtk3">&gt;</span><span class="mtk1">&nbsp;</span><span class="mtk6">this</span></span></div></div>

1
snippets/HTMLCodeDemoElement/docs/v3.1.4/JS/events/description/syntax.js.php Normal file
View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">{</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">STARTED</span><span class="mtk1">&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"navstarted"</span><span class="mtk1">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">FINISHED</span><span class="mtk1">&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"navfinished"</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div></div>

1
snippets/HTMLCodeDemoElement/docs/v3.1.4/JS/mode/description/syntax.js.php Normal file
View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">{</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">REPLACE</span><span class="mtk1">&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"replace"</span><span class="mtk1">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">INSERT</span><span class="mtk1">&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"insert"</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div></div>

1
snippets/HTMLCodeDemoElement/docs/v3.1.4/JS/options/description/syntax.js.php Normal file
View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">{</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">bool</span><span class="mtk1">&nbsp;</span><span class="mtk20 squiggly-inline-unnecessary">pushHistory</span><span class="mtk1">:&nbsp;</span><span class="mtk6">true</span><span class="mtk1">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk6">bool</span><span class="mtk1">&nbsp;</span><span class="mtk20 squiggly-inline-unnecessary">carryRequestOptions</span><span class="mtk1">:&nbsp;</span><span class="mtk6">false</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div></div>

1
snippets/HTMLCodeDemoElement/docs/v3.1.4/JS/position/description/syntax.js.php Normal file
View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">{</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">AFTEREND</span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"afterend"</span><span class="mtk1">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">BEFOREEND</span><span class="mtk1">&nbsp;&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"beforeend"</span><span class="mtk1">,</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">AFTERBEGIN</span><span class="mtk1">&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"afterbegin"</span><span class="mtk1">,</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">BEFOREBEING</span><span class="mtk1">&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"beforebegin"</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div></div>

1
snippets/HTMLCodeDemoElement/docs/v3.1.4/JS/target/description/syntax.js.php Normal file
View file

@ -0,0 +1 @@
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk1">{</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">TOP</span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"_top"</span><span class="mtk1">,</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">SELF</span><span class="mtk1">&nbsp;&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"_self"</span><span class="mtk1">,</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">BLANK</span><span class="mtk1">&nbsp;&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"_blank"</span><span class="mtk1">,</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="mtk19">PARENT</span><span class="mtk1">&nbsp;</span><span class="mtk3">=</span><span class="mtk1">&nbsp;</span><span class="mtk12">"_parent"</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div></div>

26
snippets/HTMLNavMenuElement/HTMLNavMenuElement.php
View file

@ -1,60 +1,56 @@
<?php <?php
use const VVWebsite\{ICONS_DIR, DEFAULT_BUTTON_ICON};
require_once VV::root("src/Consts.php");
$HTMLNavMenuElement = new class {} $HTMLNavMenuElement = new class {}
?> ?>
<nav-menu> <nav-menu>
<nav class="horizontal"> <nav class="horizontal">
<a href="mailto:victor@vlw.se"><button class="inline"> <a href="mailto:victor@vlw.se"><button class="inline">
<?= VV::embed(ICONS_DIR . "email.svg") ?> <?= VV::embed("public/assets/media/icons/email.svg") ?>
</button></a> </button></a>
<a href="matrix:@vegvisir:vlw.se"><button class="inline"> <a href="matrix:@vegvisir:vlw.se"><button class="inline">
<?= VV::embed(ICONS_DIR . "matrix.svg") ?> <?= VV::embed("public/assets/media/icons/matrix.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir"><button class="inline"> <a href="https://codeberg.org/vegvisir"><button class="inline">
<?= VV::embed(ICONS_DIR . "codeberg.svg") ?> <?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
</button></a> </button></a>
</nav> </nav>
<nav> <nav>
<a href="/docs/get-started"><button class="inline solid"> <a href="/docs/get-started"><button class="inline solid">
<p>get started</p> <p>get started</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
<nav> <nav>
<a href="/features"><button class="inline"> <a href="/features"><button class="inline">
<p>features</p> <p>features</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/docs"><button class="inline"> <a href="/docs"><button class="inline">
<p>documentation</p> <p>documentation</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="/examples"><button class="inline"> <a href="/examples"><button class="inline">
<p>examples</p> <p>examples</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
<nav> <nav>
<a href="https://vlw.se"><button class="inline"> <a href="https://vlw.se"><button class="inline">
<p>vlw</p> <p>vlw</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline"> <a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline">
<p>license</p> <p>license</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir/website"><button class="inline"> <a href="https://codeberg.org/vegvisir/website"><button class="inline">
<p>website</p> <p>website</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid"> <a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid">
<p>contribute ❤️</p> <p>contribute ❤️</p>
<?= VV::embed(DEFAULT_BUTTON_ICON) ?> <?= VV::embed("public/assets/media/icons/chevron.svg") ?>
</button></a> </button></a>
</nav> </nav>
</nav-menu> </nav-menu>

10
src/Consts.php
View file

@ -5,12 +5,4 @@
/** /**
* # Docs * # Docs
*/ */
const VERSION_LATEST = "/public/docs/v3.1.4/"; const VERSION_LATEST = "/public/docs/v3.1.4/";
/**
* # Media
* Constants related to media files
*/
const MEDIA_DIR = "/public/assets/media/";
const ICONS_DIR = MEDIA_DIR . "icons/";
const DEFAULT_BUTTON_ICON = ICONS_DIR . "chevron.svg";