Tech Beginner year-round

Hello World: Blog Features Documentation

A comprehensive guide to all the features available in Eden blog posts including Mermaid diagrams, YouTube embeds, code blocks, and more.

· 5 min read

Welcome to the Eden blog! This post serves as documentation for all the features available when writing blog posts. Use this as a reference when creating new content.

Basic Markdown

Text Formatting

You can use bold text, italic text, and inline code. You can also use strikethrough for deleted content.

This is a blockquote. Use it for quotes or to highlight important information.

Lists

Unordered list:

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item

Ordered list:

  1. Step one
  2. Step two
  3. Step three

Code Blocks

Code blocks support syntax highlighting for many languages.

TypeScript

interface SensorReading {
  sensorId: string;
  value: number;
  unit: string;
  timestamp: Date;
}

function processSensorData(readings: SensorReading[]): number {
  const values = readings.map(r => r.value);
  return values.reduce((a, b) => a + b, 0) / values.length;
}

Python

from datetime import datetime
from typing import List

def calculate_water_needs(
    soil_moisture: float,
    temperature: float,
    humidity: float
) -> float:
    """Calculate irrigation needs based on environmental factors."""
    base_need = max(0, 50 - soil_moisture)
    temp_factor = temperature / 25.0
    humidity_factor = (100 - humidity) / 100.0

    return base_need * temp_factor * humidity_factor

Shell Commands

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

JSON Configuration

{
  "sensor": {
    "type": "soil-moisture",
    "pin": 4,
    "interval": 300,
    "calibration": {
      "dry": 0,
      "wet": 100
    }
  }
}

Mermaid Diagrams

Mermaid allows you to create diagrams using text-based syntax.

Flowcharts

graph TD
  A[Start] --> B{Is soil dry?}
  B -->|Yes| C[Activate irrigation]
  B -->|No| D[Check again later]
  C --> E[Wait 5 minutes]
  E --> F[Check moisture]
  F --> B
  D --> G[Sleep 1 hour]
  G --> B

Sequence Diagrams

sequenceDiagram
  participant S as Sensor
  participant G as Gateway
  participant H as Hub
  participant A as App

  S->>G: Send reading (LoRa)
  G->>H: Forward data (WiFi)
  H->>H: Process & store
  H->>A: Push notification
  A->>H: Request history
  H->>A: Return data

Entity Relationship Diagrams

erDiagram
  GARDEN ||--o{ ZONE : contains
  ZONE ||--o{ SENSOR : monitors
  ZONE ||--o{ DEVICE : controls
  SENSOR ||--o{ READING : generates
  DEVICE ||--o{ ACTION : performs

  GARDEN {
      string id
      string name
      string location
  }
  ZONE {
      string id
      string name
      string type
  }
  SENSOR {
      string id
      string type
      int pin
  }

Gantt Charts

gantt
  title Growing Season Timeline
  dateFormat  YYYY-MM-DD
  section Tomatoes
  Start seeds indoors    :2024-03-01, 30d
  Transplant outdoors    :2024-04-15, 7d
  Growing season         :2024-04-22, 90d
  Harvest                :2024-07-20, 45d
  section Peppers
  Start seeds indoors    :2024-02-15, 45d
  Transplant outdoors    :2024-05-01, 7d
  Growing season         :2024-05-08, 75d
  Harvest                :2024-07-22, 60d

YouTube Embeds

Embed YouTube videos directly in your posts. Just provide the video ID and a title.


Tables

Sensor TypeRangeAccuracyUpdate Interval
Soil Moisture0-100%±3%5 min
Temperature-40 to 80°C±0.5°C1 min
Humidity0-100%±2%1 min
Light0-65535 lux±5%30 sec

Images

Images can be added to the src/assets/ folder and imported, or placed in public/ for static hosting.


Callouts and Notes

Note: This is an important note that readers should pay attention to.

Warning: Be careful when modifying sensor calibration values.

Tip: Use consistent naming conventions for your zones and sensors.


Math and Scientific Notation

For scientific content, you can use Unicode symbols:

  • Temperature: 25°C
  • Area: 100 m²
  • Rate: 2.5 L/min
  • Concentration: 150 ppm

Frontmatter Options

Each blog post can use these frontmatter fields:

---
title: "Post Title"                    # Required
description: "Brief description"       # Required
publishedDate: 2024-03-15             # Required
updatedDate: 2024-03-20               # Optional
category: tech                         # grow-journal | tech | guides
heroImage: ./image.jpg                # Optional
heroImageAlt: "Description"           # Optional
tags: [tag1, tag2]                    # Optional
crops: [tomatoes, peppers]            # Optional
difficulty: beginner                   # beginner | intermediate | advanced
season: spring                         # spring | summer | fall | winter | year-round
series:                                # Optional
  name: "Series Name"
  order: 1
draft: false                           # Set true to hide from listings
---

Summary

This post demonstrated:

  1. Basic Markdown - Text formatting, lists, links, blockquotes
  2. Code Blocks - Syntax highlighted code in multiple languages
  3. Mermaid Diagrams - Flowcharts, sequence diagrams, ER diagrams, Gantt charts
  4. YouTube Embeds - Embedded video players
  5. Tables - Organized data presentation
  6. Frontmatter - All available metadata options

Use these features to create rich, informative content for the Eden blog!

#documentation #markdown #mdx