wonder/slide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: restructure project for multi-deck support

Browse Source 
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
wonder
2026-05-27 11:41:04 +08:00
parent 62344278a4
commit 59c0ef7f3b
5 changed files with 96 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CLAUDE.md
+29 -10
View File
@@ -1,6 +1,6 @@
# Slide Project # Slide Project
Slidev presentation project. Remote Gitea repo with Docker-based CI/CD auto-deployment. Multi-deck Slidev presentation project. Remote Gitea repo with Docker-based CI/CD auto-deployment.
## Slidev Skill ## Slidev Skill
@@ -8,11 +8,28 @@ All slide-related operations (create, edit, format, build, export) MUST first in
## Project Structure ## Project Structure
- `slides.md` — main slide entry point ```
- `pages/` — additional slide files (imported via `src: ./pages/xxx.md`) index.html # Landing page (lists all decks)
- `public/` — static assets (images, fonts) decks/
- `.gitea/workflows/deploy.yaml` — CI/CD pipeline <deck-name>/
- `dist/` — build output (gitignored) slides.md # Slide entry point
pages/ # Additional slide files (imported via src: ./pages/xxx.md)
public/ # Static assets (images, fonts)
scripts/
build.sh # Build all decks
.gitea/workflows/ # CI/CD pipeline
dist/ # Build output (gitignored)
```
Each deck is an independent Slidev presentation under `decks/`. The build outputs to `dist/<deck-name>/` with the landing page at `dist/index.html`.
## Adding a New Deck
1. Create directory: `decks/<name>/`
2. Add `decks/<name>/slides.md` with frontmatter
3. Optionally add `pages/` and `public/` subdirectories
4. Register in `index.html` decks array
5. Add `dev:<name>` and `build:<name>` scripts to `package.json`
## Git Commit Convention ## Git Commit Convention
@@ -34,8 +51,10 @@ After completing slide edits, auto-commit with a descriptive message.
## Key Commands ## Key Commands
```bash ```bash
pnpm run dev # Local dev server (http://localhost:3030) pnpm run dev # Dev server for demo deck (http://localhost:3030)
pnpm run build # Build static SPA → dist/ pnpm run dev:<deck> # Dev server for a specific deck
pnpm run build # Build all decks → dist/
pnpm run build:<deck> # Build a single deck
pnpm run export # Export to PDF (requires playwright-chromium) pnpm run export # Export to PDF (requires playwright-chromium)
``` ```
@@ -43,6 +62,6 @@ pnpm run export # Export to PDF (requires playwright-chromium)
- **Trigger:** push to `main` branch - **Trigger:** push to `main` branch
- **Runner:** self-hosted Gitea Act Runner (label: `aliyun`), Docker mode with `/var/run/docker.sock` mounted - **Runner:** self-hosted Gitea Act Runner (label: `aliyun`), Docker mode with `/var/run/docker.sock` mounted
- **Steps:** checkout → install deps → `slidev build` → deploy dist/ to nginx container - **Steps:** checkout → install deps → `pnpm run build` → deploy dist/ to nginx container
- **Deploy:** CI job spawns a sibling nginx container on the host via the mounted Docker socket (Docker out of Docker, not DinD) - **Deploy:** CI job spawns a sibling nginx container on the host via the mounted Docker socket (Docker out of Docker, not DinD)
- **Serve:** nginx container exposes port 8080 - **Serve:** nginx container exposes port 8080, decks accessible at `/<deck-name>/`
slides.md → decks/demo/slides.md
View File
index.html
+43
View File
@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Slides</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.container { max-width: 640px; width: 100%; padding: 2rem; }
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 2rem; color: #f8fafc; }
.deck-list { display: flex; flex-direction: column; gap: 0.75rem; }
a.deck { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: #1e293b; border: 1px solid #334155; border-radius: 0.75rem; text-decoration: none; color: #e2e8f0; transition: all 0.2s; }
a.deck:hover { background: #334155; border-color: #475569; transform: translateY(-1px); }
a.deck .name { font-size: 1.125rem; font-weight: 600; }
a.deck .arrow { font-size: 1.25rem; color: #64748b; }
a.deck:hover .arrow { color: #94a3b8; }
.empty { color: #64748b; font-style: italic; padding: 1rem 0; }
</style>
</head>
<body>
<div class="container">
<h1>Slides</h1>
<div class="deck-list" id="decks">
<p class="empty">Loading...</p>
</div>
</div>
<script>
const decks = ['demo'];
const container = document.getElementById('decks');
if (decks.length === 0) {
container.innerHTML = '<p class="empty">No slide decks yet.</p>';
} else {
container.innerHTML = decks.map(name =>
`<a class="deck" href="/${name}/">
<span class="name">${name}</span>
<span class="arrow">&rarr;</span>
</a>`
).join('');
}
</script>
</body>
</html>
package.json
+4 -2
View File
@@ -4,8 +4,10 @@
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"dev": "slidev", "dev": "slidev decks/demo/slides.md",
"build": "slidev build", "dev:demo": "slidev decks/demo/slides.md",
"build": "bash scripts/build.sh",
"build:demo": "slidev build decks/demo/slides.md --base /demo/ --out dist/demo",
"export": "slidev export" "export": "slidev export"
}, },
"keywords": [], "keywords": [],
scripts/build.sh
Executable
+19
View File
@@ -0,0 +1,19 @@
#!/usr/bin/env bash
set -euo pipefail
ROOT="$(cd "$(dirname "$0")/.." && pwd)"
DIST="$ROOT/dist"
rm -rf "$DIST"
mkdir -p "$DIST"
cp "$ROOT/index.html" "$DIST/index.html"
for dir in "$ROOT"/decks/*/; do
[ -d "$dir" ] || continue
name="$(basename "$dir")"
echo "Building deck: $name"
pnpm exec slidev build "$dir/slides.md" --base "/$name/" --out "$DIST/$name"
done
echo "Done. Output: $DIST"
ls -la "$DIST"