list pages and render markdown content
This commit is contained in:
parent
aa8e3aa911
commit
17d5fd25e5
4 changed files with 55 additions and 31 deletions
|
@ -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, () => {
|
||||
|
|
2
.vitepress/theme/pages.data.mts
Normal file
2
.vitepress/theme/pages.data.mts
Normal file
|
@ -0,0 +1,2 @@
|
|||
import { createContentLoader } from 'vitepress'
|
||||
export default createContentLoader('*.md', { includeSrc: true })
|
|
@ -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) {
|
||||
|
|
16
index.md
16
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.
|
||||
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.
|
||||
|
||||
It is a *paragraph*!
|
||||
Type "help" to see a list of available commands.
|
||||
Some commands might update the footer with useful links.
|
||||
|
|
Loading…
Reference in a new issue