When given a book PDF or text:

1. IDENTIFY the book's structure:
   - Title and author
   - Number of chapters/parts
   - Chapter titles
   - Section/essay breakdown within chapters

2. CREATE a structure map:

3. IDENTIFY key concepts:
- Central thesis/main idea
- Key terms introduced
- Recurring themes
- Relationships between concepts

For each chapter, identify:

1. CORE INSIGHT: The main idea in 1-2 sentences
2. KEY CONCEPTS: Terms or ideas introduced
3. RELATIONSHIPS: How concepts connect to:
   - Previous chapters
   - Other concepts in same chapter
   - Overall book thesis
4. VISUAL POTENTIAL: What diagrams would help:
   - Flowcharts for processes
   - Mindmaps for concept overviews
   - Hierarchies for structures
   - Comparisons for contrasts
   - Timelines for sequences

# Create project directory
mkdir [book-slug]-visual
cd [book-slug]-visual

# Initialize Astro with Starlight
npm create astro@latest . -- --template starlight --yes --no-git

# Install dependencies
npm install

# Add Mermaid support
npm install astro-mermaid mermaid

// @ts-check
import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';
import astroMermaid from 'astro-mermaid';

export default defineConfig({
  integrations: [
    // Mermaid MUST come before Starlight
    astroMermaid({
      theme: 'default',
      autoTheme: true,
    }),
    starlight({
      title: '[Book Title] Visual',
      description: 'A visual learning companion for [Book Title]',
      sidebar: [
        // Will be populated based on book structure
      ],
      customCss: ['./src/styles/custom.css'],
    }),
  ],
});

src/content/docs/
├── index.mdx                 # Landing page
├── chapters/                 # Book chapters
│   ├── 01-[chapter-slug]/
│   │   ├── overview.md       # Chapter overview
│   │   └── [section].md      # Individual sections
│   └── 02-[chapter-slug]/
├── concepts/                 # Cross-chapter concepts
│   └── [concept].md
└── paths/                    # Guided learning paths
    └── [path-name].md

---
title: [Book Title] Visual
description: A visual learning companion for [Book Title] by [Author]
template: splash
hero:
  tagline: Visual diagrams and concept maps for [Book Title]
  actions:
    - text: Start with Chapter 1
      link: /chapters/01-[slug]/overview/
      icon: right-arrow
      variant: primary
    - text: Explore Concepts
      link: /concepts/[main-concept]/
      variant: minimal
---

import { Card, CardGrid } from '@astrojs/starlight/components';

## How to Use This Companion

<CardGrid stagger>
  <Card title="By Chapter" icon="open-book">
    Follow the book's structure with visual explanations.
  </Card>
  <Card title="By Concept" icon="puzzle">
    Explore key concepts across chapters.
  </Card>
  <Card title="Guided Paths" icon="rocket">
    Follow curated learning sequences.
  </Card>
</CardGrid>

## The Big Idea

[2-3 sentences summarizing the book's main thesis]

```mermaid
flowchart LR
    [Simple diagram showing the book's central concept]

**Step 3.2: Chapter Overview Template**

```markdown
---
title: "Chapter [N]: [Title]"
description: "[Brief description]"
---

# Chapter [N]: [Title]

[1-2 paragraph introduction to chapter themes]

## Chapter Overview

```mermaid
flowchart TB
    subgraph Chapter["Chapter [N]: [Title]"]
        Q["[Central question]"]

        Q --> A["[Theme 1]"]
        Q --> B["[Theme 2]"]
        Q --> C["[Theme 3]"]
    end

**Step 3.3: Section/Essay Template**

```markdown
---
title: "[N.M] [Section Title]"
description: "[Brief description for SEO]"
---

# [N.M] [Section Title]

> "[Quote from the book if available]"

## The Core Insight

[2-3 paragraphs explaining the main idea in accessible language]

## Visual: [Diagram Title]

[Brief explanation of what the diagram shows]

```mermaid
[Appropriate diagram type]

**Step 3.4: Concept Page Template**

```markdown
---
title: "[Concept Name]"
description: "Cross-chapter exploration of [concept]"
---

# [Concept Name]

[Definition and importance in 2-3 sentences]

## Concept Overview

```mermaid
mindmap
  root(([Concept]))
    [Branch 1]
      [Detail]
    [Branch 2]
      [Detail]
    [Branch 3]
      [Detail]

**Step 3.5: Learning Path Template**

```markdown
---
title: "Learning Path: [Name]"
description: "A guided journey through [topic]"
---

# Learning Path: [Name]

[Description of what this path covers and who it's for]

## Path Overview

```mermaid
flowchart LR
    S1["Step 1"] --> S2["Step 2"] --> S3["Step 3"] --> S4["Step 4"]

[Relevant diagram]

### Phase 4: Diagram Guidelines

**Step 4.1: Color Palette**

Use consistent colors throughout:

**Step 4.2: Diagram Type Selection**

| Content Type | Mermaid Diagram | When to Use |
|--------------|-----------------|-------------|
| Process/Flow | `flowchart` | Steps, procedures, cause-effect |
| Concept overview | `mindmap` | Central idea with branches |
| Hierarchy | `flowchart TB` | Organization, levels |
| Timeline | `flowchart LR` | Sequences, evolution |
| Comparison | `flowchart` with subgraphs | Side-by-side concepts |
| State changes | `stateDiagram` | Before/after, transitions |
| Relationships | `graph` | Connections, networks |

**Step 4.3: Progressive Reveal Pattern**

For complex concepts, create multiple diagrams:

1. **Simple** — Single element
2. **Basic** — 2-3 elements connected
3. **Intermediate** — Small structured group
4. **Full** — Complete diagram

### Phase 5: Navigation Configuration

**Step 5.1: Sidebar Structure**

Organize by book structure with collapsible sections:

```javascript
sidebar: [
  {
    label: 'Start Here',
    items: [{ label: 'Welcome', slug: 'index' }],
  },
  {
    label: 'Part I: [Name]',
    collapsed: true,
    items: [
      {
        label: '[Chapter N]: [Title]',
        collapsed: true,
        items: [
          { label: 'Overview', slug: 'chapters/[slug]/overview' },
          { label: '[N.1] [Section]', slug: 'chapters/[slug]/[section]' },
        ],
      },
    ],
  },
  {
    label: 'Concepts',
    collapsed: true,
    items: [
      { label: '[Concept]', slug: 'concepts/[slug]' },
    ],
  },
  {
    label: 'Learning Paths',
    collapsed: true,
    items: [
      { label: '[Path Name]', slug: 'paths/[slug]' },
    ],
  },
],

# Development
npm run dev

# Production build
npm run build

# Preview production
npm run preview

# Vercel (recommended)
npx vercel

# Or build and deploy static files
npm run build
# Upload dist/ to any static host