diff --git a/.vitepress/config.mts b/.vitepress/config.mts index 70d4525..b70615d 100644 --- a/.vitepress/config.mts +++ b/.vitepress/config.mts @@ -22,6 +22,7 @@ export default defineConfigWithTheme({ ['meta', { content: "width=device-width,initial-scale=1.0", name: "viewport" }], ], themeConfig: { + defaultHeaderFont: 'basic', commands: [{ command: 'about', aliases: ['info'], diff --git a/.vitepress/theme/Config.ts b/.vitepress/theme/Config.ts index 1c5dcef..8a8d114 100644 --- a/.vitepress/theme/Config.ts +++ b/.vitepress/theme/Config.ts @@ -12,5 +12,6 @@ export type SimpleCommand = { } export interface ThemeConfig { + defaultHeaderFont: string commands: SimpleCommand[] } diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue index 2712e5e..867eb13 100644 --- a/.vitepress/theme/Layout.vue +++ b/.vitepress/theme/Layout.vue @@ -16,13 +16,7 @@ const prompt = '\n$> ' const textArea = ref(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, () => { diff --git a/.vitepress/theme/useFiglet.ts b/.vitepress/theme/useFiglet.ts index 15bc964..030254f 100644 --- a/.vitepress/theme/useFiglet.ts +++ b/.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 } } diff --git a/home.md b/home.md new file mode 120000 index 0000000..dd0ea36 --- /dev/null +++ b/home.md @@ -0,0 +1 @@ +index.md \ No newline at end of file diff --git a/resume.md b/resume.md index 25f9774..b2cb2fa 100644 --- a/resume.md +++ b/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/' },