johno
Writing
Notes
Contact

Building a digital garden

After getting inspired I figured it was time to begin tending to my own digital garden. So I decided to build it as an open-source Gatsby Theme. It seems a perfect fit because there will be a lot of internal logic for handling notes directories, listings, and other code that could be shared with other folks hoping to do the same.

Then, using Component Shadowing others can implement their own designs on top.

Handling the post listing was relatively straightforward and we made the decision not to paginate so it was a matter of querying the posts and rendering the list. For the first pass I didn't even bother separating posts and notes, processing them on the fly.

Organizing content

I think it makes the most sense to opt for a flat structure, so flat that even pages are brought to the root (defying Gatsby conventions).

site
├── gatsby-config.js
├── package.json
├── pages
│   └── index.md
│   └── contact.md
├── posts
│   └── my-first-post.md
└── notes
    ├── music
    │   └── list.md
    └── thoughts
        ├── thoughts-1.md
        └── thoughts-2.md

Brutalist

The initial brutalist vibe was more by accident than anything. I was using the defaults of gatsby-theme-system and then tossed in a folder feather icon. It felt right, especially since it'd be a "base theme" so I left it at that.

Screenshot of initial design

Nested directories

Something that feels like a good UI to me is having the notes folders mimic the actual filesystem. So you can nest directories and then see a file listing underneath. Though this would be a bit tricky since we have to detect if it is a nested directory, and if so skip that in the folder listing at the outer level.

We will then need to filter the folders and pass that to a wiki index page. I first handled it in JS, but it's starting to feel like we should be passing this work off to Gatsby's data layer.

Ordering content

  • priority
  • sorting based on view count
  • random