Comment Box Generator
By
@nouxinf
- 4 Devlogs
- 11 Total hours
A website to quickly generate centred comment boxes
Ship #1
@nouxinf
on
Comment Box Generator
I made Comment Box Generator, which is a simple website that lets you make ASCII/Unicode comment boxes. For example:
# ██████████████████████████████████████
# █ EXAMPLE █
# ██████████████████████████████████████
(these kinds of comments look centred when using a monospace font, which most code editors do)
It has several customisation features, like:
- Changing the text (obviously)
- Changing what language its for
- Changing the minimum width (it automatically widens if the minimum width is less than the text length)
- Deciding whether the comment should be multiline or not ( i.e. whether to use
//or/* */ - What box symbol to use out of 9
- Dark mode/light mode/detect from system settings
Other features include:
- Links to Github and this Hack Club Stardance project page
- An info dialog, with attribution to Font Awesome for their icons
You can check it out easily at https://commentboxgenerator.lemonsite.uk/
You can also self host it by cloning the github repo and running bun install, then bun run deploy. There is also a script, vps.sh, which is made for running it 24/7 on a linux server. It kills whatever process is on the same port (3054) and deploys the site, with logs at ~/logs/cbg.log. You don’t need to worry about that though if you are just checking the site out.
@nouxinf
on
Comment Box Generator
3h 41m 18s logged
Devlog #4 of Comment Box Generator
Comment Box Generator is a super lightweight site for making unicode boxes to put in comments in your code that are centred, for example:
# ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
# ▓ EXAMPLE ▓
# ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓
(which looks centred if you are using a monospace font)
This is probably the last devlog for this project, meaning all these changes are finishing touches. For example:
- Loads more box options - there are now 9 of them
- Started using Liberation Mono to make appearance consistent between OSs instead of relying on the default
monospacefont - Some SEO: Meta tags have been added to the HTML and I put the site on Google Search Console so hopefully soon people will find this site naturally
- Simple favicon
- A copy button to the output plus wrapping it in a container
- A proper README + CONTRIBUTING.md
- A dialog fade/zoom in and out animation. Cross-browser quirks are INSANELY annoying, took 19 Qwen prompts to sort that one out
Will be shipping it soon!
@nouxinf
on
Comment Box Generator
3h 49m 29s logged
Devlog #3 of Comment Box Generator
Comment Box Generator is a super lightweight site for making unicode
boxes to put in comments in your code that are centred, for example:
/*
╔════════════════════════════════════╗
║ EXAMPLE ║
╚════════════════════════════════════╝
*/
(trust me this looks normal in a code editor)
It’s made with Bun on the backend, so it builds and hosts fast. When
distributed, it loads super fast as it’s only 50KB minified. This is
done by removing all whitespace in HTML, CSS and JS and removing
unnecessary glyphs in the one font that’s bundled, Stack Sans.
Things that have been added since the previous devlog:
- Unicode box symbols: this is far more reliable than using just one
character like=because there are far fewer of those that work with
centred box comments. Now you define eight characters for each box
preset, for each side and corner. - Proper CSS! and Dark mode with that too.
- Minifying fonts in the Bun build script
- Forcing multiline for languages like HTML where there are no single
line comments - Removed RobotoMono and instead used the browser’s default monospace
font as that was causing issues with the unicode box approach - Colour scheme options and Github, Hack Club Stardance links and an
info dialog in the top right
Things yet to come:
- A proper README
- More box options
- SEO (I want people to organically find this site after all)
- A favicon
- A copy button for the output, plus generally styling that up
@nouxinf
on
Comment Box Generator
2h 42m 45s logged
Devlog #2 of Comment Box Generator
Comment Box Generator is a small site that lets you generate comment boxes with text inside for various programming languages:
# ======================================
# = like so =
# ======================================
(which is centred when you are using a monospace font)
In this devlog I’ve rewritten the “backend” in Bun so in package.json there are several scripts for various purposes:
- Build: just
bun run build.jswhich minifies whats insrc/and puts it out todist/ - Deploy: Builds and hosts the project
- VPS: This runs
vps.shwhich is primarily just meant for me to run on my VPS (hosted at https://commentboxgenerator.lemonsite.uk/ ). It kills whatever process is on the port used by CBG (always 3054), builds the project and deploys. It usesnohupto log to a file and to run in the background. It then restarts nginx. - Dev: This just runs a development server: unminified and with hot reload straight from
src/
On the frontend I’ve added the option to use different languages’ comment syntax, to use single line or multiline comments, and to change what symbol is used for the box.
Things that are coming soon:
- Styling (as you can tell not much attention has been paid to that yet)
- Forcing multiline for languages that don’t support single line comments like HTML
@nouxinf
on
Comment Box Generator
41m 39s logged
Was trying to write one of those centred box comments in one of my projects, like:
# ======================================
# = HELPER FUNCTIONS =
# ======================================
(which is centred in monospace font)
But I couldn’t find any tool online that could centre a box comment online, so I’m making one myself.
Here’s just a minimal prototype for Python, but I will be updating and making it look nicer; and most importantly adding new features like other language support and custom box characters.
