A digital garden built with Next.js, React, and MDX. Featuring loosely opinionated notes, half-formed ideas, and content that is always growing.
This is the source code for maggieappleton.com, a digital garden filled with growing notes, essays, and design patterns.
It's open source to let people poke around and get ideas for their own garden. However, I'd rather you didn't fork it wholesale in order to build your own garden. First because my code is a hot mess (I am a developer by necessity, not by profession or choice), and second because I designed it according to my own aesthetic preferences, and functional needs / desires. Yours won't be the same.
It's also awkward when I stumble on someone else's website that is an exact expression of my own design taste and identity. Like walking in on someone wearing your clothing. That said, you can do what you like on the web and I'm not going to make a huge fuss about it.
I strongly encourage you to build your own garden! I keep a curated list of tools and resources that can help you do so.
<ProseWrapper />
wraps around all MDX longform copy. Limits it to 72ch and places it in grid-column: 2
.<TwoColumn />
<ThreeColumn />
<Img />
escapes the grid-column: 2
placement and sets a max-width of 1000px. Optional override with width
prop. Minimal styles, replaces the default img element.<BasicImage />
is more fully features - includes an optional caption from the alt text.<ImageFrame/>
adds a slight frame and drop-shadow. Useful for screenshots.I'm using Josh Comeau's full bleed image trick with CSS grid.
<img />
. It declares a default width of 1000px and accepts an optional width
prop<BasicImage />
will stretch the image across the full canvas, optionally accepts a declared width prop.