add inter-work navigation

This commit is contained in:
41666 2023-10-10 12:31:53 -04:00
parent 23d7810ab6
commit dbc1fd7c17
11 changed files with 104 additions and 7 deletions

BIN
bun.lockb

Binary file not shown.

View file

@ -95,8 +95,6 @@ export const convertMeshes = async () => {
}
}
console.log({ propertyList });
const vertexCount = Number(
headerLines
.find((header) => header.startsWith("element vertex"))

View file

@ -11,7 +11,18 @@ export const generate = async (works: string[]) => {
.reverse();
for (const work of allWorks) {
const html = `${workTemplate}`.replace(/##name##/g, work);
const workIndex = allWorks.findIndex((w) => w === work);
const previous = allWorks[(workIndex as any) + 1] ?? null;
const next = allWorks[(workIndex as any) - 1] ?? null;
let nav = ``;
if (previous)
nav += `<a class="nav-left" href="/${previous}">⇠ ${previous}</a>`;
if (next) nav += `<a class="nav-right" href="/${next}">${next} ⇢</a>`;
const html = `${workTemplate}`
.replace(/##name##/g, work)
.replace(/##nav##/g, nav);
mkdirSync(`html/${work}`, { recursive: true });
await Bun.write(`html/${work}/index.html`, html);

View file

@ -21,5 +21,8 @@
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
<nav>
##nav##
</nav>
</main>
<script src="/##name##/main.js" type="module"></script>

View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<meta charset="utf-8" />
<title>com.mekanoe.art // 001-platform-provenance</title>
<style>
@ -21,5 +21,8 @@
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
<nav>
<a class="nav-right" href="/002-webgl-engine">002-webgl-engine ⇢</a>
</nav>
</main>
<script src="/001-platform-provenance/main.js" type="module"></script>

View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<meta charset="utf-8" />
<title>com.mekanoe.art // 002-webgl-engine</title>
<style>
@ -21,5 +21,11 @@
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
<nav>
<a class="nav-left" href="/001-platform-provenance"
>⇠ 001-platform-provenance</a
>
<a class="nav-right" href="/003-scene">003-scene ⇢</a>
</nav>
</main>
<script src="/002-webgl-engine/main.js" type="module"></script>

View file

@ -21,5 +21,8 @@
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
<nav>
<a class="nav-left" href="/002-webgl-engine">⇠ 002-webgl-engine</a>
</nav>
</main>
<script src="/003-scene/main.js" type="module"></script>

View file

@ -9,4 +9,36 @@
padding: 10px;
font-size: 12px;
display: none;
}
nav {
position: fixed;
z-index: 10;
display: flex;
bottom: 0;
left: 0;
right: 0;
padding: 3px;
& a {
display: block;
color: gold;
text-decoration: none;
transition: opacity ease-in-out 0.1s;
opacity: 0.3;
&:hover {
opacity: 1;
}
}
& .nav-left {
flex: 1;
text-align: left;
}
& .nav-right {
flex: 1;
text-align: right;
}
}

View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<meta charset="utf-8" />
<title>com.mekanoe.art // 001-platform-provenance</title>
<style>
@ -21,5 +21,8 @@
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
<nav>
<a class="nav-right" href="/002-webgl-engine">002-webgl-engine ⇢</a>
</nav>
</main>
<script src="/001-platform-provenance/main.js" type="module"></script>

View file

@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<meta charset="utf-8" />
<title>com.mekanoe.art // 002-webgl-engine</title>
<style>
@ -21,5 +21,11 @@
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<div id="telemetry">XX.X FPS (XX.X ms)</div>
<nav>
<a class="nav-left" href="/001-platform-provenance"
>⇠ 001-platform-provenance</a
>
<a class="nav-right" href="/003-scene">003-scene ⇢</a>
</nav>
</main>
<script src="/002-webgl-engine/main.js" type="module"></script>

View file

@ -9,4 +9,36 @@
padding: 10px;
font-size: 12px;
display: none;
}
nav {
position: fixed;
z-index: 10;
display: flex;
bottom: 0;
left: 0;
right: 0;
padding: 3px;
& a {
display: block;
color: gold;
text-decoration: none;
transition: opacity ease-in-out 0.1s;
opacity: 0.3;
&:hover {
opacity: 1;
}
}
& .nav-left {
flex: 1;
text-align: left;
}
& .nav-right {
flex: 1;
text-align: right;
}
}