Use 404.html as a catch all route

artemave · Oct 20, 2023 · 0af2e18 · 0af2e18
1 parent 7b26086
commit 0af2e18
Show file tree

Hide file tree

Showing 14 changed files with 1,730 additions and 85 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 stylesheets/.sass-cache
+node_modules
diff --git a/404.html b/404.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <link rel="stylesheet" href="/StarLogs/styles.css" media="screen" type="text/css" />
+    <script type="module" src="/StarLogs/js/404.js" defer></script>
+    <title>Starlogs</title>
+  </head>
+  <body>
+    <div id="scene">
+      <div id="crawlContainer"></div>
+    </div>
+
+    <audio id="mainTheme" loop>
+      <source src="/StarLogs/assets/theme.ogg" type="audio/ogg; codecs=vorbis" />
+      <source src="/StarLogs/assets/theme.mp3" type="audio/mpeg" />
+    </audio>
+
+    <audio id="imperialMarch">
+      <source src="/StarLogs/assets/imperial_march.ogg" type="audio/ogg; codecs=vorbis" />
+      <source src="/StarLogs/assets/imperial_march.mp3" type="audio/mpeg" />
+    </audio>
+  </body>
+</html>
diff --git a/404.md b/404.md
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
     <link rel="stylesheet" href="styles.css" media="screen" type="text/css" />
-    <script src="index.js" defer></script>
+    <script type="module" src="js/index.js" defer></script>
     <title>Starlogs</title>
   </head>
   <body>

diff --git a/index.js b/index.js
diff --git a/js/404.js b/js/404.js
@@ -0,0 +1,21 @@
+import { imperialMarch, mainTheme } from "./domRefs.js"
+import fetchCommitMessages from "./fetchCommitMessages.js"
+import performCrawl from "./performCrawl.js"
+import registerScrollSoundEffect from "./registerScrollSoundEffect.js"
+
+const [, userOrg, repo] = window.location.pathname.split('/')
+
+fetchCommitMessages(`${userOrg}/${repo}`).then(messages => {
+  performCrawl(messages)
+  mainTheme.play()
+
+}).catch(() => {
+  performCrawl([
+    "Tun dun dun, da da dun, 404",
+    "404, da da dun, 404",
+    "..."
+  ])
+  imperialMarch.play()
+})
+
+registerScrollSoundEffect()
diff --git a/js/domRefs.js b/js/domRefs.js
@@ -0,0 +1,11 @@
+export const inputContainer = document.getElementById('inputContainer')
+export const crawlContainer = document.getElementById('crawlContainer')
+/** @type HTMLMediaElement */
+// @ts-ignore
+export const mainTheme = document.getElementById('mainTheme')
+/** @type HTMLMediaElement */
+// @ts-ignore
+export const falconFly = document.getElementById('falconFly')
+/** @type HTMLMediaElement */
+// @ts-ignore
+export const imperialMarch = document.getElementById('imperialMarch')
diff --git a/js/fetchCommitMessages.js b/js/fetchCommitMessages.js
@@ -0,0 +1,9 @@
+/**
+ * @param {string} repo
+ * @returns {Promise<Array<string>>} messages
+ */
+export default async function fetchCommitMessages(repo) {
+  const response = await fetch(`https://api.github.com/repos/${repo}/commits?per_page=100`)
+  const commits = await response.json()
+  return commits.map(commit => commit.commit.message)
+}
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,33 @@
+import fetchCommitMessages from './fetchCommitMessages.js'
+import { inputContainer, mainTheme, falconFly, imperialMarch } from './domRefs.js'
+import performCrawl from './performCrawl.js'
+import registerScrollSoundEffect from './registerScrollSoundEffect.js'
+
+let fetchCommitMessagesPromise
+
+inputContainer.onkeydown = function (e) {
+  if (e.keyCode === 13) {
+    inputContainer.classList.add('zoomed')
+    falconFly.play()
+
+    const repo = inputContainer.querySelector('input').value
+    fetchCommitMessagesPromise = fetchCommitMessages(repo)
+  }
+}
+
+inputContainer.ontransitionend = () => {
+  fetchCommitMessagesPromise.then((messages) => {
+    performCrawl(messages)
+    mainTheme.play()
+
+  }).catch(() => {
+    performCrawl([
+      "Tun dun dun, da da dun, 404",
+      "404, da da dun, 404",
+      "..."
+    ])
+    imperialMarch.play()
+  })
+}
+
+registerScrollSoundEffect()
diff --git a/js/performCrawl.js b/js/performCrawl.js
@@ -0,0 +1,25 @@
+import { crawlContainer } from './domRefs.js'
+
+export default function performCrawl(messages) {
+  messages.forEach((message, index) => {
+    const block = document.createElement('div');
+    block.classList.add('block');
+    block.innerText = message;
+
+    if (index === 0) {
+      block.style.paddingTop = `${crawlContainer.clientHeight}px`;
+    }
+    if (index === messages.length - 1) {
+      block.style.paddingBottom = '10000px';
+    }
+
+    crawlContainer.appendChild(block);
+  });
+
+  const scroll = () => {
+    crawlContainer.scrollBy({ top: window.innerHeight > 1000 ? 2 : 1 });
+    requestAnimationFrame(scroll);
+  };
+  requestAnimationFrame(scroll);
+}
+
diff --git a/js/registerScrollSoundEffect.js b/js/registerScrollSoundEffect.js
@@ -0,0 +1,24 @@
+import { mainTheme, crawlContainer } from './domRefs.js'
+
+export default function registerScrollSoundEffect() {
+  let scrollEndTimeout
+
+  function performScrollSoundEffect() {
+    if (scrollEndTimeout) {
+      clearTimeout(scrollEndTimeout)
+    }
+    mainTheme.playbackRate = 4
+
+    scrollEndTimeout = setTimeout(() => {
+      mainTheme.playbackRate = 1
+    }, 50)
+  }
+
+  crawlContainer.ontouchmove = performScrollSoundEffect
+  if (crawlContainer.onwheel !== undefined) {
+    crawlContainer.onwheel = performScrollSoundEffect
+  } else { // Safari
+    // @ts-ignore
+    crawlContainer.onmousewheel = performScrollSoundEffect
+  }
+}