list pages and render markdown content

.vitepress/theme/Layout.vue

@@ -1,38 +1,59 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useData } from 'vitepress'
 import useTerminal from './useTerminal'
 import titleArt from './titles'
+import { data as pages } from './pages.data'
 
-const { site, page, frontmatter } = useData()
-const enhancedReadability = ref(false)
+const { site, page } = useData()
+const enhancedReadability = ref(false) // TODO!
 
-const title = computed(() => {
-  const titleKey = frontmatter.value.title
-  const title = titleArt[titleKey] || titleArt['not_found']
-
-  return title.join('\n')
-})
-const content = computed(() => frontmatter.value.content ?? ['this page does not exist'])
 const commands = computed(() => site.value.themeConfig.commands)
-
 const prompt = '\n$> '
-const lines = ref(title.value + '\n\n' + content.value.join('\n') + '\n' + prompt)
 
 const textArea = ref<HTMLTextAreaElement | null>(null)
 const footer = ref([])
 
+function getTitleArt(key: string) {
+  const art = titleArt[key] ?? titleArt['not_found']
+  return art.join('\n')
+}
+
+function parsedContent(src: string) {
+  const pieces = src.split('---').map(s => s.trim())
+  const [_frontmatter, ...content] = pieces.filter(x => x.length)
+
+  return content.join('\n\n')
+}
+
+function getCurrentPage(title: string) {
+  const page = pages.find(p => p.frontmatter.title === title)
+  console.log('getting page', title, page)
+  if (!page) {
+    console.error('current page not found')
+    return {
+      title: 'not_found',
+      titleArt: getTitleArt('not_found'),
+      content: 'The page could not be found.',
+    }
+  }
+  const titleArt = page.frontmatter.titleArt ?? getTitleArt(title)
+  const content = parsedContent(page.src)
+
+  return { title, titleArt, content }
+}
+
 onMounted(() => {
   if (textArea.value === null) {
     console.error('textarea is missing')
     return
   }
 
-  const { addText, addLine, clear, footerLinks } = useTerminal(textArea.value, commands.value)
+  const { addText, addLine, clear, footerLinks } = useTerminal(textArea.value, commands.value, pages)
 
-  watch(frontmatter, () => {
-    addText(title.value + '\n', false)
-    addLine(content.value.join('\n'))
+  watch(page, () => {
+    const { title, titleArt, content } = getCurrentPage(page.value.title)
+    addText(`${titleArt}\n${title}\n\n${content}`)
   }, { immediate: true })
 
   watch(footerLinks, () => {

.vitepress/theme/pages.data.mts

@@ -0,0 +1,2 @@
+import { createContentLoader } from 'vitepress'
+export default createContentLoader('*.md', { includeSrc: true })

.vitepress/theme/useTerminal.ts

@@ -2,12 +2,17 @@ import { ref } from 'vue'
 import type { SimpleCommand, Uri } from './Config'
 import { useRouter } from 'vitepress'
 
-export default function useTerminal(inputEl: HTMLTextAreaElement, commands: SimpleCommand[]) {
+type PageInfo = {
+  frontmatter: Record<string, string>
+  src: string
+  url: string
+}
+
+export default function useTerminal(inputEl: HTMLTextAreaElement, commands: SimpleCommand[], pages: PageInfo[]) {
   const prompt = '\n$> '
   const footerLinks = ref([])
 
   const router = useRouter()
-  console.log('router', router)
 
   function moveCursorToEnd() {
     const pos = inputEl.value.length
@@ -109,7 +114,9 @@ export default function useTerminal(inputEl: HTMLTextAreaElement, commands: Simp
   }
 
   function listPages() {
-    addLine('TODO: list pages')
+    const specialPages = ['README', 'not_found']
+    const pageTitles = pages.map(p => p.frontmatter.title).filter(t => t?.length && !specialPages.includes(t))
+    addLine(`Following pages are available:\n\n${pageTitles.join('\n')}\n\nUse the go command to switch pages.`)
   }
 
   async function openPage(page: string) {

index.md

@@ -1,16 +1,10 @@
 ---
 title: 'welcome'
-content: [
-  'This is the homepage of Norman Köhring,',
-  'a programmer, OpenSource enthusiast and hacker based in Berlin, Germany.',
-  '',
-  'I call myself a code artist because programming can and should be seen as a creative process. Therefore code is art. I love to craft pieces of art with code that are beautiful and elegant in their simplicity, readability and architecture.',
-  '',
-  'Type "help" to see a list of available commands.',
-  'Some commands might update the footer with useful links.'
-]
 ---
+This is the homepage of Norman Köhring,
+a programmer, OpenSource enthusiast and hacker based in Berlin, Germany.
 
-Some testcontent for testing.
-
-It is a *paragraph*!
+I call myself a code artist because programming can and should be seen as a creative process. Therefore code is art. I love to craft pieces of art with code that are beautiful and elegant in their simplicity, readability and architecture.
+  
+Type "help" to see a list of available commands.
+Some commands might update the footer with useful links.