You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed, onMounted, watch } from 'vue'
|
|
import { useData } from 'vitepress'
|
|
import useTerminal from './useTerminal'
|
|
import titleArt from './titles'
|
|
|
|
// https://vitepress.dev/reference/runtime-api#usedata
|
|
const { site, frontmatter } = useData()
|
|
const enhancedReadability = ref(false)
|
|
|
|
const title = computed(() => {
|
|
const titleKey = frontmatter.value.title
|
|
const title = titleArt[titleKey] || titleArt['welcome']
|
|
|
|
return title.join('\n')
|
|
})
|
|
const content = computed(() => frontmatter.value.content ?? [])
|
|
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([])
|
|
|
|
onMounted(() => {
|
|
if (textArea.value === null) {
|
|
console.error('textarea is missing')
|
|
return
|
|
}
|
|
|
|
const { addText, clear, footerLinks } = useTerminal(textArea.value, commands.value)
|
|
clear()
|
|
addText('Hello World!')
|
|
|
|
watch(footerLinks, () => {
|
|
footer.value = footerLinks.value
|
|
}, { immediate: true })
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div id="screen" :class="{ 'enhanced-readability': enhancedReadability }">
|
|
<div id="wrap">
|
|
<div id="interlace" />
|
|
<div id="scanline" />
|
|
<div id="inner">
|
|
<textarea ref="textArea"
|
|
spellcheck="false"
|
|
autocorrect="false"
|
|
autocapitalize="false"
|
|
autocomplete="false"
|
|
autofocus
|
|
></textarea>
|
|
<footer>
|
|
<a v-for="({ uri, label}) in footer"
|
|
:href="uri"
|
|
target="_blank"
|
|
rel="noopener"
|
|
>
|
|
{{ label }}
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|