a seal's attempt at understanding and implement the forest grid
the Forest Grid is designed by uroybd. it is a dynamic representation of one's digital garden, turning metaphorical saplings and seeds into visual ones, laid out in a grid for one's clicking and meandering. the result looks like a forest... should one choose a forest.
as someone who probably has ADHD (my therapist prefers the term "attention-deficit tendencies"), this sounds great. the promise of visual acuity sings to me. no longer will notes, half-written for a vague um i'll do this later when i have spoons, languish in the far reaches of my vault. i don't even have to make a contraption with Dataview to--
ohhhhhh it's like.... only for the public digital garden. for the site. not for the vault.
- [?] can this be implemented in the vault
- [i] uhm probably not because it utilises Javascript and the Nunjucks language to do this, which, in an Obsidian context, is exclusive to the Digital Garden plug-in.
should i implement it still?
the answer is yes, because fuck it, we ball.
examining examples and metaphorical alternatives
- pics of the hermitage forest grid
- pics of the paologabriel forest grid
- pics of the patsitive forest grid
my metaphors
| numero | name | svg | equivalent | examples | |
|---|---|---|---|---|---|
| 1 | crab | hermit crab | just started | seedling | most notes lol |
| 2 | fish | fish | slightly refined, but still has potential | sapling | |
| 3 | reef | reef | ok keri bells | tree | |
| 4 | shell | shell | outdated | withered | |
| 5 | kelp | kelp | copies of other things (transcripts, md version of pdf-only stuff) | stone | |
| 6 | anchor | anchor | lists, maps, resources etc | signpost | Resources misc |
| 7 | jellyfish | medusa | perpetual, will never finish | chest | Timeline |
resources needed
- Obsidian (duh)
- Digital Garden documentation
- uroybd's work:
- topobon
- the repo with the source code for uroybd's digital garden
- Steal My Look explains how to partially and completely duplicate the repo
- the code for the forest grid
- custom component
- forest generation script
- css lines 327-386 customcss
- topobon
- NOTES.
- imgs for note icons
- Optional but helpful: paologabriel's delineation of how he implemented the forest grid in his garden
- Copy over the svg files from
topobonrepo - Copy the forest generation script to
src/helpers/userUtils.js - Add the
forest.njkto notes header slot - Enable all front-matter to be passed through from obsidian
- Add
noteIconfront-matter to your note(s)
It helps to set defaults using the plug-in. For example, I want the "1" icon to be used by default for new notes. You can also add to a template, if that's your thing.
how the Forest Grid works
You go to
process so far
- add svgs to /img
- add forest generation script to userUtils.js
- edit note labels value to reflect your own note labels (only if you want to use your own maturity levels)
- NOTE: that value is numerical NOT a string. if u get it wrong ur vercel will not deploy lol
- add forest.njk to [repo name]/src/site/_includes/components/user/index/header/
- i copied lines 307-366 from the css into my custom-style.scss