mirror of
https://codeberg.org/vegvisir/website.git
synced 2025-09-14 00:43:42 +02:00
wip: 2025-02-13T17:45:30+0100 (1739465130)
This commit is contained in:
parent
4f0f2a57f5
commit
09781225f9
51 changed files with 467 additions and 118 deletions
|
@ -19,7 +19,7 @@
|
|||
|
||||
if (is_dir(VV::root($this->dir))) {
|
||||
// Strip "." and ".."
|
||||
$this->files = array_filter(scandir(VV::root($this->dir)), function (string $item) {
|
||||
$this->files = array_filter(scandir(VV::root($this->dir), SCANDIR_SORT_DESCENDING), function (string $item) {
|
||||
return substr($item, 0, 1) !== ".";
|
||||
});
|
||||
|
||||
|
@ -28,6 +28,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
public static function name(string $file): string {
|
||||
return substr($file, 0, strlen($file) - 4);
|
||||
}
|
||||
|
||||
public static function language(string $file): string {
|
||||
return explode(".", $file, 3)[1];
|
||||
}
|
||||
|
||||
public function file_path(string $file): string {
|
||||
return $this->dir . $file;
|
||||
}
|
||||
|
@ -37,8 +45,8 @@
|
|||
<code-demo>
|
||||
<div class="header">
|
||||
<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
|
||||
<button class="inline">
|
||||
<?= VV::embed(ICONS_DIR . "languages/" . $file) ?>
|
||||
<button class="inline" data-lang="<?= $HTMLCodeDemoElement::language($file) ?>" data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
|
||||
<?= VV::embed(ICONS_DIR . "languages/{$HTMLCodeDemoElement::language($file)}.svg") ?>
|
||||
<p><?= substr($file, 0, strlen($file) - 4) ?></p>
|
||||
</button>
|
||||
<?php endforeach; ?>
|
||||
|
@ -47,7 +55,7 @@
|
|||
<div class="body">
|
||||
|
||||
<?php foreach ($HTMLCodeDemoElement->files as $file): ?>
|
||||
<div>
|
||||
<div data-file="<?= $HTMLCodeDemoElement::name($file) ?>">
|
||||
<?= VV::include($HTMLCodeDemoElement->file_path($file)) ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
|
@ -35,12 +35,51 @@ code-demo .header button.inline + button.inline {
|
|||
border-left: unset;
|
||||
}
|
||||
|
||||
/* ## Active */
|
||||
|
||||
code-demo .header button.active {
|
||||
border-top: solid 4px var(--color-accent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ## Languages */
|
||||
|
||||
code-demo .header button[data-lang="js"] {
|
||||
--primer-color-accent: 241, 224, 90;
|
||||
--color-accent: rgb(var(--primer-color-accent));
|
||||
}
|
||||
|
||||
code-demo .header button[data-lang="css"] {
|
||||
--primer-color-accent: 81, 154, 186;
|
||||
--color-accent: rgb(var(--primer-color-accent));
|
||||
}
|
||||
|
||||
code-demo .header button[data-lang="php"] {
|
||||
--primer-color-accent: 160, 116, 196;
|
||||
--color-accent: rgb(var(--primer-color-accent));
|
||||
}
|
||||
|
||||
code-demo .header button[data-lang="html"] {
|
||||
--primer-color-accent: 221, 120, 49;
|
||||
--color-accent: rgb(var(--primer-color-accent));
|
||||
}
|
||||
|
||||
/* # Body */
|
||||
|
||||
code-demo .body {
|
||||
padding: var(--padding);
|
||||
}
|
||||
|
||||
/* ## Tabs */
|
||||
|
||||
code-demo .body [data-file] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
code-demo .body [data-file].active {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
/* # Syntax highliting */
|
||||
|
||||
code-demo .mtk1 { color: #cccccc; }
|
||||
|
|
|
@ -1,17 +1,50 @@
|
|||
section {
|
||||
min-height: 40svh;
|
||||
}
|
||||
|
||||
/* # Components */
|
||||
|
||||
/* ## Split */
|
||||
|
||||
section.split {
|
||||
display: grid;
|
||||
justify-items: center;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
section.split > div {
|
||||
grid-row: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
section.split.reverse > div:last-child {
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
section.split.reverse > div:first-child {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
/* ### Text */
|
||||
|
||||
section.split .text {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ### Buttons */
|
||||
|
||||
section.split .buttons {
|
||||
display: flex;
|
||||
gap: var(--padding);
|
||||
margin-top: var(--padding);
|
||||
}
|
||||
|
||||
/* # Sections */
|
||||
|
||||
/* ## Intro */
|
||||
|
@ -48,6 +81,8 @@ section#intro div.compass svg:nth-child(2) {
|
|||
|
||||
/* ## Assets */
|
||||
|
||||
section#assets {
|
||||
height: 100svh;
|
||||
/* ## Freedom */
|
||||
|
||||
section#freedom > div > svg {
|
||||
height: 300px;
|
||||
}
|
59
public/assets/css/snippets/docs/header.css
Normal file
59
public/assets/css/snippets/docs/header.css
Normal file
|
@ -0,0 +1,59 @@
|
|||
/* # Overrides */
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* # Sections */
|
||||
|
||||
/* ## Header */
|
||||
|
||||
section.header {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
color: white;
|
||||
position: sticky;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
height: calc(var(--running-size) - var(--padding));
|
||||
grid-template-rows: var(--running-size);
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* ### Nav */
|
||||
|
||||
section.header nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--padding);
|
||||
justify-content: baseline;
|
||||
}
|
||||
|
||||
section.header nav:last-of-type {
|
||||
justify-content: end;
|
||||
gap: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
/* ### Spacer */
|
||||
|
||||
section.header nav > div {
|
||||
width: 2px;
|
||||
height: 80%;
|
||||
margin: 0 var(--padding);
|
||||
background-color: rgba(0, 0, 0, .07);
|
||||
}
|
||||
|
||||
/* ### Buttons */
|
||||
|
||||
section.header button.inline:not(.solid):hover,
|
||||
section.header button.inline {
|
||||
fill: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
section.header button.inline.solid {
|
||||
color: var(--color-accent);
|
||||
background-color: white;
|
||||
}
|
|
@ -1,5 +1,48 @@
|
|||
footer {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
color: white;
|
||||
position: sticky;
|
||||
overflow: hidden;
|
||||
align-items: stretch;
|
||||
height: var(--running-size);
|
||||
grid-template-rows: var(--running-size);
|
||||
background-color: var(--color-accent);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
/* ### Nav */
|
||||
|
||||
footer nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--padding);
|
||||
justify-content: baseline;
|
||||
}
|
||||
|
||||
footer nav:last-of-type {
|
||||
justify-content: end;
|
||||
gap: calc(var(--padding) / 2);
|
||||
}
|
||||
|
||||
/* ### Spacer */
|
||||
|
||||
footer nav > div {
|
||||
width: 2px;
|
||||
height: 80%;
|
||||
margin: 0 var(--padding);
|
||||
background-color: rgba(0, 0, 0, .07);
|
||||
}
|
||||
|
||||
/* ### Buttons */
|
||||
|
||||
footer button.inline:not(.solid):hover,
|
||||
footer button.inline {
|
||||
fill: white;
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer button.inline.solid {
|
||||
color: var(--color-accent);
|
||||
background-color: white;
|
||||
}
|
|
@ -29,4 +29,17 @@ export class CustomElement extends HTMLElement {
|
|||
|
||||
document.head.appendChild(element);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
if ("connected" in this) {
|
||||
this.connected();
|
||||
}
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
if ("disconnected" in this) {
|
||||
this.disconnected();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
|
@ -2,12 +2,39 @@ import { CustomElement } from "./CustomElement.mjs";
|
|||
|
||||
export const TAG_NAME = "code-demo";
|
||||
|
||||
const SELECTOR_HEADER_BUTTON = ".header button";
|
||||
|
||||
class HTMLCodeDemoElement extends CustomElement {
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
this.importElementStylesheet(this.constructor.name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Set a tab as active by passing an HTMLElement with a data-lang attribute
|
||||
* @param {HTMLElement} target
|
||||
*/
|
||||
#setActiveTab(target) {
|
||||
[...this.querySelectorAll("[data-file]")].forEach(element => {
|
||||
element.classList.remove("active");
|
||||
|
||||
// Set active if current element lang is target lang
|
||||
if (element.dataset.file === target.dataset.file) {
|
||||
element.classList.add("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
connected() {
|
||||
// Bind event listeners for language tabs
|
||||
[...this.querySelectorAll(SELECTOR_HEADER_BUTTON)].forEach(element => {
|
||||
element.addEventListener("click", (event) => this.#setActiveTab(event.target.closest(SELECTOR_HEADER_BUTTON)))
|
||||
});
|
||||
|
||||
// Make the first tab active on load
|
||||
this.#setActiveTab(this.querySelector(SELECTOR_HEADER_BUTTON));
|
||||
}
|
||||
}
|
||||
|
||||
globalThis.customElements.define(TAG_NAME, HTMLCodeDemoElement);
|
1
public/assets/media/icons/languages/css.svg
Normal file
1
public/assets/media/icons/languages/css.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 16.9 16.9" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:none;stroke-width:.529167;stroke-miterlimit:0;stroke-opacity:1" d="M104.8 115.9h16.9v16.9h-16.9z" transform="translate(-104.8 -115.9)"/><path d="m109.1 129.3.4-1.5c.2-1 .1-1-.8-1-.8 0-.9-.1-.9-.7 0-.7.2-.8 1.1-.9 1 0 1.2-.2 1.3-1 0-.7 0-.8-.9-.8-.7 0-.9 0-.9-.7s.1-.8 1.2-.8c1.1 0 1.2 0 1.4-1 .4-2 .5-2 1.4-2 1 0 1 .1.6 1.9-.3 1.1-.3 1.1.9 1.1s1.2 0 1.4-1.5c.2-1.5.2-1.5 1.2-1.5s1 0 .9 1a27 27 0 0 1-.4 1.5c0 .4 0 .5.8.5s1 .1 1 .8c0 .6-.2.7-1 .7-.7 0-1.2.2-1.3.5-.4 1-.2 1.4.7 1.4.8 0 1 0 1 .7s-.2.8-1.2.9c-1 0-1.1.1-1.4 1.5-.2 1.4-.3 1.4-1.3 1.4-.9 0-1 0-1-.5.2-.3.3-1 .4-1.5.2-1 .2-1-.8-1s-1.1.1-1.3 1c-.4 2-.4 2-1.6 2-.8 0-1 0-.9-.5zm5.2-4.5c.4-1 .2-1.4-.9-1.4-.5 0-1 .1-1 .3l-.2.9c-.2.6-.1.7.9.7.7 0 1.1-.2 1.2-.5z" transform="translate(-104.8 -115.9)"/></svg>
|
After Width: | Height: | Size: 879 B |
1
public/assets/media/icons/languages/html.svg
Normal file
1
public/assets/media/icons/languages/html.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 16.9 16.9" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:none;stroke-width:.529167;stroke-miterlimit:0;stroke-opacity:1" d="M104.8 115.9h16.9v16.9h-16.9z" transform="translate(-104.8 -115.9)"/><path d="M108.9 127.4a12.8 12.8 0 0 1-2.5-3c0-.6 4.8-5.6 5.3-5.6l.2 1c0 .9-.4 1.5-1.8 2.8l-1.8 1.8 1.8 1.7c1.4 1.3 1.8 2 1.8 2.8 0 .5 0 1-.2 1s-1.4-1.1-2.8-2.5zm6.2 1.4c0-1 .3-1.4 1.8-2.8l1.8-1.6-1.8-1.7c-1.5-1.3-1.8-1.8-1.8-2.8 0-.6 0-1 .2-1s1.3 1 2.6 2.3c3 3 3 3.4 0 6.4a19.1 19.1 0 0 1-2.6 2.3c-.1 0-.2-.5-.2-1.1z" transform="translate(-104.8 -115.9)"/></svg>
|
After Width: | Height: | Size: 613 B |
1
public/assets/media/icons/languages/js.svg
Normal file
1
public/assets/media/icons/languages/js.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 16.9 16.9" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:none;stroke-width:.529167;stroke-miterlimit:0;stroke-opacity:1" d="M104.8 115.9h16.9v16.9h-16.9z" transform="translate(-104.8 -115.9)"/><path d="M106.6 128.4c0-.9.1-1 1.2-1 1.3-.2 1.3-.2 1.4-4.1 0-4 0-4 1.4-4h1.4l-.1 4.3c-.1 4.1-.1 4.2-1 5-.8.6-1.4.8-2.7.8-1.6 0-1.6 0-1.6-1zm7.1.8c-.5-.2-.6-1.7 0-2 .1-.1.7 0 1.3.1 1.3.4 2.6 0 2.6-.8 0-.3-.6-.8-1.5-1.2a9 9 0 0 1-2.2-1.3c-.9-.9-.8-2.8.1-3.7 1-.8 1.8-1 3.8-.9 1.4 0 1.7.2 1.8.8.1 1-.4 1.5-1.5 1.2-2.3-.6-3 1-.9 1.8 2 .8 2.8 1.8 2.8 3.1 0 1.4-.2 1.7-1.3 2.5-.8.6-4 .8-5 .4z" transform="translate(-104.8 -115.9)"/></svg>
|
After Width: | Height: | Size: 683 B |
1
public/assets/media/icons/languages/php.svg
Normal file
1
public/assets/media/icons/languages/php.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg viewBox="0 0 16.9 16.9" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path style="fill:none;stroke:none;stroke-width:.529167;stroke-miterlimit:0" d="M104.8 115.9h16.9v16.9h-16.9z" transform="translate(-104.8 -115.9)"/><path d="m110.7 129.6-.2-1.8c0-.8-.3-1.1-1.3-1.6-1.5-.7-1.8-.4-.8 1 .7.9.7 1.2.4 2-.3.4-.6.8-.8.8-.5 0-.8-.7-.4-1.1.3-.3 0-.9-1.2-2.1-1.4-1.5-1.6-1.9-1.6-3.3 0-3.4 1.8-5.1 5.1-5.1 2 0 2.7.8 2.7 2.7 0 1.1-.2 1.6-1 2.2-1 .9-1.7.9-2.2 0-.3-.5-.4-.5-.3.2.2 1.3 2.7 1 3.7-.4.4-.6.6-1.7.7-2.6 0-1.6 0-1.6 1.7-1.7a6 6 0 0 1 5.7 2.9c1 1.6 1.1 2.6.4 2-.3-.3-.7 0-1.3 1.2a5 5 0 0 0-.6 3.3c.1 1.9 0 2.2-1.7 2.2-1 0-1-.1-1-2.3 0-1 0-1-1.8-1l-2 .3c-.2.1-.3.8-.3 1.6 0 1.2-.1 1.4-.9 1.4a1 1 0 0 1-1-.8zm-3.6-4.2c.4-.7-.4-1.2-1-.7-.3.2-.6.6-.6.8 0 .4 1.3.3 1.6-.1zm-.2-2.8c0-.2-.1-.4-.3-.4-.2 0-.4.2-.4.4s.2.3.4.3.3-.1.3-.3z" transform="translate(-104.8 -115.9)"/></svg>
|
After Width: | Height: | Size: 889 B |
|
@ -1,15 +1,7 @@
|
|||
<section class="md">
|
||||
<container>
|
||||
<h1>Introduction</h1>
|
||||
<p>Vegvisir is a PHP and JavaScript web framework developed by <a href="https://vlw.se">Victor Westerlund</a> as a hobby project.</p>
|
||||
<p>This framework is not intended to replace the true-and-tested like Laravel, it would be interesting of course if it gained some users but my goal is to keep this project small and flexible.</p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Scope</h1>
|
||||
<p>This documentation only covers the new experimental version of Vegvisir, which is version 3.</p>
|
||||
<p>The older versions of Vegvisir can be found here. They lack proper documentation and function a bit differently than Vegvisir 3 which has been largely rewritten from scratch. The main addition to version 3 are what I call "shells".</p>
|
||||
</container>
|
||||
</section>
|
||||
<?= VV::shell("shells/docs") ?>
|
||||
<?php
|
||||
|
||||
use const VVWebsite\VERSION_LATEST;
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
?>
|
||||
<?= VV::include(VERSION_LATEST . "index"); ?>
|
|
@ -1,85 +1,7 @@
|
|||
<?= VV::include("modules/snippet/Snippet.php") ?>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Installation</h1>
|
||||
<p>In this guide we will be installing Vegvisir on a Debian-based system with NGINX as the web server. The process should be similar for other configurations as well.</p>
|
||||
<p><a href="/help">Please contact me if you need help</a></p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Prerequisites</h2>
|
||||
<ul>
|
||||
<li>PHP 8.0 or newer (PHP 8.3 is recommended)</li>
|
||||
<li>A web server (NGINX is used in this guide)</li>
|
||||
</ul>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 1: Clone the repo</h2>
|
||||
<p>Let's start by cloning Vegvisir to a folder. The code for Vegvisir will be separate from the code for your project.</p>
|
||||
<?= Snippet::put("docs/installation/0", Snippet::PLAINTEXT) ?>
|
||||
<p>I have cloned this into the folder <code>/var/www/vegvisir</code> but you can put it wherever you want.</p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 2: Install dependencies</h2>
|
||||
<p>Vegvisir only has one dependency, let's <code>cd</code> into our folder and install it with <a href="https://getcomposer.org/" target="_blank">Composer</a>.</p>
|
||||
<?= Snippet::put("docs/installation/1", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 3: Configure virtual host</h2>
|
||||
<p>We will be pointing a virtual host to the <code>/public/index.php</code> file from the Vegvisir root directory.</p>
|
||||
<p>Since your project files will live in a different directory, this can be set-and-forget.</p>
|
||||
<?= Snippet::put("docs/installation/2", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 4: Create project folder</h2>
|
||||
<p>We're almost done here. We want to create a separate folder which will hold our project files.</p>
|
||||
<p>Let's create a folder <code>/var/www/my-website</code> as an example - you can put this wherever you want!</p>
|
||||
<?= Snippet::put("docs/installation/3", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 5: Point Vegvisir to project folder</h2>
|
||||
<p>Now let's finish up by pointing Vegvisir to the folder we just created.</p>
|
||||
<p>Make a copy of the <code>.env.example.ini</code> file from Vegvisir's root directory and place it in the same spot as <code>.env.ini</code></p>
|
||||
<?= Snippet::put("docs/installation/4", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<p>There is only one line we need to change inside the <code>.env.ini</code> file we just created. It should be the top most variable called <code>root_path</code>.</p>
|
||||
<p>Change the value of this variable to an absolute path to your project <strong>root</strong> folder. In our case it will be <code>/var/www/my-website</code>.</p>
|
||||
<?= Snippet::put("docs/installation/5", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Done!</h2>
|
||||
<p>That's all there is to it. Restart your webserver if you haven't and navigate to your published website.</p>
|
||||
<p>If everything worked correctly, you should see a default landing page with a summary.</p>
|
||||
</container>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Static assets</h1>
|
||||
<p>Vegvisir will automatically serve anything that isn't a <code>.php</code> file under <code>/public</code> in your project directory as a static asset. You can for example put your <code>robots.txt</code> file under <code>/public/robots.txt</code> and it will be returned as a <code>text/plain</code> document.</p>
|
||||
<p>While this works fine for smaller assets, they still have to be passed through the PHP CGI. This process is a bit slower than serving assets with your web server directly - and might be a lot slower for larger files.</p>
|
||||
<p>To fix this, let's add an optional <code>location</code> block to our NGINX configuration which will handle assets. The process should be similar for other web servers - <a href="/help">contact me if you need help</a>.</p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<p>Let's add the following <code>location</code> block to our NGINX virtual host that we set up in <a href="#asd">Step X</a>.</p>
|
||||
</container>
|
||||
</section>
|
||||
<?= VV::shell("shells/docs") ?>
|
||||
<?php
|
||||
|
||||
use const VVWebsite\VERSION_LATEST;
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
?>
|
||||
<?= VV::include(VERSION_LATEST . "installation"); ?>
|
18
public/docs/v3.1.3/index.php
Normal file
18
public/docs/v3.1.3/index.php
Normal file
|
@ -0,0 +1,18 @@
|
|||
<?= VV::include("snippets/docs/shell") ?>
|
||||
<main>
|
||||
<?= VV::include("snippets/docs/version-select"); ?>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Introduction</h1>
|
||||
<p>Vegvisir is a PHP and JavaScript web framework developed by <a href="https://vlw.se">Victor Westerlund</a> as a hobby project.</p>
|
||||
<p>This framework is not intended to replace the true-and-tested like Laravel, it would be interesting of course if it gained some users but my goal is to keep this project small and flexible.</p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Scope</h1>
|
||||
<p>This documentation only covers the new experimental version of Vegvisir, which is version 3.</p>
|
||||
<p>The older versions of Vegvisir can be found here. They lack proper documentation and function a bit differently than Vegvisir 3 which has been largely rewritten from scratch. The main addition to version 3 are what I call "shells".</p>
|
||||
</container>
|
||||
</section>
|
||||
</main>
|
84
public/docs/v3.1.3/installation.php
Normal file
84
public/docs/v3.1.3/installation.php
Normal file
|
@ -0,0 +1,84 @@
|
|||
<?= VV::include("snippets/docs/version-select"); ?>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Installation</h1>
|
||||
<p>In this guide we will be installing Vegvisir on a Debian-based system with NGINX as the web server. The process should be similar for other configurations as well.</p>
|
||||
<p><a href="/help">Please contact me if you need help</a></p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Prerequisites</h2>
|
||||
<ul>
|
||||
<li>PHP 8.0 or newer (PHP 8.3 is recommended)</li>
|
||||
<li>A web server (NGINX is used in this guide)</li>
|
||||
</ul>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 1: Clone the repo</h2>
|
||||
<p>Let's start by cloning Vegvisir to a folder. The code for Vegvisir will be separate from the code for your project.</p>
|
||||
<?= Snippet::put("docs/installation/0", Snippet::PLAINTEXT) ?>
|
||||
<p>I have cloned this into the folder <code>/var/www/vegvisir</code> but you can put it wherever you want.</p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 2: Install dependencies</h2>
|
||||
<p>Vegvisir only has one dependency, let's <code>cd</code> into our folder and install it with <a href="https://getcomposer.org/" target="_blank">Composer</a>.</p>
|
||||
<?= Snippet::put("docs/installation/1", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 3: Configure virtual host</h2>
|
||||
<p>We will be pointing a virtual host to the <code>/public/index.php</code> file from the Vegvisir root directory.</p>
|
||||
<p>Since your project files will live in a different directory, this can be set-and-forget.</p>
|
||||
<?= Snippet::put("docs/installation/2", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 4: Create project folder</h2>
|
||||
<p>We're almost done here. We want to create a separate folder which will hold our project files.</p>
|
||||
<p>Let's create a folder <code>/var/www/my-website</code> as an example - you can put this wherever you want!</p>
|
||||
<?= Snippet::put("docs/installation/3", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Step 5: Point Vegvisir to project folder</h2>
|
||||
<p>Now let's finish up by pointing Vegvisir to the folder we just created.</p>
|
||||
<p>Make a copy of the <code>.env.example.ini</code> file from Vegvisir's root directory and place it in the same spot as <code>.env.ini</code></p>
|
||||
<?= Snippet::put("docs/installation/4", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<p>There is only one line we need to change inside the <code>.env.ini</code> file we just created. It should be the top most variable called <code>root_path</code>.</p>
|
||||
<p>Change the value of this variable to an absolute path to your project <strong>root</strong> folder. In our case it will be <code>/var/www/my-website</code>.</p>
|
||||
<?= Snippet::put("docs/installation/5", Snippet::PLAINTEXT) ?>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h2>Done!</h2>
|
||||
<p>That's all there is to it. Restart your webserver if you haven't and navigate to your published website.</p>
|
||||
<p>If everything worked correctly, you should see a default landing page with a summary.</p>
|
||||
</container>
|
||||
</section>
|
||||
<hr>
|
||||
<section class="md">
|
||||
<container>
|
||||
<h1>Static assets</h1>
|
||||
<p>Vegvisir will automatically serve anything that isn't a <code>.php</code> file under <code>/public</code> in your project directory as a static asset. You can for example put your <code>robots.txt</code> file under <code>/public/robots.txt</code> and it will be returned as a <code>text/plain</code> document.</p>
|
||||
<p>While this works fine for smaller assets, they still have to be passed through the PHP CGI. This process is a bit slower than serving assets with your web server directly - and might be a lot slower for larger files.</p>
|
||||
<p>To fix this, let's add an optional <code>location</code> block to our NGINX configuration which will handle assets. The process should be similar for other web servers - <a href="/help">contact me if you need help</a>.</p>
|
||||
</container>
|
||||
</section>
|
||||
<section class="md">
|
||||
<container>
|
||||
<p>Let's add the following <code>location</code> block to our NGINX virtual host that we set up in <a href="#asd">Step X</a>.</p>
|
||||
</container>
|
||||
</section>
|
3
public/error.php
Normal file
3
public/error.php
Normal file
|
@ -0,0 +1,3 @@
|
|||
<section>
|
||||
<h1>404 Not Found</h1>
|
||||
</section>
|
|
@ -1,6 +1,6 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\MEDIA_DIR;
|
||||
use const VVWebsite\{MEDIA_DIR, DEFAULT_BUTTON_ICON};
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
|
@ -21,13 +21,57 @@
|
|||
</div>
|
||||
</section>
|
||||
<section id="assets" class="split">
|
||||
<div>
|
||||
<div class="text">
|
||||
<h1>Asset injection</h1>
|
||||
<p>Vegvisir allows you to bundle your page JavaScript and CSS directly into a soft-navigated page using native PHP templating and the VV PHP class.</p>
|
||||
<p>Bundle your page JavaScript and CSS using native PHP templating and the VV PHP class directly into a automatically minified and soft-navigated page.</p>
|
||||
<div class="buttons">
|
||||
<a href="/"><button class="inline solid">
|
||||
<p>more examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline">
|
||||
<p>reference</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=index_assets") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="softnav" class="split reverse">
|
||||
<div class="text">
|
||||
<h1>Automatic soft navigation</h1>
|
||||
<p>Vegvisir will automatically compile and soft-navigate between pages on your website without any modifications to your markdown. Even the file structure on disk follows an MPA-layout.</p>
|
||||
<div class="buttons">
|
||||
<a href="/"><button class="inline solid">
|
||||
<p>more examples</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline">
|
||||
<p>reference</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::include("elements/HTMLCodeDemoElement?id=index_softnav") ?>
|
||||
</div>
|
||||
</section>
|
||||
<section id="freedom" class="split">
|
||||
<div class="text">
|
||||
<h1>Respects your freedom</h1>
|
||||
<p>No tracking, no spying, fully available source that respects your freedom with GNU GPLv3.</p>
|
||||
<div class="buttons">
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline">
|
||||
<p>source code</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<?= VV::embed(MEDIA_DIR . "gnu.svg") ?>
|
||||
</div>
|
||||
</section>
|
||||
<?= VV::include("snippets/footer") ?>
|
||||
<script><?= VV::js("public/assets/js/pages/index.js") ?></script>
|
2
public/robots.txt
Normal file
2
public/robots.txt
Normal file
|
@ -0,0 +1,2 @@
|
|||
User-agent: *
|
||||
Allow: /
|
|
@ -58,30 +58,30 @@
|
|||
<p>vegvisir</p>
|
||||
</button></a>
|
||||
<div></div>
|
||||
<a href="/"><button class="inline sly">
|
||||
<a href="/about"><button class="inline sly">
|
||||
<p>about</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline sly">
|
||||
<a href="/docs"><button class="inline sly">
|
||||
<p>documentation</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline sly">
|
||||
<a href="/demos"><button class="inline sly">
|
||||
<p>demos</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="/"><button class="inline">
|
||||
<a href="mailto:victor@vlw.se"><button class="inline">
|
||||
<?= VV::embed(ICONS_DIR . "email.svg") ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline">
|
||||
<a href="matrix:@vegvisir:vlw.se"><button class="inline">
|
||||
<?= VV::embed(ICONS_DIR . "matrix.svg") ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline">
|
||||
<a href="https://codeberg.org/vegvisir/vegvisir"><button class="inline">
|
||||
<?= VV::embed(ICONS_DIR . "codeberg.svg") ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline solid">
|
||||
<a href="/docs/installation"><button class="inline solid">
|
||||
<p>get vegvisir</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
|
|
1
snippets/HTMLCodeDemoElement/index_assets/demo.css.php
Normal file
1
snippets/HTMLCodeDemoElement/index_assets/demo.css.php
Normal file
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk9">h1</span><span class="mtk1"> {</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk10">color</span><span class="mtk1">: </span><span class="mtk1 dyn-rule-3-2 colorpicker-color-decoration"> </span><span class="mtk12">salmon</span><span class="mtk1">;</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk9">button</span><span class="mtk1"> {</span></span></div><div style="top:95px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk10">padding</span><span class="mtk1">: </span><span class="mtk7">10px</span><span class="mtk1">;</span></span></div><div style="top:114px;height:19px;" class="view-line"><span><span class="mtk1">}</span></span></div></div>
|
1
snippets/HTMLCodeDemoElement/index_assets/demo.js.php
Normal file
1
snippets/HTMLCodeDemoElement/index_assets/demo.js.php
Normal file
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk10">document</span><span class="mtk1">.</span><span class="mtk16">querySelector</span><span class="mtk1">(</span><span class="mtk12">"button"</span><span class="mtk1">).</span><span class="mtk16">addEventListener</span><span class="mtk1">(</span><span class="mtk12">"click"</span><span class="mtk1">, (</span><span class="mtk10">event</span><span class="mtk1">) </span><span class="mtk6">=></span><span class="mtk1"> {</span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk10">event</span><span class="mtk1">.</span><span class="mtk19">target</span><span class="mtk1">.</span><span class="mtk10">innerText</span><span class="mtk1"> </span><span class="mtk3">=</span><span class="mtk1"> </span><span class="mtk12">"Button clicked!"</span><span class="mtk1">;</span></span></div><div style="top:38px;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">- - public/</span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1">- - - index.php</span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1">- - - page1.php</span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk1">- - - page2.php</span></span></div></div>
|
1
snippets/HTMLCodeDemoElement/index_softnav/index.php.php
Normal file
1
snippets/HTMLCodeDemoElement/index_softnav/index.php.php
Normal file
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">style</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.css"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">style</span><span class="mtk14">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">h1</span><span class="mtk14">></span><span class="mtk1">Hello world</span><span class="mtk14"></</span><span class="mtk6">h1</span><span class="mtk14">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"></</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">script</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.js"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">script</span><span class="mtk14">></span></span></div></div>
|
1
snippets/HTMLCodeDemoElement/index_softnav/page1.php.php
Normal file
1
snippets/HTMLCodeDemoElement/index_softnav/page1.php.php
Normal file
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">style</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.css"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">style</span><span class="mtk14">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">h1</span><span class="mtk14">></span><span class="mtk1">Hello world</span><span class="mtk14"></</span><span class="mtk6">h1</span><span class="mtk14">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"></</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">script</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.js"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">script</span><span class="mtk14">></span></span></div></div>
|
1
snippets/HTMLCodeDemoElement/index_softnav/page2.php.php
Normal file
1
snippets/HTMLCodeDemoElement/index_softnav/page2.php.php
Normal file
|
@ -0,0 +1 @@
|
|||
<div><div style="top:0px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">style</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.css"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">style</span><span class="mtk14">></span></span></div><div style="top:19px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:38px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"><</span><span class="mtk6">h1</span><span class="mtk14">></span><span class="mtk1">Hello world</span><span class="mtk14"></</span><span class="mtk6">h1</span><span class="mtk14">></span></span></div><div style="top:57px;height:19px;" class="view-line"><span><span class="mtk1"> </span><span class="mtk14"></</span><span class="mtk6">section</span><span class="mtk14">></span></span></div><div style="top:76px;height:19px;" class="view-line"><span><span class="mtk14"><</span><span class="mtk6">script</span><span class="mtk14">></span><span class="mtk6"><?=</span><span class="mtk3"> </span><span class="mtk17">VV</span><span class="mtk3">::</span><span class="mtk16">css</span><span class="mtk3">(</span><span class="mtk12">"demo.js"</span><span class="mtk3">) </span><span class="mtk6">?</span><span class="mtk6">></span><span class="mtk14"></</span><span class="mtk6">script</span><span class="mtk14">></span></span></div></div>
|
27
snippets/docs/header.php
Normal file
27
snippets/docs/header.php
Normal file
|
@ -0,0 +1,27 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\DEFAULT_BUTTON_ICON;
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<style><?= VV::css("public/assets/css/snippets/docs/header") ?></style>
|
||||
<section class="header">
|
||||
<nav>
|
||||
<a href="/"><button class="inline sly">
|
||||
<p>introduction</p>
|
||||
</button></a>
|
||||
<a href="/about"><button class="inline sly">
|
||||
<p>get started</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/about"><button class="inline sly">
|
||||
<p>installation</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/docs"><button class="inline sly">
|
||||
<p>cheat sheets</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</section>
|
2
snippets/docs/shell.php
Normal file
2
snippets/docs/shell.php
Normal file
|
@ -0,0 +1,2 @@
|
|||
<?= VV::include("snippets/docs/header") ?>
|
||||
<?= VV::include("snippets/docs/aside") ?>
|
3
snippets/docs/version-select.php
Normal file
3
snippets/docs/version-select.php
Normal file
|
@ -0,0 +1,3 @@
|
|||
<section>
|
||||
<p>Version select</p>
|
||||
</section>
|
|
@ -1,18 +1,31 @@
|
|||
<?php
|
||||
|
||||
use const VVWebsite\DEFAULT_BUTTON_ICON;
|
||||
|
||||
require_once VV::root("src/Consts.php");
|
||||
|
||||
?>
|
||||
<style><?= VV::css("public/assets/css/snippets/footer") ?></style>
|
||||
<footer>
|
||||
<p>Copyleft <?= date("Y") ?> - All rights reversed</p>
|
||||
<nav>
|
||||
<p>Copyleft <?= date("Y") ?> - All rights reversed</p>
|
||||
</nav>
|
||||
<nav>
|
||||
<a href="/"><button class="inline sly">
|
||||
<p>vlw</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline sly">
|
||||
<p>license</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline sly">
|
||||
<p>website</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
<a href="/"><button class="inline solid">
|
||||
<a href="/"><button class="inline solid sly">
|
||||
<p>contribute ❤️</p>
|
||||
<?= VV::embed(DEFAULT_BUTTON_ICON) ?>
|
||||
</button></a>
|
||||
</nav>
|
||||
</footer>
|
|
@ -2,6 +2,11 @@
|
|||
|
||||
namespace VVWebsite;
|
||||
|
||||
/**
|
||||
* # Docs
|
||||
*/
|
||||
const VERSION_LATEST = "/public/docs/v3.1.3/";
|
||||
|
||||
/**
|
||||
* # Media
|
||||
* Constants related to media files
|
||||
|
|
Loading…
Add table
Reference in a new issue