# Slides Creator

> Branded presentation tooling for the PDEGO team — write slides in Markdown, ship them as pixel-perfect PDFs.

Built on [Slidev](https://sli.dev/) · Powered by [pnpm workspaces](https://pnpm.io/workspaces)

---

## What's inside

```
slides-creator/
├── decks/
│   ├── example-dark/       ← Versioned example (dark theme)
│   ├── example-light/      ← Versioned example (light theme)
│   └── .gitkeep
├── exports/                ← Export output: exports/{deck}/{timestamp}/
├── packages/
│   ├── theme/              ← PDEGO Slidev theme (tokens, layouts, components)
│   └── cli/                ← Interactive CLI (new · dev · export)
└── template/               ← Starter template used by `new`
```

---

## Prerequisites

- [Node.js](https://nodejs.org/) LTS
- [pnpm](https://pnpm.io/) v10+

---

## Setup

```sh
pnpm install

# First time only — download the Chromium binary used for PDF/PNG export
./packages/cli/node_modules/.bin/playwright install chromium
```

---

## Usage

Launch the interactive CLI from the project root:

```sh
pnpm start
```

```
? PDEGO Slides — what do you want to do?
❯ Create a new deck
    Scaffold a new presentation from the template
  Preview
    Live-preview a deck in your browser with hot reload
  Export a deck
    Export a deck to PDF or PNG
```

You can also run commands directly:

| Command              | What it does                        |
| -------------------- | ----------------------------------- |
| `pnpm new`           | Scaffold a new deck                 |
| `pnpm dev`           | Live-preview a deck in your browser |
| `pnpm export`        | Export to PDF or PNG                |
| `pnpm delete <name>` | Permanently delete a deck           |

### Create a new deck

Prompts for title, author, colour scheme (`dark` / `light`), code highlight theme (default: One Dark Pro), and an optional section label. Creates `decks/{slug}/slides.md` and `decks/{slug}/setup/shiki.ts` pre-filled with the PDEGO template.

### Dev server

Picks a deck (or prompts if multiple exist) and opens a live-reload preview at `localhost:3030`. Changes to the Markdown file are reflected instantly.

### Export

Prompts for deck and format. Output lands at:

```
exports/{deck-name}/{yyyy-mm-dd-hh-mm-ss}/slides.pdf
```

### Delete a deck

```sh
pnpm delete <deck-name>
```

Prompts for confirmation before permanently removing `decks/{deck-name}/`. Cannot be undone.

---

## Writing slides

Slides are separated by `---`. Each slide can optionally declare a `layout` in its frontmatter.

```markdown
---
theme: ../../packages/theme
title: My Deck
author: Erwann
colorSchema: dark
section: Introduction
layout: cover
---

# My Deck

Erwann

---
layout: section
---

# Chapter One

---

# A content slide

- Bullet one
- Bullet two

---
layout: cover
---

# Thank You
```

---

## Theme

### Layouts

| Layout    | Description                                                                      |
| --------- | -------------------------------------------------------------------------------- |
| `cover`   | Title / closing slide — gradient background, large heading, PDEGO logo watermark |
| `default` | Standard content slide — header bar with logo + section label, teal bottom rule  |
| `section` | Section divider — accent background, bold centred heading                        |

### Frontmatter options

| Field         | Values                            | Description                               |
| ------------- | --------------------------------- | ----------------------------------------- |
| `colorSchema` | `dark` \| `light`                 | Switches the full colour palette          |
| `section`     | any string                        | Label shown top-right on `default` slides |
| `layout`      | `cover` \| `default` \| `section` | Slide template (`default` if omitted)     |

### Code highlight themes

Choose a syntax theme when creating a deck. The selection generates a `setup/shiki.ts` file in the deck folder — edit it directly to swap themes later.

| Theme            | Key                | Style |
| ---------------- | ------------------ | ----- |
| One Dark Pro     | `one-dark-pro`     | Dark  |
| Tokyo Night      | `tokyo-night`      | Dark  |
| Dracula          | `dracula`          | Dark  |
| Catppuccin Mocha | `catppuccin-mocha` | Dark  |
| Nord             | `nord`             | Dark  |
| GitHub Dark      | `github-dark`      | Dark  |
| Poimandres       | `poimandres`       | Dark  |
| Monokai          | `monokai`          | Dark  |
| GitHub Light     | `github-light`     | Light |
| Min Light        | `min-light`        | Light |

### Design tokens

All colours and sizes live in `packages/theme/styles/vars.css`. Edit there to update the brand across every slide.

| Token            | Dark      | Light     |
| ---------------- | --------- | --------- |
| `--color-bg`     | `#0a0c0d` | `#f1f2f4` |
| `--color-accent` | `#4c9eb2` | `#366970` |
| `--color-teal`   | `#14979e` | `#14979e` |
| `--logo-circle`  | `#ffffff` | `#d5d9dd` |
| `--code-bg`      | `#282c34` | `#ffffff` |