curtains/README.md

Build beautiful HTML presentations from Markdown with custom styling, containers, and keyboard navigation

<p align="center">
  <img src="./docs/mascot.svg" height="140px" />
  <img src="./docs/title.svg" height="140px" />
  <img src="./docs/claude.svg" height="140px" >
</p>

**Build beautiful presentations from Markdown**

Curtains converts extended Markdown files (`.curtain`) into self-contained HTML presentations with support for custom styling, containers, and keyboard navigation.

<p align="center">
  <img src="./docs/example.svg" />
</p>

## Quick Start

Use `npx`:

```bash
npx curtains presentation.curtain -o slides.html
```

Or install globally:

```bash
npm install -g curtains
```

## Example

Create a file `presentation.curtain`:

```markdown
<style>
body { font-family: sans-serif; }
.centered { text-align: center; }
</style>

===

# Welcome to My Presentation

This is the **first slide** with some content.

===

## Second Slide

- Point one
- Point two
- Point three

===

## Thank You!
```

Build your presentation:

```bash
npx curtains presentation.curtain -o slides.html
```

Open `slides.html` in your browser and use arrow keys to navigate!

## Features

- 📝 **Extended Markdown** - Full CommonMark support plus custom containers
- 🎨 **Custom Styling** - Add CSS globally or per-slide
- 📦 **Self-Contained** - Single HTML file output with no dependencies
- ⌨️ **Keyboard Navigation** - Arrow keys, spacebar, and fullscreen support
- 🎭 **Themes** - Built-in light and dark themes
- 📱 **Touch Support** - Click/tap to advance slides

## Usage

### Basic Command

```bash
npx curtains presentation.curtain -o slides.html
```

### Options

- `-o, --output` - Output HTML file (default: input filename with .html)
- `--theme` - Theme selection: `light` or `dark` (default: light)
- `-h, --help` - Show help
- `-v, --version` - Show version

## File Format

Curtains files use `.curtain` extension with slides separated by `===`:

```markdown
<style>
/* Global styles for all slides */
</style>

===

# Slide 1
Content here

<style>
/* Styles just for this slide */
</style>

===

# Slide 2
More content
```

### Styling

**Global styles** - Place `<style>` tags before the first `===` to apply styles to all slides:

```markdown
<style>
body { font-family: 'Inter', sans-serif; }
h1 { color: #333; }
</style>

===
# This heading uses the global styles
```

**Slide-scoped styles** - Place `<style>` tags within a slide (after `===`) to style only that slide:

```markdown
===

# Special Slide

<style>
/* Only affects this slide */
.slide-container { background: linear-gradient(to right, #667eea, #764ba2); }
h1 { color: white; }
</style>
```

### Containers

Use containers for advanced layouts:

```markdown
===

<container class="columns">
  <container class="left">
  ### Left Column
  - Item 1
  - Item 2
  </container>

  <container class="right">
  ### Right Column
  ![image](./image.png)
  </container>
</container>

<style>
.columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
</style>
```

### Images

Both Markdown and HTML syntax are supported:

```markdown
![Alt text](./image.png)

<img src="./logo.svg" class="logo" alt="Logo">
```

## Navigation

- **→ / Space** - Next slide
- **←** - Previous slide
- **F** - Toggle fullscreen
- **Click/Tap** - Next slide

## Examples

Check out the [examples](./examples) directory for more complex presentations including:
- Multi-column layouts
- Image galleries
- Code presentations
- Custom themes

## License

ISC © Chance Graff