Skip to content

feat: Learning Mode / Reference Mode toggle for docs #25

@SchoolyB

Description

@SchoolyB

Summary

Add a toggle to the documentation site that switches between Learning Mode (detailed explanations for beginners) and Reference Mode (concise reference docs for experienced developers).

This aligns with EZ's mission as a beginner-friendly language while keeping docs useful for all skill levels.

Motivation

The current docs are good reference material but lack the "why" explanations that help beginners understand programming concepts. Rather than cluttering docs with collapsible sections everywhere, a global toggle provides a cleaner UX:

  • User sets preference once, applies across all pages
  • Preference persists via localStorage
  • Clean separation between reference content and educational deep dives

Proposed UX

┌─────────────────────────────────────────────────┐
│  EZ Docs                 [📖 Learning Mode ○──] │
├─────────────────────────────────────────────────┤
│                                                 │
│  ## i64                                         │
│  64-bit signed integer (-9.2 to 9.2 quintillion)│
│                                                 │
│  ┌───────────────────────────────────────────┐  │
│  │ 🔬 WHY THESE LIMITS?                      │  │  ← Only visible in
│  │                                           │  │    Learning Mode
│  │ Computers store numbers in binary...      │  │
│  │ A 64-bit signed integer uses 1 bit for    │  │
│  │ the sign and 63 bits for the value...     │  │
│  └───────────────────────────────────────────┘  │
│                                                 │
└─────────────────────────────────────────────────┘

Technical Implementation

  1. Toggle component in docs header/sidebar
  2. State management via localStorage (persists across sessions)
  3. CSS approach:
    .deep-dive { display: none; }
    .learning-mode .deep-dive { display: block; }
  4. Astro component for content authoring:
    <DeepDive>
    Beginner-friendly explanation here...
    </DeepDive>

Content Plan (Priority Order)

Tier 1: High-Value

File Topics
types.md Sized integers (binary, sign bit, 2^n-1), signed vs unsigned, float precision (IEEE 754), char vs string (ASCII/Unicode)
variables.md temp vs const (mutability), copy vs ref (stack/heap simplified), scope, default values
control-flow.md range() exclusive end (off-by-one), boolean logic (truth tables, short-circuit)

Tier 2: Medium-Value

File Topics
functions.md Call stack, recursion (base cases, stack overflow), mutable params
structs.md Memory layout basics
enums.md Underlying integers, why enums > magic numbers

Tier 3: Stdlib

  • bytes.md - Binary data, endianness
  • strings.md - UTF-8 encoding
  • arrays.md - Dynamic arrays, capacity vs length
  • maps.md - Hash tables conceptually

Tasks

  • Create toggle component with localStorage persistence
  • Add <DeepDive> Astro component
  • Style deep dive content blocks
  • Write Tier 1 deep dive content
  • Write Tier 2 deep dive content
  • Write Tier 3 deep dive content (optional/stretch)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions