Recently

See 172 more →

Planting my digital garden

• Updated Mar 24, 20256 min read

I have this idea for my notes that I’ve seen floating around on Twitter (lost link, I saw it last summer but will link when I see it). I’ve seen it come to life in other digital gardens as well:

I love that they use custom icons to represent the health of their notes (withered to saplings, to straight up rocks)

I’ve been trying to build it out in Quartz/typescript withcursor but I don’t think I’m being clear about what I need to build, so I’m going to try to write it down here.

2025-01-09

Actually, Victoria Kim (one of the references below) is at Replit, and I had no idea this existed. I’m hypothesizing that this is a step down from Cursor, in that this is taking natural language and creating working software prototypes, not so much helping you actually code the thing. I’ll be trying out this newai agent to see how it differs from Cursor, and which is the better tool to invest in. I can’t be spending this much money on software.

Features

Based on these emojis, which hopefully can turn into:

  • Assign each note with an emoji via frontmatter (manual)
    • New smaller notes/scratchpads 🌱☘️🌿🍀
      • Specific notes as easter eggs 🪴🐥
    • Bigger notes and reflections related to a specific interest 🌻🌺🌸🌼🍄🪻🌾🌳🌷 TBD
    • Building a form feature so that people can create a critter to join the garden 🐛🪱🐝🐜🐾🐞🦋
    • Recipes, if I decide to bring them back to this garden 🫑🌽🥕🥬

Designing the garden

I think constraints are going to be important for this, since I’m not familiar with typescript or even how I’m going to pull the relevant data for this to work. I think a lot of this will be manually designed (via Frontmatter and flex positioning, maybe). So far, I’m imagining the border having a bunch of flowers around it, or maybe areas with patches of certain types of plants/flowers, or maybe just a right rail of flowers.

Principles

List of things to think about as I’m visualizing

  • How would I take care of my garden? — What flowers and plants would I use? When do I repot? What arrangements do I want in what area? How do I take care of pests? What does pruning look like? What would I prune?
  • Make it easy on mobile — I want to easily read and access my notes on mobile.
  • Gentle design — Taking care of my plants IRL is a gentle practice. Every morning I wake up and look at the foliage, and I prune where I can. Every Saturday, I spend the morning rearranging and watering my plants. I want the same sentiment of gentleness and quiet here, if I can.

Updates

2025-01-10

I’ve been all over the place with how to get this going. A homepage landing page was the first and easy way to do it. I thought about assigning notes specific emojis, and tags would have separate emojis, so this is where I ended up.

Steps to get here:

  • Create a separate .ts file to assign icons to specific tags
  • Import to TagList.tsx to connect icons to tags
  • Replace circles/nodes in graph.inline.ts with emojis. ^ I did this all withcursor 😵‍💫 so now I’ll be reverse engineering this to understand wtf just happened, but this is exactly what I wanted

2025-01-11

I’m pissed because I fucked up a github error and hard reset all my changes, so I’ve had to start over. Consequently, it undid a lot of my Obsidian changes, including unaliving this page, so I had to scrape through File Recovery to at least copy-paste whatever I had in here. Unfortunately, it also unalived my screenshots, so I can’t even re-share the early versions of this project where it was a bunch of note icons.

This is hard lol

I also started parsing through all of my emojis here to see if there are any rogue notes that have 🌱 assigned to them to double check that I put the tags in the right order.

Since the code is reading the first tag in the note to see which icon to use, I have to be mindful about which tag I’m using. This seems like a lot of work from the start, but knowing now what I want to use this garden for, it feels more intentional for me to put in that work, if that makes sense. I’ve been creating notes and brain dumping for a couple years now, so really this is me combing through all of 100+ of my notes to make sure everything is starting to follow a consistent structure.

Sometimes it’s ok to just YOLO and create, then deal with processes later.

A version of the graph where I turn off tags and just see all the notes in one circle 🥺 🥺🥺🥺

I think I’m going to opt for the patch garden instead of the circular visualization, since it feels like a more accurate representation of what my notes look like. You can see areas of interest, like the 🪻 and 🐝 representingdigital-garden andproductivity , respectively; the 🌾 representing business/career/entrepreneurship stuff; 🌺 forweb-development. I’m really glad it’s coming along.

2025-01-15

In some ways this is kind of beautiful because you can see how my interests relate to each other by way of these emojis. I love that 🐝 are closest to 🪻 and 🌾 to represent an area of productivity, and my creative interests as 🦋 are in the realms of web, design, and 3d.

2025-01-20

I haven’t been able to add Adobe Typekit to my project. Typekit isn’t loading first, so the fonts aren’t properly loading. The answer sounds easy to fix with some Javascript or custom CSS, but I’m not really sure how to do that in context of Quartz components. I tried to create a custom component, but I’m getting an error that can’t read it (undefined). I’ll revert back to Google Fonts for now. I’m kinda liking the handwritten accents, but we’ll see. Just playing around.

Scratchpad🐾

^ To create a circular visualization without tags:

globalGraph: {
	drag: true,
	zoom: true,
	depth: -1,
	scale: 0.9,
	repelForce: 0.1,
	centerForce: 0.5,
	linkDistance: 50,
	fontSize: 0.6,
	opacityScale: 1,
	showTags: false,
	removeTags: [],
	focusOnHover: true,
	nodeIcon: "🌱",
	useTagIcons: true,
}

^ To create a patch-like visualization, with tags:

globalGraph: {
    drag: true,
    zoom: true,
    depth: -1,
    scale: 0.9,
    repelForce: 1,
    centerForce: 0.3,
    linkDistance: 100,
    fontSize: 0.6,
    opacityScale: 1,
    showTags: true,
    removeTags: [],
    focusOnHover: true,
    nodeIcon: "🌱",
    useTagIcons: true,
  }

To do

  • Audit Hermitage to determine what emojis + size represents
  • Use Apple emojis to represent similar sentiment (define sentiment) 🌱🥀🪨🍂🍄🌷🌳🌿🌻
  • Curate by hand? or automate?
  • Design tag pages
  • Design folder pages
  • Pick a colour palette
  • Fix Mobile View
  • Design a landing page?
  • Adjust breadcrumb svg
  • Swap netlify link for garden subdomain
  • Remove templates from Recently list
  • Add recently revisited section
  • Style body links so you can see it’s an external link
  • Change colour of highlighted text

Bugs 🐛

  • Font on load isn’t the right font — requires refresh to use Typekit font

References

Daylight Computer’s Website

Chloe Yan’s Garden

Hermitage Garden

Emoji World by Victoria Kim

Graph View