Merge a8da319598 into 07eea0f484
				
					
				
			This commit is contained in:
		
						commit
						549942f468
					
				| @ -1,8 +1,10 @@ | |||||||
| <script setup lang="ts"> | <script setup lang="ts"> | ||||||
| import figlet from 'figlet'; | import figlet from 'figlet'; | ||||||
| import TextareaCopyable from '@/components/TextareaCopyable.vue'; | import TextareaCopyable from '@/components/TextareaCopyable.vue'; | ||||||
|  | import { languages, translateToLanguage } from '@/utils/ascii-lang-utils'; | ||||||
| 
 | 
 | ||||||
| const input = ref('Ascii ART'); | const input = ref('Ascii ART'); | ||||||
|  | const language = useStorage('ascii-text-drawer:language', 'raw'); | ||||||
| const font = useStorage('ascii-text-drawer:font', 'Standard'); | const font = useStorage('ascii-text-drawer:font', 'Standard'); | ||||||
| const width = useStorage('ascii-text-drawer:width', 80); | const width = useStorage('ascii-text-drawer:width', 80); | ||||||
| const output = ref(''); | const output = ref(''); | ||||||
| @ -11,16 +13,24 @@ const processing = ref(false); | |||||||
| 
 | 
 | ||||||
| figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' }); | 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 () => { | watchEffect(async () => { | ||||||
|  |   const inputValue = input.value; | ||||||
|  |   const languageValue = language.value; | ||||||
|  |   const fontValue = font.value; | ||||||
|  |   const widthValue = width.value; | ||||||
|   processing.value = true; |   processing.value = true; | ||||||
|   try { |   try { | ||||||
|     const options: figlet.Options = { |     const options: figlet.Options = { | ||||||
|       font: font.value as figlet.Fonts, |       font: fontValue as figlet.Fonts, | ||||||
|       width: width.value, |       width: widthValue, | ||||||
|       whitespaceBreak: true, |       whitespaceBreak: true, | ||||||
|     }; |     }; | ||||||
|     output.value = await (new Promise<string>((resolve, reject) => |     const rawOutput = await (new Promise<string>((resolve, reject) => | ||||||
|       figlet.text(input.value, options, |       figlet.text(inputValue, options, | ||||||
|         (err, text) => { |         (err, text) => { | ||||||
|           if (err) { |           if (err) { | ||||||
|             reject(err); |             reject(err); | ||||||
| @ -29,6 +39,8 @@ watchEffect(async () => { | |||||||
| 
 | 
 | ||||||
|           resolve(text ?? ''); |           resolve(text ?? ''); | ||||||
|         }))); |         }))); | ||||||
|  | 
 | ||||||
|  |     output.value = translateToLanguage(rawOutput, languageValue); | ||||||
|     errored.value = false; |     errored.value = false; | ||||||
|   } |   } | ||||||
|   catch (e: any) { |   catch (e: any) { | ||||||
| @ -50,6 +62,7 @@ const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line | |||||||
|       multiline |       multiline | ||||||
|       rows="4" |       rows="4" | ||||||
|     /> |     /> | ||||||
|  |     <c-select v-model:value="language" :options="languagesOptions" searchable mt-3 /> | ||||||
| 
 | 
 | ||||||
|     <n-divider /> |     <n-divider /> | ||||||
| 
 | 
 | ||||||
|  | |||||||
							
								
								
									
										55
									
								
								src/utils/ascii-lang-utils.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										55
									
								
								src/utils/ascii-lang-utils.ts
									
									
									
									
									
										Normal file
									
								
							| @ -0,0 +1,55 @@ | |||||||
|  | function escapeXml(unsafe: string) { | ||||||
|  |   return unsafe.replace(/[<>&'"]/g, (c: string | undefined) => { | ||||||
|  |     switch (c) { | ||||||
|  |       case '<': return '<'; | ||||||
|  |       case '>': return '>'; | ||||||
|  |       case '&': return '&'; | ||||||
|  |       case '\'': return '''; | ||||||
|  |       case '"': return '"'; | ||||||
|  |     } | ||||||
|  |     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; | ||||||
|  | } | ||||||
		Loading…
	
		Reference in New Issue
	
	Block a user