feat: generated ascii art headers

.vitepress/theme/Layout.vue

@@ -2,7 +2,7 @@
 import { ref, reactive, computed, onMounted, watch } from 'vue'
 import { useData } from 'vitepress'
 import useTerminal from './useTerminal'
-import titleArt from './titles'
+import useFiglet from './useFiglet'
 import { data as pages } from './pages.data'
 
 import type { Uri } from './Config'
@@ -16,9 +16,10 @@ const prompt = '\n$> '
 const textArea = ref<HTMLTextAreaElement | null>(null)
 const footer = ref([])
 
-function getTitleArt(key: string) {
-  const art = titleArt[key] ?? titleArt['not_found']
-  return art.join('\n')
+const figlet = useFiglet()
+
+function getHeaderArt(header: string, font: string) {
+  return figlet.render(header, font)
 }
 
 function parsedContent(src: string) {
@@ -30,7 +31,7 @@ function parsedContent(src: string) {
 
 type Page = {
   title: string
-  titleArt: string
+  headerArt: string
   content: string
   uris: Uri[]
 }
@@ -41,15 +42,16 @@ function getCurrentPage(title: string) {
     console.error('☠️ current page not found in the list. This should never happen.')
     return {
       title: 'not_found',
-      titleArt: getTitleArt('not_found'),
+      headerArt: getTitleArt('not_found'),
       content: 'The page could not be found.',
       uris: [],
     }
   }
-  const titleArt = page.frontmatter.titleArt ?? getTitleArt(title)
+  const { header, headerFont, uris } = page.frontmatter
+  const headerArt = getHeaderArt(header, headerFont ?? 'chunky')
   const content = parsedContent(page.src)
 
-  return { title, titleArt, content, uris: page.frontmatter.uris ?? [] }
+  return { title, headerArt, content, uris: uris ?? [] }
 }
 
 onMounted(() => {
@@ -61,8 +63,8 @@ onMounted(() => {
   const { addText, addLine, clear, footerLinks, setFooter } = useTerminal(textArea.value, commands.value, pages)
 
   watch(page, () => {
-    const { title, titleArt, content, uris } = getCurrentPage(page.value.title)
-    addText(`${titleArt}\n${title}\n\n${content}`)
+    const { title, headerArt, content, uris } = getCurrentPage(page.value.title)
+    addText(`${headerArt}\n${title}\n\n${content}`)
     setFooter(uris)
   }, { immediate: true })
 

.vitepress/theme/titles.ts

@@ -1,29 +0,0 @@
-export default {
-  index: [
-    " ________         __                            ",
-    "|  |  |  |.-----.|  |.----.-----.--------.-----.",
-    "|  |  |  ||  -__||  ||  __|  _  |        |  -__|",
-    "|________||_____||__||____|_____|__|__|__|_____|",
-  ],
-  
-  aboutMe: [
-    " _______ __                 __        _______        ",
-    "|   _   |  |--.-----.--.--.|  |_     |   |   |.-----.",
-    "|       |  _  |  _  |  |  ||   _|    |       ||  -__|",
-    "|___|___|_____|_____|_____||____|    |__|_|__||_____|",
-  ],
-
-  resume: [
-    " ______                                   ",
-    "|   __ \.-----.-----.--.--.--------.-----.",
-    "|      <|  -__|__ --|  |  |        |  -__|",
-    "|___|__||_____|_____|_____|__|__|__|_____|",
-  ],
-
-  not_found: [
-    " _____  ______ _____  ",
-    "|  |  ||      |  |  | ",
-    "|__    |  --  |__    |",
-    "   |__||______|  |__| ",
-  ]
-}

.vitepress/theme/useFiglet.ts

@@ -0,0 +1,31 @@
+import { FLFParser, FontLayoutManager } from '@figlet-ts/lib'
+import * as fonts from '@figlet-ts/fonts/dist/fonts'
+
+function findFont(needle: string) {
+  needle = needle.toLowerCase()
+  for (let categoryName in fonts) {
+    const category = fonts[categoryName]
+    for (let name in category) {
+      if (name.toLowerCase() === needle) return category[name]
+    }
+  }
+}
+
+function getFont(name: string) {
+  const font = findFont(name)
+  if (!font) throw new Error(`Cannot find font "${name}"!`)
+
+  const flf = FLFParser.parse(atob(font._contents))
+  return flf.font
+}
+
+export default function useFiglet() {
+  const flm = new FontLayoutManager()
+
+  function render(text: string, fontName: string) {
+    const figFont = getFont(fontName)
+    const output = flm.renderText(text, figFont)
+    return output
+  }
+  return { render }
+}

index.md

@@ -1,5 +1,6 @@
 ---
 title: 'index'
+header: 'Welcome'
 uris: [
   { label: 'Click here for a more classical version', uri: 'https://koehr.in/' },
 ]

package.json

@@ -9,6 +9,8 @@
     "vue": "^3.3.10"
   },
   "dependencies": {
+    "@figlet-ts/fonts": "^0.5.0",
+    "@figlet-ts/lib": "^0.5.0",
     "@fontsource/vt323": "^5.0.8"
   }
 }

pnpm-lock.yaml

@@ -5,6 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@figlet-ts/fonts':
+    specifier: ^0.5.0
+    version: 0.5.0
+  '@figlet-ts/lib':
+    specifier: ^0.5.0
+    version: 0.5.0
   '@fontsource/vt323':
     specifier: ^5.0.8
     version: 5.0.8
@@ -421,6 +427,14 @@ packages:
     dev: true
     optional: true
 
+  /@figlet-ts/fonts@0.5.0:
+    resolution: {integrity: sha512-9O5kbxsGReBtUl7Sa7Z9Bq5hZMfBpPDqQbGjDoERL8NTphrSq9Na0Iziv3lO54nq+mVVpfMGO4WpHseKXEASOA==}
+    dev: false
+
+  /@figlet-ts/lib@0.5.0:
+    resolution: {integrity: sha512-Mwkqns5Tul9hx1d33A55OpELZPl3xx+jKit72t95h7ma745uwtbbT7giiPPU0VoJFPIZHHfs4qAvxE3gfQcfHQ==}
+    dev: false
+
   /@fontsource/vt323@5.0.8:
     resolution: {integrity: sha512-WU1qtqHObNqH2Tq6NmzwpO2Gyu3E4nqEOdrSMs0j9mwtRRSHf9FeM+iYVdbA1rhJDDZSw0ZSZakGAZxOJNTTdw==}
     dev: false

resume.md

@@ -1,5 +1,7 @@
 ---
 title: 'resume'
+header: 'Resume'
+headerFont: 'Broadway'
 uris: [
   { label: 'CodeGaia', uri: 'https://codegaia.io/' },
   { label: 'Coursedog', uri: 'https://coursedog.com/' },