Getting Started with Your Digital Garden

🌱 Getting Started with Your Digital Garden

Welcome to your new digital garden! This post demonstrates the basic features and formatting options available in Sprout.

What is a Digital Garden?

A digital garden is a space for cultivating your thoughts and ideas over time. Unlike traditional blogs, gardens:

• Grow organically - Posts evolve from seeds to sprouts to evergreens
• Track evolution - See how your thoughts develop over time
• Encourage exploration - Discover connections between ideas

Formatting

Headers

Use different header levels to organize your content:

H2 - Section Headers

H3 - Subsection Headers

H4 - Smaller Sections

Text Formatting

• Bold text using double asterisks
• Italic text using single asterisks
• Strikethrough using double tildes
• Inline code using backticks

Lists

Unordered Lists

• Item one
• Item two
  • Nested item
  • Another nested item
• Item three

Ordered Lists

1. First step
2. Second step
3. Third step

Links and Images

Link to external site

Code Blocks

function helloGarden() {
  console.log("Welcome to your digital garden!");
}

🎨 Callouts and Special Formatting

Sprout includes a rich callout system inspired by GitHub alerts and Obsidian callouts. These help highlight important information and add visual interest to your posts.

Callouts

Testing every supported callout type:

Informational

Note

Standard note for small pieces of information.

Abstract

Used for summaries or TL;DRs.

Info

General information callout.

Action Oriented

Todo

Tasks or things to be done.

Tip

Helpful tips and tricks.

Success

Positive outcomes or successful checks.

Question

For questions, help, or FAQs.

Issues

Warning

Critical warnings or cautions.

Failure

Errors, failures, or missing items.

Danger

Significant risks or errors.

Bug

Bug reports or technical issues.

Example

Illustrative examples.

Thoughts

Quote

For quotes or citations.

Idea

Lightning bolt idea callout!

Draft

This is a draft block. It represents incomplete writing that is still in progress. Note the dashed border and specific styling to distinguish it from mature content.

Tip

Callouts can span multiple lines and includeformatting like italics, code, and links.

They can even include:

• Lists
• Multiple paragraphs
• Any markdown formatting

Nested Content

Important

You can include code blocks in callouts:

console.log("Hello from a callout!");

And even other elements like quotes:

This is a nested quote inside a callout

Callout Best Practices

• Use sparingly - Too many callouts can overwhelm readers
• Choose appropriate types - Different callouts serve different purposes
• Keep them concise - Long callouts lose their impact
• Test readability - Make sure callouts enhance, not distract from, your content

Tables

Callout Type	Use Case	Visual Style
NOTE	General info	Blue background
TIP	Helpful advice	Green background
IMPORTANT	Critical info	Orange background
WARNING	Potential issues	Red background
CAUTION	Minor concerns	Yellow background
IDEA	Creative thoughts	Purple background
QUESTION	Engagement prompts	Blue background
DRAFT	Work in progress	Gray background

Experiment with these callouts to find the style that works best for your garden! 🌱

Drafting Patterns

Because this post has draft: true in its frontmatter, you should see a global draft banner at the top.

Container-based Drafts

For sections that are incomplete, we can use the :::draft directive:

Callout-based Drafts (Small blocks)

Draft

This is a shorter, callout-style draft for specific notes.

Inline Drafts

You can even use inline draft text for quick notes within a sentence.