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

demo/starter/handout-bottom.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineProps<{
+ pageNumber: number
+}>()
+</script>
+
+<template>
+ <div class="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>
+ <!-- TODO: props not getting passed -->
+ <div class="absolute bottom-5 right-0 text-right text-[11px] ">
+ {{ pageNumber }}
+ </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>

demo/starter/slides.md

@@ -635,3 +635,7 @@ class: text-center
 # Learn More
 
 [Documentations](https://sli.dev) · [GitHub](https://github.com/slidevjs/slidev) · [Showcases](https://sli.dev/showcases.html)
+
+<!--
+The END
+-->

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>
@@ -277,7 +278,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')
@@ -348,6 +350,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-components/handout-bottom'
+
+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-0 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-components/handout-cover'
+
+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

@@ -43,6 +43,8 @@ const CONFIG_RESTART_FIELDS: (keyof SlidevConfig)[] = [
 const FILES_CREATE_RESTART_GLOBS = [
  'global-bottom.vue',
  'global-top.vue',
+ 'handout-bottom.vue',
+ 'handout-cover.vue',
  'uno.config.js',
  'uno.config.ts',
  'unocss.config.js',
@@ -611,6 +613,14 @@ function exportOptions<T>(args: Argv<T>) {
  type: 'number',
  describe: 'scale factor for image export',
  })
+ .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(