How to setup gartenkasten website

I love my Gartenkasten site!

I know, it's so cool, right? Very IndieWeb. 🥰

If you're interested in the steps to set up your own website similarly to mine, this page contains the instructions.

How to setup

I want a digital garden site like yours!

• Step 1: Download Obsidian
• Step 2: Use the Digital Garden plugin
  • dg-docs.ole.dev for how to set up the Digital Garden plugin and Vercel

I want that visual garden in your header!

• That's based on Topobon (mix of javascript and CSS)

  • Visual garden graph JS—adds pretty visual garden view of notes to the header, using Javascript.

• Note: I made some changes to the Topobon component, based on my needs.

• Step 1: Set-up digital garden website or fork Topobon (or mine!)

  • If you just forked the entire Topobon or my Gartenkasten, then it should work out of the box, but you'll also have all of uroybd/topobon's notes or my notes on your website...
  • So Step 2a: delete the pages you don't need? 😅

• Step 2b: Already have a website?

  • You need to copy over some elements from Topobon to make this work
    • forest.njk — this inserts the garden into your index page
    • userUtils.js — this generates the garden
    • custom-style.scss — the relevant section dictates how the garden should look
    • .svg images — these are the elements that are populated in the garden
    • See: Topobon issue #33 for notes on integrating Topobon into your garden (you do not need to fork the whole thing if you already have a digital garden set-up)
    • Or see: Swamp website stack for extended instructions on deploying Topobon (and also where I saw Topobon in the real world)

• To change the images for the garden map, you need to update the noteLabels in userUtils.js and update CSS as well

• Topobon issue #33 for notes on integrating Topobon into your garden (you do not need to fork the whole thing if you already have a digital garden set-up)

  • src/site/_includes/components/user/index/header/forest.njk — created a copy of the forest.njk file from topobon —
  • src/helpers/userUtils.js — replaced with topobon version —
  • src/site/styles/custom-style.scss — copied section of styling into existing file — this
  • src/site/_includes/layouts/index.njk — inserted include for forest.njk

• Add noteIcon to Digital Garden plugin's pass-through fields

• Save & re-publish notes to push new frontmatter values

• Icons are pulled from noteLabels in userUtils.js

• Any value that's a number gets treated like tree-[x]

• Any value that matches a noteLabels key (e.g. bee) works

• Add matching CSS icons separately later