feat: default figlet font config

.vitepress/config.mts

@@ -22,6 +22,7 @@ export default defineConfigWithTheme<ThemeConfig>({
     ['meta', { content: "width=device-width,initial-scale=1.0", name: "viewport" }],
   ],
   themeConfig: {
+    defaultHeaderFont: 'basic',
     commands: [{
       command: 'about',
       aliases: ['info'],

.vitepress/theme/Config.ts

@@ -12,5 +12,6 @@ export type SimpleCommand = {
 }
 
 export interface ThemeConfig {
+  defaultHeaderFont: string
   commands: SimpleCommand[]
 }

.vitepress/theme/Layout.vue

@@ -16,13 +16,7 @@ const prompt = '\n$> '
 const textArea = ref<HTMLTextAreaElement | null>(null)
 const footer = ref([])
 
-const figlet = useFiglet()
-
-function getHeaderArt(header: string, font: string) {
-  // Why is that so simple to approximate? Pretty sure, there is a mistake somewhere...
-  const maxWidth = Math.round(textArea.value?.getBoundingClientRect().width / 10) - 2
-  return figlet.render(header, font, maxWidth)
-}
+const figlet = useFiglet(site.value.themeConfig.defaultHeaderFont)
 
 function parsedContent(src: string) {
   const pieces = src.split('---').map(s => s.trim())
@@ -44,13 +38,13 @@ function getCurrentPage(title: string) {
     console.error('☠️ current page not found in the list. This should never happen.')
     return {
       title: 'not_found',
-      headerArt: getHeaderArt('404', 'chunky'),
+      headerArt: figlet.render('404'),
       content: 'The page could not be found.',
       uris: [],
     }
   }
   const { header, headerFont, uris } = page.frontmatter
-  const headerArt = getHeaderArt(header, headerFont ?? 'chunky')
+  const headerArt = figlet.render(header, headerFont)
   const content = parsedContent(page.src)
 
   return { title, headerArt, content, uris: uris ?? [] }
@@ -62,6 +56,7 @@ onMounted(() => {
     return
   }
 
+  figlet.setInputElement(textArea.value)
   const { addText, addLine, clear, footerLinks, setFooter } = useTerminal(textArea.value, commands.value, pages)
 
   watch(page, () => {

.vitepress/theme/useFiglet.ts

@@ -2,6 +2,8 @@ import { FLFParser, FontLayoutManager } from '@figlet-ts/lib'
 import * as fonts from '@figlet-ts/fonts/dist/fonts'
 
 function findFont(needle: string) {
+  if (!needle) return
+
   needle = needle.toLowerCase()
   for (let categoryName in fonts) {
     const category = fonts[categoryName]
@@ -9,24 +11,37 @@ function findFont(needle: string) {
       if (name.toLowerCase() === needle) return category[name]
     }
   }
+  console.error(`Cannot find font "${needle}"!`)
 }
 
-function getFont(name: string) {
-  const font = findFont(name)
-  if (!font) throw new Error(`Cannot find font "${name}"!`)
+function getFont(name: string, fallback: string) {
+  const font = findFont(name) ?? findFont(fallback) ?? fonts.Core.standard
 
   const flf = FLFParser.parse(atob(font._contents))
   return flf.font
 }
 
-export default function useFiglet() {
+export default function useFiglet(defaultFontName = 'standard', htmlElement?: HTMLElement) {
   const flm = new FontLayoutManager()
 
-  function render(text: string, fontName: string, maxWidth: number) {
-    flm.width.set(maxWidth)
-    const figFont = getFont(fontName)
+  let inputElement: HTMLElement | null = null
+
+  function calcMaxWidth() {
+    // 1150px default width / 10px per char - 2 char padding
+    if (inputElement === null) return 113
+    const elWidth = inputElement.getBoundingClientRect().width
+    return Math.round(elWidth / 10) - 2
+  }
+
+  function setInputElement(el: HTMLElement) {
+    inputElement = el
+  }
+
+  function render(text: string, fontName?: string) {
+    flm.width.set(calcMaxWidth())
+    const figFont = getFont(fontName, defaultFontName)
     const output = flm.renderText(text, figFont)
     return output
   }
-  return { render }
+  return { render, setInputElement }
 }

home.md

@@ -0,0 +1 @@
+index.md

resume.md

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