Steal My Look!

Also known as:

You visited my digital garden and are wondering how to replicate it (maybe partially)? I will try to guide you through it.

This is the repository containing my source code:

uroybd/topobon - GitHub

Having difficulties?

I understand if you are. But the sole reason for this note is to help non-technical people. If you are struggling, feel free to contact me (the email button on the bottom-right might come in handy), or comment here. I will try to help and update this note accordingly.

To Replicate Completely

If you are starting fresh and want my repository to use as a starting point, just clone it and delete all markdown files (ending with .md) from the notes directory.

Replicate Partially

Most of the customisations you see in my garden are done using the [Custom Component] feature available in Obsidian Digital Garden. All such components can be found in this folder.

All Components

  1. Common:
    1. Footer:
      1. Floating Controls: For the floating control at the bottom-right. It allows you to switch between dark/light modes, and allows you to start a conversation through email.
      2. Analytics: For Vercel analytics.
      3. Footnotes: For pop-up footnotes.
    2. Head:
      1. OG Image For OpenGraph Image resolution based on note maturity.
  2. Index:
    1. Head:
      1. Google Meta: To add Google's meta tag for verification.
      2. Forest: To render the Forest on the home page.
  3. Notes:
    1. AfterContent:
      1. Series: To add series-related information.
    2. BeforeContent:
      1. Tool Links: To show a section for Tool notes with links.
    3. Footer:
      1. Comment: For Disqus comment.
      2. [Slider]: To show a note as a slider. See in action.
    4. Header:
      1. Aliases: To show note aliases in the header.
      2. Reading Convention: for highlighting conventions of some of my older reading notes. Adding it here for completeness' sake.

Forest

The aforementioned forest component requires a little more work than just adding components. To make it work, some site-wide calculation is needed. The relevant part can be found in the userUtils.js file

Cards

In The Threshold or in The Shelf, you may have noticed cards of notes. This is being achieved by a combination of:

  1. Dataview Plugin: To render the tables.
  2. Minimal Theme: To turn the tables to cards.

It means that to have the cards (until the base support lands), you have to set your Garden's theme to Minimal.