add inter-work navigation
This commit is contained in:
parent
23d7810ab6
commit
dbc1fd7c17
11 changed files with 104 additions and 7 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
@ -95,8 +95,6 @@ export const convertMeshes = async () => {
|
|||
}
|
||||
}
|
||||
|
||||
console.log({ propertyList });
|
||||
|
||||
const vertexCount = Number(
|
||||
headerLines
|
||||
.find((header) => header.startsWith("element vertex"))
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue