allow routing

.vitepress/theme/Layout.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, watch } from 'vue'
-import { useData } from 'vitepress'
+import { useData, useRouter } from 'vitepress'
 import useTerminal from './useTerminal'
 import titleArt from './titles'
 
-// https://vitepress.dev/reference/runtime-api#usedata
+const { site, page, frontmatter } = useData()
-const { site, frontmatter } = useData()
 const enhancedReadability = ref(false)
+const router = useRouter()
 
 const title = computed(() => {
   const titleKey = frontmatter.value.title
@@ -31,7 +31,15 @@ onMounted(() => {
 
   const { addText, addLine, clear, footerLinks } = useTerminal(textArea.value, commands.value)
 
+  watch(router.route, async () => {
+    if (page.value.isNotFound) {
+      addText('\n', false)
+      await router.go('404')
+    }
+  }, { immediate: true })
+
   watch(frontmatter, () => {
+    if (page.value.isNotFound) return
     addText(title.value + '\n', false)
     addLine(content.value.join('\n'))
   }, { immediate: true })

.vitepress/theme/titles.ts

@@ -19,4 +19,11 @@ export default {
     "|      <|  -__|__ --|  |  |        |  -__|",
     "|___|__||_____|_____|_____|__|__|__|_____|",
   ],
+
+  not_found: [
+    " _____  ______ _____  ",
+    "|  |  ||      |  |  | ",
+    "|__    |  --  |__    |",
+    "   |__||______|  |__| ",
+  ]
 }

.vitepress/theme/useTerminal.ts

@@ -1,10 +1,14 @@
 import { ref } from 'vue'
 import type { SimpleCommand, Uri } from './Config'
+import { useRouter } from 'vitepress'
 
 export default function useTerminal(inputEl: HTMLTextAreaElement, commands: SimpleCommand[]) {
   const prompt = '\n$> '
   const footerLinks = ref([])
 
+  const router = useRouter()
+  console.log('router', router)
+
   function moveCursorToEnd() {
     const pos = inputEl.value.length
 
@@ -36,7 +40,7 @@ export default function useTerminal(inputEl: HTMLTextAreaElement, commands: Simp
     addText('')
   }
 
-  type SYS_OUT = 'NOT_FOUND' | 'USAGE' | 'INFO'
+  type SYS_OUT = 'NOT_FOUND' | 'USAGE' | 'INFO' | '404'
 
   const SHELL = 'k0rSH'
   const INFO = 'k0rSH v0.1: the k0r SHell, fiddled together by k0r -- https://k0r.in'
@@ -67,6 +71,10 @@ export default function useTerminal(inputEl: HTMLTextAreaElement, commands: Simp
         console.log('explaining myself')
         addLine(`${SHELL}: ${INFO}`)
         break
+      case '404':
+        console.log('page not found', arg)
+        addLine(`${SHELL}: ${arg}: this page does not exist`)
+        break
     }
   }
   
@@ -78,12 +86,14 @@ export default function useTerminal(inputEl: HTMLTextAreaElement, commands: Simp
     footerLinks.value = uris
   }
 
+  /// returns current command written in the command line
+  /// in the format: [command, arg1, arg2, ..., argN]
   function getCurrentCommand() {
     const value = inputEl.value
     const start = value.lastIndexOf(prompt) + prompt.length
     const end = value.length
 
-    return value.slice(start, end).trim()
+    return value.slice(start, end).trim().split(' ')
   }
 
   function execUserCommand(cmd: string) {
@@ -98,8 +108,16 @@ export default function useTerminal(inputEl: HTMLTextAreaElement, commands: Simp
     setFooter(userCommand.uris)
   }
 
+  function listPages() {
+    addLine('TODO: list pages')
+  }
+
+  async function openPage(page: string) {
+    await router.go(page)
+  }
+
   function handleCurrentCommand() {
-    const cmd = getCurrentCommand()
+    const [cmd, ...args] = getCurrentCommand()
 
     if (!cmd) {
       addText('')
@@ -117,6 +135,16 @@ export default function useTerminal(inputEl: HTMLTextAreaElement, commands: Simp
       case 'clear':
         clear()
         break
+      case 'ls':
+      case 'list':
+        listPages()
+        break
+      case 'go':
+      case 'open':
+        addText('\n', false)
+        if (!args.length) addText('USAGE: go page_name')
+        else router.go(args[0])
+        break
       default:
         execUserCommand(cmd)
     }

404.md

@@ -0,0 +1,6 @@
+---
+title: 'not_found'
+content: [
+  'This page does not exist.',
+]
+---

cv.md

@@ -0,0 +1,9 @@
+---
+title: 'resume'
+content: [
+  'This is my CV',
+  'stuff',
+  'foo',
+  'bar',
+]
+---

index.md

@@ -1,5 +1,4 @@
 ---
-home: true
 title: 'welcome'
 content: [
   'This is the homepage of Norman Köhring,',
@@ -11,3 +10,7 @@ content: [
   'Some commands might update the footer with useful links.'
 ]
 ---
+
+Some testcontent for testing.
+
+It is a *paragraph*!