Shonk Generator

Added the ability to share presets!
I do this by saving all the data in an object, turning it into a base64 string and copying the url with the base64 string as a parameter. Figuring out how to create a safe base64 string that doesn’t conflict because of special symbols like / and + was kinda annoying to implement, but it works now!
I also added toasts through Toastify, notifying you when the url is copied to the clipboard.
When you open url with a shared preset as a parameter, it opens a dialog asking you if you want to import it!

Other than that, I also save the Custom ASCII-Art in the localStorage now, so that doesn’t get lost.

Polishing it more and more!

• I’m saving more stuff in the localStorage now, so things like your background color when exporting get saved now.
• When the user tries to remove the last color, it’ll just turn white
• The site doesn’t look weird on mobile now, I accidentally that meta tag in one of my commits lol
• The navbar sticks on top of the settings thingy on mobile, instead of the left side, where it cuts off
• The default color preset is the Rainbow Pride one now!

Some more cool stuff!
When seeing the color options for the first time, you’re granted with a Tip now! It tells you how to change and delete a color.
In addition to that, you can also toggle the text shadow now!
And all the settings you set, get saved in the localStorage now, so you don’t loose anything when reloading the site!!

I also tried to implement font sizes and struggled with that, but then I noticed that it’s kinda irrelevant as you can already set the scale of the Shonk when exporting it.

yayayayay, did some stuff!!
You can now export the shonk as a fish script!! 🐟🐟🐟🐟🐟
The logic is pretty similar to the bash export thingy, but I had some problems with the Shebang (the thing at the beginning of a script to specify the interpreter, like #!/bin/bash) so that took some time to figure out.
I’ve also added the option to choose a font!! Currently there are 9 different monospaced ones, AND LOOK AT THAT BYTESIZED FONT, OMG, IT LOOKS SO CUTE!!!!
I HATE CANVAS BTW, I always have problems with fonts not being ready when the canvas is being rendered, but I figured out a whacky solution ig.

HELLO?? BIG SHONK HAS BEEN ADDED TO THE STORE!! 🚨🚨🚨
The categories work now! The code’s kinda messy but it does fulfill its job. I just created a category state and render the correct category component depending on its value. All the categories are stored in different components so it’s a bit easier to read.

Working on this project again!
I’m currently splitting the Settings up into different categories. I currently have three in mind: General, Colors, Text. The text one is completely new and will give you the ability to change stuff like the font and its size. I’ve only added the buttons, there is no logic yet lol.
Ever since the last ship, I’ve made some small changes like adding og meta tags and making the dropdown’s position (for the variants) absolute.

Added a README, made a banner in Figma, fixed bugs and made some QOL changes. Also worked on an issue template for GitHub so you can easily suggest new flags. Spent two hours trying to rework that colorization algorithm for better results but failed horrendously and discarded all the changes.
Oh, there’s also a favicon now! Got it from the pixel safari ✨

YURI!!!!
You can insert custom ASCII-Art now (or whatever you want to colorize). Adding the custom variant wasn’t that hard to implement and didn’t take long, but fixing all the issues that were caused by selecting a preset color combination with an amount of colors that was greater than the amount of lines your custom ASCII-Art had was… painful (T_T). I figured it out eventually but it always feels so weird thinking about it for an hour and then only committing like 10 lines of code lmao.
Also did some other smol bug fixes and changes like usual.

Would say that I’m mostly done now, will just have to add a favicon, maybe a few more presets, a banner, a proper README aaaaaaand then I’m ready to ship I think!

You can export your Shonk into a bash script now!!
Thanks for the suggestion MeBadDev!
Took quite some time cuz I needed to figure out how to properly display rgb colors in bash. Also did a smol bug fix regarding the z-index of an element :3

Happy New Year!!!

Added a maximum of colors you can select based on the amount of lines the Shonk has.
And I fixed the font rendering finally!! Turns out it only worked on my Desktop and not on my mobile devices because I actually had the font installed on my pc and it didn’t get overridden because I made a typo in the FontFace (T_T)
Also fixed some other bugs, you can check out the commit history on GitHub if you’re interested!

Oh, and I’m using VSCodium instead of VSC now :3

I added credits for the ASCII-Art and worked with React Router for the first time! Was actually way easier than I imagined it to be. Also changed the default font because the old one was hardly readable. Not too sure if I’ll stick with that one though. There’s also a link to the repository in the footer now!

Oh and the year is almost over, or maybe it is already for you. Hope you’re havin’ a great start into 2026!!

Okay the colors are distributed more evenly now! Tried out a lot of different ways to do that and ended up in LibreOffice Calc to find out what the heck I needed to do. Finally figured it out after like 2.5 hours of pain… On the Screenshot you can see the old version on the right side and the new one on the left side (the one with the border around it!)

Also some smol changes/bug fixes, you can check out the commits on GitHub if ya wanna know more :3

Aaaaand, I just noticed that I didn’t even listen to music the whole time?! 😭

Added different shonk variants and some more presets!!
Why this took so long? I dunno (T_T)

Trying to make the site mobile responsive is pain… It’s better than before but the text in the HTML canvas is somehow thinner on mobile than on Desktop?? I’m guessing that it has something to do with the pixel density but I don’t know how to fix it (if you have any idea then please tell me 😭😭)
In addition to the site being a bit more responsive, I also added preset color combinations, I’ll probably add a few more in the future! Apart from that I tweaked some small stuff.
Overall I feel like I’m pretty darn slow. The seemingly simple project is about to hit 24 hours of logged time…
I’m almost there though, I’ll just make some minor QOL changes, add different Shonk variants (and maybe an option to insert your own) and… cry while trying to make the site mobile compatible and make the color distribution more even when… it can’t properly distribute them evenly (T_T)

Added download options. You can now change the scale and the background color of the PNG!!
I struggled a lot trying to export the canvas scaled and am still confused about that but it works now!
I also noticed that the JetBrains Mono font had ligatures by default so I disabled that, should look better now :3

You can download your Shonk now!!
I achieved this by transforming the preview from simple elements into a HTML canvas which I can easily transform into an image you can download. This took a while but it finally works! I’ll also try to add the option to either download it with a transparent background or the with the background my site uses (or a custom one, idk yet).

You can now remove colors either with middle or right click!! Also changed some stuff regarding how I store the selected colors but that took a lil while cuz I don’t have that many braincells :P

Also replaced HTML’s checkbox element with my own custom component now so I can style it properly. Also added pointer cursors to make the UX a bit more intuitive. Next I’m probably gonna add the ability to remove colors (and reorder them maybe? :3

Merry Christmas!!
Didn’t do all too much today. I made my own component as a replacement for HTML’s color input element tho, so I can implement the ability to delete colors more easily in the future.
I’m gonna do that for the “Loop” checkbox too so I can properly style that one.

And I didn’t even know that you can upload multiple attachments, I added one where you can see the colored Shonk with the “Loop” setting toggled on ^w^

It’s getting somewhere!
You can add as many colors as you want now!! (I should add a limit tho, that shouldn’t be too hard).
I still need to add the option to remove colors but I dunno how well I can do that with the default HTML input element I am using… Same goes for the Loop setting, I dunno how much I can actually customize it using CSS.
Yeaaaa and I still have to add the Download, the presets, the Shonk variant switcher and a lovely footer :3

This took wayyyy to loong but the basic functionality is done now. Just gotta let the user add any amount of colors themselves, add more Shonk variants, make preset color combinations (forgot about that in the Figma design) and make the customized Shonk downloadable!
Oh, and I actually have to implement the design I made in Figma, but that shouldn’t be too hard!