A wild microsite appears!

[eyelidlessness]

My Microsite project is finally fully v1 launched! I see a show and tell category, so I hope it’s okay to post here.

Eyelidlessness is my new personal site, tech blog, and generated art project. It’s been a heck of a five month journey getting here, but it’s a foundation for one of the coolest (IMO) things I’ve ever created.

Thanks to Microsite, it’s also the smolest fastest web project I’ve built since I learned how to JavaScript. In fact there’s currently no JS in my build output at all, and the biggest page weight hit is the heading font. Amaaaaazing. And after correcting a few mishaps today I was able to get back to a perfect Lighthouse score (I know that’s not everything, but it’s pretty cool for a modern JSX workflow).

I’ve got a few more things to get out of the way, but when I can come up for air I plan to extract and open source every part of my build and anything in /src/lib that might be useful for the ecosystem/community, and write up how those bits work in general and particularly with Microsite. For now, if anyone is interested please feel free to scrounge whatever you like (content aside, except with permission) from the repo. It’s a mess in there right now, caveat emptor and all that.

Anyway, thank you @natemoo-re for building this awesome tool that helped me make it as close to my vision of perfection as I could have imagined.

[natemoo-re]

Hooray, congrats on launching! 🎉 Amazing work—the visualizations in Part 3 are particularly beautiful!

[eyelidlessness]

Oh wow thank you!

[eyelidlessness]

It’s probably gonna take me a bit to do a post really giving credit where it’s due but just to make sure the major dependencies are all mentioned:

• Microsite duh
• And therefore Preact, Rollup and Snowpack also
• Fela for CSS-in-JS (but I extract to the global CSS during build)
• Shiki for syntax highlighting, which uses roughly the same logic as VSCode and TextMate, reproducing a lot of the work in the post linked on their site for dark mode and eventually typescript integration with twoslash
• A very slightly modified Yi syntax theme
• HSLuv for all of the rainbowish coloring in the part 3 post for a pretty reliable range of color (the rest of the colors are hand picked and the most absurdly flexible color palette I’ve ever worked with)
• Sharp, which I use to rasterize the art for open graph images and may lean on more if future SVG styles get too heavy, and will certainly be using for other raster image optimizations
• Esbuild/Estrella which I did manage to get working for my test setup (@natemoo-re yo let’s figure this out!), and literally finishes my admittedly meager test suite instantly
• My puppy who goddammit lived through five months of me obsessively building this thing

[natemoo-re]

I'm super curious about those plugins you wrote! What's going on with that Fela style extraction?? I'd love to make that kind of thing a lot easier.

[eyelidlessness]

It’s just (naively for my use case) redoubling the effort you already put in to extract static props then rendering all the pages (Fela is very order of usage dependent), then writing all those styles to global.css before Microsite grabs it up.

This is something I think would be made easier with #99 and potentially some build time hooks from Microsite itself (let’s talk about this when I haz time to help!). The other plugin is doing the same thing but just rendering the SVGs to PNG.