Skip to content

Commit bb2b3b4

Browse files
weiji14weiji14
authored
📸 Talk slides using DevSeed Slidev theme (#5)
* 📸 Upload slides with DevSeed slidev theme Main presentation content is in slides/slides.md, the other stuff is from Development Seed's Slidev template, with slight modifications. * 👷 Setup CI to deploy slides to GitHub Pages Set up GitHub Actions workflow to install pnpm/node, run the build, upload artifacts, and then does deploy in separate job.
1 parent 14d9b27 commit bb2b3b4

37 files changed

+7481
-0
lines changed

‎.github/workflows/deploy.yaml‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Deploy presentation slides to GitHub Pages
2+
name: Deploy slides
3+
4+
on:
5+
push:
6+
branches: [main]
7+
workflow_dispatch:
8+
9+
concurrency:
10+
group: pages
11+
cancel-in-progress: false
12+
13+
jobs:
14+
build:
15+
runs-on: ubuntu-24.04
16+
permissions:
17+
contents: read
18+
defaults:
19+
run:
20+
working-directory: ./slides
21+
22+
steps:
23+
- name: Checkout repository
24+
uses: actions/checkout@71cf2267d89c5cb81562390fa70a37fa40b1305e # v6-beta
25+
with:
26+
persist-credentials: false
27+
28+
- name: Install pnpm
29+
uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
30+
with:
31+
package_json_file: slides/package.json
32+
33+
- name: Install node
34+
uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
35+
with:
36+
node-version: "lts/*"
37+
38+
- name: Install dependencies
39+
run: pnpm install
40+
41+
- name: Build
42+
run: pnpm run build --base /${REPO_NAME}/
43+
env:
44+
REPO_NAME: ${{github.event.repository.name}}
45+
46+
- name: Setup Pages
47+
uses: actions/configure-pages@983d7736d9b0ae728b81ab479565c72886d7745b # v5.0.0
48+
49+
- name: Upload static files as artifact
50+
uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4.0.0
51+
with:
52+
path: slides/dist
53+
54+
deploy:
55+
name: Deploy
56+
needs: build
57+
environment:
58+
name: github-pages
59+
url: ${{ steps.deployment.outputs.page_url }}
60+
permissions:
61+
pages: write
62+
id-token: write
63+
runs-on: ubuntu-24.04
64+
65+
steps:
66+
- name: Deploy to GitHub Pages
67+
id: deployment
68+
uses: actions/deploy-pages@d6db90164ac5ed86f2b6aed7e0febac5b3c0c03e # v4.0.5

‎slides/.gitignore‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
*.local
5+
.vite-inspect
6+
.remote-assets
7+
components.d.ts
8+
node_modules

‎slides/.npmrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# for pnpm
2+
shamefully-hoist=true
3+
auto-install-peers=true

‎slides/README.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
2+
3+
To start the slide show:
4+
5+
- `pnpm install`
6+
- `pnpm dev`
7+
- visit <http://localhost:3030>
8+
9+
Edit the [slides.md](./slides.md) to see the changes.
10+
11+
Learn more about Slidev at the [documentation](https://sli.dev/).
12+
13+
## DevSeed Theme
14+
15+
### Theme Structure
16+
17+
```
18+
theme/
19+
├── components/
20+
│ └── Logo.vue # Reusable logo component
21+
├── layouts/
22+
│ ├── cover.vue # Title slide with gradient background
23+
│ ├── default.vue # Standard content layout
24+
│ └── text-image.vue # Text left, image right layout
25+
├── setup/
26+
│ ├── main.ts # App setup configuration
27+
│ └── shiki.ts # Code highlighting setup
28+
├── styles/
29+
│ └── index.css # Brand colors and typography
30+
├── index.ts # Theme entry point
31+
└── package.json # Theme metadata
32+
```
33+
34+
### Key Features
35+
36+
Brand Colors - All DevelopmentSeed colors are available:
37+
- Primary: #CF3F02
38+
- Secondary: #E2C044
39+
- Success: #4DA167
40+
- Info: #2E86AB
41+
- Warning: #E2C044
42+
- Danger: #A71D31
43+
44+
Typography:
45+
- Roboto Condensed for headings
46+
- Roboto for body text
47+
- Roboto Mono for code
48+
49+
Layouts:
50+
1. default - Standard content layout
51+
2. cover - Title slides with gradient background
52+
3. title - Title slides with image on bottom third
53+
4. two-cols - Two-column layout with configurable gap and ratio
54+
55+
### Usage
56+
57+
To use the theme in any presentation:
58+
59+
```md
60+
---
61+
theme: ./theme
62+
title: Your Presentation Title
63+
---
64+
```
65+
66+
For the text-image layout:
67+
68+
```md
69+
---
70+
layout: text-image
71+
image: /path/to/image.jpg
72+
---
73+
74+
# Your Content Here
75+
76+
```
77+
78+
Text on the left, image fills the right side.
79+
80+
To add your logo:
81+
82+
```
83+
<Logo src="/logo.png" position="top-right" height="60px" />
84+
```
85+
86+
I've also created slides-devseed-demo.md that demonstrates all the features.
87+
You can preview it by updating your slides.md or running the dev server to
88+
see the theme in action!

‎slides/package.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"name": "slidev-demo",
3+
"type": "module",
4+
"private": true,
5+
"packageManager": "[email protected]",
6+
"scripts": {
7+
"build": "slidev build",
8+
"dev": "slidev --open",
9+
"export": "slidev export"
10+
},
11+
"dependencies": {
12+
"@slidev/cli": "^52.6.0",
13+
"@slidev/theme-default": "latest",
14+
"@slidev/theme-seriph": "latest",
15+
"slidev-addon-qrcode": "^1.0.2",
16+
"vue": "^3.5.22"
17+
}
18+
}

0 commit comments

Comments
 (0)