How I Built This

The latest version, what you have before you, was built out of the hipbones and shoulder girdles of giant beesty wildescripts. And gatsby-theme-garden, which did most of the heavy lifting.

I began by scaffolding a fresh Gatsby app using the latest React 17 and Gatsby 3.6.2. Getting Gatsby themes to build on my M1-chipped Macbook Air was initially very difficult. Many of the popular themes are dependent upon Sharp for image processing, which once was an M1 SNAFU. I'll only consensually bore you with the details.

Once the Gatsby app would build using this theme, I restructured the project as a lerna-supported monorepo with multiple sites and themes. We'll see where it goes from there. But the theme itself, recast as gatsby-theme-wtf is available as an independent module on npm. In the course of bringing this toolset up-to-date I also forked the react-stacked-pages-hook module and generalized it as react-slips-hook.

These days I do most of my devving at night, so a lack of a dark theme is a dealbreaker. And all these black backgrounds are unnecessarily high contrast, and also hard on the eyes. So I use Theme UI here to offer many themes and colorschemes.

The typography is all one fontβ€”Recursiveβ€”which is wonderfully variable font that can pretty much do it all: serif, sans serif, monospaced, cursive, casual, and any blend of qualities that its 5 variable axes can yield. Also, thanks to the variable axes, I can animate transitions of the weight, slant, casualness, monospacedness, and cursivity on hover, focus, etc.

How I Built This (the old Foamy NextJS version)

I first encountered the digital garden when I stumbled upon @yenly's Notes to Self. Eureka! It became immediately clear what I had to build. So when it came time to muster my courage and go public with all these crazy, incoherent ramblings, I dutifully tried a bunch of other approaches and avenues, and then eventually returned to the foamy-nextjs template for fast page loads thanks to SSG, and familiarity with NextJS. More on why-i-chose-foamy-nextjs.

I've also kept track of the bumps-in-the-foamy-dev-trail, which might be useful to others going this way.

Devsign-wise, the sunny color palettes are inspired by young son Zephyr. There are light and dark, sea and land themes so far. The switches for which run on a great lib next-themes that now replaces my handrolled moonface (which you can still flip off over at Easeness).

The typography arrives via @fontsource which allows us to serve Google Fonts along with the payload of the site, and to fine-tune precisely which font files are sent. I use variable fonts to lighten the load.

foam is great

Next was Now, kind of

Examples and Features

Cited in

How I Built This