Add a simple router

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>
+  <SiteHeader />
-    <pre>
-A:\> DIR
-
-General failure reading drive A
-Abort, Retry, Fail? <span class="blink">&block;</span>
-    </pre>
-  </header>
   <main>
-    <header>
+    <component :is="routes[currentPath.slice(1) || '/'] || NotFoundView" />
-      <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>
   </main>
 </template>
 
-<style scoped>
+<style scoped></style>
-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>

src/assets/main.css

@@ -16,3 +16,11 @@ h5,
 h6 {
   color: #00ffff;
 }
+
+a {
+  color: #4040ff;
+}
+
+a:visited {
+  color: #ff4040;
+}

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>

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>

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>

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>