feat: Add ability to print the overview

docs/guide/exporting.md

@@ -199,6 +199,16 @@ You can generate the PDF outline by passing the `--with-toc` option:
 $ slidev export --with-toc
 ```
 
+### Overview
+
+You can export the overview page (slides with presenter notes side by side) as an A4 portrait PDF by passing the `--overview` option:
+
+```bash
+$ slidev export --overview
+```
+
+This is useful when you want a printable summary of your entire presentation including all speaker notes. Each slide is rendered alongside its notes, and slides are never split across page boundaries.
+
 ### Omit Background
 
 When exporting to PNGs, you can remove the default browser background by passing `--omit-background`:

packages/client/logic/utils.ts

@@ -1,5 +1,20 @@
 import { parseRangeString } from '@slidev/parser/core'
 
+export function wordCount(str: string) {
+  const pattern = /[\w`'\-\u0392-\u03C9\u00C0-\u00FF\u0600-\u06FF\u0400-\u04FF]+|[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF\u3040-\u309F\uAC00-\uD7AF]+/g
+  const m = str.match(pattern)
+  let count = 0
+  if (!m)
+    return 0
+  for (let i = 0; i < m.length; i++) {
+    if (m[i].charCodeAt(0) >= 0x4E00)
+      count += m[i].length
+    else
+      count += 1
+  }
+  return count
+}
+
 export function makeId(length = 5) {
   const result = []
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'

packages/client/pages/overview.vue

@@ -14,6 +14,7 @@ import SlideContainer from '../internals/SlideContainer.vue'
 import SlideWrapper from '../internals/SlideWrapper.vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { getSlidePath } from '../logic/slides'
+import { wordCount } from '../logic/utils'
 
 const cardWidth = 450
 
@@ -48,23 +49,6 @@ function toggleRoute(route: SlideRoute) {
     activeSlide.value = route
 }
 
-function wordCount(str: string) {
-  const pattern = /[\w`'\-\u0392-\u03C9\u00C0-\u00FF\u0600-\u06FF\u0400-\u04FF]+|[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF\u3040-\u309F\uAC00-\uD7AF]+/g
-  const m = str.match(pattern)
-  let count = 0
-  if (!m)
-    return 0
-  for (let i = 0; i < m.length; i++) {
-    if (m[i].charCodeAt(0) >= 0x4E00) {
-      count += m[i].length
-    }
-    else {
-      count += 1
-    }
-  }
-  return count
-}
-
 function isElementInViewport(el: HTMLElement) {
   const rect = el.getBoundingClientRect()
   const delta = 20

packages/client/pages/overview/print.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { ClicksContext, SlideRoute } from '@slidev/types'
+import { useHead } from '@unhead/vue'
+import { useStyleTag } from '@vueuse/core'
+import { computed } from 'vue'
+import { createFixedClicks } from '../../composables/useClicks'
+import { useNav } from '../../composables/useNav'
+import { CLICKS_MAX } from '../../constants'
+import { configs } from '../../env'
+import NoteDisplay from '../../internals/NoteDisplay.vue'
+import SlideContainer from '../../internals/SlideContainer.vue'
+import SlideWrapper from '../../internals/SlideWrapper.vue'
+import { wordCount } from '../../logic/utils'
+
+const cardWidth = 400
+
+useStyleTag(`
+@page {
+  size: A4;
+  margin-top: 1.5cm;
+  margin-bottom: 1cm;
+}
+* {
+  -webkit-print-color-adjust: exact;
+}
+html,
+html body,
+html #app,
+html #page-root {
+  height: auto;
+  overflow: auto !important;
+}
+`)
+
+useHead({
+  title: `Overview - ${configs.title}`,
+})
+
+const { slides } = useNav()
+
+const clicksContextMap = new WeakMap<SlideRoute, ClicksContext>()
+function getClicksContext(route: SlideRoute) {
+  if (!clicksContextMap.has(route))
+    clicksContextMap.set(route, createFixedClicks(route, CLICKS_MAX))
+  return clicksContextMap.get(route)!
+}
+
+const wordCounts = computed(() => slides.value.map(route => wordCount(route.meta?.slide?.note || '')))
+const totalWords = computed(() => wordCounts.value.reduce((a, b) => a + b, 0))
+</script>
+
+<template>
+  <div id="page-root">
+    <div class="mx-4 mt-4 mb-2 flex items-baseline gap-4">
+      <h1 class="text-3xl font-bold">
+        {{ configs.title }}
+      </h1>
+      <div class="opacity-50 text-sm">
+        {{ slides.length }} slides · {{ totalWords }} words · {{ new Date().toLocaleString() }}
+      </div>
+    </div>
+
+    <div
+      v-for="(route, idx) of slides"
+      :key="route.no"
+      class="flex gap-4 mx-4 py-3 border-t border-gray/20 break-inside-avoid-page"
+    >
+      <div class="shrink-0 flex flex-col items-center w-10">
+        <div class="text-2xl opacity-25 font-mono">
+          {{ idx + 1 }}
+        </div>
+      </div>
+      <div class="shrink-0" :style="{ width: `${cardWidth}px` }">
+        <div class="border rounded border-gray/20 overflow-hidden">
+          <SlideContainer
+            :key="route.no"
+            :width="cardWidth"
+            class="pointer-events-none"
+          >
+            <SlideWrapper
+              :clicks-context="getClicksContext(route)"
+              :route="route"
+              render-context="overview"
+            />
+          </SlideContainer>
+        </div>
+      </div>
+      <div class="flex-1 min-w-0 pt-1">
+        <NoteDisplay
+          v-if="route.meta?.slide?.noteHTML"
+          :note-html="route.meta.slide.noteHTML"
+          class="max-w-full text-sm"
+          :clicks-context="getClicksContext(route)"
+        />
+        <div v-else class="opacity-30 italic text-sm">
+          No notes for this slide
+        </div>
+        <div v-if="wordCounts[idx] > 0" class="opacity-30 text-xs mt-2">
+          {{ wordCounts[idx] }} words
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/client/setup/routes.ts

@@ -71,6 +71,11 @@ export default function setupRoutes() {
         component: () => import('../pages/presenter/print.vue'),
         beforeEnter: passwordGuard,
       },
+      {
+        path: '/overview/print',
+        component: () => import('../pages/overview/print.vue'),
+        beforeEnter: passwordGuard,
+      },
     )
   }
 

packages/slidev/node/cli.ts

@@ -457,7 +457,7 @@ cli.command(
     .help(),
   async (args) => {
     const { entry, theme } = args
-    const { exportSlides, getExportOptions } = await import('./commands/export')
+    const { exportSlides, exportOverview, getExportOptions } = await import('./commands/export')
     const candidatePort = await getPort(12445)
 
     let warned = false
@@ -485,10 +485,26 @@ cli.command(
         await server.listen(candidatePort)
         const port = getViteServerPort(server)
         printInfo(options)
-        const result = await exportSlides({
-          port,
-          ...getExportOptions({ ...args, entry: entryFile }, options),
-        })
+
+        let result: string
+        if (args.overview) {
+          const exportOpts = getExportOptions({ ...args, entry: entryFile }, options)
+          result = await exportOverview({
+            port,
+            output: args.output || `${path.basename(entryFile, '.md')}-overview`,
+            timeout: exportOpts.timeout,
+            wait: exportOpts.wait,
+            dark: exportOpts.dark,
+            waitUntil: exportOpts.waitUntil,
+            executablePath: exportOpts.executablePath,
+          })
+        }
+        else {
+          result = await exportSlides({
+            port,
+            ...getExportOptions({ ...args, entry: entryFile }, options),
+          })
+        }
         console.log(`${green('  ✓ ')}${dim('exported to ')}${result}\n`)
       }
       finally {
@@ -649,6 +665,10 @@ function exportOptions<T>(args: Argv<T>) {
       type: 'boolean',
       describe: 'export png pages without the default browser background',
     })
+    .option('overview', {
+      type: 'boolean',
+      describe: 'export the overview page (slides + notes) as a single PDF',
+    })
 }
 
 function printInfo(

packages/slidev/node/commands/export.ts

@@ -162,6 +162,64 @@ export async function exportNotes({
   return output
 }
 
+export interface ExportOverviewOptions {
+  port?: number
+  base?: string
+  output?: string
+  timeout?: number
+  wait?: number
+  dark?: boolean
+  waitUntil?: 'networkidle' | 'load' | 'domcontentloaded' | undefined
+  executablePath?: string
+}
+
+export async function exportOverview({
+  port = 18724,
+  base = '/',
+  output = 'slides-overview',
+  timeout = 30000,
+  wait = 0,
+  dark = false,
+  waitUntil,
+  executablePath,
+}: ExportOverviewOptions): Promise<string> {
+  if (!output.endsWith('.pdf'))
+    output = `${output}.pdf`
+
+  const { chromium } = await importPlaywright()
+  const browser = await chromium.launch({ executablePath })
+  const context = await browser.newContext()
+  const page = await context.newPage()
+
+  const progress = createSlidevProgress(true)
+  progress.start(1)
+
+  await page.goto(`http://localhost:${port}${base}overview/print`, { waitUntil: waitUntil || 'networkidle', timeout })
+  await page.waitForLoadState('networkidle')
+  await page.emulateMedia({ colorScheme: dark ? 'dark' : 'light', media: 'screen' })
+
+  if (wait)
+    await page.waitForTimeout(wait)
+
+  await page.pdf({
+    path: output,
+    margin: {
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0,
+    },
+    printBackground: true,
+    preferCSSPageSize: true,
+  })
+
+  progress.stop()
+  browser.close()
+
+  const relativeOutput = slash(relative('.', output))
+  return relativeOutput.startsWith('.') ? relativeOutput : `./${relativeOutput}`
+}
+
 export async function exportSlides({
   port = 18724,
   total = 0,

packages/types/src/cli.ts

@@ -17,6 +17,7 @@ export interface ExportArgs extends CommonArgs {
   'per-slide'?: boolean
   'scale'?: number
   'omit-background'?: boolean
+  'overview'?: boolean
 }
 
 export interface BuildArgs extends ExportArgs {