Nikology/nikology.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add SPA navigation

Browse Source
This commit is contained in:
Nikology
2026-04-20 13:37:12 +02:00
parent 1dac91ac38
commit 037f3cf1fc
7 changed files with 140 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_redirects
+2
View File
@@ -0,0 +1,2 @@
/pages/* /pages/:splat 404
/* /index.html 200
index.html
+88 -33
View File
@@ -6,6 +6,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Lusitana:wght@400;700&display=swap" rel="stylesheet">
<link rel="preload" href="cream-paper.png" as="image">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<title>nikology.dev</title> <title>nikology.dev</title>
<!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> --> <!-- <link rel="icon" href="birbFavicon.svg" type="image/svg+xml"> -->
@@ -13,21 +14,24 @@
<body> <body>
<div class="ribbon">Work In Progress</div> <div class="ribbon">Work In Progress</div>
<h1>nikology.dev <!-- <h1>nikology.dev
<span class="bird-wrap"> <span class="bird-wrap">
<button id="birdButton"><img src="birb.svg" alt=""></button> <button id="birdButton"><img src="birb.svg" alt=""></button>
<svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg> <svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
</span> </span>
</h1> </h1> -->
<!-- Nav Bar --> <!-- Nav Bar -->
<nav> <nav>
<a href="/">Home</a> <a href="/" data-link>Home</a>
<span>-</span> <span>-</span>
<a href="">Test</a> <a href="/about" data-link>About</a>
<span>-</span> <!-- <span>-</span>
<a href="">Test</a> <a href="">Test</a> -->
</nav> </nav>
<div id="app"></div>
<!-- <h2>About Me</h2> <!-- <h2>About Me</h2>
<p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p> --> <p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p> -->
@@ -35,7 +39,8 @@
<ul> <ul>
<li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li> <li><a href="https://gitlab.com/Nikology" target="_blank" rel="noopener">GitLab</a></li>
</ul> --> </ul> -->
<footer>
<!-- <footer>
<p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p> <p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
<p> <p>
<a href="https://gitlab.com/Nikology/nikology.dev"> <a href="https://gitlab.com/Nikology/nikology.dev">
@@ -43,41 +48,91 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
</a> </a>
</p> </p>
</footer> </footer> -->
<!-- Scripts --> <!-- Scripts -->
<script> <script>
const DISTANCE = 25 const cache = new Map();
const birdIcon = document.getElementById("birdButton");
const birdSound = new Audio("SnowBuntingSound.ogg");
const template = document.getElementById("barTemplate");
const wrap = document.querySelector(".bird-wrap");
function spawnBar(distance, angle, delay = 0) { async function loadFragment(file) {
const clone = template.cloneNode(true); if (!cache.has(file)) {
clone.removeAttribute("id"); const res = await fetch(file);
clone.classList.add("bar"); if (!res.ok) {
clone.style.setProperty("--angle", `${angle}deg`); return { status: res.status, content: null };
clone.style.setProperty("--distance", `${-distance}px`); }
clone.style.setProperty("--delay", `${delay}s`); const text = await res.text();
wrap.appendChild(clone);
clone.addEventListener("animationend", () => clone.remove()); if (text.includes('id="app"')) {
return { status: 404, content: null};
}
cache.set(file, text);
}
return { status: 200, content: cache.get(file)};
} }
function birdSoundAnim() { async function render() {
const leftRandom = (Math.random() * 40) + 40 const path = location.pathname;
const rightRandom = (Math.random() * 40) + 40 document.body.classList.toggle('home', path === '/');
spawnBar(DISTANCE, -leftRandom, 0.2) const file = `/pages${path === '/' ? '/home' : path}.html`;
spawnBar(DISTANCE, -leftRandom, 0.4)
spawnBar(DISTANCE, rightRandom, 0.6) const result = await loadFragment(file);
spawnBar(DISTANCE, rightRandom, 0.8)
if (result.content) {
document.getElementById('app').innerHTML = result.content;
} else {
const errorResult = await loadFragment('/pages/error.html');
document.getElementById('app').innerHTML = errorResult.content;
document.getElementById('error-code').textContent = result.status;
}
} }
birdIcon.addEventListener("click", (e) => { document.addEventListener('click', e => {
if (!birdSound.paused) return; const link = e.target.closest('[data-link]');
birdSound.play(); if (link) {
birdSoundAnim() e.preventDefault();
history.pushState(null, '', link.href);
render();
}
}); });
window.addEventListener('popstate', render);
render().then(() => {
requestAnimationFrame(() => document.body.classList.add('ready'))
});
// const DISTANCE = 25
// const birdIcon = document.getElementById("birdButton");
// const birdSound = new Audio("SnowBuntingSound.ogg");
// const template = document.getElementById("barTemplate");
// const wrap = document.querySelector(".bird-wrap");
// function spawnBar(distance, angle, delay = 0) {
// const clone = template.cloneNode(true);
// clone.removeAttribute("id");
// clone.classList.add("bar");
// clone.style.setProperty("--angle", `${angle}deg`);
// clone.style.setProperty("--distance", `${-distance}px`);
// clone.style.setProperty("--delay", `${delay}s`);
// wrap.appendChild(clone);
// clone.addEventListener("animationend", () => clone.remove());
// }
// function birdSoundAnim() {
// const leftRandom = (Math.random() * 40) + 40
// const rightRandom = (Math.random() * 40) + 40
// spawnBar(DISTANCE, -leftRandom, 0.2)
// spawnBar(DISTANCE, -leftRandom, 0.4)
// spawnBar(DISTANCE, rightRandom, 0.6)
// spawnBar(DISTANCE, rightRandom, 0.8)
// }
// birdIcon.addEventListener("click", (e) => {
// if (!birdSound.paused) return;
// birdSound.play();
// birdSoundAnim()
// });
</script> </script>
</body> </body>
</html> </html>
pages/about.html
+10
View File
@@ -0,0 +1,10 @@
<h1>About</h1>
<p>Hi there! I am Niki and welcome to my website, I make stuff with computers. My current project is <a href="https://roplus.dev" target="_blank" rel="noopener">roplus.dev</a>!</p>
<footer>
<p>
<a href="https://gitlab.com/Nikology/nikology.dev">
Page Source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
</a>
</p>
</footer>
pages/error.html
+2
View File
@@ -0,0 +1,2 @@
<h2>Something went wrong</h2>
<p>Error code: <span id="error-code">---</span></p>
pages/home.html
+16
View File
@@ -0,0 +1,16 @@
<h1>nikology.dev
<span class="bird-wrap">
<button id="birdButton"><img src="birb.svg" alt=""></button>
<svg id="barTemplate" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 8.47 8.47"><path fill="none" stroke="#3d2f1f" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8" d="m1.5 4.23.23-.1a6 6 0 0 1 5.01 0l.23.1" style="paint-order:markers stroke fill"/></svg>
</span>
</h1>
<footer>
<p>Bird recording by Petter Westberg via <a href="https://xeno-canto.org/1087467" target="_blank" rel="noopener">xeno-canto</a>, CC BY-NC-SA 4.0</p>
<p>
<a href="https://gitlab.com/Nikology/nikology.dev">
Page Source
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 380"><path d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04" transform="matrix(1.9787 0 0 2.0178 -185.94 -193.36)"/></svg>
</a>
</p>
</footer>
serve.json
+7
View File
@@ -0,0 +1,7 @@
{
"cleanUrls": false,
"rewrites": [
{ "source": "/", "destination": "/index.html" },
{ "source": "/!(pages)**", "destination": "/index.html" }
]
}
styles.css
+14 -4
View File
@@ -9,12 +9,23 @@ body {
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: flex-start;
align-items: flex-start; padding: 4rem 20rem;
padding: 2rem 20rem 2rem 20rem;
box-sizing: border-box; box-sizing: border-box;
} }
body.ready {
transition: padding-top 0.5s ease;
}
body.home {
padding-top: 35vh;
}
body.home h1 {
font-size: 4rem;
}
@media(max-width: 1024px) { @media(max-width: 1024px) {
body { body {
padding: 2rem; padding: 2rem;
@@ -39,7 +50,6 @@ nav a:hover {
} }
h1 { h1 {
font-size: 4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }