diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000..78ee2fe --- /dev/null +++ b/README.en.md @@ -0,0 +1,108 @@ +open-slide github cover + +
+
+ + Vercel OSS Program + + +# open-slide + +[![GitHub stars](https://img.shields.io/github/stars/1weiho/open-slide?style=for-the-badge)](https://github.com/1weiho/open-slide/stargazers) +[![GitHub forks](https://img.shields.io/github/forks/1weiho/open-slide?style=for-the-badge)](https://github.com/1weiho/open-slide/network/members) +[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge)](https://opensource.org/licenses/MIT) + +**The slide framework built for agents.** Describe your deck in natural language — your coding agent writes the React. open-slide handles the canvas, scaling, navigation, hot reload, and present mode so the agent can focus on content. + +Every slide renders into a fixed **1920 × 1080** canvas. Pages are arbitrary React components, not a constrained DSL. + +```bash +npx @open-slide/cli init my-slide +``` + +## Why open-slide + +Slides are visual code. Agents are great at writing code. open-slide is the missing runtime that turns "make slides about X" into a polished, presentable deck — without you ever leaving the chat. + +## Highlights + +### 🤖 Agent-native authoring + +Works with any coding agent (Claude Code, Codex, Cursor, …). The scaffolder ships with built-in skills: + +- **`/create-slide`** — drafts a deck end-to-end. Asks four scoping questions (topic & aesthetic, page count, text density, motion vs. static), picks an id, plans the structure, and writes the pages. +- **`/slide-authoring`** — the technical reference for the 1920 × 1080 canvas, type scale, palette, and layout rules. The agent reads this before writing. + +From a one-line prompt to a polished deck, no boilerplate. + +### 🎯 In-browser inspector + +Click any element in the dev server and attach a comment — *"make this red"*, *"change to 'Open Slide Rocks'"*, *"shrink the headline"*. Comments are persisted as `@slide-comment` markers in source. Run `/apply-comments` and the agent applies every pending edit, then clears the markers. + +The loop: present → click to comment → `/apply-comments` → repeat. + +### 🖼️ Assets manager + svgl logo search + +Manage images, videos, and fonts per deck through a built-in assets panel. Search and drop in any brand logo via the integrated [svgl](https://svgl.app/) catalogue — no more hunting for SVGs. + +### 🎬 Professional present mode + +Fullscreen playback with keyboard navigation, plus a **presenter mode** with current/next slide preview, speaker notes, and a timer. Built for the stage, not just the browser tab. + +### 📦 Export to static HTML & PDF + +One command exports your deck as a self-contained static HTML site or a print-ready PDF. Share without a server. + +### 📁 Slide manager + +Organise decks into folders with custom emoji and drag-and-drop to reorder. Useful once you've built more than three decks and need to find anything. + +### 🚀 Deploy-friendly + +Outputs a plain static build — one-click deploy to Vercel, Cloudflare Pages, Zeabur, Netlify, or any static host. No server, no runtime, no lock-in. + +## Get started + +```bash +npx @open-slide/cli init my-slide +cd my-slide +pnpm dev +``` + +The scaffolded workspace ships with agent skills preconfigured for Claude Code. From there you drive the deck through your agent — or edit `slides//index.tsx` directly. See [CLAUDE.md](CLAUDE.md) for the hard rules. + +## Repo layout + +This repo is a pnpm + Turbo monorepo. + +| Path | Description | +| --- | --- | +| [packages/core](packages/core) | `@open-slide/core` — runtime (home page, slide viewer, present mode, inspector), Vite plugin, and the `open-slide` dev/build/preview CLI. | +| [packages/cli](packages/cli) | `@open-slide/cli` — `npx @open-slide/cli init` scaffolder. Generates a minimal workspace where Vite/React/tsconfig stay hidden inside core. | +| [apps/demo](apps/demo) | Example workspace that consumes `@open-slide/core` via `workspace:*`. Used for local development of the framework. | + +## Development + +```bash +pnpm install +pnpm dev # runs the demo against the local @open-slide/core +pnpm build # builds all packages +pnpm check # type-checks all packages +pnpm lint # lints via biome +``` + +## Star history + +If open-slide is useful to you, please [star the repo on GitHub](https://github.com/1weiho/open-slide) — it helps other people find the project. + +[![Star History Chart](https://api.star-history.com/svg?repos=1weiho/open-slide&type=Date)](https://star-history.com/#1weiho/open-slide&Date) + +## Support + +If open-slide has been useful to you, consider supporting development: + +[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/D1D11YPUP1) + +## License + +MIT