wip: 2024-08-06T17:08:29+0200 (1722956909)

public/assets/css/document.css

@@ -0,0 +1,152 @@
+:root {
+	--primer-color-deep: 0, 128, 255;
+	--primer-color-light: 135, 255, 255;
+	--color-deep: rgba(var(--primer-color-deep));
+	--color-light: rgba(var(--primer-color-light));
+
+    --padding: 10px;
+	--running-size: 70px;
+}
+
+/* # Cornerstones */
+
+* {
+    margin: 0;
+    color: inherit;
+	font-size: inherit;
+    box-sizing: border-box;
+	font-family: monospace;
+}
+
+body {
+	font-size: 15px;
+	min-height: 100svh;
+	overflow-x: hidden;
+    overscroll-behavior: none;
+}
+
+a {
+	color: inherit;
+    display: contents;
+    text-decoration: none;
+}
+
+/* # Components */
+
+:is(h1, h2, h3, p, li) > a {
+	--underline-tickness: 3px;
+
+    display: initial;
+    text-decoration: underline;
+    text-decoration-color: var(--color-accent);
+	text-underline-offset: var(--underline-tickness);
+    text-decoration-thickness: var(--underline-tickness);
+}
+
+h1 {
+	font-size: 30px;
+	color: var(--color-accent);
+}
+
+h2 {
+	font-size: 25px;
+}
+
+h3 {
+	font-size: 25px;
+}
+
+/* ## Sections */
+
+/* ## Container */
+
+container {
+	margin: auto;
+	height: 100%;
+	display: flex;
+	width: clamp(900px, 80vw, 1400px);
+	align-items: center;
+	gap: var(--padding);
+	padding: var(--padding) 0;
+}
+
+container.split {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+}
+
+container.split > div {
+	display: flex;
+	flex-direction: column;
+	gap: var(--padding);
+}
+
+container.split > div:first-child {
+	align-items: baseline;
+	justify-content: center;
+}
+
+/* ## Button */
+
+button {
+	border: unset;
+	cursor: pointer;
+	padding: 10px 15px;
+	border-radius: 4px;
+	background-color: rgba(0, 0, 0, 0);
+}
+
+button.solid {
+	color: white;
+	background-color: var(--color-deep);
+}
+
+@media (hover: hover) {
+	button:hover {
+		background-color: rgba(0, 0, 0, .05);
+	}
+
+	button.solid:hover {
+		color: var(--color-light);
+		background-color: var(--color-deep);
+	}
+}
+
+/* # Content */
+
+header {
+	--border-width: 2px;
+
+	top: 0px;
+	position: sticky;
+	background-color: white;
+	height: calc(var(--running-size) + var(--border-width));
+	border-bottom: solid var(--border-width) rgba(var(--primer-color-deep), .1);
+	z-index: 1000;
+}
+
+header .logo {
+	height: 40px;
+	padding: 5px;
+	border-radius: 4px;
+	background-color: var(--color-deep);
+}
+
+header ul {
+	display: flex;
+	padding-left: 0;
+	list-style: none;
+	gap: var(--padding);
+}
+
+header ul:last-child {
+	margin-left: auto;
+}
+
+[vv-top-page="/help"] header a[href="/help"] button,
+[vv-top-page="/docs"] header a[href="/docs"] button,
+[vv-top-page="/demos"] header a[href="/demos"] button,
+[vv-top-page="/why"] header a[href="/why"] button {
+	font-weight: bold;
+	background-color: rgba(0, 0, 0, .05);
+}

public/assets/css/pages/index.css

@@ -0,0 +1,74 @@
+:root {
+	--wavelength: 20vw;
+}
+
+body {
+	background-color: var(--color-deep);
+}
+
+header.transparent {
+	color: white;
+	background-color: transparent;
+	border-color: rgba(255, 255, 255, .1);
+}
+
+header.transparent .logo {
+	fill: var(--color-deep);
+	background-color: white;
+}
+
+header.transparent button.solid {
+	color: var(--color-deep);
+	background-color: white;
+}
+
+/* # Sections */
+
+/* ## Intro */
+
+section#intro {
+	color: white;
+	height: 400px;
+}
+
+section#intro div {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: baseline;
+}
+
+section#intro h1 {
+	font-size: 50px;
+}
+
+section#intro h2 {
+	background-color: black;
+}
+
+/* ### Waves */
+
+section#intro .waves {
+	position: relative;
+	z-index: -1;
+}
+
+section#intro .waves img {
+	width: calc(100% + var(--wavelength));
+	object-fit: cover;
+	animation: waves 9s linear infinite;
+}
+
+@keyframes waves {
+	to {
+		transform: translateX(calc((var(--wavelength) * 2) * -1));
+	}
+}
+
+/* ## Example */
+
+section#example {
+	margin-top: calc(var(--wavelength) / 2);
+	background-color: white;
+	height: 700px;
+}

public/assets/css/pages/why.css

@@ -0,0 +1,59 @@
+/* # Sections */
+
+/* ## Title */
+
+section.title {
+	color: white;
+	padding: calc(var(--padding) * 2) 0;
+	align-items: center;
+	background-color: var(--color-deep);
+}
+
+section.title container {
+	display: flex;
+	gap: 50px;
+}
+
+section.title svg {
+	height: 150px;
+}
+
+section.title container > div {
+	display: flex;
+	flex-direction: column;
+	gap: var(--padding);
+}
+
+section.title h1 span {
+	text-decoration: underline;
+}
+
+section.title h2 {
+	background-color: black;
+}
+
+/* ## Text */
+
+section.text {
+	min-height: 400px;
+	padding: calc(var(--padding) * 2) 0;
+}
+
+section.text h2 {
+	color: white;
+	background-color: black;
+}
+
+/* ## Free */
+
+section#free {
+	background-position: 50% 50%;
+	background-size: 400px;
+	background-color: red;
+	background-blend-mode: lighten;
+	background-image: url("/assets/media/gnu.png");
+}
+
+section#free svg {
+	filter: drop-shadow(0 0 40px rgba(255, 255, 255, .3));
+}

public/assets/js/pages/index.js

@@ -0,0 +1,10 @@
+const headerElement = document.querySelector("header");
+
+const updateHeader = () => {
+	document.documentElement.scrollTop > 0
+		? headerElement.classList.remove("transparent")
+		: headerElement.classList.add("transparent")
+}
+
+window.addEventListener("scroll", updateHeader);
+updateHeader();

public/assets/media/logo.svg

@@ -0,0 +1 @@
+<svg class="logo" viewBox="0 0 42.911 41.957" xmlns="http://www.w3.org/2000/svg"><g style="fill:#87ffff;fill-opacity:1"><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(-.95357 0 0 -.95357 33.375 20.979)"/></g><g fill="none" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/><path class="stroke" d="M12 17.823 20.63 2H3.37L12 17.823M12 22 0 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(.95357 0 0 .95357 10.49 20.979)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="scale(.95357) rotate(90 12 10)"/></g><g opacity=".5" style="fill:#87ffff;fill-opacity:1"><path class="solid" d="M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/><path class="stroke" d="M24 17.823 32.63 2H15.37L24 17.823M24 22 12 0h24z" style="display:inline;fill:#87ffff;fill-opacity:1" transform="matrix(0 -.95357 .95357 0 21.932 43.864)"/></g></g></svg>

public/assets/media/waves/waves.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 621.59 97.944" xmlns="http://www.w3.org/2000/svg"><path d="M0 203.768v-32.404l7.208-.59c3.964-.325 10.76-1.708 15.1-3.074 4.342-1.365 11.812-4.564 16.602-7.108 4.79-2.544 13.426-7.179 19.191-10.3 5.766-3.121 13.93-6.716 18.142-7.99 4.213-1.273 10.432-2.71 13.82-3.191 3.388-.483 9.005-.88 12.482-.885 3.476-.005 10.328.574 15.226 1.287 5.48.797 12.502 2.739 18.261 5.048 5.146 2.064 15.046 6.99 22 10.946 6.953 3.957 15.854 8.477 19.78 10.046 3.927 1.57 10.833 3.516 15.347 4.326 5.691 1.021 11.152 1.343 17.808 1.049 6.889-.305 12.075-1.18 18.367-3.098 5.556-1.695 15.454-6.36 27.028-12.737 11.406-6.285 21.48-11.042 26.833-12.67 4.714-1.435 12.774-3.053 17.91-3.596 6.985-.739 11.693-.739 18.678 0 5.136.543 13.196 2.16 17.91 3.595 5.353 1.629 15.427 6.386 26.833 12.67 11.289 6.221 21.51 11.054 26.769 12.659 5.918 1.805 11.498 2.75 18.334 3.104 7.144.37 12.078.105 18.068-.97 4.531-.814 11.452-2.754 15.378-4.312 3.926-1.558 13.372-6.35 20.99-10.647 7.618-4.297 17.245-9.083 21.394-10.635 4.15-1.552 10.243-3.44 13.542-4.194 3.957-.906 10.537-1.363 19.342-1.346 10.435.021 14.988.441 20.88 1.928 4.144 1.045 10.329 3.087 13.744 4.538 3.416 1.45 11.087 5.438 17.048 8.861 5.961 3.423 13.47 7.499 16.687 9.056 3.218 1.557 9.539 3.899 14.048 5.202 7.028 2.033 10.002 2.37 20.84 2.37v65.464H0Z" style="fill:#fff;fill-opacity:1;stroke-width:1" transform="translate(0 -138.226)"/></svg>

public/index.php

@@ -0,0 +1,19 @@
+<style><?= VV::css("public/assets/css/pages/index.css") ?></style>
+<section id="intro">
+	<container class="split">
+		<div>
+			<h2>Vegvisir</h2>
+			<h1>A PHP and JavaScript Web Framework</h1>
+			<p>that handles navigation and routing, and nothing else</p>
+		</div>
+	</container>
+	<div class="waves">
+		<img src="assets/media/waves/waves.svg">
+	</div>
+</section>
+<section id="example">
+	<container>
+		<p>hi</p>
+	</container>
+</section>
+<script><?= VV::js("public/assets/js/pages/index.js") ?></script>

public/why.php

@@ -0,0 +1,36 @@
+<style><?= VV::css("public/assets/css/pages/why.css") ?></style>
+<section class="title">
+	<container>
+		<div>
+			<h1>Load what's needed and change what needs to change</h1>
+		</div>
+	</container>
+</section>
+<section class="text">
+	<container class="split">
+		<div>
+			<h2>Sorry, did I studder?</h2>
+			<p>By loading what's needed and changing only what needs to change on a page, Vegvisir can compile a custom server-side rendered response body for each request depending on what the client already has loaded.</p>
+			<p>For example, why should the header on this page be loaded again when you navigate to another page on this site? Your browser has already fetched, compiled, and rendered everything needed to display it. And when you for example navigate to the documentation page, why should the documentation pages inner "shell" be replaced when you navigate the documentation pages?</p>
+			<p>Each Vegvisir navigation request contains a list of all loaded shells, which the Vegvisir back-end uses to determine what content should be returned depending on what the client has already loaded.</p>
+		</div>
+	</container>
+</section>
+<section id="free" class="title">
+	<container>
+		<?= VV::embed("public/assets/media/why-gnu.svg") ?>
+		<div>
+			<h1>It's a GNU!</h1>
+			<h2>Vegvisir is and will always be free software.</h2>
+		</div>
+	</container>
+</section>
+<section class="text">
+	<container class="split">
+		<div>
+			<h2>Free as in freedom</h2>
+			<p>Major PHP frameworks like Laravel, Symphony, and CakePHP are all licensed under the permissive MIT software license. These frameworks can and are being used today to develop proprietary software.</p>
+			<p>Vegvisir is licensed under GNU GPL v3 (or newer) and that will never change.</p>
+		</div>
+	</container>
+</section>

shells/document.php

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<script>
+		<!--//--><![CDATA[//><!--
+		/**
+		 * @licstart The following is the entire license notice for the JavaScript
+		 * code in this page.
+		 *
+		 * Copyright (C) 2020  Free Software Foundation.
+		 *
+		 * The JavaScript code in this page is free software: you can redistribute
+		 * it and/or modify it under the terms of the GNU General Public License
+		 * (GNU GPL) as published by the Free Software Foundation, either version 3
+		 * of the License, or (at your option) any later version.  The code is
+		 * distributed WITHOUT ANY WARRANTY; without even the implied warranty of
+		 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU GPL
+		 * for more details.
+		 *
+		 * As additional permission under GNU GPL version 3 section 7, you may
+		 * distribute non-source (e.g., minimized or compacted) forms of that code
+		 * without the copy of the GNU GPL normally required by section 4, provided
+		 * you include this license notice and a URL through which recipients can
+		 * access the Corresponding Source.
+		 *
+		 * @licend The above is the entire license notice for the JavaScript code
+		 * in this page.
+		 */
+
+		//--><!]]>
+	</script>
+
+	<style><?= VV::css("public/assets/css/document.css") ?></style>
+
+	<title>Vegvisir</title>
+</head>
+<body>
+	<header>
+		<container>
+			<a href="/"><?= VV::embed("public/assets/media/logo.svg") ?></a>
+			<ul>
+				<li><a href="/"><button><p>Vegvisir</p></button></a></li>
+				<li><a href="/why"><button><p>Why Vegvisir?</p></button></a></li>
+				<li><a href="/docs"><button><p>Documentation</p></button></a></li>
+				<li><a href="/demos"><button><p>Demos</p></button></a></li>
+				<li><a href="/help"><button><p>Need help?</p></button></a></li>
+			</ul>
+			<ul>
+				<li><a href="mailto:info@vlw.se"><button><p>Email</p></button></a></li>
+				<li><a href="matrix:#vegvisir:vlw.se"><button><p>Matrix</p></button></a></li>
+				<li><a href="/"><button><p>Codeberg</p></button></a></li>
+				<li><a href="/doc/installation"><button class="solid"><p>Get Vegvisir</p></button></a></li>
+			</ul>
+		</container>
+	</header>
+	<vv-shell></vv-shell>
+	<?= VV::init(); ?>
+</body>
+</html>