From 0eb779e64904eef38401fee2f7e8f24076a17a4d Mon Sep 17 00:00:00 2001
From: Jordan Goulder <jordan@jordangoulder.com>
Date: Sat, 11 Jan 2025 22:44:17 -0500
Subject: [PATCH] Add a simple router

---
 src/App.vue                     | 58 ++++++++++++---------------------
 src/assets/main.css             |  8 +++++
 src/components/BlinkingText.vue | 20 ++++++++++++
 src/components/HomeView.vue     | 17 ++++++++++
 src/components/NotFoundView.vue | 11 +++++++
 src/components/SiteHeader.vue   | 23 +++++++++++++
 6 files changed, 99 insertions(+), 38 deletions(-)
 create mode 100644 src/components/BlinkingText.vue
 create mode 100644 src/components/HomeView.vue
 create mode 100644 src/components/NotFoundView.vue
 create mode 100644 src/components/SiteHeader.vue

diff --git a/src/App.vue b/src/App.vue
index 5e16dad..11d0d7e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,44 +1,26 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { type Component, ref } from 'vue'
+
+import SiteHeader from '@/components/SiteHeader.vue'
+import HomeView from '@/components/HomeView.vue'
+import NotFoundView from '@/components/NotFoundView.vue'
+
+const routes: { [index: string]: Component } = {
+  '/': HomeView,
+}
+
+const currentPath = ref<string>(window.location.hash)
+
+window.addEventListener('hashchange', () => {
+  currentPath.value = window.location.hash
+})
+</script>
 
 <template>
-  <header>
-    <pre>
-A:\> DIR
-
-General failure reading drive A
-Abort, Retry, Fail? <span class="blink">&block;</span>
-    </pre>
-  </header>
+  <SiteHeader />
   <main>
-    <header>
-      <h1>Floppy Drive</h1>
-      <p>Coming soonish...</p>
-    </header>
-    <section>
-      <h2>The Idea</h2>
-      <p>
-        Allow visitors to upload floppy disk images so that they can browse, view, and download the
-        files stored on them.
-      </p>
-    </section>
+    <component :is="routes[currentPath.slice(1) || '/'] || NotFoundView" />
   </main>
 </template>
 
-<style scoped>
-pre {
-  font-weight: bold;
-  transform: skewX(-3deg);
-  text-shadow: 0 0 5px #0f8;
-  color: #0f0;
-}
-
-.blink {
-  animation: blinker 2s ease-in-out infinite;
-}
-
-@keyframes blinker {
-  50% {
-    opacity: 0;
-  }
-}
-</style>
+<style scoped></style>
diff --git a/src/assets/main.css b/src/assets/main.css
index 9ef1e56..599cb41 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -16,3 +16,11 @@ h5,
 h6 {
   color: #00ffff;
 }
+
+a {
+  color: #4040ff;
+}
+
+a:visited {
+  color: #ff4040;
+}
diff --git a/src/components/BlinkingText.vue b/src/components/BlinkingText.vue
new file mode 100644
index 0000000..ce7dc8c
--- /dev/null
+++ b/src/components/BlinkingText.vue
@@ -0,0 +1,20 @@
+<script lang="ts" setup></script>
+
+<template>
+  <span class="blink">
+    <slot />
+  </span>
+</template>
+
+<style scoped>
+.blink {
+  display: inline-block;
+  animation: blinker 2s ease-in-out infinite;
+}
+
+@keyframes blinker {
+  50% {
+    opacity: 0;
+  }
+}
+</style>
diff --git a/src/components/HomeView.vue b/src/components/HomeView.vue
new file mode 100644
index 0000000..5474a6b
--- /dev/null
+++ b/src/components/HomeView.vue
@@ -0,0 +1,17 @@
+<script lang="ts" setup></script>
+
+<template>
+  <header>
+    <h1>Floppy Drive</h1>
+    <p>Coming soonish...</p>
+  </header>
+  <section>
+    <h2>The Idea</h2>
+    <p>
+      Allow visitors to upload floppy disk images so that they can browse, view, and download the
+      files stored on them.
+    </p>
+  </section>
+</template>
+
+<style scoped></style>
diff --git a/src/components/NotFoundView.vue b/src/components/NotFoundView.vue
new file mode 100644
index 0000000..6f39971
--- /dev/null
+++ b/src/components/NotFoundView.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup></script>
+
+<template>
+  <section>
+    <h2>Page Not Found</h2>
+    <p>I couldn't seem to find that.</p>
+    <p>You should probably just head back <a href="#/">Home</a>.</p>
+  </section>
+</template>
+
+<style scoped></style>
diff --git a/src/components/SiteHeader.vue b/src/components/SiteHeader.vue
new file mode 100644
index 0000000..3d36a00
--- /dev/null
+++ b/src/components/SiteHeader.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import BlinkingText from '@/components/BlinkingText.vue'
+</script>
+
+<template>
+  <header>
+    <pre>
+A:\> DIR
+
+General failure reading drive A
+Abort, Retry, Fail? <BlinkingText>&block;</BlinkingText>
+    </pre>
+  </header>
+</template>
+
+<style scoped>
+pre {
+  font-weight: bold;
+  transform: skewX(-3deg);
+  text-shadow: 0 0 5px #0f8;
+  color: #0f0;
+}
+</style>