From afc352197a4ad5d2e050ee87b305d1c71d725698 Mon Sep 17 00:00:00 2001 From: mo91dev <> Date: Sat, 3 Aug 2024 15:03:49 -0500 Subject: [PATCH 1/7] add transparent export option --- packages/slidev/node/cli.ts | 4 ++++ packages/slidev/node/commands/export.ts | 12 ++++++++++-- packages/types/src/cli.ts | 1 + 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts index 1d23fe3ce1..e6c922726d 100644 --- a/packages/slidev/node/cli.ts +++ b/packages/slidev/node/cli.ts @@ -603,6 +603,10 @@ function exportOptions(args: Argv) { type: 'number', describe: 'scale factor for image export', }) + .option('transparent', { + type: 'boolean', + describe: 'export png pages without the default browser background', + }) } function printInfo( diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts index 72b6ee383e..1b8d3de9fb 100644 --- a/packages/slidev/node/commands/export.ts +++ b/packages/slidev/node/commands/export.ts @@ -37,6 +37,7 @@ export interface ExportOptions { */ perSlide?: boolean scale?: number + transparent?: boolean } interface ExportPngResult { @@ -183,6 +184,7 @@ export async function exportSlides({ perSlide = false, scale = 1, waitUntil, + transparent = false, }: ExportOptions) { const pages: number[] = parseRangeString(total, range) @@ -402,7 +404,9 @@ export async function exportSlides({ progress.update(i + 1) const id = (await slideContainers.nth(i).getAttribute('id')) || '' const slideNo = +id.split('-')[0] - const buffer = await slideContainers.nth(i).screenshot() + const buffer = await slideContainers.nth(i).screenshot({ + omitBackground: transparent, + }) result.push({ slideIndex: slideNo - 1, buffer }) if (writeToDisk) await fs.writeFile(path.join(output, `${withClicks ? id : slideNo}.png`), buffer) @@ -414,7 +418,9 @@ export async function exportSlides({ const result: ExportPngResult[] = [] const genScreenshot = async (no: number, clicks?: string) => { await go(no, clicks) - const buffer = await page.screenshot() + const buffer = await page.screenshot({ + omitBackground: transparent, + }) result.push({ slideIndex: no - 1, buffer }) if (writeToDisk) { await fs.writeFile( @@ -585,6 +591,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption withToc, perSlide, scale, + transparent, } = config outFilename = output || options.data.config.exportFilename || outFilename || `${path.basename(entry, '.md')}-export` if (outDir) @@ -607,6 +614,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption withToc: withToc || false, perSlide: perSlide || false, scale: scale || 2, + transparent: transparent || false, } } diff --git a/packages/types/src/cli.ts b/packages/types/src/cli.ts index 61ad32bbdd..099067622e 100644 --- a/packages/types/src/cli.ts +++ b/packages/types/src/cli.ts @@ -16,6 +16,7 @@ export interface ExportArgs extends CommonArgs { 'with-toc'?: boolean 'per-slide'?: boolean 'scale'?: number + 'transparent'?: boolean } export interface BuildArgs extends ExportArgs { From 76952f971a05932c98f548fa9eb7d29ea1deaa13 Mon Sep 17 00:00:00 2001 From: mo91dev <> Date: Sat, 3 Aug 2024 15:37:07 -0500 Subject: [PATCH 2/7] add docs for transparency command --- docs/builtin/cli.md | 1 + docs/guide/exporting.md | 15 +++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/docs/builtin/cli.md b/docs/builtin/cli.md index 84310b0695..bd459309f4 100644 --- a/docs/builtin/cli.md +++ b/docs/builtin/cli.md @@ -74,6 +74,7 @@ Options: - `--dark` (`boolean`, default: `false`): export as dark theme. - `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every click animation (see https://sli.dev/guide/animations.html#click-animation). - `--theme`, `-t` (`string`): override theme. +- `--transparent` (`boolean`, default: `false`): remove the default browser background ## `slidev format [entry]` {#format} diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md index ac67d86bdc..124fe1c472 100644 --- a/docs/guide/exporting.md +++ b/docs/guide/exporting.md @@ -182,3 +182,18 @@ You can generate the PDF outline by passing the `--with-toc` option: ```bash $ slidev export --with-toc ``` +### Transparent PNGs + +You can remove the default browser background by passing `--transparent`: + +```bash +$ slidev export --transparent +``` +The default browser background is the white background visible on all browser windows and is different than other backgrounds applied throughout the application using CSS styling. You will then need to apply additional CSS styling to the application to reveal the transparency. + +Here is a basic example that covers all backgrounds in the application: +```css +* { + background: transparent !important; + } +``` From 3ddd73d88448fd8440b0c55605355e358a4486db Mon Sep 17 00:00:00 2001 From: mo91dev <> Date: Sat, 3 Aug 2024 15:40:24 -0500 Subject: [PATCH 3/7] use nullish for transparency option instead of logical or --- packages/slidev/node/commands/export.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts index 1b8d3de9fb..cf8f887609 100644 --- a/packages/slidev/node/commands/export.ts +++ b/packages/slidev/node/commands/export.ts @@ -614,7 +614,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption withToc: withToc || false, perSlide: perSlide || false, scale: scale || 2, - transparent: transparent || false, + transparent: transparent ?? false, } } From 4e6bc8d1063f95697b2f6866c3c290fb31c1f5d8 Mon Sep 17 00:00:00 2001 From: mo91dev <> Date: Sat, 3 Aug 2024 16:14:18 -0500 Subject: [PATCH 4/7] add link to playwright for transparency feature docs --- docs/guide/exporting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md index 124fe1c472..e783928218 100644 --- a/docs/guide/exporting.md +++ b/docs/guide/exporting.md @@ -189,7 +189,7 @@ You can remove the default browser background by passing `--transparent`: ```bash $ slidev export --transparent ``` -The default browser background is the white background visible on all browser windows and is different than other backgrounds applied throughout the application using CSS styling. You will then need to apply additional CSS styling to the application to reveal the transparency. +The default browser background is the white background visible on all browser windows and is different than other backgrounds applied throughout the application using CSS styling. [See Playwright docs](https://playwright.dev/docs/api/class-page#page-screenshot-option-omit-background). You will then need to apply additional CSS styling to the application to reveal the transparency. Here is a basic example that covers all backgrounds in the application: ```css From ebc1be97f07d456e35b03cda99a4a687e89c0c97 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Sun, 4 Aug 2024 01:33:34 +0000 Subject: [PATCH 5/7] [autofix.ci] apply automated fixes --- docs/guide/exporting.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md index e783928218..719a99a65c 100644 --- a/docs/guide/exporting.md +++ b/docs/guide/exporting.md @@ -182,6 +182,7 @@ You can generate the PDF outline by passing the `--with-toc` option: ```bash $ slidev export --with-toc ``` + ### Transparent PNGs You can remove the default browser background by passing `--transparent`: @@ -189,11 +190,13 @@ You can remove the default browser background by passing `--transparent`: ```bash $ slidev export --transparent ``` + The default browser background is the white background visible on all browser windows and is different than other backgrounds applied throughout the application using CSS styling. [See Playwright docs](https://playwright.dev/docs/api/class-page#page-screenshot-option-omit-background). You will then need to apply additional CSS styling to the application to reveal the transparency. Here is a basic example that covers all backgrounds in the application: + ```css * { - background: transparent !important; - } + background: transparent !important; +} ``` From 6b3c36c7a7925d46f17a81aba2a65bc73152d581 Mon Sep 17 00:00:00 2001 From: mo91dev <> Date: Sun, 4 Aug 2024 18:37:48 -0500 Subject: [PATCH 6/7] rename transparent cli flag to omit-background --- docs/builtin/cli.md | 2 +- docs/guide/exporting.md | 4 ++-- packages/slidev/node/cli.ts | 2 +- packages/slidev/node/commands/export.ts | 13 +++++++------ packages/types/src/cli.ts | 2 +- 5 files changed, 12 insertions(+), 11 deletions(-) diff --git a/docs/builtin/cli.md b/docs/builtin/cli.md index bd459309f4..5ae9de52b0 100644 --- a/docs/builtin/cli.md +++ b/docs/builtin/cli.md @@ -74,7 +74,7 @@ Options: - `--dark` (`boolean`, default: `false`): export as dark theme. - `--with-clicks`, `-c` (`boolean`, default: `false`): export pages for every click animation (see https://sli.dev/guide/animations.html#click-animation). - `--theme`, `-t` (`string`): override theme. -- `--transparent` (`boolean`, default: `false`): remove the default browser background +- `--omit-background` (`boolean`, default: `false`): remove the default browser background ## `slidev format [entry]` {#format} diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md index 719a99a65c..1e7f3c3207 100644 --- a/docs/guide/exporting.md +++ b/docs/guide/exporting.md @@ -185,10 +185,10 @@ $ slidev export --with-toc ### Transparent PNGs -You can remove the default browser background by passing `--transparent`: +You can remove the default browser background by passing `--omit-background`: ```bash -$ slidev export --transparent +$ slidev export --omit-background ``` The default browser background is the white background visible on all browser windows and is different than other backgrounds applied throughout the application using CSS styling. [See Playwright docs](https://playwright.dev/docs/api/class-page#page-screenshot-option-omit-background). You will then need to apply additional CSS styling to the application to reveal the transparency. diff --git a/packages/slidev/node/cli.ts b/packages/slidev/node/cli.ts index e6c922726d..66d2554601 100644 --- a/packages/slidev/node/cli.ts +++ b/packages/slidev/node/cli.ts @@ -603,7 +603,7 @@ function exportOptions(args: Argv) { type: 'number', describe: 'scale factor for image export', }) - .option('transparent', { + .option('omit-background', { type: 'boolean', describe: 'export png pages without the default browser background', }) diff --git a/packages/slidev/node/commands/export.ts b/packages/slidev/node/commands/export.ts index cf8f887609..6744d6ccea 100644 --- a/packages/slidev/node/commands/export.ts +++ b/packages/slidev/node/commands/export.ts @@ -37,7 +37,7 @@ export interface ExportOptions { */ perSlide?: boolean scale?: number - transparent?: boolean + omitBackground?: boolean } interface ExportPngResult { @@ -184,7 +184,7 @@ export async function exportSlides({ perSlide = false, scale = 1, waitUntil, - transparent = false, + omitBackground = false, }: ExportOptions) { const pages: number[] = parseRangeString(total, range) @@ -405,7 +405,7 @@ export async function exportSlides({ const id = (await slideContainers.nth(i).getAttribute('id')) || '' const slideNo = +id.split('-')[0] const buffer = await slideContainers.nth(i).screenshot({ - omitBackground: transparent, + omitBackground, }) result.push({ slideIndex: slideNo - 1, buffer }) if (writeToDisk) @@ -419,7 +419,7 @@ export async function exportSlides({ const genScreenshot = async (no: number, clicks?: string) => { await go(no, clicks) const buffer = await page.screenshot({ - omitBackground: transparent, + omitBackground, }) result.push({ slideIndex: no - 1, buffer }) if (writeToDisk) { @@ -575,6 +575,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption executablePath: args['executable-path'], withToc: args['with-toc'], perSlide: args['per-slide'], + omitBackground: args['omit-background'], }), } const { @@ -591,7 +592,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption withToc, perSlide, scale, - transparent, + omitBackground, } = config outFilename = output || options.data.config.exportFilename || outFilename || `${path.basename(entry, '.md')}-export` if (outDir) @@ -614,7 +615,7 @@ export function getExportOptions(args: ExportArgs, options: ResolvedSlidevOption withToc: withToc || false, perSlide: perSlide || false, scale: scale || 2, - transparent: transparent ?? false, + omitBackground: omitBackground ?? false, } } diff --git a/packages/types/src/cli.ts b/packages/types/src/cli.ts index 099067622e..f2821d88ec 100644 --- a/packages/types/src/cli.ts +++ b/packages/types/src/cli.ts @@ -16,7 +16,7 @@ export interface ExportArgs extends CommonArgs { 'with-toc'?: boolean 'per-slide'?: boolean 'scale'?: number - 'transparent'?: boolean + 'omit-background'?: boolean } export interface BuildArgs extends ExportArgs { From 4b7aecefe24ab8b56ef72c9cb989cc8ed8efb522 Mon Sep 17 00:00:00 2001 From: _Kerman Date: Mon, 5 Aug 2024 10:33:24 +0800 Subject: [PATCH 7/7] docs: update --- docs/guide/exporting.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/guide/exporting.md b/docs/guide/exporting.md index 1e7f3c3207..cd834a2fa9 100644 --- a/docs/guide/exporting.md +++ b/docs/guide/exporting.md @@ -183,9 +183,9 @@ You can generate the PDF outline by passing the `--with-toc` option: $ slidev export --with-toc ``` -### Transparent PNGs +### Omit Background -You can remove the default browser background by passing `--omit-background`: +When exporting to PNGs, you can remove the default browser background by passing `--omit-background`: ```bash $ slidev export --omit-background