-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(new tool): ascii art generator (#886)
* feat(new tool): ascii art generator Fix #829 ; Text ASCII Art Generator (using figlet) * fix: make fonts list searchable * refactor(ascii-generator): updated tool definition * refactor(ascii-generator): equilibrate ui --------- Co-authored-by: Corentin Thomasset <[email protected]>
- Loading branch information
1 parent
a07806c
commit fe349ad
Showing
6 changed files
with
139 additions
and
28 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| <script setup lang="ts"> | ||
| import figlet from 'figlet'; | ||
| import TextareaCopyable from '@/components/TextareaCopyable.vue'; | ||
| const input = ref('Ascii ART'); | ||
| const font = useStorage('ascii-text-drawer:font', 'Standard'); | ||
| const width = useStorage('ascii-text-drawer:width', 80); | ||
| const output = ref(''); | ||
| const errored = ref(false); | ||
| const processing = ref(false); | ||
| figlet.defaults({ fontPath: '//unpkg.com/[email protected]/fonts/' }); | ||
| watchEffect(async () => { | ||
| processing.value = true; | ||
| try { | ||
| const options: figlet.Options = { | ||
| font: font.value as figlet.Fonts, | ||
| width: width.value, | ||
| whitespaceBreak: true, | ||
| }; | ||
| output.value = await (new Promise<string>((resolve, reject) => | ||
| figlet.text(input.value, options, | ||
| (err, text) => { | ||
| if (err) { | ||
| reject(err); | ||
| return; | ||
| } | ||
| resolve(text ?? ''); | ||
| }))); | ||
| errored.value = false; | ||
| } | ||
| catch (e: any) { | ||
| errored.value = true; | ||
| } | ||
| processing.value = false; | ||
| }); | ||
| const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line Oblique', 'AMC 3 Line', 'AMC 3 Liv1', 'AMC AAA01', 'AMC Neko', 'AMC Razor', 'AMC Razor2', 'AMC Slash', 'AMC Slider', 'AMC Thin', 'AMC Tubes', 'AMC Untitled', 'ANSI Shadow', 'ASCII New Roman', 'Acrobatic', 'Alligator', 'Alligator2', 'Alpha', 'Alphabet', 'Arrows', 'Avatar', 'B1FF', 'B1FF', 'Banner', 'Banner3-D', 'Banner3', 'Banner4', 'Barbwire', 'Basic', 'Bear', 'Bell', 'Benjamin', 'Big Chief', 'Big Money-ne', 'Big Money-nw', 'Big Money-se', 'Big Money-sw', 'Big', 'Bigfig', 'Binary', 'Block', 'Blocks', 'Bloody', 'Bolger', 'Braced', 'Bright', 'Broadway KB', 'Broadway', 'Bubble', 'Bulbhead', 'Caligraphy', 'Caligraphy2', 'Calvin S', 'Cards', 'Catwalk', 'Chiseled', 'Chunky', 'Coinstak', 'Cola', 'Colossal', 'Computer', 'Contessa', 'Contrast', 'Cosmike', 'Crawford', 'Crawford2', 'Crazy', 'Cricket', 'Cursive', 'Cyberlarge', 'Cybermedium', 'Cybersmall', 'Cygnet', 'DANC4', 'DOS Rebel', 'DWhistled', 'Dancing Font', 'Decimal', 'Def Leppard', 'Delta Corps Priest 1', 'Diamond', 'Diet Cola', 'Digital', 'Doh', 'Doom', 'Dot Matrix', 'Double Shorts', 'Double', 'Dr Pepper', 'Efti Chess', 'Efti Font', 'Efti Italic', 'Efti Piti', 'Efti Robot', 'Efti Wall', 'Efti Water', 'Electronic', 'Elite', 'Epic', 'Fender', 'Filter', 'Fire Font-k', 'Fire Font-s', 'Flipped', 'Flower Power', 'Four Tops', 'Fraktur', 'Fun Face', 'Fun Faces', 'Fuzzy', 'Georgi16', 'Georgia11', 'Ghost', 'Ghoulish', 'Glenyn', 'Goofy', 'Gothic', 'Graceful', 'Gradient', 'Graffiti', 'Greek', 'Heart Left', 'Heart Right', 'Henry 3D', 'Hex', 'Hieroglyphs', 'Hollywood', 'Horizontal Left', 'Horizontal Right', 'ICL-1900', 'Impossible', 'Invita', 'Isometric1', 'Isometric2', 'Isometric3', 'Isometric4', 'Italic', 'Ivrit', 'JS Block Letters', 'JS Bracket Letters', 'JS Capital Curves', 'JS Cursive', 'JS Stick Letters', 'Jacky', 'Jazmine', 'Jerusalem', 'Katakana', 'Kban', 'Keyboard', 'Knob', 'Konto Slant', 'Konto', 'LCD', 'Larry 3D 2', 'Larry 3D', 'Lean', 'Letters', 'Lil Devil', 'Line Blocks', 'Linux', 'Lockergnome', 'Madrid', 'Marquee', 'Maxfour', 'Merlin1', 'Merlin2', 'Mike', 'Mini', 'Mirror', 'Mnemonic', 'Modular', 'Morse', 'Morse2', 'Moscow', 'Mshebrew210', 'Muzzle', 'NScript', 'NT Greek', 'NV Script', 'Nancyj-Fancy', 'Nancyj-Improved', 'Nancyj-Underlined', 'Nancyj', 'Nipples', 'O8', 'OS2', 'Octal', 'Ogre', 'Old Banner', 'Patorjk\'s Cheese', 'Patorjk-HeX', 'Pawp', 'Peaks Slant', 'Peaks', 'Pebbles', 'Pepper', 'Poison', 'Puffy', 'Puzzle', 'Pyramid', 'Rammstein', 'Rectangles', 'Red Phoenix', 'Relief', 'Relief2', 'Reverse', 'Roman', 'Rot13', 'Rot13', 'Rotated', 'Rounded', 'Rowan Cap', 'Rozzo', 'Runic', 'Runyc', 'S Blood', 'SL Script', 'Santa Clara', 'Script', 'Serifcap', 'Shadow', 'Shimrod', 'Short', 'Slant Relief', 'Slant', 'Slide', 'Small Caps', 'Small Isometric1', 'Small Keyboard', 'Small Poison', 'Small Script', 'Small Shadow', 'Small Slant', 'Small Tengwar', 'Small', 'Soft', 'Speed', 'Spliff', 'Stacey', 'Stampate', 'Stampatello', 'Standard', 'Star Strips', 'Star Wars', 'Stellar', 'Stforek', 'Stick Letters', 'Stop', 'Straight', 'Stronger Than All', 'Sub-Zero', 'Swamp Land', 'Swan', 'Sweet', 'THIS', 'Tanja', 'Tengwar', 'Term', 'Test1', 'The Edge', 'Thick', 'Thin', 'Thorned', 'Three Point', 'Ticks Slant', 'Ticks', 'Tiles', 'Tinker-Toy', 'Tombstone', 'Train', 'Trek', 'Tsalagi', 'Tubular', 'Twisted', 'Two Point', 'USA Flag', 'Univers', 'Varsity', 'Wavy', 'Weird', 'Wet Letter', 'Whimsy', 'Wow']; | ||
| </script> | ||
|
|
||
| <template> | ||
| <c-card style="max-width: 600px;"> | ||
| <c-input-text | ||
| v-model:value="input" | ||
| label="Your text:" | ||
| placeholder="Your text to draw" | ||
| raw-text | ||
| multiline | ||
| rows="4" | ||
| /> | ||
|
|
||
| <n-divider /> | ||
|
|
||
| <n-grid cols="4" x-gap="12" w-full> | ||
| <n-gi span="2"> | ||
| <c-select | ||
| v-model:value="font" | ||
| label-position="top" | ||
| label="Font:" | ||
| :options="fonts" | ||
| searchable="true" | ||
| placeholder="Select font to use" | ||
| /> | ||
| </n-gi> | ||
| <n-gi span="2"> | ||
| <n-form-item label="Width:" label-placement="top" label-width="100" :show-feedback="false"> | ||
| <n-input-number v-model:value="width" min="0" max="10000" w-full placeholder="Width of the text" /> | ||
| </n-form-item> | ||
| </n-gi> | ||
| </n-grid> | ||
|
|
||
| <n-divider /> | ||
|
|
||
| <div v-if="processing" flex items-center justify-center> | ||
| <n-spin size="medium" /> | ||
| <span class="ml-2">Loading font...</span> | ||
| </div> | ||
|
|
||
| <c-alert v-if="errored" mt-1 text-center type="error"> | ||
| Current settings resulted in error. | ||
| </c-alert> | ||
|
|
||
| <n-form-item v-if="!processing && !errored" label="Ascii Art text:"> | ||
| <TextareaCopyable | ||
| :value="output" | ||
| mb-1 mt-1 | ||
| copy-placement="outside" | ||
| /> | ||
| </n-form-item> | ||
| </c-card> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { Artboard } from '@vicons/tabler'; | ||
| import { defineTool } from '../tool'; | ||
|
|
||
| export const tool = defineTool({ | ||
| name: 'ASCII Art Text Generator', | ||
| path: '/ascii-text-drawer', | ||
| description: 'Create ASCII art text with many fonts and styles.', | ||
| keywords: ['ascii', 'asciiart', 'text', 'drawer'], | ||
| component: () => import('./ascii-text-drawer.vue'), | ||
| icon: Artboard, | ||
| createdAt: new Date('2024-03-03'), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters