feat(ASCII Art Drawer): add coding languages support

Add support for outputing in many coding languages (Python , bash....)
FIx other part of #934
This commit is contained in:
sharevb 2024-04-02 09:02:56 +02:00 committed by ShareVB
parent 2850dbd001
commit 093daa8fd2
3 changed files with 19 additions and 4 deletions

1
components.d.ts vendored
View file

@ -159,6 +159,7 @@ declare module '@vue/runtime-core' {
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
RsaKeyPairGenerator: typeof import('./src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue')['default']
SafelinkDecoder: typeof import('./src/tools/safelink-decoder/safelink-decoder.vue')['default']
SlugifyString: typeof import('./src/tools/slugify-string/slugify-string.vue')['default']
SpanCopyable: typeof import('./src/components/SpanCopyable.vue')['default']
SqlPrettify: typeof import('./src/tools/sql-prettify/sql-prettify.vue')['default']

View file

@ -1,8 +1,10 @@
<script setup lang="ts">
import figlet from 'figlet';
import TextareaCopyable from '@/components/TextareaCopyable.vue';
import { languages, translateToLanguage } from '@/utils/ascii-lang-utils';
const input = ref('Ascii ART');
const language = useStorage('ascii-text-drawer:language', 'raw');
const font = useStorage('ascii-text-drawer:font', 'Standard');
const width = useStorage('ascii-text-drawer:width', 80);
const output = ref('');
@ -11,16 +13,24 @@ const processing = ref(false);
figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' });
const languagesOptions = languages.map(lang => ({ value: lang.id, label: lang.name }));
figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' });
watchEffect(async () => {
const inputValue = input.value;
const languageValue = language.value;
const fontValue = font.value;
const widthValue = width.value;
processing.value = true;
try {
const options: figlet.Options = {
font: font.value as figlet.Fonts,
width: width.value,
font: fontValue as figlet.Fonts,
width: widthValue,
whitespaceBreak: true,
};
output.value = await (new Promise<string>((resolve, reject) =>
figlet.text(input.value, options,
const rawOutput = await (new Promise<string>((resolve, reject) =>
figlet.text(inputValue, options,
(err, text) => {
if (err) {
reject(err);
@ -29,6 +39,8 @@ watchEffect(async () => {
resolve(text ?? '');
})));
output.value = translateToLanguage(rawOutput, languageValue);
errored.value = false;
}
catch (e: any) {
@ -50,6 +62,7 @@ const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line
multiline
rows="4"
/>
<c-select v-model:value="language" :options="languagesOptions" searchable mt-3 />
<n-divider />

View file

@ -7,6 +7,7 @@ function escapeXml(unsafe: string) {
case '\'': return '&apos;';
case '"': return '&quot;';
}
return '';
});
}