feat: PDF handout (slides on top, notes on bottom of page)

demo/starter/handout-bottom.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="print w-full absolute bottom-[75px]">
+    <div class="h-[1px] bg-black w-full" />
+    <div class="mt-2 relative">
+      <div class="top-3.0 absolute left-0 !text-[11px]">
+        © {{ new Date().getFullYear() }} Slidev
+      </div>
+      <div class="top-3.0 absolute right-0 !text-[11px]">
+        Presentation slides for developers
+      </div>
+    </div>
+  </div>
+
+</template>

demo/starter/handout-cover.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <div class="break-after-page">
+      <span class="font-bold text-xl border-b-4 border-r-4 px-1 py-1 border-gray-800 ">
+        SLIDEV
+      </span>
+      <div class="h-56" />
+      <div class="max-w-md w-full mx-auto">
+        <div class="w-120 mx-auto font-bold flex flex-wrap gap-4">
+          <h1 class="text-5xl font-bold border-b-4 border-gray-800">
+            Welcome to Slidev
+          </h1>
+          v1.0
+        </div>
+        <div class="h-32" />
+        <div class="text-2xl font-bold mx-auto w-120 text-right">
+          Slidev Starter Template
+        </div>
+      </div>
+    </div>
+    <div class="break-after-page mt-68 ">
+      <div class="font-bold text-xl mt-8">
+        COPYRIGHT
+      </div>
+      <div class="flex flex-row gap-4 mt-4 align-center items-center">
+        © {{ new Date().getFullYear().toString() }} Slidev.
+      </div>
+      <p class="mt-4">
+        Permission is hereby granted, free of charge, to any person obtaining a copy
+        of this software and associated documentation files (the "Software"), to deal
+        in the Software without restriction, including without limitation the rights
+        to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+        copies of the Software, and to permit persons to whom the Software is
+        furnished to do so, subject to the following conditions:
+      </p>
+      <p class="mt-4">
+        The above copyright notice and this permission notice shall be included in all
+        copies or substantial portions of the Software.
+      </p>
+      <p class="mt-4">
+        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+        IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+        FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+        AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+        LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+        OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+        SOFTWARE.
+      </p>
+    </div>
+  </div>
+</template>

packages/client/composables/useNav.ts

@@ -72,6 +72,7 @@ export interface SlidevContextNavState {
   currentRoute: ComputedRef<RouteLocationNormalized>
   isPrintMode: ComputedRef<boolean>
   isPrintWithClicks: ComputedRef<boolean>
+  isHandout: ComputedRef<boolean>
   isEmbedded: ComputedRef<boolean>
   isPlaying: ComputedRef<boolean>
   isPresenter: ComputedRef<boolean>
@@ -279,7 +280,8 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     router.currentRoute.value.query
     return new URLSearchParams(location.search)
   })
-  const isPrintMode = computed(() => query.value.has('print'))
+  const isHandout = computed(() => currentRoute.value.query.handout !== undefined || currentRoute.value.path.startsWith('/handout'))
+  const isPrintMode = computed(() => currentRoute.value.query.print !== undefined || isHandout.value)
   const isPrintWithClicks = computed(() => query.value.get('print') === 'clicks')
   const isEmbedded = computed(() => query.value.has('embedded'))
   const isPlaying = computed(() => currentRoute.value.name === 'play')
@@ -345,6 +347,7 @@ const useNavState = createSharedComposable((): SlidevContextNavState => {
     currentRoute,
     isPrintMode,
     isPrintWithClicks,
+    isHandout,
     isEmbedded,
     isPlaying,
     isPresenter,

packages/client/internals/PrintContainerHandout.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { parseRangeString } from '@slidev/parser/core'
+import { useNav } from '../composables/useNav'
+import PrintHandout from './PrintHandout.vue'
+
+const { slides, currentRoute } = useNav()
+
+// In print mode, the routes will never change. So we don't need reactivity here.
+let routes = slides.value
+if (currentRoute.value.query.range) {
+  const r = parseRangeString(routes.length, currentRoute.value.query.range as string)
+  routes = r.map(i => routes[i - 1])
+}
+</script>
+
+<template>
+  <div id="print-container">
+    <div id="print-content">
+      <PrintHandout v-for="(route, index) of routes" :key="route.no" :route="route" :index="index" />
+      <div class="break-after-page h-130" />
+    </div>
+    <slot name="controls" />
+  </div>
+</template>
+
+<style lang="postcss">
+#print-content {
+  @apply bg-main;
+}
+.print-slide-container {
+  @apply relative overflow-hidden break-after-page translate-0;
+}
+</style>

packages/client/internals/PrintHandout.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { SlideRoute } from '@slidev/types'
+import { computed } from 'vue'
+import NoteDisplay from './NoteDisplay.vue'
+import { HandoutBottom } from '#slidev/global-layers'
+
+const props = defineProps<{
+  route: SlideRoute
+  index: number
+}>()
+const route = computed(() => props.route)
+</script>
+
+<template>
+  <div class="break-after-page">
+    <!-- A4 specific, figure out better customization -->
+    <div class="w-full mt-104 h-176 flex flex-col relative overflow-hidden">
+      <NoteDisplay
+        v-if="route.meta?.slide!.noteHTML" :note-html="route.meta?.slide!.noteHTML"
+        class="w-full mx-auto px-2 handout-notes"
+      />
+
+      <div class="">
+        <HandoutBottom :page-number="index + 100" />
+        <!-- I would like to do this in HandoutBottom, but somehow props don't get passed. -->
+        <div class="absolute bottom-5 right-12 text-right text-[11px]">
+          {{ index + 1 }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.handout-notes {
+  @apply max-w-186;
+  /* Overwrite if necessary: A4 specific */
+}
+</style>

packages/client/pages/cover/print.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { useNav } from '../../composables/useNav'
+import { themeVars } from '../../env'
+import { HandoutCover } from '#slidev/global-layers'
+
+const { isPrintMode } = useNav()
+
+watchEffect(() => {
+  const html = document.body.parentNode as HTMLElement
+  if (isPrintMode.value)
+    html.classList.add('print')
+  else
+    html.classList.remove('print')
+})
+</script>
+
+<template>
+  <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
+    <HandoutCover />
+  </div>
+</template>
+
+<style>
+html.print,
+html.print body,
+html.print #app {
+  height: auto;
+  overflow: auto;
+}
+
+html.print #page-root {
+  height: auto;
+  overflow: hidden;
+}
+
+html.print * {
+  -webkit-print-color-adjust: exact;
+}
+
+html.print {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+html.print body {
+  margin: 0 auto;
+  border: 0;
+  padding: 0;
+  float: none;
+  overflow: visible;
+}
+
+@page {
+  size: A4;
+  margin-top: 1cm;
+  margin-bottom: 1cm;
+  margin-left: 1.5cm;
+  margin-right: 1.5cm;
+}
+</style>

packages/client/pages/handout/print.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { watchEffect } from 'vue'
+import { windowSize } from '../../state'
+import { useNav } from '../../composables/useNav'
+import { themeVars } from '../../env'
+import PrintContainerHandout from '../../internals/PrintContainerHandout.vue'
+
+const { isPrintMode } = useNav()
+
+watchEffect(() => {
+  const html = document.body.parentNode as HTMLElement
+  if (isPrintMode.value)
+    html.classList.add('print')
+  else
+    html.classList.remove('print')
+})
+</script>
+
+<template>
+  <div id="page-root" class="grid grid-cols-[1fr_max-content]" :style="themeVars">
+    <PrintContainerHandout class="w-full h-full" :width="windowSize.width.value" />
+  </div>
+</template>
+
+<style>
+html.print,
+html.print body,
+html.print #app {
+  height: auto;
+  overflow: auto;
+}
+html.print #page-root {
+  height: auto;
+  overflow: hidden;
+}
+html.print * {
+  -webkit-print-color-adjust: exact;
+}
+html.print {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+html.print body {
+  margin: 0 auto;
+  border: 0;
+  padding: 0;
+  float: none;
+  overflow: visible;
+}
+
+@page {
+  size: A4;
+  margin-top: 0cm;
+  margin-bottom: 0cm;
+  margin-left: 0cm;
+  margin-right: 0cm;
+}
+</style>

packages/client/setup/routes.ts

@@ -61,6 +61,16 @@ export default function setupRoutes() {
         path: '/presenter/print',
         component: () => import('../pages/presenter/print.vue'),
       },
+      {
+        name: 'handout',
+        path: '/handout',
+        component: () => import('../pages/handout/print.vue'),
+      },
+      {
+        name: 'cover',
+        path: '/cover',
+        component: () => import('../pages/cover/print.vue'),
+      },
     )
   }
 

packages/slidev/node/cli.ts

@@ -37,6 +37,8 @@ const CONFIG_RESTART_FIELDS: (keyof SlidevConfig)[] = [
 const FILES_CREATE_RESTART = [
   'global-bottom.vue',
   'global-top.vue',
+  'handout-bottom.vue',
+  'handout-cover.vue',
   'uno.config.js',
   'uno.config.ts',
   'unocss.config.js',
@@ -603,6 +605,14 @@ function exportOptions<T>(args: Argv<T>) {
       type: 'boolean',
       describe: 'export png pages without the default browser background',
     })
+    .option('cover', {
+      type: 'boolean',
+      describe: 'prepend cover to handout, needs handout-cover.vue in project',
+    })
+    .option('handout', {
+      type: 'boolean',
+      describe: 'Export handout with slides on top and notes on bottom, optionally prepending a cover',
+    })
 }
 
 function printInfo(