Digital garden as static website

Table of Contents

Digital garden aka Second brain, Zettelkasten, personal wiki, personal knowledge management.

There are different aspects of a digital garden. It can be seen as a way to take notes just for yourself, but for me, it’s more interesting as a way to organize knowledge and publish it as a (static) website.

There are different editors (note-taking applications): Obsidian, Foam, Roam Research to name few. But again, I am more interested in the publishing part - assuming you already created content with an editor of your choice.

I have 3 digital gardens (so far):

About parsing - Astro + Starlight
About graphs - Hugo + Quartz v3
About fuzzy text search - Hugo + Quartz v3

I feel like the results can be better. So what do I expect from Ideal Digital Garden published as a static website?

Status quo #

Typical features for digital garden

stacked navigation as seen in Andy Matuschak notes
tree-view (sidebar navigation) and table of contents as seen in many documentation sites, like starlight, docusaurus
list of latest articles and tags as seen in any blog
markdown, front-matter, text-to-diagram, math with Katex as seen in many static site generators (SSG)
store source code on GitHub and edit link
breadcrumbs as seen in many websites
full-text search for static website, for example, with pagefind, fuse

Common feature for Obsidian publish, Mindstone, Quartz

Backlinks, highlight broken links
Page preview (popover preview)
Graph view. To be fair I think it is only useful for aesthetics. Most of the time layout is done with the help of a force-directed algorithm, which produces not very readable graphs
Wiki-links, portable markdown links

Other examples:

Inspiration #

It seems that digital gardens mainly focus on static content. But on the web, it is possible to use dynamic content, like code playgrounds, interactive demos, etc. Here are some examples for inspiration:

What I want #

Static website #

First of all, the system should be based on some open-source static website generator. This would allow the use of all existing capabilities of those solutions, for example:

Hugo provides exceptional image processing
Astro has a lot of plugins

It would allow you to host a website anywhere, for example, on Netlify or GitHub Pages.

It would allow you to customize your website easily, using many existing themes as reference, or using Tailwind.

The only problem is that those site generators do not natively support wiki links, so we would need some tool to transform markdown.

Faceted search #

Examples of faceted search: datasette, itemsjs. The simplest facets can be “tags” and “update at”.

But this gets more interesting with custom metadata (in front-matter). One can create a custom type of page (“taxonomy”) and add custom metadata for all those pages:

For example, you can have a custom page type

“cooking recipe” and custom metadata can be: cooking type, vegan/vegetarian
“algorithm” and custom metadata can be ADT (list, matrix, graph…), time complexity (O(n))

Then one can use custom metadata fields as facets.

Obsidian Dataview is another side of the same medal. But instead of giving users the ability to explore data the way they want, it gives authors the ability to present content the way they want.

Other #

sortable tables, as seen in Wikipedia. For example, sortable
pan/zoom for svg images. For example, panzoom
glossary of alphabetical index, as seen in books
use the favicon of the website for external links
icons and text for tags as seen in StackOverflow
“mdx” components, for example, tabs, as seen in Starlight
text to diagram
- graphs (tree, DAG, etc.)
- Euler diagram
- DAG over timeline
- Hasse diagram
- hand drawn look, xkcd-style (napkin math, ballpark estimate)