feat(ascii-art-generator):-add-output-for-coding-languages

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
       - run: corepack enable
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: 'pnpm'
 
       - name: Install dependencies

.github/workflows/e2e-tests.yml

@@ -18,7 +18,7 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 20
           cache: 'pnpm'
 
       - name: Get Playwright version

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']

playwright.config.ts

@@ -9,7 +9,7 @@ const useWebServer = process.env.NO_WEB_SERVER !== 'true';
  */
 export default defineConfig({
   testDir: './src',
-  testMatch: /.*\.e2e\.(spec\.)?ts/,
+  testMatch: /\.e2e\.(spec\.)?ts$/,
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -57,7 +57,7 @@ export default defineConfig({
     && {
       webServer: {
         command: 'npm run preview',
-        url: 'http://127.0.0.1:5050',
+        url: 'http://localhost:5050',
         reuseExistingServer: !isCI,
       },
     }

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/[email protected]/fonts/' });
 
+const languagesOptions = languages.map(lang => ({ value: lang.id, label: lang.name }));
+
+figlet.defaults({ fontPath: '//unpkg.com/[email protected]/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 />
 

src/utils/ascii-lang-utils.ts

@@ -0,0 +1,55 @@
+function escapeXml(unsafe: string) {
+  return unsafe.replace(/[<>&'"]/g, (c: string | undefined) => {
+    switch (c) {
+      case '<': return '&lt;';
+      case '>': return '&gt;';
+      case '&': return '&amp;';
+      case '\'': return '&apos;';
+      case '"': return '&quot;';
+    }
+    return '';
+  });
+}
+
+const dontEscape = '';
+const escapeBackslash = '\\\\';
+const escapeSingleQuote = '\'';
+const escapeDoubleQuote = '"';
+const defaultEscape = escapeBackslash + escapeSingleQuote + escapeDoubleQuote;
+export const languages = [
+  { id: 'raw', name: 'Raw Text', prefix: '', suffix: '', begin: '', end: '', escape: dontEscape },
+  { id: 'bash', name: 'Bash', prefix: 'echo "', suffix: '"', begin: '', end: '', escape: escapeBackslash + escapeDoubleQuote },
+  { id: 'pwsh', name: 'PowerShell', prefix: 'Write-Output \'', suffix: '\'', begin: '', end: '', escape: escapeBackslash + escapeSingleQuote },
+  { id: 'c', name: 'C', prefix: 'printf("', suffix: '\\n");', begin: '#include <stdio.h>\n', end: '', escape: defaultEscape },
+  { id: 'cpp', name: 'C++', prefix: 'std::cout << "', suffix: '\\n";', begin: '#include <iostream>\n', end: '', escape: defaultEscape },
+  { id: 'csharp', name: 'C#', prefix: 'Console.WriteLine(@"', suffix: '");', begin: 'using System;\n', end: '', escape: escapeDoubleQuote },
+  { id: 'vbnet', name: 'VB.Net', prefix: 'Console.WriteLine("', suffix: '")', begin: '', end: '', escape: (l: string) => l.replace('"', '""') },
+  { id: 'node', name: 'Node.js', prefix: 'console.log("', suffix: '");', begin: '', end: '', escape: defaultEscape },
+  { id: 'python', name: 'Python', prefix: 'print("', suffix: '")', begin: '', end: '', escape: escapeBackslash + escapeDoubleQuote },
+  { id: 'html', name: 'HTML', prefix: '', suffix: '', begin: '<pre>\n', end: '\n</pre>', escape: (l: string) => escapeXml(l) },
+  { id: 'rust', name: 'Rust', prefix: 'println!("', suffix: '");', begin: '', end: '', escape: defaultEscape },
+  { id: 'go', name: 'Go', prefix: 'fmt.Println("', suffix: '")', begin: 'import "fmt"\n', end: '', escape: defaultEscape },
+  { id: 'ruby', name: 'Ruby', prefix: 'puts "', suffix: '"', begin: '', end: '', escape: defaultEscape },
+  { id: 'php', name: 'PHP', prefix: 'echo "', suffix: '\\n";', begin: '<?php\n', end: '\n?>', escape: defaultEscape },
+  { id: 'swift', name: 'Swift', prefix: 'print("', suffix: '")', begin: '', end: '', escape: defaultEscape },
+  { id: 'kotlin', name: 'Kotlin', prefix: 'println("', suffix: '")', begin: '', end: '', escape: defaultEscape },
+  { id: 'sql', name: 'SQL', prefix: 'SELECT \'', suffix: '\\n\'', begin: '', end: '', escape: (l: string) => l.replace('\'', '\'\'') },
+  { id: 'java', name: 'Java', prefix: 'System.out.println("', suffix: '");', begin: '', end: '', escape: defaultEscape },
+];
+export function translateToLanguage(asciiArt: string, languageId: string) {
+  const langConfig = languages.find(l => l.id === languageId);
+  if (!langConfig) {
+    return asciiArt;
+  }
+
+  const escape = typeof langConfig.escape === 'function'
+    ? langConfig.escape
+    : function (line: string) {
+      return langConfig.escape
+        ? line.replace(new RegExp(`([${langConfig.escape}])`, 'g'), '\\$1')
+        : line;
+    };
+  return langConfig.begin + asciiArt.split('\n').map((line) => {
+    return langConfig.prefix + escape(line) + langConfig.suffix;
+  }).join('\n') + langConfig.end;
+}