Zensical Tips¶

Admonitions¶

Call outs examples, can use Octocons and Fontawesome icons.

Inline Admonitions¶

Add inline and either start or end after the admonition kind.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

The Lorem ipsum text wraps around the inline admonition, set to the end of the line.

!!! INFO inline end "Sidebar Info"
    This admonition floats to the right side of the page, allowing text to flow around it.

!!! INFO inline start "Sidebar Info"
    This admonition floats to the left side of the page, allowing text to flow around it.

Buttons¶

Use styled buttons for calls to action:

• { .md-button .md-button--primary } defines a primary button
• :material-rocket-launch: emoji name to include an icon as part of the button name

Choose A Bike GitHub Repository Practicalli Website

[Choose A Bike :material-rocket-launch:](choosing-a-bike.md){ .md-button .md-button--primary }
[GitHub Repository :fontawesome-brands-github:](https://github.com/practicalli/cycling){ .md-button }
[Practicalli Website](https://practical.li/){ .md-button }

Icons¶

Icon sets are bundled with Zensical. Practicalli web sites mostly use Lucide for general icons and Octocons for GitHub specific icons.

Lucide Octicons

Material Design FontAwesome Simple Icons

Tool tips¶

The API endpoint processes requests through multiple stages.

TODO: check if plugin required for tooltips

Hyperlinks¶

Link with Preview. by adding { data-preview } style after the URL

[Link with Preview](bike-fit.md){ data-preview }

Zensical supports hoverable tooltips using the title attribute.

[hoverable tooltips](https://zensical.org "Click to learn more about Zensical!")

Reference-style Links¶

Use a reference style link where there are multiple links on a page for one URL.

Our data API and metadata system.

Images¶

Place a ! character in front of a hyperlink form, with the URL being the address of the image and the text being the 'Alternative Text' (if they image does not download )

Image with Caption¶

Image Grid¶

Keyboard Keys¶

Use Ctrl+Shift+R to hard refresh your browser and clear the favicon cache.

Common ETL commands:

• Run a step: Ctrl+Enter
• Stop execution: Ctrl+C
• Search documentation: Ctrl+K or Cmd+K

Progress Bars¶

Track your ETL learning progress:

75% Complete

Dataset processing status:

Snapshot ✓

Meadow ✓

Garden

Grapher

Footnotes¶

TODO: check if footnotes needs a plugin or uses different syntax

The ETL pipeline¹ processes data from multiple international organizations² and makes it available through our API³.

Mermaid Diagrams¶

Flow Chart¶

graph LR
    A[Input] -->|Raw Data| B[Processing]
    B -->|Cleaned| C[Transform]
    C -->|Validated| D[Storage]
    D -->|Published| E[Output]

    style A fill:#f9f,stroke:#333
    style E fill:#9f9,stroke:#333

Sequence Diagram¶

sequenceDiagram
    participant User
    participant App
    participant Database
    participant API

    User->>App: Request data update
    App->>Database: Check current version
    Database-->>App: Version info
    App->>App: Process new data
    App->>Database: Store updated data
    Database-->>App: Success
    App->>API: Refresh cache
    API-->>User: Updated data available

System Architecture¶

graph TB
    subgraph "Data Sources"
        S1[API Source]
        S2[File Upload]
        S3[Database]
    end

    subgraph "Processing Pipeline"
        Ingest[Data Ingestion]
        Valid[Validation]
        Trans[Transformation]
        Store[Storage]
    end

    subgraph "Output Layer"
        DB[(Database)]
        API[REST API]
        UI[Web Interface]
    end

    S1 --> Ingest
    S2 --> Ingest
    S3 --> Ingest
    Ingest --> Valid
    Valid --> Trans
    Trans --> Store
    Store --> DB
    DB --> API
    DB --> UI