mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-14 00:43:42 +02:00
wip: 2025-02-28T14:52:40+0100 (1740750760)
This commit is contained in:
parent
c7d8aba184
commit
73c3d7f14a
36 changed files with 249 additions and 337 deletions
|
@ -3,6 +3,11 @@ aside {
|
|||
padding: var(--padding);
|
||||
}
|
||||
|
||||
aside > p {
|
||||
text-align: center;
|
||||
margin: var(--padding) 0;
|
||||
}
|
||||
|
||||
aside nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -44,7 +44,7 @@ main h3 {
|
|||
/* # Sections */
|
||||
|
||||
section.md {
|
||||
gap: calc(var(--padding) / 2);
|
||||
gap: 5px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-direction: column;
|
||||
|
|
|
@ -4,4 +4,4 @@
|
|||
|
||||
require_once VV::root("src/Consts.php");
|
||||
?>
|
||||
<?= VV::include(VERSION_LATEST . "Reference/JavaScript/POSTITION"); ?>
|
||||
<?= VV::include(VERSION_LATEST . "Reference/JavaScript/POSITION"); ?>
|
|
@ -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>
|
||||
<section class="header">
|
||||
<nav>
|
||||
|
@ -22,7 +15,7 @@
|
|||
</button></a>
|
||||
</nav>
|
||||
<button class="inline menu">
|
||||
<?= VV::embed(ICONS_DIR . "hamburger.svg") ?>
|
||||
<?= VV::embed("public/assets/media/icons/hamburger.svg") ?>
|
||||
<p>docs menu</p>
|
||||
</button>
|
||||
</section>
|
|
@ -1,52 +1,30 @@
|
|||
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
||||
<main>
|
||||
<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>
|
||||
<h1>Navigation.EVENTS</h1>
|
||||
<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>
|
||||
</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>
|
||||
<h1>Parameters</h1>
|
||||
<h1>Properties</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 class="md param">
|
||||
<h2 class="default"><code class="mtk19">STARTED</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>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 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 class="md param">
|
||||
<h2 class="default"><code class="mtk19">FINISHED</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>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>
|
||||
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<p>No examples available.</p>
|
||||
</section>
|
||||
</main>
|
|
@ -1,52 +1,29 @@
|
|||
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
||||
<main>
|
||||
<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>
|
||||
<h1>Navigation.MODE</h1>
|
||||
<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>
|
||||
</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>
|
||||
<h1>Parameters</h1>
|
||||
<h1>Properties</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 class="md param">
|
||||
<h2 class="default"><code class="mtk19">REPLACE</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>This is the default behavior.</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 class="md param">
|
||||
<h2><code class="mtk19">REPLACE</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>
|
||||
</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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<p>No examples available.</p>
|
||||
</section>
|
||||
</main>
|
|
@ -1,52 +1,39 @@
|
|||
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
||||
<main>
|
||||
<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>
|
||||
<h1>Navigation.POSITION</h1>
|
||||
<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>
|
||||
</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>
|
||||
<h1>Parameters</h1>
|
||||
<h1>Properties</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 class="md param">
|
||||
<h2><code class="mtk19">AFTEREND</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>
|
||||
</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 class="md param">
|
||||
<h2 class="default"><code class="mtk19">BEFOREEND</code></h2>
|
||||
<p>This is the default behavior.</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>
|
||||
<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>
|
||||
</section>
|
||||
<section>
|
||||
<h1>Return value</h1>
|
||||
<section class="md param">
|
||||
<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>
|
||||
<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 class="md param">
|
||||
<h2><code class="mtk19">BEFOREBEGIN</code></h2>
|
||||
<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>
|
||||
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<p>No examples available.</p>
|
||||
</section>
|
||||
</main>
|
|
@ -1,52 +1,41 @@
|
|||
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
||||
<main>
|
||||
<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>
|
||||
<h1>Navigation.TARGET</h1>
|
||||
<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>
|
||||
</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>
|
||||
<h1>Parameters</h1>
|
||||
<h1>Properties</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 class="md param">
|
||||
<h2 ><code class="mtk19">TOP</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>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 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 class="md param">
|
||||
<h2><code class="mtk19">SELF</code></h2>
|
||||
<p>The contents of the <a href=""><code>target</code></a> element will be navigated.</p>
|
||||
<p>This is the default behavior when an element that <strong>isn't</strong> the <code>vv-shell</code> is 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>
|
||||
<h1>Return value</h1>
|
||||
<section class="md param">
|
||||
<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>
|
||||
<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 class="md param">
|
||||
<h2><code class="mtk19">PARENT</code></h2>
|
||||
<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>
|
||||
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<p>No examples available.</p>
|
||||
</section>
|
||||
</main>
|
|
@ -11,12 +11,12 @@
|
|||
<section>
|
||||
<h1>Parameters</h1>
|
||||
</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">
|
||||
<section class="md param">
|
||||
<h3><code class="mtk6">bool</code></h3>
|
||||
<h2><code class="mtk10">$relative</code></h2>
|
||||
<p>Flag which when set to:</p>
|
||||
|
|
|
@ -1,52 +1,24 @@
|
|||
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
||||
<main>
|
||||
<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>
|
||||
<h1>Navigation.constructor</h1>
|
||||
<p>Initialize a new Vegvisir soft-navigation programmatically.</p>
|
||||
</section>
|
||||
<section>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/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>
|
||||
<?= VV::include("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/JS/constructor/description") ?>
|
||||
</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>
|
||||
<h3><code class="mtk17">Navigation</code></h3>
|
||||
<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>
|
||||
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<p>No examples available.</p>
|
||||
</section>
|
||||
</main>
|
|
@ -2,8 +2,8 @@
|
|||
<main>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>JavaScript Cheat Sheet</h1>
|
||||
<p>Vegvisir will automatically bind <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLAnchorElement"><code>HTMLAnchorElement</code></a> tags and perform soft-navigation between pages on the same <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin" target="_blank">origin</a>.</p>
|
||||
<h1>JavaScript Reference</h1>
|
||||
<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>
|
||||
</container>
|
||||
</section>
|
||||
|
|
|
@ -11,12 +11,12 @@
|
|||
<section>
|
||||
<h1>Parameters</h1>
|
||||
</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">
|
||||
<section class="md param">
|
||||
<h3><code class="mtk6">bool</code></h3>
|
||||
<h2><code class="mtk10">$relative</code></h2>
|
||||
<p>Flag which when set to:</p>
|
||||
|
|
|
@ -1,52 +1,55 @@
|
|||
<?= VV::include("public/docs/v3.1.4/Reference/layout") ?>
|
||||
<main>
|
||||
<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>
|
||||
<h1>Navigation.options</h1>
|
||||
<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>
|
||||
</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>
|
||||
<h1>Parameters</h1>
|
||||
<h1>Properties</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">
|
||||
<section class="md param">
|
||||
<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>
|
||||
<ol>
|
||||
<li class="default">
|
||||
<li>
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<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 class="md param">
|
||||
<h3><code class="mtk6">bool</code></h3>
|
||||
<h2><code class="mtk10">carryRequestOptions</code></h2>
|
||||
<p>Flag which when set to:</p>
|
||||
<ol>
|
||||
<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>
|
||||
<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("snippets/HTMLCodeDemoElement/HTMLCodeDemoElement?id=docs/v3.1.4/PHP/VV/embed/example_import") ?>
|
||||
<p>No examples available.</p>
|
||||
</section>
|
||||
</main>
|
|
@ -10,13 +10,13 @@
|
|||
<section>
|
||||
<h1>Parameters</h1>
|
||||
</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 a CSS stylehseet file.</p>
|
||||
<p>Appending ".css" to the filename is optional. If omitted, the extension is infered.</p>
|
||||
</section>
|
||||
<section class="param">
|
||||
<section class="md param">
|
||||
<h3><code class="mtk6">bool</code></h3>
|
||||
<h2><code class="mtk10">$relative</code></h2>
|
||||
<p>Flag which when set to:</p>
|
||||
|
|
|
@ -11,12 +11,12 @@
|
|||
<section>
|
||||
<h1>Parameters</h1>
|
||||
</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">
|
||||
<section class="md param">
|
||||
<h3><code class="mtk6">bool</code></h3>
|
||||
<h2><code class="mtk10">$relative</code></h2>
|
||||
<p>Flag which when set to:</p>
|
||||
|
|
|
@ -10,12 +10,12 @@
|
|||
<section>
|
||||
<h1>Parameters</h1>
|
||||
</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 another Vegvisir page or other PHP file.</p>
|
||||
</section>
|
||||
<section class="param">
|
||||
<section class="md param">
|
||||
<h3><code class="mtk6">bool</code></h3>
|
||||
<h2><code class="mtk10">$relative</code></h2>
|
||||
<p>Flag which when set to:</p>
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
<section>
|
||||
<h1>Parameters</h1>
|
||||
</section>
|
||||
<section class="param">
|
||||
<section class="md param">
|
||||
<p>This method takes no parameters.</p>
|
||||
</section>
|
||||
<section>
|
||||
|
|
|
@ -10,13 +10,13 @@
|
|||
<section>
|
||||
<h1>Parameters</h1>
|
||||
</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 a JavaScript source file.</p>
|
||||
<p>Appending ".js" to the filename is optional. If omitted, the extension is infered.</p>
|
||||
</section>
|
||||
<section class="param">
|
||||
<section class="md param">
|
||||
<h3><code class="mtk6">bool</code></h3>
|
||||
<h2><code class="mtk10">$relative</code></h2>
|
||||
<p>Flag which when set to:</p>
|
||||
|
|
|
@ -2,26 +2,9 @@
|
|||
<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>
|
||||
<h1>PHP Reference</h1>
|
||||
<p>Vegvisir exposes a single global static class <code>VV</code> that can be used in any script/page loaded with Vegvisir.</p>
|
||||
<p>This class contains various methods for importing, inlining assets, and returning pathnames.</p>
|
||||
</container>
|
||||
</section>
|
||||
</main>
|
|
@ -1,62 +1,85 @@
|
|||
<style><?= VV::css("public/assets/css/pages/docs/aside") ?></style>
|
||||
<aside>
|
||||
<nav>
|
||||
<a href="/docs/PHP"><button class="inline">
|
||||
<a href="/docs/Env"><button class="inline">
|
||||
<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>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<p>PHP Reference</p>
|
||||
<nav>
|
||||
<a href="/docs/Reference/PHP"><button class="inline">
|
||||
<p>PHP</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/css"><button class="inline sly">
|
||||
<p>VV::css()</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/embed"><button class="inline sly">
|
||||
<p>VV::embed()</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/include"><button class="inline sly">
|
||||
<p>VV::include()</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/init"><button class="inline sly">
|
||||
<p>VV::init()</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</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>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<p>JavaScript Reference</p>
|
||||
<nav>
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>JavaScript</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/constructor"><button class="inline sly">
|
||||
<p>Navigation.constructor</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/abort"><button class="inline sly">
|
||||
<p>.abort</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/options"><button class="inline sly">
|
||||
<p>.options</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/navigate"><button class="inline sly">
|
||||
<p>.navigate()</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/MODE"><button class="inline sly">
|
||||
<p>Navigation.MODE</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/TARGET"><button class="inline sly">
|
||||
<p>Navigation.TARGET</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/EVENTS"><button class="inline sly">
|
||||
<p>Navigation.EVENTS</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/POSITION"><button class="inline sly">
|
||||
<p>Navigation.POSITION</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript/bindElements"><button class="inline sly">
|
||||
<p>Navigation.bindElements()</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</aside>
|
|
@ -1 +1,15 @@
|
|||
<?= 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>
|
|
@ -3,15 +3,31 @@
|
|||
<nav>
|
||||
<a href="/docs"><button class="inline">
|
||||
<p>introduction</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/get-started"><button class="inline solid">
|
||||
<p>get started guide</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<div class="spacer"></div>
|
||||
<p>Reference guides</p>
|
||||
<nav>
|
||||
<a href="/docs/Reference"><button class="inline">
|
||||
<p>References</p>
|
||||
<a href="/docs/Reference/PHP"><button class="inline">
|
||||
<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>
|
||||
</nav>
|
||||
</aside>
|
|
@ -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") ?>
|
||||
<main>
|
||||
<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>
|
||||
<a href="https://codeberg.org/vegvisir/template" target="_blank"><button class="inline">
|
||||
<p>Template repository</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</section>
|
||||
<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>
|
||||
<a href="/docs/Reference"><button class="inline">
|
||||
<p>Reference guide</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</section>
|
||||
</main>
|
|
@ -4,4 +4,14 @@
|
|||
<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>
|
||||
</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>
|
|
@ -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/pages/features") ?></style>
|
||||
<section id="this-stays">
|
||||
<?= VV::embed(MEDIA_DIR . "arrow.svg") ?>
|
||||
<?= VV::embed("public/assets/media/arrow.svg") ?>
|
||||
<div>
|
||||
<h1>This thing there,</h1>
|
||||
<p>That header is present on every page, so it's loaded once and never again.</p>
|
||||
</div>
|
||||
<?= VV::embed(MEDIA_DIR . "arrow.svg") ?>
|
||||
<?= VV::embed("public/assets/media/arrow.svg") ?>
|
||||
</section>
|
||||
<section id="softnav" class="split">
|
||||
<div class="text">
|
||||
|
@ -22,7 +15,7 @@
|
|||
<div class="buttons">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>Vegvisir shells</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -37,7 +30,7 @@
|
|||
<div class="buttons">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>'vv' attributes</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -52,7 +45,7 @@
|
|||
<div class="buttons">
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>VV::include()</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -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/pages/index") ?></style>
|
||||
<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>
|
||||
</div>
|
||||
<div class="compass">
|
||||
<?= VV::embed(MEDIA_DIR . "compass-points.svg") ?>
|
||||
<?= VV::embed(MEDIA_DIR . "compass-points.svg") ?>
|
||||
<?= VV::embed(MEDIA_DIR . "compass.svg") ?>
|
||||
<?= VV::embed("public/assets/media/compass-points.svg") ?>
|
||||
<?= VV::embed("public/assets/media/compass-points.svg") ?>
|
||||
<?= VV::embed("public/assets/media/compass.svg") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="softnav" class="split">
|
||||
|
@ -24,13 +17,13 @@
|
|||
<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>
|
||||
<div class="buttons">
|
||||
<a href="/demos"><button class="inline solid">
|
||||
<p>more examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<a href="/features"><button class="inline solid">
|
||||
<p>more info</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/JavaScript"><button class="inline">
|
||||
<p>reference</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -43,13 +36,13 @@
|
|||
<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>
|
||||
<div class="buttons">
|
||||
<a href="/demos"><button class="inline solid">
|
||||
<p>more examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<a href="/docs"><button class="inline solid">
|
||||
<p>more info</p>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs/Reference/PHP/VV/css"><button class="inline">
|
||||
<p>reference</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -64,12 +57,12 @@
|
|||
<div class="buttons">
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline">
|
||||
<p>source code</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::embed(MEDIA_DIR . "gnu.svg") ?>
|
||||
<?= VV::embed("public/assets/media/gnu.svg") ?>
|
||||
</div>
|
||||
</section>
|
||||
<script><?= VV::js("public/assets/js/pages/index") ?></script>
|
|
@ -1,10 +1,3 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\{MEDIA_DIR, ICONS_DIR, DEFAULT_BUTTON_ICON};
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
@ -53,13 +46,13 @@
|
|||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/"><?= VV::embed(MEDIA_DIR . "logo.svg") ?></a>
|
||||
<a href="/"><?= VV::embed("public/assets/media/logo.svg") ?></a>
|
||||
<nav class="m">
|
||||
<a href="/"><button class="inline sly">
|
||||
<p>vegvisir</p>
|
||||
</button></a>
|
||||
<button data-menu class="inline solid">
|
||||
<?= VV::embed(ICONS_DIR . "hamburger.svg") ?>
|
||||
<?= VV::embed("public/assets/media/icons/hamburger.svg") ?>
|
||||
</button>
|
||||
</nav>
|
||||
<nav>
|
||||
|
@ -69,30 +62,30 @@
|
|||
<div></div>
|
||||
<a href="/features"><button class="inline sly">
|
||||
<p>features</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs"><button class="inline sly">
|
||||
<p>documentation</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/examples"><button class="inline sly">
|
||||
<p>examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<nav>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<a href="/docs/get-started"><button class="inline solid">
|
||||
<p>get started</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</header>
|
||||
|
@ -108,19 +101,19 @@
|
|||
<nav>
|
||||
<a href="https://vlw.se"><button class="inline sly">
|
||||
<p>vlw</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline sly">
|
||||
<p>license</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="https://codeberg.org/vegvisir/website"><button class="inline sly">
|
||||
<p>website</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid sly">
|
||||
<p>contribute ❤️</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</footer>
|
||||
|
|
|
@ -1,9 +1,5 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\ICONS_DIR;
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
$HTMLCodeDemoElement = new class {
|
||||
public bool $valid = false;
|
||||
|
||||
|
@ -38,10 +34,10 @@
|
|||
|
||||
public static function icon(string $file): string {
|
||||
$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 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 {
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk6">new</span><span class="mtk1"> </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"> </span><span class="mtk10">href</span><span class="mtk1">: </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"> </span><span class="mtk10">options</span><span class="mtk3">?:</span><span class="mtk1"> </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">) </span><span class="mtk3">-</span><span class="mtk3">></span><span class="mtk1"> </span><span class="mtk6">this</span></span></div></div>
|
|
@ -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"> </span><span class="mtk19">STARTED</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">FINISHED</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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>
|
|
@ -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"> </span><span class="mtk19">REPLACE</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">INSERT</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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>
|
|
@ -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"> </span><span class="mtk6">bool</span><span class="mtk1"> </span><span class="mtk20 squiggly-inline-unnecessary">pushHistory</span><span class="mtk1">: </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"> </span><span class="mtk6">bool</span><span class="mtk1"> </span><span class="mtk20 squiggly-inline-unnecessary">carryRequestOptions</span><span class="mtk1">: </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>
|
|
@ -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"> </span><span class="mtk19">AFTEREND</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">BEFOREEND</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">AFTERBEGIN</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">BEFOREBEING</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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>
|
|
@ -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"> </span><span class="mtk19">TOP</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">SELF</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">BLANK</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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"> </span><span class="mtk19">PARENT</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </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>
|
|
@ -1,60 +1,56 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\{ICONS_DIR, DEFAULT_BUTTON_ICON};
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
$HTMLNavMenuElement = new class {}
|
||||
|
||||
?>
|
||||
<nav-menu>
|
||||
<nav class="horizontal">
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="/docs/get-started"><button class="inline solid">
|
||||
<p>get started</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="/features"><button class="inline">
|
||||
<p>features</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/docs"><button class="inline">
|
||||
<p>documentation</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="/examples"><button class="inline">
|
||||
<p>examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="https://vlw.se"><button class="inline">
|
||||
<p>vlw</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir/src/branch/master/LICENSE"><button class="inline">
|
||||
<p>license</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="https://codeberg.org/vegvisir/website"><button class="inline">
|
||||
<p>website</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline solid">
|
||||
<p>contribute ❤️</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</nav-menu>
|
||||
|
|
|
@ -6,11 +6,3 @@
|
|||
* # Docs
|
||||
*/
|
||||
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";
|
Loading…
Add table
Reference in a new issue