From a3febe4e85db73bd605548c0a310717a42467505 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norman=20K=C3=B6hring?= Date: Sun, 10 Dec 2023 11:21:26 +0100 Subject: [PATCH] feat: generated ascii art headers --- .vitepress/theme/Layout.vue | 22 ++++++++++++---------- .vitepress/theme/titles.ts | 29 ----------------------------- .vitepress/theme/useFiglet.ts | 31 +++++++++++++++++++++++++++++++ index.md | 1 + package.json | 2 ++ pnpm-lock.yaml | 14 ++++++++++++++ resume.md | 2 ++ 7 files changed, 62 insertions(+), 39 deletions(-) delete mode 100644 .vitepress/theme/titles.ts create mode 100644 .vitepress/theme/useFiglet.ts diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue index a274a4e..8fdd366 100644 --- a/.vitepress/theme/Layout.vue +++ b/.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(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 }) diff --git a/.vitepress/theme/titles.ts b/.vitepress/theme/titles.ts deleted file mode 100644 index 1e836c5..0000000 --- a/.vitepress/theme/titles.ts +++ /dev/null @@ -1,29 +0,0 @@ -export default { - index: [ - " ________ __ ", - "| | | |.-----.| |.----.-----.--------.-----.", - "| | | || -__|| || __| _ | | -__|", - "|________||_____||__||____|_____|__|__|__|_____|", - ], - - aboutMe: [ - " _______ __ __ _______ ", - "| _ | |--.-----.--.--.| |_ | | |.-----.", - "| | _ | _ | | || _| | || -__|", - "|___|___|_____|_____|_____||____| |__|_|__||_____|", - ], - - resume: [ - " ______ ", - "| __ \.-----.-----.--.--.--------.-----.", - "| <| -__|__ --| | | | -__|", - "|___|__||_____|_____|_____|__|__|__|_____|", - ], - - not_found: [ - " _____ ______ _____ ", - "| | || | | | ", - "|__ | -- |__ |", - " |__||______| |__| ", - ] -} diff --git a/.vitepress/theme/useFiglet.ts b/.vitepress/theme/useFiglet.ts new file mode 100644 index 0000000..04ff0f0 --- /dev/null +++ b/.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 } +} diff --git a/index.md b/index.md index 4bfdbc5..a2d5801 100644 --- a/index.md +++ b/index.md @@ -1,5 +1,6 @@ --- title: 'index' +header: 'Welcome' uris: [ { label: 'Click here for a more classical version', uri: 'https://koehr.in/' }, ] diff --git a/package.json b/package.json index f0ac7e2..f1ecfdc 100644 --- a/package.json +++ b/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" } } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a49c0e1..eacd0c7 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/resume.md b/resume.md index 0a6a5d2..25f9774 100644 --- a/resume.md +++ b/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/' },