@cyber-dash-tech/revela 0.19.3 → 0.19.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -14
- package/README.zh-CN.md +14 -14
- package/lib/browser/chrome.ts +92 -8
- package/lib/pdf/export.ts +57 -31
- package/package.json +1 -1
- package/plugins/revela/.codex-plugin/plugin.json +1 -1
package/README.md
CHANGED
|
@@ -39,7 +39,7 @@ npm_config_cache=/tmp/revela-npm-cache bun run smoke:mcp-pack
|
|
|
39
39
|
Install Revela through the Codex Git marketplace:
|
|
40
40
|
|
|
41
41
|
```bash
|
|
42
|
-
codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.
|
|
42
|
+
codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.4
|
|
43
43
|
codex plugin add revela@revela
|
|
44
44
|
```
|
|
45
45
|
|
|
@@ -121,7 +121,7 @@ Revela includes built-in deck designs. Design previews are generated from the bu
|
|
|
121
121
|
|
|
122
122
|
To switch designs in Codex, ask:
|
|
123
123
|
|
|
124
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
124
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), use summit as the design.
|
|
125
125
|
|
|
126
126
|
In Codex, ask Revela to list or switch designs; the plugin uses the active design when making decks.
|
|
127
127
|
|
|
@@ -129,7 +129,7 @@ In Codex, ask Revela to list or switch designs; the plugin uses the active desig
|
|
|
129
129
|
|
|
130
130
|
Domains add topic-specific communication guidance, such as consulting, product, or investor communication. Use them when you want Revela to adapt deck framing to a specific context.
|
|
131
131
|
|
|
132
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
132
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), list available domains.
|
|
133
133
|
|
|
134
134
|
In Codex, ask Revela to list or switch domains; the active domain guides deck framing during init, research, and planning.
|
|
135
135
|
|
|
@@ -139,35 +139,35 @@ Use these prompts in Codex from the workspace that contains your source material
|
|
|
139
139
|
|
|
140
140
|
1. Choose the narrative domain before authoring so Revela frames the audience, decision, risks, and objections for your context.
|
|
141
141
|
|
|
142
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
142
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), use consulting as the domain.
|
|
143
143
|
|
|
144
144
|
2. Choose the deck design before rendering so generated artifacts use the intended visual language.
|
|
145
145
|
|
|
146
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
146
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), use summit as the design.
|
|
147
147
|
|
|
148
148
|
3. Create a custom design when you want a different visual direction.
|
|
149
149
|
|
|
150
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
150
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), create a new design named neon-finance with a crisp financial-dashboard style: dark surfaces, precise grids, and bright green accents.
|
|
151
151
|
|
|
152
152
|
Revela may ask for references or constraints, then creates a workspace draft with `DESIGN.md`, `design.css`, and any local `assets/**`. It generates a preview from the built-in page-template fixture plus that CSS so you can review cover, agenda, timelines, charts, tables, cards, and visual slots before installing. When it is ready, switch to it:
|
|
153
153
|
|
|
154
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
154
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), use neon-finance as the design.
|
|
155
155
|
|
|
156
156
|
4. Initialize local material intake. Init scans, extracts, and reviews workspace sources; it does not create a Narrative Vault.
|
|
157
157
|
|
|
158
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
158
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), help me init this workspace from the local materials.
|
|
159
159
|
|
|
160
160
|
5. Research source-linked deck inputs and save findings.
|
|
161
161
|
|
|
162
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
162
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), research the public evidence and examples needed for this deck.
|
|
163
163
|
|
|
164
164
|
6. Create or update the deck plan before generating HTML so slide order, chapter structure, source links, unresolved inputs, source limitations, and visual intent are explicit.
|
|
165
165
|
|
|
166
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
166
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), create or update the deck plan before generating HTML.
|
|
167
167
|
|
|
168
168
|
7. Make an HTML deck from the current deck plan.
|
|
169
169
|
|
|
170
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
170
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), make the deck from the current deck plan.
|
|
171
171
|
|
|
172
172
|
8. Review and annotate the generated deck from the localhost website card after make-deck completes.
|
|
173
173
|
|
|
@@ -175,15 +175,15 @@ Revela serves the deck from `http://127.0.0.1:<port>/decks/<file>.html` so you c
|
|
|
175
175
|
|
|
176
176
|
9. Export a PDF after deck QA passes.
|
|
177
177
|
|
|
178
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
178
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), export the deck to PDF.
|
|
179
179
|
|
|
180
180
|
10. Export an editable PPTX after deck QA passes.
|
|
181
181
|
|
|
182
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
182
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), export the deck to PPTX.
|
|
183
183
|
|
|
184
184
|
11. Export per-slide PNG files after deck QA passes.
|
|
185
185
|
|
|
186
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
186
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md), export the deck to PNG.
|
|
187
187
|
|
|
188
188
|
## Annotate A Deck
|
|
189
189
|
|
package/README.zh-CN.md
CHANGED
|
@@ -39,7 +39,7 @@ npm_config_cache=/tmp/revela-npm-cache bun run smoke:mcp-pack
|
|
|
39
39
|
通过 Codex Git marketplace 安装 Revela:
|
|
40
40
|
|
|
41
41
|
```bash
|
|
42
|
-
codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.
|
|
42
|
+
codex plugin marketplace add https://github.com/cyber-dash-tech/revela --ref v0.19.4
|
|
43
43
|
codex plugin add revela@revela
|
|
44
44
|
```
|
|
45
45
|
|
|
@@ -121,7 +121,7 @@ Revela 内置多个 deck design。Design preview 由内置 page-template preview
|
|
|
121
121
|
|
|
122
122
|
在 Codex 中切换 design,可以这样问:
|
|
123
123
|
|
|
124
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
124
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),use summit as design.
|
|
125
125
|
|
|
126
126
|
在 Codex 中,可以直接让 Revela 列出或切换 design;生成 deck 时会使用 active design。
|
|
127
127
|
|
|
@@ -129,7 +129,7 @@ Revela 内置多个 deck design。Design preview 由内置 page-template preview
|
|
|
129
129
|
|
|
130
130
|
Domain 提供特定场景的沟通 guidance,例如 consulting、product 或 investor communication。需要让 Revela 按具体沟通场景调整 deck framing 时使用。
|
|
131
131
|
|
|
132
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
132
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),列出 available domains。
|
|
133
133
|
|
|
134
134
|
在 Codex 中,可以直接让 Revela 列出或切换 domain;active domain 会用于 init、research 和 deck planning 阶段的 framing。
|
|
135
135
|
|
|
@@ -139,35 +139,35 @@ Domain 提供特定场景的沟通 guidance,例如 consulting、product 或 in
|
|
|
139
139
|
|
|
140
140
|
1. 先选择 domain,让 Revela 按你的沟通场景 framing 受众、决策、风险和潜在质疑。
|
|
141
141
|
|
|
142
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
142
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),use consulting as domain.
|
|
143
143
|
|
|
144
144
|
2. 再选择 design,让后续生成的 deck 使用指定视觉风格。
|
|
145
145
|
|
|
146
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
146
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),use summit as design.
|
|
147
147
|
|
|
148
148
|
3. 如果需要不同的视觉方向,可以创建一个自定义 design。
|
|
149
149
|
|
|
150
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
150
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),创建一个名为 neon-finance 的新 design:金融仪表盘风格,深色界面、精密网格、亮绿色重点色。
|
|
151
151
|
|
|
152
152
|
Revela 可能会继续询问参考图、风格约束或禁忌项,然后在 workspace draft 中创建 `DESIGN.md`、`design.css` 和需要的本地 `assets/**`。它会用内置 page-template fixture 加上这份 CSS 生成 preview,让你在 install 前先检查 cover、agenda、timeline、chart、table、card 和 visual slot。创建完成后再切换使用:
|
|
153
153
|
|
|
154
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
154
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),使用 neon-finance 作为 design。
|
|
155
155
|
|
|
156
156
|
4. 初始化本地 material intake。Init 会扫描、抽取并审阅 workspace source;它不会创建 Narrative Vault。
|
|
157
157
|
|
|
158
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
158
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),帮我 init 这个 workspace,先读本地材料。
|
|
159
159
|
|
|
160
160
|
5. 针对 deck 所需输入做 research,并保存带来源的 findings。
|
|
161
161
|
|
|
162
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
162
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),research 这个 deck 需要的公开证据、案例和 source。
|
|
163
163
|
|
|
164
164
|
6. 先创建或更新 deck plan,明确 slide 顺序、章节结构、source links、unresolved inputs、source limitations 和 visual intent,再生成 HTML。
|
|
165
165
|
|
|
166
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
166
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),生成 HTML 前先 create or update deck plan。
|
|
167
167
|
|
|
168
168
|
7. 基于当前 deck plan 生成 HTML deck。
|
|
169
169
|
|
|
170
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
170
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),基于当前 deck plan make deck。
|
|
171
171
|
|
|
172
172
|
8. make-deck 完成后,从 localhost website card 打开生成的 deck,并在 Codex Browser 中做 annotation 和定向修改。
|
|
173
173
|
|
|
@@ -175,15 +175,15 @@ Revela 会通过 `http://127.0.0.1:<port>/decks/<file>.html` 服务 deck,你
|
|
|
175
175
|
|
|
176
176
|
9. QA 通过后导出 PDF。
|
|
177
177
|
|
|
178
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
178
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),把 deck export 成 PDF。
|
|
179
179
|
|
|
180
180
|
10. QA 通过后导出可编辑 PPTX。
|
|
181
181
|
|
|
182
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
182
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),把 deck export 成 PPTX。
|
|
183
183
|
|
|
184
184
|
11. QA 通过后导出每页 PNG。
|
|
185
185
|
|
|
186
|
-
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.
|
|
186
|
+
> [$revela:revela](/Users/mengdigao/.codex/plugins/cache/revela/revela/0.19.4/skills/revela/SKILL.md),把 deck export 成 PNG。
|
|
187
187
|
|
|
188
188
|
## Annotate Deck
|
|
189
189
|
|
package/lib/browser/chrome.ts
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import puppeteer, { type Browser } from "puppeteer-core"
|
|
2
|
-
import { existsSync } from "fs"
|
|
2
|
+
import { existsSync, mkdtempSync, rmSync } from "fs"
|
|
3
|
+
import { tmpdir } from "os"
|
|
4
|
+
import { join } from "path"
|
|
3
5
|
|
|
4
6
|
export const CHROME_PATHS = [
|
|
5
7
|
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
|
|
@@ -10,13 +12,26 @@ export const CHROME_PATHS = [
|
|
|
10
12
|
"/usr/bin/chromium",
|
|
11
13
|
]
|
|
12
14
|
|
|
15
|
+
export const CHROME_PATH_ENV_VARS = ["REVELA_CHROME_PATH", "PUPPETEER_EXECUTABLE_PATH"] as const
|
|
16
|
+
|
|
13
17
|
export function findChromePath(): string {
|
|
18
|
+
for (const envName of CHROME_PATH_ENV_VARS) {
|
|
19
|
+
const override = process.env[envName]?.trim()
|
|
20
|
+
if (!override) continue
|
|
21
|
+
if (existsSync(override)) return override
|
|
22
|
+
throw new Error(
|
|
23
|
+
`Chrome executable configured by ${envName} does not exist: ${override}\n` +
|
|
24
|
+
"Set REVELA_CHROME_PATH to a valid Chrome/Chromium binary, or unset the override to use auto-detection."
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
14
28
|
for (const p of CHROME_PATHS) {
|
|
15
29
|
if (existsSync(p)) return p
|
|
16
30
|
}
|
|
17
31
|
throw new Error(
|
|
18
32
|
"Could not find a Chrome/Chromium installation.\n" +
|
|
19
|
-
"Tried:\n" + CHROME_PATHS.map((p) => ` ${p}`).join("\n")
|
|
33
|
+
"Tried:\n" + CHROME_PATHS.map((p) => ` ${p}`).join("\n") + "\n" +
|
|
34
|
+
"You can set REVELA_CHROME_PATH=/path/to/chromium or PUPPETEER_EXECUTABLE_PATH=/path/to/chrome."
|
|
20
35
|
)
|
|
21
36
|
}
|
|
22
37
|
|
|
@@ -26,23 +41,92 @@ export interface LaunchChromeOptions {
|
|
|
26
41
|
allowFileAccess?: boolean
|
|
27
42
|
}
|
|
28
43
|
|
|
44
|
+
export function createChromeUserDataDir(): string {
|
|
45
|
+
return mkdtempSync(join(tmpdir(), "revela-chrome-"))
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export function cleanupChromeUserDataDir(userDataDir: string): void {
|
|
49
|
+
rmSync(userDataDir, { recursive: true, force: true })
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
function withProfileCleanup(browser: Browser, userDataDir: string): Browser {
|
|
53
|
+
const originalClose = browser.close.bind(browser)
|
|
54
|
+
browser.close = async () => {
|
|
55
|
+
try {
|
|
56
|
+
await originalClose()
|
|
57
|
+
} finally {
|
|
58
|
+
try {
|
|
59
|
+
cleanupChromeUserDataDir(userDataDir)
|
|
60
|
+
} catch (error) {
|
|
61
|
+
console.warn(`Could not clean up Chrome profile ${userDataDir}: ${String(error)}`)
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return browser
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
function formatLaunchError(error: unknown, executablePath: string, userDataDir: string): Error {
|
|
69
|
+
const message = error instanceof Error ? error.message : String(error)
|
|
70
|
+
return new Error(
|
|
71
|
+
"Failed to launch Chrome/Chromium for Revela browser-backed checks.\n" +
|
|
72
|
+
`Executable: ${executablePath}\n` +
|
|
73
|
+
`Platform: ${process.platform} ${process.arch}\n` +
|
|
74
|
+
`Temporary profile: ${userDataDir}\n` +
|
|
75
|
+
`REVELA_CHROME_PATH: ${process.env.REVELA_CHROME_PATH || "(unset)"}\n` +
|
|
76
|
+
`PUPPETEER_EXECUTABLE_PATH: ${process.env.PUPPETEER_EXECUTABLE_PATH || "(unset)"}\n` +
|
|
77
|
+
"If this happens in Codex/macOS, set REVELA_CHROME_PATH to a Chrome/Chromium binary that can run headless, " +
|
|
78
|
+
"or run browser-backed tests in an environment that allows Chrome to start.\n" +
|
|
79
|
+
`Original error: ${message}`
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
|
|
29
83
|
export async function launchChrome(options: LaunchChromeOptions = {}): Promise<Browser> {
|
|
30
84
|
const width = options.width ?? 1920
|
|
31
85
|
const height = options.height ?? 1080
|
|
86
|
+
const executablePath = findChromePath()
|
|
87
|
+
const userDataDir = createChromeUserDataDir()
|
|
32
88
|
const args = [
|
|
33
89
|
"--no-sandbox",
|
|
34
90
|
"--disable-setuid-sandbox",
|
|
35
91
|
"--disable-dev-shm-usage",
|
|
92
|
+
"--no-first-run",
|
|
93
|
+
"--no-default-browser-check",
|
|
94
|
+
"--disable-background-networking",
|
|
95
|
+
"--disable-background-timer-throttling",
|
|
96
|
+
"--disable-client-side-phishing-detection",
|
|
97
|
+
"--disable-component-update",
|
|
98
|
+
"--disable-default-apps",
|
|
99
|
+
"--disable-extensions",
|
|
100
|
+
"--disable-hang-monitor",
|
|
101
|
+
"--disable-popup-blocking",
|
|
102
|
+
"--disable-prompt-on-repost",
|
|
103
|
+
"--disable-sync",
|
|
104
|
+
"--disable-translate",
|
|
105
|
+
"--metrics-recording-only",
|
|
106
|
+
"--mute-audio",
|
|
107
|
+
"--safebrowsing-disable-auto-update",
|
|
108
|
+
"--disable-features=Translate,OptimizationHints,MediaRouter",
|
|
36
109
|
`--window-size=${width},${height}`,
|
|
37
110
|
]
|
|
38
111
|
|
|
39
112
|
if (options.allowFileAccess) {
|
|
40
|
-
args.
|
|
113
|
+
args.push("--allow-file-access-from-files")
|
|
41
114
|
}
|
|
42
115
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
116
|
+
try {
|
|
117
|
+
const browser = await puppeteer.launch({
|
|
118
|
+
executablePath,
|
|
119
|
+
headless: true,
|
|
120
|
+
userDataDir,
|
|
121
|
+
args,
|
|
122
|
+
})
|
|
123
|
+
return withProfileCleanup(browser, userDataDir)
|
|
124
|
+
} catch (error) {
|
|
125
|
+
try {
|
|
126
|
+
cleanupChromeUserDataDir(userDataDir)
|
|
127
|
+
} catch (cleanupError) {
|
|
128
|
+
console.warn(`Could not clean up Chrome profile ${userDataDir}: ${String(cleanupError)}`)
|
|
129
|
+
}
|
|
130
|
+
throw formatLaunchError(error, executablePath, userDataDir)
|
|
131
|
+
}
|
|
48
132
|
}
|
package/lib/pdf/export.ts
CHANGED
|
@@ -187,6 +187,54 @@ async function toDataUrlFromRef(ref: string, baseDir: string): Promise<string |
|
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
189
|
|
|
190
|
+
function withExportBaseHref(html: string, htmlFilePath: string): string {
|
|
191
|
+
const baseHref = pathToFileURL(`${dirname(resolve(htmlFilePath))}/`).href
|
|
192
|
+
const baseTag = `<base href="${baseHref}">`
|
|
193
|
+
if (/<base\b/i.test(html)) return html
|
|
194
|
+
if (/<head[^>]*>/i.test(html)) {
|
|
195
|
+
return html.replace(/<head([^>]*)>/i, `<head$1>\n${baseTag}`)
|
|
196
|
+
}
|
|
197
|
+
return `${baseTag}\n${html}`
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
async function prepareSlidesForExport(page: any): Promise<void> {
|
|
201
|
+
await page.evaluate((canvasWidth: number, canvasHeight: number) => {
|
|
202
|
+
document.documentElement.style.scrollSnapType = "none"
|
|
203
|
+
document.documentElement.style.overflow = "visible"
|
|
204
|
+
document.body.style.overflow = "visible"
|
|
205
|
+
document.body.style.margin = "0"
|
|
206
|
+
|
|
207
|
+
const style = document.createElement("style")
|
|
208
|
+
style.setAttribute("data-revela-export-style", "true")
|
|
209
|
+
style.textContent = `
|
|
210
|
+
html, body { scroll-snap-type: none !important; overflow: visible !important; }
|
|
211
|
+
.slide {
|
|
212
|
+
width: ${canvasWidth}px !important;
|
|
213
|
+
min-width: ${canvasWidth}px !important;
|
|
214
|
+
height: ${canvasHeight}px !important;
|
|
215
|
+
min-height: ${canvasHeight}px !important;
|
|
216
|
+
display: flex !important;
|
|
217
|
+
align-items: center !important;
|
|
218
|
+
justify-content: center !important;
|
|
219
|
+
overflow: hidden !important;
|
|
220
|
+
scroll-snap-align: none !important;
|
|
221
|
+
}
|
|
222
|
+
.slide-canvas {
|
|
223
|
+
width: ${canvasWidth}px !important;
|
|
224
|
+
height: ${canvasHeight}px !important;
|
|
225
|
+
transform: none !important;
|
|
226
|
+
transform-origin: center center !important;
|
|
227
|
+
}
|
|
228
|
+
`
|
|
229
|
+
document.head.appendChild(style)
|
|
230
|
+
|
|
231
|
+
document.querySelectorAll<HTMLElement>(".slide-canvas").forEach((canvas) => {
|
|
232
|
+
canvas.style.transform = "none"
|
|
233
|
+
canvas.style.transformOrigin = "center center"
|
|
234
|
+
})
|
|
235
|
+
}, CANVAS_W, CANVAS_H)
|
|
236
|
+
}
|
|
237
|
+
|
|
190
238
|
export async function inlineImageAssetsForPdf(htmlContent: string, htmlFilePath: string): Promise<string> {
|
|
191
239
|
const baseDir = dirname(resolve(htmlFilePath))
|
|
192
240
|
const refs = extractImageAssetRefsForPdf(htmlContent)
|
|
@@ -358,7 +406,7 @@ async function screenshotDeckSlides(htmlFilePath: string, label: "pdf" | "png"):
|
|
|
358
406
|
try {
|
|
359
407
|
const originalHtml = readFileSync(abs, "utf-8")
|
|
360
408
|
const localizedHtml = await localizeExternalImages(originalHtml, tmpDir)
|
|
361
|
-
const patchedHtml = await inlineImageAssetsForPdf(localizedHtml, abs)
|
|
409
|
+
const patchedHtml = withExportBaseHref(await inlineImageAssetsForPdf(localizedHtml, abs), abs)
|
|
362
410
|
tmpHtmlPath = join(tmpDir, "index.html")
|
|
363
411
|
writeFileSync(tmpHtmlPath, patchedHtml, "utf-8")
|
|
364
412
|
} catch (err) {
|
|
@@ -386,13 +434,7 @@ async function screenshotDeckSlides(htmlFilePath: string, label: "pdf" | "png"):
|
|
|
386
434
|
// Wait for fonts (Google Fonts may still be external) and CSS animations to settle
|
|
387
435
|
await new Promise((r) => setTimeout(r, 2000))
|
|
388
436
|
|
|
389
|
-
|
|
390
|
-
// Also ensure html/body are tall enough to contain all slides without clipping.
|
|
391
|
-
await page.evaluate(() => {
|
|
392
|
-
document.documentElement.style.scrollSnapType = "none"
|
|
393
|
-
document.documentElement.style.overflow = "visible"
|
|
394
|
-
document.body.style.overflow = "visible"
|
|
395
|
-
})
|
|
437
|
+
await prepareSlidesForExport(page)
|
|
396
438
|
|
|
397
439
|
const slideCount: number = await page.evaluate(
|
|
398
440
|
() => document.querySelectorAll(".slide").length
|
|
@@ -417,32 +459,16 @@ async function screenshotDeckSlides(htmlFilePath: string, label: "pdf" | "png"):
|
|
|
417
459
|
// Wait for CSS transitions and JS rendering (ECharts animations, etc.)
|
|
418
460
|
await new Promise((r) => setTimeout(r, 800))
|
|
419
461
|
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
// offsetParent walk gives document-absolute coords that Puppeteer clip expects.
|
|
424
|
-
const clipRect = await page.evaluate((i: number) => {
|
|
425
|
-
const slide = document.querySelectorAll(".slide")[i] as HTMLElement | null
|
|
426
|
-
if (!slide) return null
|
|
427
|
-
const target = (slide.querySelector(".slide-canvas") as HTMLElement | null) ?? slide
|
|
428
|
-
let top = 0
|
|
429
|
-
let left = 0
|
|
430
|
-
let el: HTMLElement | null = target
|
|
431
|
-
while (el) {
|
|
432
|
-
top += el.offsetTop
|
|
433
|
-
left += el.offsetLeft
|
|
434
|
-
el = el.offsetParent as HTMLElement | null
|
|
435
|
-
}
|
|
436
|
-
return { x: left, y: top, width: target.offsetWidth, height: target.offsetHeight }
|
|
437
|
-
}, idx)
|
|
462
|
+
const target = await page.$(`.slide:nth-of-type(${idx + 1}) > .slide-canvas`)
|
|
463
|
+
?? await page.$(`.slide:nth-of-type(${idx + 1})`)
|
|
464
|
+
const box = target ? await target.boundingBox() : null
|
|
438
465
|
|
|
439
|
-
if (
|
|
440
|
-
const buf = await
|
|
441
|
-
screenshots.push(buf as
|
|
466
|
+
if (target && box && box.width > 0 && box.height > 0) {
|
|
467
|
+
const buf = await target.screenshot({ type: "png" })
|
|
468
|
+
screenshots.push(Buffer.from(buf as Uint8Array))
|
|
442
469
|
} else {
|
|
443
|
-
// Fallback: screenshot full viewport
|
|
444
470
|
const buf = await page.screenshot({ type: "png" })
|
|
445
|
-
screenshots.push(buf as
|
|
471
|
+
screenshots.push(Buffer.from(buf as Uint8Array))
|
|
446
472
|
}
|
|
447
473
|
}
|
|
448
474
|
} finally {
|
package/package.json
CHANGED