Skip to content

index.md

Latest commit

 

History

History
212 lines (157 loc) · 6.78 KB

index.md

File metadata and controls

212 lines (157 loc) · 6.78 KB
title Documentation
description Complete documentation for @goobits/docs-engine

docs-engine Documentation

Battery-included documentation system for SvelteKit with markdown rendering, screenshots, search, and symbol references.

Documentation Structure

docs/
├── index.md
├── getting-started.md
├── guides/
│   ├── architecture.md
│   ├── migration.md
│   ├── examples.md
│   ├── diagrams.md
│   └── plugin-order.md
├── plugins/
│   ├── callouts.md
│   ├── code-highlighting.md
│   ├── code-tabs.md
│   ├── collapse.md
│   ├── filetree.md
│   ├── image-optimization.md
│   ├── katex.md
│   ├── links.md
│   ├── mermaid.md
│   ├── screenshots.md
│   ├── symbol-references.md
│   └── toc.md
├── components/
│   ├── docs-layout.md
│   └── theme-toggle.md
└── utilities/
    ├── frontmatter.md
    └── navigation.md

Quick Start

New to docs-engine? Start here:

Architecture Overview

The docs-engine processes markdown through a series of transformations:

flowchart LR
    subgraph Input["📄 Input Layer"]
        MD[Markdown/MDX]
        TS[TypeScript]
    end

    subgraph Processing["⚙️ Processing Layer"]
        Parse[Remark Parse]
        RP[Remark Plugins]
        Rehype[Rehype Convert]
        HP[Rehype Plugins]

        Parse --> RP
        RP --> Rehype
        Rehype --> HP
    end

    subgraph Output["🎨 Output Layer"]
        HTML[Hydrated HTML]
        IC[Interactive Components]
    end

    MD --> Parse
    TS --> Parse
    HP --> HTML
    HP --> IC

    style Input fill:#313244,stroke:#89b4fa
    style Processing fill:#313244,stroke:#f9e2af
    style Output fill:#313244,stroke:#a6e3a1
Loading

Processing Pipeline:

  1. Remark Plugins (Markdown → AST transformations)

    • Frontmatter, Math Parser, Callouts, Collapse, Code Tabs

  2. Rehype Plugins (HTML transformations)

    • Code Highlighting, KaTeX, Links, References

  3. Additional Services

    • Image Optimization, Screenshot Generation, Symbol Resolution

Core Guides

Note: All guides use our plugins! You'll see callouts, diagrams, code highlighting, and more in action.

Learn the fundamentals:

  • Architecture - System design and philosophy
  • Plugin Order - Understanding plugin execution order (uses mermaid diagrams!)
  • Examples - Code examples and recipes
  • Diagrams - Visual architecture diagrams (pure mermaid showcase!)

Plugins

Markdown Enhancement

Content Processing

Navigation

Media

Advanced

Reference

Learning Paths

Tip: Choose the path that matches your experience level. Each path builds on the previous one.

Beginner Path

  1. Getting Started
  2. Links Plugin
  3. Table of Contents
  4. Frontmatter Parser

Intermediate Path

  1. Plugin Order
  2. Navigation Builder
  3. Image Optimization
  4. Screenshots

Advanced Path

  1. Architecture
  2. Symbol References
  3. Examples

Features Showcased in This Documentation

Tip: This documentation practices what it preaches! Here's what you're seeing in action:

Visual & Interactive

  • Callouts - All 9 types used with GitHub/Obsidian [!NOTE] syntax throughout docs
  • Collapse Sections - Collapsible content in Collapse Plugin (dogfooding!)
  • Mermaid Diagrams - Flowcharts in Plugin Order Guide
  • File Trees - Directory structures like the one at the top of this page
  • Table of Contents - Auto-generated ## TOC sections in guides

Code Enhancement

  • Code Tabs - JS/TS examples in Quick Start sections (now on callouts, collapse, katex!)
  • Line Highlighting - Important lines highlighted in code blocks
  • Diff Syntax - Red/green additions and deletions
  • Syntax Highlighting - All code blocks use Shiki

Content Processing

  • Frontmatter - Every doc has YAML metadata at the top
  • Links - All relative markdown links work correctly
  • Navigation - Organized structure with sections

Mathematical Content

  • Math Rendering - LaTeX equations with KaTeX in KaTeX Plugin (now dogfooding!)

Advanced Features

  • Symbol References - {@Symbol} syntax with type links (e.g., {@KaTeXOptions}, {@CodeHighlightOptions}) (now dogfooding!)
  • Screenshot Examples - 10 CLI screenshot examples in Screenshots Plugin (now dogfooding!)
  • Symbol Map Generation - 163 exported symbols from TypeScript source files (generated!)

Performance Highlights:

  • 🚀 4x faster image processing
  • ⚡ 11x faster navigation sorting
  • 💾 90% less memory usage
  • ✅ 178/178 tests passing

Need Help?