Compare commits
5
Commits
b07d5b5ac3
...
1e9cebbcb6
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
1e9cebbcb6 | ||
|
|
3ac00a588a | ||
|
|
a2bdfcafc5 | ||
|
|
59c0ef7f3b | ||
|
|
62344278a4 |
@@ -1,19 +0,0 @@
|
|||||||
name: Gitea Actions Demo
|
|
||||||
run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
|
|
||||||
on: [push]
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
Explore-Gitea-Actions:
|
|
||||||
runs-on: aliyun
|
|
||||||
steps:
|
|
||||||
- run: echo "🎉 The job was automatically triggered by a ${{ gitea.event_name }} event."
|
|
||||||
- run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by Gitea!"
|
|
||||||
- run: echo "🔎 The name of your branch is ${{ gitea.ref }} and your repository is ${{ gitea.repository }}."
|
|
||||||
# - name: Check out repository code
|
|
||||||
# uses: actions/checkout@v4
|
|
||||||
# - run: echo "💡 The ${{ gitea.repository }} repository has been cloned to the runner."
|
|
||||||
# - run: echo "🖥️ The workflow is now ready to test your code on the runner."
|
|
||||||
# - name: List files in the repository
|
|
||||||
# run: |
|
|
||||||
# ls ${{ gitea.workspace }}
|
|
||||||
- run: echo "🍏 This job's status is ${{ job.status }}."
|
|
||||||
@@ -0,0 +1,37 @@
|
|||||||
|
name: Deploy Slides
|
||||||
|
run-name: ${{ gitea.actor }} deployed slides
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: [main]
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-and-deploy:
|
||||||
|
runs-on: aliyun
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup Node.js
|
||||||
|
uses: actions/setup-node@v4
|
||||||
|
with:
|
||||||
|
node-version: 22
|
||||||
|
|
||||||
|
- name: Install pnpm
|
||||||
|
run: npm install -g pnpm
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
run: pnpm install --frozen-lockfile
|
||||||
|
|
||||||
|
- name: Build all decks
|
||||||
|
run: pnpm run build
|
||||||
|
|
||||||
|
- name: Deploy to nginx
|
||||||
|
run: |
|
||||||
|
docker rm -f slides-nginx 2>/dev/null || true
|
||||||
|
docker run -d \
|
||||||
|
--name slides-nginx \
|
||||||
|
--restart unless-stopped \
|
||||||
|
-p 8080:80 \
|
||||||
|
-v ${{ github.workspace }}/dist:/usr/share/nginx/html:ro \
|
||||||
|
nginx:alpine
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
.slidev
|
||||||
|
*.local
|
||||||
@@ -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,15 +51,21 @@ 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 export # Export to PDF (requires playwright-chromium)
|
pnpm run build # Build all decks → dist/
|
||||||
|
pnpm run build:<deck> # Build a single deck
|
||||||
|
pnpm run serve # Build all + serve dist/ on port 3030 (landing page with deck selection)
|
||||||
|
pnpm run export # Export to PDF (requires playwright-chromium)
|
||||||
```
|
```
|
||||||
|
|
||||||
|
- **dev mode** — hot-reload single deck for editing, use `pnpm run dev` or `pnpm run dev:<deck>`
|
||||||
|
- **serve mode** — build all decks and serve the landing page at `http://localhost:3030`, choose which deck to present
|
||||||
|
|
||||||
## CI/CD Pipeline
|
## CI/CD Pipeline
|
||||||
|
|
||||||
- **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>/`
|
||||||
|
|||||||
@@ -0,0 +1,110 @@
|
|||||||
|
---
|
||||||
|
theme: default
|
||||||
|
title: Quick Start
|
||||||
|
layout: cover
|
||||||
|
---
|
||||||
|
|
||||||
|
# Quick Start
|
||||||
|
|
||||||
|
Slidev in 3 minutes
|
||||||
|
|
||||||
|
<div class="abs-br m-6">
|
||||||
|
<a href="https://github.com/slidevjs/slidev" target="_blank" class="text-sm opacity-50 !border-none">
|
||||||
|
GitHub
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# What is Slidev?
|
||||||
|
|
||||||
|
A presentation tool for developers
|
||||||
|
|
||||||
|
<v-clicks>
|
||||||
|
|
||||||
|
- **Markdown-based** — focus on content, not formatting
|
||||||
|
- **Developer-friendly** — code highlighting, Monaco editor, terminal
|
||||||
|
- **Beautiful** — themes, animations, transitions
|
||||||
|
- **Extensible** — Vue components, UnoCSS, MDC syntax
|
||||||
|
|
||||||
|
</v-clicks>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Getting Started
|
||||||
|
|
||||||
|
::left::
|
||||||
|
|
||||||
|
### Create
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm create slidev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Develop
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
::right::
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
### Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
my-slides/
|
||||||
|
├── slides.md # Entry
|
||||||
|
├── pages/ # Extra slides
|
||||||
|
├── public/ # Assets
|
||||||
|
└── components/ # Vue components
|
||||||
|
```
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Write Slides
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
theme: default
|
||||||
|
---
|
||||||
|
|
||||||
|
# My Slide
|
||||||
|
|
||||||
|
Content here with **Markdown**.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Next Slide
|
||||||
|
|
||||||
|
Use `---` to separate slides.
|
||||||
|
```
|
||||||
|
|
||||||
|
<v-clicks>
|
||||||
|
|
||||||
|
- First block is headmatter (deck config)
|
||||||
|
- `---` separates slides
|
||||||
|
- `<!-- -->` for presenter notes
|
||||||
|
|
||||||
|
</v-clicks>
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: center
|
||||||
|
---
|
||||||
|
|
||||||
|
# Try It Now
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Open http://localhost:3030
|
||||||
@@ -0,0 +1,130 @@
|
|||||||
|
---
|
||||||
|
theme: default
|
||||||
|
title: Slidev Showcase
|
||||||
|
transition: slide-left
|
||||||
|
mdc: true
|
||||||
|
---
|
||||||
|
|
||||||
|
# Slidev Showcase
|
||||||
|
|
||||||
|
Explore the powerful features of Slidev
|
||||||
|
|
||||||
|
<div class="abs-br m-6 text-sm opacity-50">
|
||||||
|
Press <kbd>Space</kbd> to navigate
|
||||||
|
</div>
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: center
|
||||||
|
---
|
||||||
|
|
||||||
|
# Click Animations
|
||||||
|
|
||||||
|
<v-clicks>
|
||||||
|
|
||||||
|
- Elements appear one by one
|
||||||
|
- Supports nested lists
|
||||||
|
- Great for step-by-step explanations
|
||||||
|
|
||||||
|
</v-clicks>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Two-Column Layout
|
||||||
|
|
||||||
|
::left::
|
||||||
|
|
||||||
|
### Features
|
||||||
|
|
||||||
|
<v-clicks>
|
||||||
|
|
||||||
|
- Markdown-based
|
||||||
|
- Vue components
|
||||||
|
- Code highlighting
|
||||||
|
- Diagrams & Math
|
||||||
|
|
||||||
|
</v-clicks>
|
||||||
|
|
||||||
|
::right::
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// It's just Markdown!
|
||||||
|
interface Slide {
|
||||||
|
content: string
|
||||||
|
layout?: string
|
||||||
|
transition?: string
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Code Highlighting
|
||||||
|
|
||||||
|
```ts {2-3|5-7|all}
|
||||||
|
function fibonacci(n: number): number {
|
||||||
|
if (n <= 1) return n
|
||||||
|
return fibonacci(n - 1) + fibonacci(n - 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Click through to reveal lines
|
||||||
|
const result = fibonacci(10)
|
||||||
|
console.log(`fib(10) = ${result}`)
|
||||||
|
```
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
> Use `|` separator to highlight lines per click
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Mermaid Diagrams
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph LR
|
||||||
|
A[Markdown] --> B[Slidev]
|
||||||
|
B --> C[Vite]
|
||||||
|
B --> D[Vue]
|
||||||
|
C --> E[SPA]
|
||||||
|
D --> E
|
||||||
|
E --> F[Deploy]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
# Math Equations
|
||||||
|
|
||||||
|
Inline math: $E = mc^2$
|
||||||
|
|
||||||
|
Block math:
|
||||||
|
|
||||||
|
$$
|
||||||
|
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
|
||||||
|
$$
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<v-click>
|
||||||
|
|
||||||
|
Powered by **KaTeX** — fast and beautiful math rendering
|
||||||
|
|
||||||
|
</v-click>
|
||||||
|
|
||||||
|
---
|
||||||
|
layout: center
|
||||||
|
class: text-center
|
||||||
|
---
|
||||||
|
|
||||||
|
# That's Slidev
|
||||||
|
|
||||||
|
Write slides in Markdown, present with style.
|
||||||
|
|
||||||
|
<div class="mt-8 text-sm opacity-60">
|
||||||
|
<a href="https://sli.dev" target="_blank">sli.dev</a>
|
||||||
|
</div>
|
||||||
+43
@@ -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>Slide Decks</h1>
|
||||||
|
<div class="deck-list" id="decks">
|
||||||
|
<p class="empty">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
const decks = ['demo', 'showcase'];
|
||||||
|
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">→</span>
|
||||||
|
</a>`
|
||||||
|
).join('');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "slide",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "slidev decks/demo/slides.md",
|
||||||
|
"dev:demo": "slidev decks/demo/slides.md",
|
||||||
|
"dev:showcase": "slidev decks/showcase/slides.md",
|
||||||
|
"build": "bash scripts/build.sh",
|
||||||
|
"build:demo": "slidev build decks/demo/slides.md --base /demo/ --out dist/demo",
|
||||||
|
"build:showcase": "slidev build decks/showcase/slides.md --base /showcase/ --out dist/showcase",
|
||||||
|
"serve": "pnpm run build && pnpm exec serve dist -l 3030",
|
||||||
|
"export": "slidev export"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"devEngines": {
|
||||||
|
"packageManager": {
|
||||||
|
"name": "pnpm",
|
||||||
|
"version": "^11.3.0",
|
||||||
|
"onFail": "download"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"type": "module",
|
||||||
|
"devDependencies": {
|
||||||
|
"@slidev/cli": "^52.15.2",
|
||||||
|
"@slidev/theme-default": "^0.25.0",
|
||||||
|
"serve": "^14.2.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
Generated
+6635
File diff suppressed because it is too large
Load Diff
Executable
+19
@@ -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"
|
||||||
Reference in New Issue
Block a user