### Run Development Server

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/README.md

Starts the development server for the digital garden. This command is typically run in the digital garden's root folder.

```bash
npm run dev
```

--------------------------------

### Less Broken Callouts Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Presents a similar structure to the previous callout example, showcasing nested and embedded content within different callout types.

```markdown
---
{"dg-publish":true,"permalink":"/012-b-callouts-less-broken/"}
---


> [!info] 
> This is a callout


> [!info]- this one is closed by default
> > [!success] and has a callout inside of it :o
> > anything is possible :)

#known-issue 
> [!success] this one has a friggin note embedded in it 
> 
<div class="transclusion internal-embed is-loaded"><div class="markdown-embed"> 


```js
const asdf = 0
asdf++
```

```json
{
	gotta: "love-dat-josn"
}
```

```
this is just text i guess
```

`bonus oneliner`



</div></div>
```

--------------------------------

### Inline Code Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/0 QA hell/File with code blocks.md

An example of inline code, often used for short commands or variable names within documentation.

```text
bonus oneliner
```

--------------------------------

### Path Rewriting Rules Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/Path Rewriting/Subfolder/How deep do the rewrite rules go.md

Demonstrates how multiple path rewriting rules are processed. The system applies the first rule that matches the path, and subsequent rules are ignored for that path.

```text
Path Rewriting:
Subfolder:subfolder-rewritten
Path Rewriting/Subfolder:this-will-never-hit
```

--------------------------------

### Plain Text Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/0 QA hell/File with code blocks.md

A block of text that is not recognized as code. This may represent comments or non-executable content.

```text
this is just text i guess
```

--------------------------------

### Display Header and Current File Name

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/P Plugins/PD Dataview/PD4 DataviewJs queries.md

Use this snippet to render a level 2 header and display the name of the current file as a paragraph. No specific setup is required beyond having DataviewJS enabled.

```dataviewjs
dv.header(2, 'Header 2');
let pg = dv.current().file.name;
dv.paragraph(pg)
```

--------------------------------

### Path Rewriting Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This example shows a path rewrite configuration where a folder is set to the root directory. This affects how files within that folder are accessed and their permalinks.

```yaml
folder:
```

--------------------------------

### Code Block with Transclusion Syntax

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/015 Code blocks.md

This example shows a plain text code block containing Obsidian's transclusion syntax, '![[001 Links]]'. It serves to demonstrate how transclusions appear within code blocks.

```text
This codeblock has a transclusion syntax in it.
Check it out: ![[001 Links]]
```

--------------------------------

### JSON Object Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/0 QA hell/File with code blocks.md

A simple JSON object with a key-value pair. This format is commonly used for data interchange.

```json
{
	gotta: "love-dat-josn"
}
```

--------------------------------

### Transcluding Dataview Content

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Demonstrates how Dataview content can be transcluded into another file. The example shows a Dataview-enabled file being embedded, with its content (text and links) processed as expected.

```markdown
<div class="transclusion internal-embed is-loaded"><a class="markdown-embed-link" href="/p-plugins/pd-dataview/pd-5-1-dataview-in-transclusions/" aria-label="Open link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a><div class="markdown-embed">



This should say "bar" ->  bar

This should be a working link -> [kagi](https://kagi.com)

See if those tran: [[P Plugins/PD Dataview/PD5.2 Dataview in transclusions\|PD5.2 Dataview in transclusions]]

</div></div>
```

--------------------------------

### Custom Filter Transclusion Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Demonstrates a custom filter that replaces emojis. When published, this content should display many sun emojis.

```markdown
<div class="transclusion internal-embed is-loaded"><a class="markdown-embed-link" href="/005-custom-filters/" aria-label="Open link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a><div class="markdown-embed">



this plugin has custom filter that turns 🌞 (snow emoji) into 🌞 (THE SUN). When published, this file should have a lot of sun-emojis. 


🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞


</div></div>
```

--------------------------------

### Markdown with External Link Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/015 Code blocks.md

A sample Markdown block that includes a definition of 'florilegium' and an external link to its Wikipedia page. This demonstrates how to embed descriptive text with citations.

```markdown
In medieval Latin a florilegium (plural florilegia) was a compilation of excerpts from other writings.
 The word is from the Latin flos (flower) and legere (to gather): literally a gathering of flowers, or collection of fine extracts from the body of a larger work. ([via](https://en.wikipedia.org/wiki/Florilegium)) ^rwhi724352030
```

--------------------------------

### JavaScript Increment Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/0 QA hell/File with code blocks.md

A basic JavaScript snippet demonstrating variable declaration and incrementation. Note that 'asdf++' after declaration might not behave as expected in all contexts without proper scope or function wrapping.

```javascript
const asdf = 0
asdf++
```

--------------------------------

### Transclusion in Code Block

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/E Embeds/Transclusions/T6 transclusion inside codeblock.md

This example shows a transclusion within a code block. The expected behavior is to display the literal transclusion syntax, not the transcluded content. This is a known issue.

```markdown
```
![[005 Custom filters]]
```
```

--------------------------------

### Custom Emoji Filter Example

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This page demonstrates a custom filter that transforms emojis. When published, this file is expected to display numerous sun emojis.

```markdown
---
{"dg-publish":true,"permalink":"/005-custom-filters/"}
---


this plugin has custom filter that turns 🌞 (snow emoji) into 🌞 (THE SUN). When published, this file should have a lot of sun-emojis. 


🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞🌞
```

--------------------------------

### Nested Transclusion

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Example of a nested transclusion, where one embedded markdown block contains another. This showcases hierarchical content embedding.

```markdown
<div class="transclusion internal-embed is-loaded"><div class="markdown-embed">


How deep can you go? 

[[E Embeds/Transclusions/files/T4 Deeper|T4 Deeper]]


<div class="transclusion internal-embed is-loaded"><div class="markdown-embed">

<div class="markdown-embed-title">


```

--------------------------------

### Publishing Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter indicates that the page is intended for publishing. It also includes a note about needing a test garden token or username/repo in the `.env` file.

```yaml
---
{"dg-publish":true,"permalink":"/004-publishing-this-garden/"}
---

To use this test garden, add a test garden token / username / repo to `.env` (see README.md)
```

--------------------------------

### List Files in Folder with Dataview

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/P Plugins/PD Dataview/PD1 Dataview.md

Use this Dataview query to display a list of all files within the 'P Plugins' folder. Ensure the Dataview plugin is enabled.

```dataview
list 
from "P Plugins"
```

--------------------------------

### Initialize Excalidraw with Initial Data

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This snippet shows how to initialize Excalidraw with specific data, including elements, view settings, and other configurations. It's useful for loading predefined drawings or setting up a specific canvas state.

```javascript
const InitialData = {
  type: "excalidraw",
  version: 2,
  source: "https://github.com/zsviczian/obsidian-excalidraw-plugin/releases/tag/1.9.19",
  elements: [
    {
      type: "text",
      version: 17,
      versionNonce: 1765827278,
      isDeleted: false,
      id: "etjlThVL",
      fillStyle: "hachure",
      strokeWidth: 1,
      strokeStyle: "solid",
      roughness: 1,
      opacity: 100,
      angle: 0,
      x: -87.19921875,
      y: 99.1875,
      strokeColor: "#1e1e1e",
      backgroundColor: "transparent",
      width: 120.55990600585938,
      height: 25,
      seed: 1087805266,
      groupIds: [],
      frameId: null,
      roundness: null,
      boundElements: [],
      updated: 1696178356575,
      link: null,
      locked: false,
      fontSize: 20,
      fontFamily: 1,
      text: "tis an image",
      rawText: "tis an image",
      textAlign: "left",
      verticalAlign: "top",
      containerId: null,
      originalText: "tis an image",
      lineHeight: 1.25,
      baseline: 18
    },
    {
      type: "text",
      version: 91,
      versionNonce: 1701927762,
      isDeleted: false,
      id: "Pu1GJH4c",
      fillStyle: "hachure",
      strokeWidth: 1,
      strokeStyle: "solid",
      roughness: 1,
      opacity: 100,
      angle: 0,
      x: -149.30078125,
      y: 152.25390625,
      strokeColor: "#1e1e1e",
      backgroundColor: "transparent",
      width: 310.2197265625,
      height: 25,
      seed: 1793030738,
      groupIds: [],
      frameId: null,
      roundness: null,
      boundElements: [],
      updated: 1696178434561,
      link: null,
      locked: false,
      fontSize: 20,
      fontFamily: 1,
      text: "it's not uploaded automatically",
      rawText: "it's not uploaded automatically",
      textAlign: "left",
      verticalAlign: "top",
      containerId: null,
      originalText: "it's not uploaded automatically",
      lineHeight: 1.25,
      baseline: 18
    },
    {
      type: "text",
      version: 23,
      versionNonce: 2137370830,
      isDeleted: false,
      id: "m40NMLqr",
      fillStyle: "hachure",
      strokeWidth: 1,
      strokeStyle: "solid",
      roughness: 1,
      opacity: 100,
      angle: 0,
      x: -130.09765625,
      y: 232.0859375,
      strokeColor: "#1e1e1e",
      backgroundColor: "transparent",
      width: 220.039794921875,
      height: 25,
      seed: 546057938,
      groupIds: [],
      frameId: null,
      roundness: null,
      boundElements: [],
      updated: 1696178440853,
      link: null,
      locked: false,
      fontSize: 20,
      fontFamily: 1,
      text: "this is a bug of sorts",
      rawText: "this is a bug of sorts",
      textAlign: "left",
      verticalAlign: "top",
      containerId: null,
      originalText: "this is a bug of sorts",
      lineHeight: 1.25,
      baseline: 18
    }
  ],
  currentItemStrokeWidth: 1,
  currentItemStrokeStyle: "solid",
  currentItemRoughness: 1,
  currentItemOpacity: 100,
  currentItemFontFamily: 1,
  currentItemFontSize: 20,
  currentItemTextAlign: "left",
  currentItemStartArrowhead: null,
  currentItemEndArrowhead: "arrow",
  scrollX: 339,
  scrollY: 360.9765625,
  zoom: {
    value: 1
  },
  currentItemRoundness: "round",
  gridSize: null,
  gridColor: {
    Bold: "#C9C9C9FF",
    Regular: "#EDEDEDFF"
  },
  currentStrokeOptions: null,
  previousGridSize: null,
  frameRendering: {
    enabled: true,
    clip: true,
    name: true,
    outline: true
  }
};
InitialData.scrollToContent = true;
App = () => {
  const e = React.useRef(null),
    t = React.useRef(null);
  const [n, i] = React.useState({ width: void 0, height: void 0 });
  return (
    React.useEffect(() => {
      i({ width: t.current.getBoundingClientRect().width, height: t.current.getBoundingClientRect().height });
      const e = () => {
        i({ width: t.current.getBoundingClientRect().width, height: t.current.getBoundingClientRect().height });
      };
      return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
    }, [t]),
    React.createElement(React.Fragment, null, React.createElement("div", { className: "excalidraw-wrapper", ref: t }, React.createElement(ExcalidrawLib.Excalidraw, { ref: e, width: n.width, height: n.height, initialData: InitialData, viewModeEnabled: !0, zenModeEnabled: !0, gridModeEnabled: !1 })))
  );
};
excalidrawWrapper = document.getElementById("Drawing_2023-09-23_2241.09.excalidraw.md1");
ReactDOM.render(React.createElement(App), excalidrawWrapper);
})();
```

--------------------------------

### Configure Note for Publishing

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/README.md

Add this YAML front matter to a note to designate it as the home page and mark it for publishing to your digital garden. Ensure no backticks surround the dashes.

```yaml
---
dg-home: true
dg-publish: true
---

```

--------------------------------

### Basic Page with Links

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Demonstrates various types of internal links, including standard links, links to non-published pages, aliased links, and links with whitespace in their names.

```markdown
---
{"dg-publish":true,"permalink":"/001-links/"}
---

[[002 Hidden page|002 Hidden page]]

[[003 Non published page|003 Non published page]]

[[000 Home| Aliased link to home]]

[[000 Home | Link containing whitespace which works in obsidian but doesn't in garden :) - yes, this could be a ticket but lo and behold]]
```

--------------------------------

### Generate Garden Snapshot Command

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Use the 'Generate Garden Snapshot' command from the command palette to create a snapshot of your garden compilation. This process is also triggered on plugin load.

```markdown
- run `Generate Garden Snapshot` from the command palette
- Snapshot generation is also run on plugin load. 
```

--------------------------------

### Custom Created At Date

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter allows specifying a custom 'created' date for the file, which will be used as the createdAt date in the published garden.

```yaml
---
{"dg-publish":true,"permalink":"/010-custom-created-at/","created":"2020-01-01"}
---

This file should have createdAt: 2020-01-01
```

--------------------------------

### Specific Path Rewriting for Subfolders

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This configuration demonstrates a more specific path rewriting rule applied to a subfolder. It shows how a subfolder's path can be rewritten independently, even when a parent folder also has rewrite rules.

```yaml
Path Rewriting/Subfolder2:fun-folder
Path Rewriting:
```

--------------------------------

### Custom Path Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter defines a custom path for the note, which will also be used to generate the permalink if not explicitly overridden.

```yaml
---
{"dg-publish":true,"dg-path":"custom path/should also write to permalink","permalink":"/custom-path/should-also-write-to-permalink/"}
---

```

--------------------------------

### Create a Table of Pages with 'Custom' in Name

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/P Plugins/PD Dataview/PD4 DataviewJs queries.md

This query generates a table listing pages that include 'Custom' in their file name. It displays the page name and a link to the page. Ensure DataviewJS is active to use this functionality.

```dataviewjs
dv.table(["name", "link"],
	dv.pages()
	.where(p => p.file.name.includes("Custom"))
	.map(p => [
 		p.file.name,
 		p.file.link
	])
)
```

--------------------------------

### Custom Path and Permalink Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter sets both a custom path and a distinct custom permalink. The permalink will take precedence for the URL structure.

```yaml
---
{"dg-publish":true,"dg-path":"custom path/should not overwrite permalink","dg-permalink":"custom link/shouldBeDifferentToPath","permalink":"/custom link/shouldBeDifferentToPath/"}
---

```

--------------------------------

### Local Development Environment Variables

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/README.md

Configuration for local development, including GitHub repository details, Forestry.md settings, and local export path. These are typically set in a .env file.

```dotenv
GITHUB_REPO=
GITHUB_TOKEN=
GITHUB_USERNAME=

# Forestry.md settings (if you're using Forestry.md)
FORESTRY_BASE_URL=https://api.forestry.md/app
FORESTRY_PAGE_NAME=
FORESTRY_API_KEY=

# Local export (for development or self-hosting)
LOCAL_GARDEN_PATH=../digitalgarden
```

--------------------------------

### Create Dynamic Link with Dataview Field

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/P Plugins/PD Dataview/PD5.1 Dataview in transclusions.md

Creates a clickable link using a Dataview field from the frontmatter. This allows for dynamic URLs or text based on note metadata.

```Dataview
[kagi](`=this.url`)
```

--------------------------------

### Jinja2 Template for Highlighting

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/015 Code blocks.md

This Jinja2 template is used to format highlighted text, optionally including a location and URL, and a note. It uses conditional logic to determine what information to display.

```jinja2
{{ highlight_text }}{% if highlight_location and highlight_location_url %} ([via]({{highlight_location_url}})){% elif highlight_location %} ({{highlight_location}}){% endif %} ^rwhi{{highlight_id}}
{% if highlight_note %}
{{ highlight_note }} ^rwhi{{highlight_id}}-note
{% endif %}
```

--------------------------------

### Embed Excalidraw Diagram

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This snippet demonstrates how to embed an interactive Excalidraw diagram within a Markdown file. It requires React and the Excalidraw library. The diagram's initial data and app state are configured, and it's rendered into a specified DOM element.

```javascript
var InitialData = {"elements":[{"id":"sorts","lineHeight":1.25,"baseline":18},{"id":"HcrLXEvs44rS67hJzeV1v","type":"image","x":-175.90966796875,"y":-266.54738451086945,"width":356.52173913043475,"height":356.52173913043475,"angle":0,"strokeColor":"transparent","backgroundColor":"transparent","fillStyle":"hachure","strokeWidth":1,"strokeStyle":"solid","roughness":1,"opacity":100,"groupIds":[],"frameId":null,"roundness":null,"seed":1427244047,"version":24,"versionNonce":350668687,"isDeleted":false,"boundElements":null,"updated":1696271725883,"link":null,"locked":false,"status":"pending","fileId":"f5de7e7b9672dcaec815dbbc90d72635f638da20","scale":[1,1]}],"appState":{"theme":"light","viewBackgroundColor":"#ffffff","currentItemStrokeColor":"#1e1e1e","currentItemBackgroundColor":"transparent","currentItemFillStyle":"hachure","currentItemStrokeWidth":1,"currentItemStrokeStyle":"solid","currentItemRoughness":1,"currentItemOpacity":100,"currentItemFontFamily":1,"currentItemFontSize":20,"currentItemTextAlign":"left","currentItemStartArrowhead":null,"currentItemEndArrowhead":"arrow","scrollX":156.7996136209239,"scrollY":234.79127038043467,"zoom":{"value":1},"currentItemRoundness":"round","gridSize":null,"gridColor":{"Bold":"#C9C9C9FF","Regular":"#EDEDEDFF"},"currentStrokeOptions":null,"previousGridSize":null,"frameRendering":{"enabled":true,"clip":true,"name":true,"outline":true}},"files":{}};InitialData.scrollToContent=true;App=()=>{const e=React.useRef(null),t=React.useRef(null),[n,i]=React.useState({width:void 0,height:void 0});return React.useEffect(()=>{i({width:t.current.getBoundingClientRect().width,height:t.current.getBoundingClientRect().height});const e=()=>{i({width:t.current.getBoundingClientRect().width,height:t.current.getBoundingClientRect().height})};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[t]),React.createElement(React.Fragment,null,React.createElement("div",{className:"excalidraw-wrapper",ref:t},React.createElement(ExcalidrawLib.Excalidraw,{ref:e,width:n.width,height:n.height,initialData:InitialData,viewModeEnabled:!0,zenModeEnabled:!0,gridModeEnabled:!1})))},excalidrawWrapper=document.getElementById("with_imageexcalidraw.md1");ReactDOM.render(React.createElement(App),excalidrawWrapper);})();
```

--------------------------------

### Markdown Transclusion Syntax

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Demonstrates the transclusion syntax used in Obsidian for embedding content from other markdown files. Note that some syntax like aliased links with whitespace may not work in all contexts.

```markdown
This codeblock has a transclusion syntax in it.
Check it out: 
<div class="transclusion internal-embed is-loaded"><a class="markdown-embed-link" href="/001-links/" aria-label="Open link"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg></a><div class="markdown-embed">


[[002 Hidden page]]

[[003 Non published page]]

[[000 Home| Aliased link to home]]

[[000 Home | Link containing whitespace which works in obsidian but doesn't in garden :) - yes, this could be a ticket but lo and behold]]



</div></div>
```

--------------------------------

### Custom Updated At Date

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter allows specifying a custom 'updated' date for the file, which will be used as the updatedAt date in the published garden.

```yaml
---
{"dg-publish":true,"permalink":"/011-custom-updated-at/","updated":"2021-01-01"}
---

This file should have updatedAt: 2021-01-01
```

--------------------------------

### Dataview Query in Callout

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/012 Callouts.md

Embed Dataview queries directly within an info callout to display dynamic content. Ensure the Dataview plugin is enabled.

```dataview
list 
from "012 Callouts"

```

--------------------------------

### PNG Image Embed with Resize and Alt Text

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Markdown syntax for embedding a PNG image with specified width and alt text. The format is `![filename|alt text|width](/path/to/image.png)`.

```markdown
![travolta.png\|center\|200](/img/user/A%20Assets/travolta.png)
```

```markdown
![travolta.png\|left](/img/user/A%20Assets/travolta.png)
```

--------------------------------

### WEBP Image Embed

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Markdown syntax for embedding a WEBP image. The path is specified directly.

```markdown
![travolta.webp](/img/user/A%20Assets/travolta.webp)
```

--------------------------------

### Custom Permalink Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter specifies a custom permalink for the published page, which can differ from the file's path or name.

```yaml
---
{"dg-publish":true,"dg-permalink":"my-name-is-permalink/custom-permalink","permalink":"/my-name-is-permalink/custom-permalink/"}
---

[Custom permalink](https://docs.forestry.md/advanced/note-specific-settings/)
```

--------------------------------

### PNG Image Embed

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Standard markdown syntax for embedding a PNG image. The path is specified directly.

```markdown
![travolta.png](/img/user/A%20Assets/travolta.png)
```

--------------------------------

### Callouts with Embedded Content

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Demonstrates various types of Obsidian callouts, including nested callouts, closed-by-default callouts, and callouts containing embedded notes with code blocks and plain text.

```markdown
---
{"dg-publish":true,"permalink":"/012-callouts/"}
---

#known-issue 

> [!info] 
> This is a callout


> [!info]- this one is closed by default
> > [!success] and has a callout inside of it :o
> > anything is possible :)


> [!info] This one has dataview in it...
>  - [[012 Callouts|012 Callouts]]
> 
{ .block-language-dataview}

> [!success] this one has a friggin note embedded in it 
> 
<div class="transclusion internal-embed is-loaded"><div class="markdown-embed"> 


```js
const asdf = 0
asdf++
```

```json
{
	gotta: "love-dat-josn"
}
```

```
this is just text i guess
```

`bonus oneliner`



</div></div>
```

--------------------------------

### Basic Arithmetic Inline Query

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/P Plugins/PD Dataview/PD3 Inline JS queries.md

Perform simple calculations directly in your notes using Dataview's inline query syntax.

```javascript
$=2+1
```

--------------------------------

### Page with Only Content

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

A simple page containing only text content, with no specific frontmatter configurations for publishing or other metadata.

```markdown
---
{"dg-publish":true,"permalink":"/009-comments/"}
---

This is the only content on this page
```

--------------------------------

### Embedding Excalidraw Drawing

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This snippet shows how to embed an Excalidraw drawing into an Obsidian note using provided JavaScript and CSS. It includes CDN links for React and Excalidraw, and a div to hold the drawing.

```html
<style> .container {font-family: sans-serif; text-align: center;} .button-wrapper button {z-index: 1;height: 40px; width: 100px; margin: 10px;padding: 5px;} .excalidraw .App-menu_top .buttonList { display: flex;} .excalidraw-wrapper { height: 800px; margin: 50px; position: relative;} :root[dir="ltr"] .excalidraw .layer-ui__wrapper .zen-mode-transition.App-menu_bottom--transition-left {transform: none;} </style><script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0/dist/excalidraw.production.min.js"></script><div id="Drawing_2023-09-23_2241.09.excalidraw.md1"></div><script>(function(){const 
```

--------------------------------

### Subfolder Path Rewriting Rule

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/Path Rewriting/Subfolder2/More specific path rewriting.md

Defines a rule to rewrite paths from 'Path Rewriting/Subfolder2' to 'fun-folder'. This rule is applied before other path rewriting rules.

```text
Path Rewriting/Subfolder2:fun-folder
```

--------------------------------

### Image with Centered Alt Text and Width

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/E Embeds/E07 Image with alt attributes.md

Embed an image with custom alt text and a fixed width. The syntax `![[filename|alt text|width]]` is used for this purpose.

```markdown
![travolta.png|center|200]
```

--------------------------------

### Pinned Note Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter marks a note as 'pinned', which typically ensures it appears at the top of lists or navigation elements in the published garden.

```yaml
---
{"dg-publish":true,"permalink":"/008-pinned-note/","pinned":true}
---

Hello! I'm a pinned note (should be at the top yeah!)
```

--------------------------------

### Custom Title Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter sets a custom title for the published page, overriding the default filename. A link to external documentation on note-specific settings is also provided.

```yaml
---
{"dg-publish":true,"permalink":"/006-custom-title/","title":"006 THIS IS A CUSTOM TITLE"}
---

[Custom title](https://docs.forestry.md/advanced/note-specific-settings/)
```

--------------------------------

### Images in Markdown Tables

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

Demonstrates embedding images within markdown tables. The pipe character in image size syntax needs to be escaped as `\|` when used inside tables.

```markdown
| Image | Name |
| ----- | ---- |
| ![travolta.png\|100](/img/user/A%20Assets/travolta.png) | Travolta resized |
| ![travolta.png](/img/user/A%20Assets/travolta.png) | Travolta full size |
```

--------------------------------

### Hidden Page Configuration

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This frontmatter configuration marks a page as hidden, preventing it from appearing in the folder tree while still being publishable.

```yaml
---
{"dg-publish":true,"permalink":"/002-hidden-page/","hide":true}
---
```

--------------------------------

### Dataview Page Count Inline Query

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/P Plugins/PD Dataview/PD3 Inline JS queries.md

Display the total number of pages in your Dataview index using inline JavaScript queries.

```javascript
$=dv.pages().length + dv.pages().length
```

--------------------------------

### Root Path Rewriting Rule

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/Path Rewriting/Subfolder2/More specific path rewriting.md

Defines a rule for the root path, indicating that it remains unchanged or is a base for other rewrites. This rule is applied after the subfolder-specific rule.

```text
Path Rewriting:
```

--------------------------------

### Excalidraw Drawing JSON Structure

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/dg-testVault/Excalidraw/Drawing 2023-09-23 22.41.09.excalidraw.md

This JSON represents a drawing made with the Excalidraw plugin. It includes metadata about the drawing and a list of elements with their properties.

```json
{
	"type": "excalidraw",
	"version": 2,
	"source": "https://github.com/zsviczian/obsidian-excalidraw-plugin/releases/tag/1.9.19",
	"elements": [
		{
			"id": "CZsgDfedEqsrXkSK9gQJH",
			"type": "rectangle",
			"x": -231.33984375,
			"y": -252.75,
			"width": 222,
			"height": 93.296875,
			"angle": 0,
			"strokeColor": "#1e1e1e",
			"backgroundColor": "transparent",
			"fillStyle": "hachure",
			"strokeWidth": 1,
			"strokeStyle": "solid",
			"roughness": 1,
			"opacity": 100,
			"groupIds": [],
			"frameId": null,
			"roundness": {
				"type": 3
			},
			"seed": 834466567,
			"version": 54,
			"versionNonce": 1029562215,
			"isDeleted": false,
			"boundElements": [
				{
					"id": "ezIUrt6yrVW9zFYWBb6Fx",
					"type": "arrow"
				}
			],
			"updated": 1695498089101,
			"link": null,
			"locked": false
		},
		{
			"id": "SvNLuaih",
			"type": "text",
			"x": -179.35546875,
			"y": -209.0703125,
			"width": 41.89994812011719,
			"height": 25,
			"angle": 0,
			"strokeColor": "#1e1e1e",
			"backgroundColor": "transparent",
			"fillStyle": "hachure",
			"strokeWidth": 1,
			"strokeStyle": "solid",
			"roughness": 1,
			"opacity": 100,
			"groupIds": [],
			"frameId": null,
			"roundness": null,
			"seed": 1422140583,
			"version": 5,
			"versionNonce": 655470793,
			"isDeleted": false,
			"boundElements": null,
			"updated": 1695498085088,
			"link": null,
			"locked": false,
			"text": "beep",
			"rawText": "beep",
			"fontSize": 20,
			"fontFamily": 1,
			"textAlign": "left",
			"verticalAlign": "top",
			"baseline": 18,
			"containerId": null,
			"originalText": "beep",
			"lineHeight": 1.25
		},
		{
			"id": "ezIUrt6yrVW9zFYWBb6Fx",
			"type": "arrow",
			"x": -8.67578125,
			"y": -157.16796875,
			"width": 105.06640625,
			"height": 109.1796875,
			"angle": 0,
			"strokeColor": "#1e1e1e",
			"backgroundColor": "transparent",
			"fillStyle": "hachure",
			"strokeWidth": 1,
			"strokeStyle": "solid",
			"roughness": 1,
			"opacity": 100,
			"groupIds": [],
			"frameId": null,
			"roundness": {
				"type": 2
			},
			"seed": 1011929737,
			"version": 32,
			"versionNonce": 1434943559,
			"isDeleted": false,
			"boundElements": null,
			"updated": 1695498089101,
			"link": null,
			"locked": false,
			"points": [
				[
					0,
					0
				],
				[
					105.06640625,
					109.1796875
				]
			],
			"lastCommittedPoint": null,
			"startBinding": {
				"elementId": "CZsgDfedEqsrXkSK9gQJH",
				"focus": -0.4142254509017335,
				"gap": 2.28515625
			},
			"endBinding": null,
			"startArrowhead": null,
			"endArrowhead": "arrow"
		},
		{
			"id": "DCQM7O8k",
			"type": "text",
			"x": 112.515625,
			"y": -27.84375,
			"width": 42.17994689941406,
			"height": 25,
			"angle": 0,
			"strokeColor": "#1e1e1e",
			"backgroundColor": "transparent",
			"fillStyle": "hachure",
			"strokeWidth": 1,
			"strokeStyle": "solid",
			"roughness": 1,
			"opacity": 100,
			"groupIds": [],
			"frameId": null,
			"roundness": null,
			"seed": 358308487,
			"version": 5,
			"versionNonce": 1560033513,
			"isDeleted": false,
			"boundElements": null,
			"updated": 1695498093145,
			"link": null,
			"locked": false,
			"text": "boop",
			"rawText": "boop",
			"fontSize": 20,
			"fontFamily": 1,
			"textAlign": "left",
			"verticalAlign": "top",
			"baseline": 18,
			"containerId": null,
			"originalText": "boop",
			"lineHeight": 1.25
		},
		{
			"id": "rN0xD5d1otB0Txp8mrVKE",
			"type": "rectangle",
			"x": 94.73046875,
			"y": -44.63671875,
			"width": 76.48046875,
			"height": 59.0703125,
			"angle": 0,
			"strokeColor": "#1e1e1e",
			"backgroundColor": "transparent",
			"fillStyle": "hachure",
			"strokeWidth": 1,
			"strokeStyle": "solid",
			"roughness": 1,
			"opacity": 100,
			"groupIds": [],
			"frameId": null,
			"roundness": {
				"type": 3
			},
			"seed": 1024447145,
			"version": 54,
			"versionNonce": 1399780105,
			"isDeleted": false,
			"boundElements": null,
			"updated": 1695498097327,
			"link": null,
			"locked": false
		},
		{
			"id": "EAi6LVWi5tLJIMLTDPXa7",
			"type": "line",
			"x": 93.21875,
			"y": 24.30078125,
			"width": 80.23046875,
			"height": 83.078125,
			"angle": 0,
			"strokeColor": "#1e1e1e",
			"backgroundColor": "transparent",
			"fillStyle": "hachure",
			"strokeWidth": 1,
			"strokeStyle": "solid",
			"roughness": 1,
			"opacity": 100,
			"groupIds": [],
			"frameId": null,
			"roundness": {
				"type": 2
			},
			"seed": 795411751,
			"version": 27,
			"versionNonce": 309139625,
			"isDeleted": false,
			"boundElements": null,
			"updated": 1695498103612,
			"link": null,
			"locked": false,
			"points": [
				[
					0,
					0
				],
				[
					-80.23046875,
					83.078125
				]
			],
			"lastCommittedPoint": null,
			"startBinding": null,
			"endBinding": null
		}
	]
}
```

--------------------------------

### Embed Excalidraw Drawing

Source: https://github.com/oleeskild/obsidian-digital-garden/blob/main/src/test/snapshot/snapshot.md

This JavaScript code embeds an Excalidraw drawing into an HTML element. It initializes Excalidraw with specific data and view settings.

```javascript
InitialData.scrollToContent=true;App=()=>{const e=React.useRef(null),t=React.useRef(null),[n,i]=React.useState({width:void 0,height:void 0});return React.useEffect(()=>{i({width:t.current.getBoundingClientRect().width,height:t.current.getBoundingClientRect().height});const e=()=>{i({width:t.current.getBoundingClientRect().width,height:t.current.getBoundingClientRect().height})};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[t]),React.createElement(React.Fragment,null,React.createElement("div",{className:"excalidraw-wrapper",ref:t},React.createElement(ExcalidrawLib.Excalidraw,{ref:e,width:n.width,height:n.height,initialData:InitialData,viewModeEnabled:!0,zenModeEnabled:!0,gridModeEnabled:!1})))},excalidrawWrapper=document.getElementById("Drawing_2023-09-23_2241.09.excalidraw.md1");ReactDOM.render(React.createElement(App),excalidrawWrapper);})();
```