From 093daa8fd24d2ee296c5ba0967569872e9333555 Mon Sep 17 00:00:00 2001
From: sharevb <sharevb@gmail.com>
Date: Tue, 2 Apr 2024 09:02:56 +0200
Subject: [PATCH] feat(ASCII Art Drawer): add coding languages support

Add support for outputing in many coding languages (Python , bash....)
FIx other part of #934
---
 components.d.ts                               |  1 +
 .../ascii-text-drawer/ascii-text-drawer.vue   | 21 +++++++++++++++----
 src/utils/ascii-lang-utils.ts                 |  1 +
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index e31119b3..f2c3146f 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -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']
diff --git a/src/tools/ascii-text-drawer/ascii-text-drawer.vue b/src/tools/ascii-text-drawer/ascii-text-drawer.vue
index 9a6520a4..7cd163a3 100644
--- a/src/tools/ascii-text-drawer/ascii-text-drawer.vue
+++ b/src/tools/ascii-text-drawer/ascii-text-drawer.vue
@@ -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 />
 
diff --git a/src/utils/ascii-lang-utils.ts b/src/utils/ascii-lang-utils.ts
index 83af3423..d362fb10 100644
--- a/src/utils/ascii-lang-utils.ts
+++ b/src/utils/ascii-lang-utils.ts
@@ -7,6 +7,7 @@ function escapeXml(unsafe: string) {
       case '\'': return '&apos;';
       case '"': return '&quot;';
     }
+    return '';
   });
 }