Notepad

5.8 KiB

Raw Permalink Blame History

Digital Garden is the Obsidian plugin that lets me publish changes from my local obsidian here directly to the web on my personal website. Below are some helpful tips & tricks I've collected to streamline the process.

Appearances:

Digital Garden Themes:

80's Neon - dark mode
- !
Terminal
- !
Bubble Space
- !
Everblush
- !
MagicUser
- !
Molecule
- !
Notation
- !
Origami
- !
NotSwift
- !
Encore
- !

Custom Code

For further tweaks and customization, adding in your own CSS is helpful. Digital Garden docs provides a helpful guide to notes icon customizing and how to find this in the source files.

For the most default first page set up, you should have this at the top of your homepage:

---
dg-home: true
dg-publish: true
---

Then, for every subpage afterwards the property should be:

---
dg-publish: true
---

Commands

Helpful commands in digital garden front-matter placed at the top of a note.

Hide file from file tree : If you want to hide a note from the filetree, you can do so by setting dg-hide to true.

---
dg-hide: true
---

Pinning notes to filetree : If you want certain notes to be at the top of the folder its in, you can use the dg-pinned attribute. Setting this to true will make the note be on top of the folder it is currently in

---
dg-pinned: true
---

Custom Links: This plugin supports setting custom links to a note, if you prefer something else than the default behaviour. This is done by adding a dg-permalink attribute to the frontmatter of your file. As an example, the top of your file could look like this:

---
dg-publish: true
dg-permalink: "mynote"
---

This will make the URL to your note be "{Your-Garden-Name}.netlify.app/mynote/". You can still use normal obsidian links as before to link to it. These will be automatically corrected once you publish a note with the permalink attribute. Same goes for deleting the attribute. Doing so will result in the note using the default URL. All links in other notes should automatically be corrected and still work.

Permalinks with arbitrary level of folders deep:

---
dg-permalink: "category/2022/mynote/"
---

File path : If you want your note to appear in a different file structure than what you have in your vault, you can use the dg-path attribute, like so:

---
dg-path: "Advanced/Features.md"
---

More details about this is available in 05 Other Settings#Rewrite path for single note.

Metatags : Setting metatags for a note can be done by adding a dg-metatags attribute like so:

dg-metatags:
 description: "some description"
 "og:image": "https://example.com/someimage.png"

Note that there is a single space before the "description" field, not a tab.

Adding custom title & image in metadata : This feature can be used if you want custom titles and images when sharing links in social media. Using the example below will add a title and an image that will be used when sharing the link in social media.

dg-metatags:
 "og:title": "Title Appearing on Social Media Site"
 "og:image": "https://example.com/someimage.png"

CSS

Body classes : You can set custom classes to the body tag for your published notes, by using the 'dg-content-classes' attribute.

dg-content-classes: cards

This will add a "cards" class to your note, allowing you to customize each note with specific classes. You can also change the frontmatter key used to specify this in the appearance settings. So, for example, if you are using Minimal Theme's cssClasses you can change the key to 'cssClasses', meaning you don't have to specify the classes twice.

Customizing Icons. Navigate to repo/src/site/img to drop the icon .svg file there and then navigate to repo/src/site/styles to edit the custom-style.css file.

via Digital Garden Docs. - Changing and adding icons

You can change and add your own icons the following way: The ideal way to change the default icons is by adding the svgs in the img folder and setting the appropriate css vars in body in a custom css file:

body {
  --note-icon-1: url(/img/your-custom.svg);
  --note-icon-2: url(/img/tree-2.svg);
  --note-icon-3: url(/img/tree-3.svg);
  --note-icon-fallback: url(/img/default-note-icon.svg);}
}

To add new icons, let's say, for 'stone', add a snippet like this (and add the relevant svg) in a custom css file:

body.title-note-icon .cm-s-obsidian > header > h1[data-note-icon="stone"]::before,
body.filetree-note-icon .filename[data-note-icon="stone"]::before,
body.links-note-icon .internal-link[data-note-icon="stone"]::before,
body.backlinks-note-icon .backlink[data-note-icon="3"]::before {
  background-image: url(/img/stone.svg);
}

For reference, this is a fantastic example repository for how one user made their Obsidian to a digital garden.

5.8 KiB Raw Permalink Blame History