fix: respect aspect ratio for exporting

Author: antfu

packages/slidev/node/build.ts

@@ -113,6 +113,8 @@ export async function build(
       output: join(config.build.outDir, 'slidev-exported.pdf'),
       base: config.base,
       dark: options.data.config.colorSchema === 'dark',
+      width: 1920,
+      height: Math.round(1920 / options.data.config.aspectRatio),
     })
     server.close()
   }

packages/slidev/node/cli.ts

@@ -276,6 +276,8 @@ cli.command(
     await server.listen(port)
     printInfo(options)
     parser.filterDisabled(options.data)
+    const width = 1920
+    const height = Math.round(width / options.data.config.aspectRatio)
     output = await exportSlides({
       port,
       total: options.data.slides.length,
@@ -285,6 +287,8 @@ cli.command(
       timeout,
       dark,
       routerMode: options.data.config.routerMode,
+      width,
+      height,
     })
     console.log(`${green('  ✓ ')}${dim('exported to ')}./${output}\n`)
     server.close()

packages/slidev/node/export.ts

@@ -16,6 +16,8 @@ export interface ExportOptions {
   timeout?: number
   dark?: boolean
   routerMode?: 'hash' | 'history'
+  width?: number
+  height?: number
 }
 
 function createSlidevProgress() {
@@ -64,6 +66,8 @@ export async function exportSlides({
   timeout = 500,
   dark = false,
   routerMode = 'history',
+  width = 1920,
+  height = 1080,
 }: ExportOptions) {
   if (!packageExists('playwright-chromium'))
     throw new Error('The exporting for Slidev is powered by Playwright, please installed it via `npm i playwright-chromium`')
@@ -72,8 +76,8 @@ export async function exportSlides({
   const browser = await chromium.launch()
   const context = await browser.newContext({
     viewport: {
-      width: 1920,
-      height: 1080,
+      width,
+      height,
     },
     deviceScaleFactor: 1,
   })
@@ -105,8 +109,8 @@ export async function exportSlides({
     for (const i of pages) {
       await go(i)
       const pdf = await page.pdf({
-        width: 1920,
-        height: 1080,
+        width,
+        height,
         margin: {
           left: 0,
           top: 0,