# Interactive Tutorial Framework

An interactive tutorial framework built with `React + Vite + MDX`.

[中文文档](./README_CN.md)

## Features

- Tutorial content structure based on `content/<tutorial>/config.json` + `steps/*.mdx`
- Multi-tutorial hall mode with tutorial cards and progress overview
- Persistent progress and theme switching
- Keyboard navigation (`←/→`, `PageUp/PageDown`)
- CLI commands to serve or build tutorials quickly

## Project Structure

```text
.
├── bin/                    # executable entrypoint
├── cli/                    # CLI implementation
├── content/                # tutorial content source
├── src/                    # application source code
├── tests/
│   ├── cli/                # CLI unit tests (node:test)
│   ├── unit/               # frontend unit tests (Jest)
│   └── e2e/                # E2E tests (Playwright)
└── docs/
```

## Installation

```bash
npm install
```

## Usage

```bash
npm run dev
```

### CLI

```bash
# install globally
npm install -g @wangjs-jacky/interactive-tutorial

# serve tutorials
interactive-tutorial serve /absolute/path/to/content
interactive-tutorial serve ./content --tutorial example-tutorial --port 5174 --open

# build static output
interactive-tutorial build /absolute/path/to/content --output /absolute/path/to/output
interactive-tutorial build ./content --output ./dist --tutorial example-tutorial
```

Common options:

- `serve`: `--tutorial <name>`, `--port <number>`, `--host <host>`, `--open`
- `build`: `--tutorial <name>`, `--output <outputDir>`

## Testing

```bash
npm run test
npm run test:cli
npm run test:unit
```

## License

MIT