Compare commits
5
Commits
| 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
|
||||
|
||||
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
|
||||
|
||||
@@ -8,11 +8,28 @@ All slide-related operations (create, edit, format, build, export) MUST first in
|
||||
|
||||
## Project Structure
|
||||
|
||||
- `slides.md` — main slide entry point
|
||||
- `pages/` — additional slide files (imported via `src: ./pages/xxx.md`)
|
||||
- `public/` — static assets (images, fonts)
|
||||
- `.gitea/workflows/deploy.yaml` — CI/CD pipeline
|
||||
- `dist/` — build output (gitignored)
|
||||
```
|
||||
index.html # Landing page (lists all decks)
|
||||
decks/
|
||||
<deck-name>/
|
||||
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
|
||||
|
||||
@@ -34,15 +51,21 @@ After completing slide edits, auto-commit with a descriptive message.
|
||||
## Key Commands
|
||||
|
||||
```bash
|
||||
pnpm run dev # Local dev server (http://localhost:3030)
|
||||
pnpm run build # Build static SPA → dist/
|
||||
pnpm run export # Export to PDF (requires playwright-chromium)
|
||||
pnpm run dev # Dev server for demo deck (http://localhost:3030)
|
||||
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 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
|
||||
|
||||
- **Trigger:** push to `main` branch
|
||||
- **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)
|
||||
- **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