↓Skip to main content

Digital garden as static website

··
digital-garden second-brain markdown
Update: a lot of ideas described in this article implented in Astro digital garden
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):

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:

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.

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)

Read more: Astro diagrams, Portable markdown links

↑