chore: add support for Vegvisir 3.1 (#11)

This PR adds basic support for the upcoming release Vegvisir 3.1

Reviewed-on: https://codeberg.org/vlw/vlw.se/pulls/11
Co-authored-by: Victor Westerlund <victor.vesterlund@gmail.com>
Co-committed-by: Victor Westerlund <victor.vesterlund@gmail.com>

install.sh

@@ -3,8 +3,8 @@ composer install --optimize-autoloader
 npm install
 
 # (Re)create public NPM modules folder
-rm -r assets/js/modules/npm
-mkdir assets/js/modules/npm
+rm -r public/assets/js/modules/npm
+mkdir public/assets/js/modules/npm
 
 # Create link to Elevent MJS from public JS modules folder
-ln -sr node_modules/elevent/src/Elevent.mjs assets/js/modules/npm/Elevent.mjs
+ln -sr node_modules/elevent/src/Elevent.mjs public/assets/js/modules/npm/Elevent.mjs

public/about.php

@@ -1,4 +1,4 @@
-<style><?= VV::css("assets/css/pages/about") ?></style>
+<style><?= VV::css("public/assets/css/pages/about") ?></style>
 <section class="intro">
 	<h2 aria-hidden="true">Hi, I'm</h2>
 	<h1>Victor Westerlund</h1>
@@ -17,7 +17,7 @@
 	<h2>Personal</h2>
 	<p>Coffee, of course.. and..</p>
 	<p>At times, I become a true, amateur, armchair detective for a <span class="interests">variety of your typical-nerdy topics that I find interesting</span>. And will spend a disproportionate to real-world-personal-use amount of time reading about that stuff too.</p>
-	<p>Another silent passion of mine that comes out every few years is <a href="/about/battlestation" vv="about" vv-call="navigate">building computers</a> and fiddling with weird networking stuff.</p>
+	<p>Another silent passion of mine that comes out every few years is <a href="/about/battlestation">building computers</a> and fiddling with weird networking stuff.</p>
 	<p>And then of course I don't mind some occational gaming, and watching movies and TV-series.</p>
 </section>
 <section class="about">
@@ -25,7 +25,7 @@
 	<p>Here are some projects I'm working on right now:</p>
 	<p>* <a href="https://vegvisir.vlw.se">Vegvisir</a>: A web navigation framework for PHP.</p>
 	<p>* <a href="https://reflect.vlw.se">Reflect</a>: A REST API framework for PHP developers.</p>
-	<p>There is more stuff on my <a href="work" vv="about" vv-call="navigate">works page</a> and even more stuff on <a href="https://codeberg.org/vlw">my Codeberg profile</a>.</p>
+	<p>There is more stuff on my <a href="work">works page</a> and even more stuff on <a href="https://codeberg.org/vlw">my Codeberg profile</a>.</p>
 	<p><a href="https://git.vlw.se/vlw"><i>and even EVEN more stuff on my Forgejo</i></a></p>
 </section>
 <hr>
@@ -37,7 +37,7 @@
 </section>
 <hr>
 <section>
-	<p>Let's work on something together or just have a chat? <a href="contact" vv="about" vv-call="navigate">Write me a line!</a></p>
+	<p>Let's work on something together or just have a chat? <a href="contact">Write me a line!</a></p>
 </section>
 
 <div class="interests" aria-hidden="true">
@@ -56,4 +56,4 @@
 	<p>videography</p>
 	<p>ISO&nbsp;8601</p>
 </div>
-<script type="module"><?= VV::js("assets/js/pages/about") ?></script>
+<script type="module"><?= VV::js("public/assets/js/pages/about") ?></script>

public/about/battlestation-retired.php

@@ -1,4 +1,4 @@
-<style><?= VV::css("assets/css/pages/about/battlestation-retired") ?></style>
+<style><?= VV::css("public/assets/css/pages/about/battlestation-retired") ?></style>
 <section class="title">
 	<h1>Retired components</h1>
 	<p>I'd be happy to send you any component that you find here for "free". The only thing I ask in return is that you pay for shipping.</p>
@@ -29,8 +29,8 @@
 	<p>Please note; I can't guarantee the thing you want will work as expected, or work at all! But I will test the compontent for you if I still have means at hand to do so.</p>
 </section>
 <section class="actions">
-	<a href="/contact" vv="battlestation-retired" vv-call="navigate">
+	<a href="/contact">
 		<button class="inline solid">Contact me</button>
 	</a>
 </section>
-<script><?= VV::js("assets/js/pages/about/battlestation-retired") ?></script>
+<script><?= VV::js("public/assets/js/pages/about/battlestation-retired") ?></script>

public/about/battlestation.php

@@ -55,15 +55,15 @@
 	$config = $api->call(Endpoints::BATTLESTATION->value)->get();
 
 ?>
-<style><?= VV::css("assets/css/pages/about/battlestation") ?></style>
+<style><?= VV::css("public/assets/css/pages/about/battlestation") ?></style>
 <?php if ($config->ok): ?>
 	<section class="title">
 		<h1>Battle&shy;stations</h1>
 		<p>I'd be happy to send you, dear reader, any component that you find here for "free" that hasn't been retired yet. The only thing I ask in return is that you pay for shipping.</p>
 		<p>I can't guarantee the thing you want will work as expected, or work at all! But I will test the compontent for you if I still have means at hand to do so.</p>
 		<div>
-			<a href="/about/battlestation-retired" vv="battlestation" vv-call="navigate"><button class="inline solid">Retired components</button></a>
-			<a href="/contact" vv="battlestation" vv-call="navigate"><button class="inline">Contact me</button></a>
+			<a href="/about/battlestation-retired"><button class="inline solid">Retired components</button></a>
+			<a href="/contact"><button class="inline">Contact me</button></a>
 		</div>
 	</section>
 
@@ -93,7 +93,7 @@
 				data-drives-twodotfive="<?= count(array_keys(array_column($motherboard["storage"], MbStorageModel::SLOT_FORMFACTOR->value), MbStorageSlotFormfactorEnum::TWODOTFIVE->value)) ?>" 
 				data-drives-threedotfive="<?= count(array_keys(array_column($motherboard["storage"], MbStorageModel::SLOT_FORMFACTOR->value), MbStorageSlotFormfactorEnum::THREEDOTFIVE->value)) ?>" 
 			>
-			<?= VV::embed("assets/media/battlestation.svg") ?>
+			<?= VV::embed("public/assets/media/battlestation.svg") ?>
 			<div class="specs">
 
 				<?php // Show motherboard details ?>
@@ -345,7 +345,7 @@
 
 				<div class="group">
 					<p>DRAM</p>
-					<?= VV::embed("assets/media/icons/chevron.svg") ?>
+					<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
 				</div>
 
 				<div class="collection">
@@ -424,7 +424,7 @@
 
 				<div class="group">
 					<p>Storage</p>
-					<?= VV::embed("assets/media/icons/chevron.svg") ?>
+					<?= VV::embed("public/assets/media/icons/chevron.svg") ?>
 				</div>
 
 				<div class="collection">
@@ -493,4 +493,4 @@
 		</section>
 	<?php endforeach; ?>
 <?php endif; ?>
-<script type="module"><?= VV::js("assets/js/pages/about/battlestation") ?></script>
+<script type="module"><?= VV::js("public/assets/js/pages/about/battlestation") ?></script>

public/assets/js/modules/npm/Elevent.mjs

@@ -0,0 +1 @@
+../../../../../node_modules/elevent/src/Elevent.mjs

public/assets/js/pages/index.js

@@ -103,6 +103,6 @@ import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";
 		});
 
 		// Reset color on navigation
-		vv.Navigation.rootShellElement.addEventListener(vv.Navigation.EVENTS.STARTED, () => updateColor(), { once: true });
+		vv.Navigation.shellElement.addEventListener(vv.Navigation.EVENTS.STARTED, () => updateColor(), { once: true });
 	}
 }

public/contact.php

@@ -55,28 +55,28 @@
 	$date = new Date();
 
 ?>
-<style><?= VV::css("assets/css/pages/contact") ?></style>
+<style><?= VV::css("public/assets/css/pages/contact") ?></style>
 <section>
 	<h1>Let's chat!</h1>
 	<p>The best way to get in touch is definitely by email, or through the form on this page. The time in Sweden is <i><?= $date->format("h:i a") ?></i> right now, I am currently <?= $date->is_available() ? "available" : "not available" ?> and will hopefully reply in about <?= $date->get_estimated_reply_hours() ?> hours.</p>
 </section>
 <section class="social">
 	<a href="mailto:victor@vlw.se"><social>
-		<?= VV::embed("assets/media/icons/email.svg") ?>
+		<?= VV::embed("public/assets/media/icons/email.svg") ?>
 		<p>e-mail</p>
 	</social></a>
 	<a href="matrix:@vlw:vlw.se"><social>
-		<?= VV::embed("assets/media/icons/matrix.svg") ?>
+		<?= VV::embed("public/assets/media/icons/matrix.svg") ?>
 		<p>matrix</p>
 	</social></a>
 	<a href="https://web.libera.chat/#vlw.se"><social>
-		<?= VV::embed("assets/media/icons/libera.svg") ?>
+		<?= VV::embed("public/assets/media/icons/libera.svg") ?>
 		<p>libera.chat</p>
 	</social></a>
 </section>
-<?= VV::embed("assets/media/line.svg") ?>
+<?= VV::embed("public/assets/media/line.svg") ?>
 <section class="pgp">
-	<?= VV::embed("assets/media/icons/pin.svg") ?>
+	<?= VV::embed("public/assets/media/icons/pin.svg") ?>
 	<h3>encrypt your message with PGP</h3>
 	<p>Please consider encrypting your message with my PGP key, even if your message doesn't contain anything sensitive. The key is also available via <a href="https://wiki.gnupg.org/WKD" target="_blank" rel="noopener noreferer">WKD</a>, and is listed on the <a href="https://keys.openpgp.org/search?q=victor%40vlw.se" target="_blank" rel="noopener noreferer">openPGP key server</a> for victor@vlw.se.</p>
 	<p>Fingerprint for victor@vlw.se<br><strong class="fingerprint">DCE987311CB5D2A252F58951D0AD730E1057DFC6</strong></p>
@@ -90,7 +90,7 @@
 	<p>For reference only, please don't send personal emails to this address</p>
 	<p><strong class="fingerprint">DC603DA049903D707B7F1DB39AF727FB576F5A00</strong></p>
 </section>
-<?= VV::embed("assets/media/line.svg") ?>
+<?= VV::embed("public/assets/media/line.svg") ?>
 
 <?php // Send message on POST request ?>
 <?php if ($_SERVER["REQUEST_METHOD"] === "POST"): ?>
@@ -133,4 +133,4 @@
 	</form>
 </section>
 
-<script><?= VV::js("assets/js/pages/contact") ?></script>
+<script><?= VV::js("public/assets/js/pages/contact") ?></script>

public/error.php

@@ -1,6 +1,6 @@
-<style><?= VV::css("assets/css/pages/error") ?></style>
+<style><?= VV::css("public/assets/css/pages/error") ?></style>
 <canvas></canvas>
 <section class="error">
 	<h1 glitch-text><span>4</span><span>0</span><span>4</span></h1>
 </section>
-<script type="module"><?= VV::js("assets/js/pages/error") ?></script>
+<script type="module"><?= VV::js("public/assets/js/pages/error") ?></script>

public/index.php

@@ -7,15 +7,15 @@
 	}
 
 ?>
-<style><?= VV::css("assets/css/pages/index") ?></style>
+<style><?= VV::css("public/assets/css/pages/index") ?></style>
 <div class="menu">
-	<?= VV::embed("assets/media/line.svg") ?>
+	<?= VV::embed("public/assets/media/line.svg") ?>
 	<menu>
-		<a href="/work" vv="index" vv-call="navigate"><li data-rgb="<?= RGB::WORK->value ?>" data-hue="90">work</li></a>
-		<a href="/about" vv="index" vv-call="navigate"><li data-rgb="<?= RGB::ABOUT->value ?>" data-hue="390">about</li></a>
-		<a href="/contact" vv="index" vv-call="navigate"><li data-rgb="<?= RGB::CONTACT->value ?>" data-hue="200">contact</li></a>
+		<a href="/work"><li data-rgb="<?= RGB::WORK->value ?>" data-hue="90">work</li></a>
+		<a href="/about"><li data-rgb="<?= RGB::ABOUT->value ?>" data-hue="390">about</li></a>
+		<a href="/contact"><li data-rgb="<?= RGB::CONTACT->value ?>" data-hue="200">contact</li></a>
 	</menu>
-	<?= VV::embed("assets/media/line.svg") ?>
+	<?= VV::embed("public/assets/media/line.svg") ?>
 	<button class="email">
 		<p>victor@vlw.se</p>
 		<p class="cta">to copy</p>
@@ -23,4 +23,4 @@
 </div>
 
 <img src="/assets/media/gazing.jpg" alt="A portrait of Victor with a pair of cartoon glasses drawn in the shape of two V's over his eyes"/>
-<script type="module"><?= VV::js("assets/js/pages/index") ?></script>
+<script type="module"><?= VV::js("public/assets/js/pages/index") ?></script>

public/search.php

@@ -26,7 +26,7 @@
 	$response = $api->call(Endpoints::SEARCH->value)->params([SEARCH_PARAM => $_GET[SEARCH_PARAM]])->get();
 
 ?>
-<style><?= VV::css("assets/css/pages/search") ?></style>
+<style><?= VV::css("public/assets/css/pages/search") ?></style>
 <section class="search">
 	<form method="GET">
 		<search>
@@ -34,7 +34,7 @@
 		</search>
 		<button type="submit" class="inline solid">Search</button>
 	</form>
-	<?= VV::embed("assets/media/line.svg") ?>
+	<?= VV::embed("public/assets/media/line.svg") ?>
 	<button class="inline">advanced search options</button>
 </section>
 
@@ -45,7 +45,7 @@
 	<?php // Search contains results from the work endpoint ?>
 	<?php if ($results[Endpoints::WORK->value]): ?>
 		<section class="title work">
-			<a href="<? Endpoints::WORK->value ?>" vv="search" vv-call="navigate"><h2>Work</h2></a>
+			<a href="<? Endpoints::WORK->value ?>"><h2>Work</h2></a>
 			<p><?= count($results[Endpoints::WORK->value]) ?> search result(s) from my public work</p>
 		</section>
 		<section class="results work">
@@ -67,7 +67,7 @@
 								
 								<?php // Bind VV Interactions if link is same origin, else open in new tab ?>
 								<?php if (!$action[WorkActionsModel::EXTERNAL->value]): ?>
-									<a href="<?= $action[WorkActionsModel::HREF->value] ?>" vv="search" vv-call="navigate"><button class="inline <?= $action[WorkActionsModel::CLASS_LIST->value] ?>"><?= $action[WorkActionsModel::DISPLAY_TEXT->value] ?></button></a>
+									<a href="<?= $action[WorkActionsModel::HREF->value] ?>"><button class="inline <?= $action[WorkActionsModel::CLASS_LIST->value] ?>"><?= $action[WorkActionsModel::DISPLAY_TEXT->value] ?></button></a>
 								<?php else: ?>
 									<a href="<?= $action[WorkActionsModel::HREF->value] ?>" target="_blank"><button class="inline <?= $action[WorkActionsModel::CLASS_LIST->value] ?>"><?= $action[WorkActionsModel::DISPLAY_TEXT->value] ?></button></a>
 								<?php endif; ?>
@@ -89,11 +89,11 @@
 		</section>
 	<?php else: ?>
 		<section class="info empty">
-			<?= VV::embed("assets/media/icons/search.svg") ?>
+			<?= VV::embed("public/assets/media/icons/search.svg") ?>
 			<p>Start typing to search</p>
 		</section>
 	<?php endif; ?>
 
 <?php endif; ?>
 
-<script><?= VV::js("assets/js/pages/search") ?></script>
+<script><?= VV::js("public/assets/js/pages/search") ?></script>

public/shell.php

@@ -38,8 +38,8 @@
 	</script>
 
 	<?php // Bootstrapping ?>
-	<style><?= VV::css("assets/css/fonts") ?></style>
-	<style><?= VV::css("assets/css/shells/document") ?></style>
+	<style><?= VV::css("public/assets/css/fonts") ?></style>
+	<style><?= VV::css("public/assets/css/shell") ?></style>
 
 	<title>Victor Westerlund</title>
 	<link rel="icon" href="/assets/media/vw.svg"/>
@@ -47,16 +47,16 @@
 <body>
 	<header>
 		<nav>
-			<p><a href="/" vv="document" vv-call="navigate">victor westerlund</a></p>
+			<p><a href="/">victor westerlund</a></p>
 		</nav>
 		<button class="search searchbox-open">
-			<?= VV::embed("assets/media/icons/search.svg") ?>
+			<?= VV::embed("public/assets/media/icons/search.svg") ?>
 			<p>search vlw.se...</p>
 		</button>
-		<button class="logo" vv="/"><?= VV::embed("assets/media/vw.svg") ?></button>
+		<button class="logo" vv="/"><?= VV::embed("public/assets/media/vw.svg") ?></button>
 		<searchbox>
 			<input type="search" autocomplete="off" placeholder="search vlw.se...">
-			<button class="close searchbox-close"><?= VV::embed("assets/media/icons/close.svg") ?></button>
+			<button class="close searchbox-close"><?= VV::embed("public/assets/media/icons/close.svg") ?></button>
 		</searchbox>
 	</header>
 
@@ -64,13 +64,13 @@
 
 	<search-results>
 		<div class="info empty">
-			<?= VV::embed("assets/media/icons/search.svg") ?>
+			<?= VV::embed("public/assets/media/icons/search.svg") ?>
 			<p>start typing to search</p>
 		</div>
 	</search-results>
 
 	<?php // Bootstrapping ?>
 	<?= VV::init() ?>
-	<script type="module"><?= VV::js("assets/js/shells/document") ?></script>
+	<script type="module"><?= VV::js("public/assets/js/shell") ?></script>
 </body>
 </html>

public/work.php

@@ -31,10 +31,10 @@
 	}
 
 ?>
-<style><?= VV::css("assets/css/pages/work") ?></style>
+<style><?= VV::css("public/assets/css/pages/work") ?></style>
 
 <section class="git">
-	<?= VV::embed("assets/media/icons/codeberg.svg") ?>
+	<?= VV::embed("public/assets/media/icons/codeberg.svg") ?>
 	<p>Most of my free open-source software has been <a href="https://giveupgithub.com">moved from GitHub</a> to Codeberg. I also have a mirror of everything and some smaller projects on Forgejo.</p>
 	<div class="buttons">
 		<a href="https://codeberg.org/vlw"><button class="inline solid">Codeberg</button></a>
@@ -178,4 +178,4 @@
 	<p>Something went wrong!</p>
 <?php endif; ?>
 
-<script><?= VV::js("assets/js/pages/work") ?></script>
+<script><?= VV::js("public/assets/js/pages/work") ?></script>