feat: add content repository example

2026-08-29 18:59:58 +08:00
parent 0cf1f51745
commit e169eae2dc
12 changed files with 340 additions and 0 deletions
@@ -0,0 +1,2 @@
+# Convenience gate only. Use a long, non-obvious value in deployment settings.
+PRESENTER_TOKEN=replace-with-your-presenter-token
@@ -0,0 +1,51 @@
+name: Deploy easy-slides to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 11.19.0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: pnpm
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm check
+        env:
+          PRESENTER_TOKEN: ${{ secrets.PRESENTER_TOKEN }}
+      - run: pnpm build
+        env:
+          SITE_BASE: /${{ github.event.repository.name }}/
+          PRESENTER_TOKEN: ${{ secrets.PRESENTER_TOKEN }}
+      - uses: actions/configure-pages@v5
+      - uses: actions/upload-pages-artifact@v4
+        with:
+          path: dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v4
@@ -0,0 +1,28 @@
+{
+  "New easy-slides page": {
+    "scope": "markdown",
+    "prefix": "slide-page",
+    "body": [
+      "---",
+      "layout: ${1:default}",
+      "---",
+      "",
+      "## ${2:标题}",
+      "",
+      "${3:内容}",
+      "",
+      "<!--",
+      "${4:演讲备注}",
+      "-->"
+    ],
+    "description": "插入一页 easy-slides 幻灯片"
+  },
+  "Smart image": {
+    "scope": "markdown",
+    "prefix": "slide-image",
+    "body": [
+      "![${1:说明}](./assets/${2:image.png}){fit=\"${3:contain}\" position=\"${4:center}\" max-height=\"${5:60vh}\"}"
+    ],
+    "description": "插入带自动适配属性的图片"
+  }
+}
@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "antfu.slidev",
+    "vue.volar",
+    "davidanson.vscode-markdownlint"
+  ]
+}
@@ -0,0 +1,10 @@
+{
+  "editor.wordWrap": "on",
+  "files.trimTrailingWhitespace": true,
+  "markdown.validate.enabled": true,
+  "markdownlint.config": {
+    "MD013": false,
+    "MD033": false,
+    "MD041": false
+  }
+}
@@ -0,0 +1,33 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "easy-slides: preview current deck",
+      "type": "shell",
+      "command": "pnpm",
+      "args": ["dev", "--", "${file}"],
+      "isBackground": true,
+      "problemMatcher": []
+    },
+    {
+      "label": "easy-slides: present current deck",
+      "type": "shell",
+      "command": "pnpm",
+      "args": ["present", "--", "${file}"],
+      "isBackground": true,
+      "problemMatcher": []
+    },
+    {
+      "label": "easy-slides: check",
+      "type": "shell",
+      "command": "pnpm check",
+      "problemMatcher": []
+    },
+    {
+      "label": "easy-slides: build",
+      "type": "shell",
+      "command": "pnpm build",
+      "problemMatcher": []
+    }
+  ]
+}
@@ -0,0 +1,19 @@
+# Slides content repository
+
+这是一个独立内容仓库示例。它只维护站点配置、Markdown 演示、资源、编辑器设置和部署工作流；渲染引擎来自 `@easy-slides/cli`。
+
+如果不从 npm 发布或下载 easy-slides，把 `package.json` 中的版本替换为 Git tag（第三方依赖仍由 pnpm 从 registry 安装）：
+
+```json
+"@easy-slides/cli": "git+https://github.com/OWNER/easy-slides.git#v0.2.0"
+```
+
+```bash
+pnpm install
+cp .env.example .env
+pnpm dev -- getting-started
+pnpm present -- getting-started
+pnpm build
+```
+
+Cloudflare Pages 使用构建命令 `pnpm build` 和输出目录 `dist`。GitHub Pages 使用 `.github/workflows/deploy-pages.yml`，并从 Actions Secret 注入 `PRESENTER_TOKEN`。
@@ -0,0 +1,7 @@
+export default {
+  title: 'Engineering Slides',
+  description: '使用 Markdown 维护的公开演示',
+  slidesDir: 'slides',
+  outDir: 'dist',
+  exportDir: 'exports',
+}
@@ -0,0 +1,14 @@
+{
+  "name": "easy-slides-content-example",
+  "private": true,
+  "scripts": {
+    "dev": "easy-slides dev",
+    "present": "easy-slides present",
+    "build": "easy-slides build",
+    "check": "easy-slides check",
+    "export": "easy-slides export"
+  },
+  "devDependencies": {
+    "@easy-slides/cli": "^0.2.0"
+  }
+}
@@ -0,0 +1,2 @@
+allowBuilds:
+  playwright-chromium: false
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 1200" role="img" aria-labelledby="title desc">
+  <title id="title">easy-slides JYY theme cover</title>
+  <desc id="desc">A restrained deep blue and warm gray 4:3 presentation cover.</desc>
+  <rect width="1600" height="1200" fill="#f5f2ef"/>
+  <rect x="70" y="70" width="1460" height="1060" rx="18" fill="#fff" stroke="#d9d5d7" stroke-width="4"/>
+  <path d="M140 280h620" stroke="#1d4ed8" stroke-width="12"/>
+  <circle cx="1310" cy="880" r="128" fill="#1d4ed8" opacity=".10"/>
+  <circle cx="1375" cy="815" r="74" fill="#1d4ed8" opacity=".22"/>
+  <text x="140" y="500" font-family="Lato,Arial,sans-serif" font-size="126" font-weight="700" fill="#222">easy-slides</text>
+  <text x="148" y="600" font-family="Lato,Arial,sans-serif" font-size="46" fill="#1d4ed8">Markdown → Presentation</text>
+  <text x="148" y="940" font-family="Arial,sans-serif" font-size="38" fill="#666">清晰、克制、适合投影</text>
+</svg>
@@ -0,0 +1,155 @@
+---
+theme: easy-jyy
+title: easy-slides 快速开始
+description: JYY 风格 Markdown 演示引擎的功能示例
+author: easy-slides
+date: 2026-08-27
+tags:
+  - Markdown
+  - Slidev
+  - JYY Style
+cover: ./assets/cover.svg
+transition: fade-out
+mdc: true
+drawings:
+  persist: false
+---
+
+# easy-slides
+
+> 写 Markdown，推送 Git，分享一场清晰的演示。
+
+<!--
+欢迎使用 easy-slides。这一页演示了 JYY 风格的标题页和逐页演讲备注。
+-->
+
+---
+layout: default
+---
+
+## 内容优先
+
+<v-clicks>
+
+- 在 VS Code 中实时编辑
+- 自动处理图片比例与可用空间
+- 使用 Vue、Mermaid、KaTeX 和代码高亮
+- 推送 Git 后部署到 Cloudflare Pages 或 GitHub Pages
+
+</v-clicks>
+
+<!--
+依次介绍四个核心能力。列表项会随着点击逐项出现。
+-->
+
+---
+layout: two-cols
+class: easy-code-lg
+---
+
+## Markdown 与代码
+
+::left::
+
+### 数学公式
+
+$$
+e^{i\pi}+1=0
+$$
+
+::right::
+
+### 代码高亮
+
+```ts {2|3|all}
+const deck = await discover('slides')
+const pages = deck.filter(page => !page.draft)
+await build(pages)
+const published = pages.map(page => page.slug)
+const artifacts = await exportSlides(pages)
+await upload(artifacts)
+await invalidateCache(published)
+console.info(`Published ${published.length} decks`)
+return { pages, published }
+```
+
+<!--
+左侧是 KaTeX，右侧是带逐步高亮的 TypeScript 代码。
+-->
+
+---
+layout: image-auto
+image: ./assets/cover.svg
+imageFit: contain
+---
+
+## 智能图片
+
+- 默认保持原始比例
+- 宽图自动切换为上下结构
+- 不超出幻灯片内容区
+- 支持方向、contain、cover 和定位覆盖
+
+<!--
+image-auto 根据图片宽高比选择上下或左右结构，仍可通过 imagePlacement 显式覆盖。
+-->
+
+---
+layout: default
+---
+
+## Markdown 图片属性
+
+![easy-slides 示例封面](./assets/cover.svg){fit="contain" position="center" max-height="55vh"}
+
+<!--
+独占一行的 Markdown 图片会自动扩展为主要视觉区域，也可以通过属性覆盖默认值。
+-->
+
+---
+layout: default
+---
+
+## 文本生成图表
+
+```mermaid
+flowchart LR
+  A[编辑 Markdown] --> B[Vite 实时预览]
+  B --> C[构建静态站点]
+  C --> D[Cloudflare Pages]
+  C --> E[GitHub Pages]
+```
+
+<!--
+Mermaid 图表随 Markdown 一同维护，不需要额外绘图软件。
+-->
+
+---
+layout: default
+---
+
+## 表格尺寸预设
+
+<div class="easy-table-lg">
+
+| 预设 | 字号 | 单元格留白 |
+| --- | ---: | ---: |
+| 小 | 24px | 7px × 10px |
+| 中（默认） | 30px | 10px × 14px |
+| 大 | 36px | 13px × 18px |
+
+</div>
+
+<!--
+表格和代码尺寸既可以按页设置，也可以用 div 包裹后只调整一个内容块。
+-->
+
+---
+layout: quote
+---
+
+> 内容决定表达，样式帮助内容被看见。
+
+<!--
+结束时回到 easy-slides 的设计原则：克制的视觉风格服务于内容。
+-->