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

oripka · 2024-03-12T16:02:26Z

This pull request introduces a new option for slide export. It allows for the creation of an A4 page with the slide on the top and the speaker notes on the bottom.

The footer of the pages is customizable using a custom component handout-bottom.vue, similar to global-bottom.vue for slides.

Optionally, it can create cover pages by passing the --cover option, which then renders another custom component handout-cover.vue. Both of these components need to be in your theme or project root.

I have added some example components to the starter.

Example Usage

cd demo/starter
node node_modules/@slidev/cli/bin/slidev.js export --handout --cover

The code creates 2 temporary files:

A cover PDF (also accessible via /cover)
A temporary handout PDF (also accessible via /handout), which forms the bottom part of the final handout

It then prepends the cover and merges slides and handouts. In this way, we can reuse the slide generation code. However, this breaks hyperlinks. Therefore, I have ensured to perform all necessary calculations to make them clickable also in the final PDF.

The final file will be: handout-slides-export.pdf

Caveat

This feature requires the inclusion of this pull request to work properly: #1419
Without it, each click exports a slide, which then desynchronizes the merge with the notes causing errors.

Possible enhancements.

Terminology

Since the term "notes" was already taken, I called the API "handout", but it might be confusing, as /handout is just a helper page to generate the lower part of the final handout and will be merged with the slides to create the final handout.

Fix `pageNumber` param

Somehow the pageNumber param does not get passed to HandoutBottom here: in PrintHandout.vue. This may be due to the way the component is imported. It would be nice to have, because for now, the page numbering is hardcoded in Slidev and not customizable.

Configure output name

Allow configuring the output name of the handout

handout-slides-export.pdf

… code

netlify · 2024-03-12T16:02:45Z

✅ Deploy Preview for slidev ready!

Name	Link
🔨 Latest commit	`3e20b97`
🔍 Latest deploy log	https://app.netlify.com/sites/slidev/deploys/661e1f5074cf8900082f8394
😎 Deploy Preview	https://deploy-preview-1421--slidev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

KermanX

Thanks for your contribution! I think this feature is quite useful. btw, the commits I pushed earlier contain no actual function-related changes.

KermanX · 2024-03-17T11:18:42Z

packages/slidev/node/commands/export.ts

Can we simplify the handout print logic here? There seems to be some duplicated code. And is that possible to have the cover and the content on a single page, so that we don't need to concat them and recalculate the links manually?

I kept the cover and content separate because I use the same cover layout not only for a slide handout but also for a lab guide hand out (which is another PDF but generated from a Nuxt content site).

In general I like the idea of having the content on a single page. Now that you mention it I don't remember why I did it in two steps..

By the way I generate the lab guide from a nuxt content site and the issue is that the content is not really structured in pages (or slides). Alas a single nuxt content page can stretch over various print pages. So one does not know exactly where to do a page break (which is not a problem with Slides). For this reason I just export all nuxt content articles to a single PDF (the browser automatically does the page breaks) and generate the footer with the page numbers separately using my slidev template. Of course this is very specific and certainly out of scope of Slidev. But I just wanted to mention my reason for implementing it in such a weird way ;)

packages/client/composables/useNav.ts

KermanX · 2024-03-17T11:21:36Z

packages/slidev/node/virtual/global-components.ts

+ join(root, 'HandoutBottom.vue'),
+ ]
+ }
+ else if (layer === 'handout-cover') {


I am not sure whether handout-cover should be a global layer or a layout.

KermanX · 2024-03-17T11:25:14Z

packages/client/pages/cover/print.vue

+const { isPrintMode } = useNav()
+
+watchEffect(() => {
+ const html = document.body.parentNode as HTMLElement


I think maybe we don't need a .print class here. Because when this component is loaded, the page must be in the print mode.

oripka · 2024-03-17T12:58:26Z

Thanks for your contribution! I think this feature is quite useful. btw, the commits I pushed earlier contain no actual function-related changes.

Thanks for having a look at it and cleaning it up. I really appreciate it. I fetched your changes and seems to work.

oripka · 2024-03-17T12:59:41Z

packages/client/internals/PrintHandout.vue


 <div class="">
- <HandoutBottom :pageNumber="index + 100" />
+ <HandoutBottom :page-number="index + 100" />
 <!-- I would like to do this in HandoutBottom, but somehow props don't get passed. -->


I think we can remove the hard-coded page numbering then

KermanX · 2024-04-16T06:51:15Z

Hello, there is an almost finished PR #1513 which allows users to provide their own print templates. Would that help?

oripka · 2024-04-16T06:53:16Z

@KermanX I synced the current pull request with main. Unfortunately, I did not get around yet to implement the changes you mentioned.

oripka · 2024-04-16T07:37:19Z

Hello, there is an almost finished PR #1513 which allows users to provide their own print templates. Would that help?

Ok, thanks for the info, I will have a look how to implement it using this PR.

oripka · 2024-04-16T16:04:13Z

Hello, there is an almost finished PR #1513 which allows users to provide their own print templates. Would that help?

So I am starting to use this the mentioned PR, works but I have one question and two issue I am stuck with.

How can I debug export easier, before I could go to /handout in the browser (with my code) but now that the --template parameter was introduced I don't understand how to do live debugging, as --template is only accepted when exporting and not when running in dev mode (so /print in dev mode is always the default print), so one always has to do a new export run to see the result. Makes development a bit painful.
This is a template I am working on, I am stuck on how to properly scale the slide to fit to the A4 page with margins etc. it always ends up looking bad as content is overflowing. I am sure I use the wrong way to do that (slideWidth.value, provideLocal(injectionSlideScale, computed(() => 0.7)).

<script setup lang="ts">
import { computed } from 'vue'
import { useNav } from '../../composables/useNav'

import NoteDisplay from '../../internals/NoteDisplay.vue'
import { usePrintStyle } from '../../composables/usePrintStyle'
import PrintSlide from '../../internals/PrintSlide.vue'
import { provideLocal } from '@vueuse/core'
import { injectionSlideScale } from '../../constants'
import { useStyleTag } from '@vueuse/core'


const { slidesToPrint, total } = useNav()
import { slideWidth } from '../../env'

slideWidth.value = 740
provideLocal(injectionSlideScale, computed(() => 1))
</script>

<template>
    <div class="w-full px-[1px]"> <!--1px helps to avoid cutting off a tiny bit of content by margins-->
        <div v-for="(slide, index) of slidesToPrint" :key="slide.no"
            class="mx-auto w-full flex flex-col gap-4 break-inside-avoid-page break-after-page">
            <div>

                <div class="relative border-1 border-red w-full">
                    <PrintSlide :key="slide.no" :route="slide" class="mx-auto w-full border-0.5 border-black" />
                </div>

                <div class="flex flex-col w-full mt-12">

                    <div class="h-124 border-red border-2">
                        <NoteDisplay v-if="slide.meta.slide.noteHTML" :note-html="slide.meta.slide.noteHTML"
                            class="max-w-full h-full" />
                    </div>

                    <div class="w-full flex flex-col gap-2">
                        <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() }} Company
                            </div>
                            <div class="top-3.0 absolute right-0 !text-[11px]">Title - Version</div>
                        </div>
                        <div class="text-right text-[11px] mt-6">
                        {{ index + 1 }} / {{ total }}
                    </div>

                    </div>
             
                </div>

            </div>
        </div>
    </div>
</template>

<style>
@page {
    size: A4;
    margin-top: 1.5cm;
    margin-bottom: 1cm;
}

/* overwrite the class in PrintSlideClick.vue, we want to break every slide
 * 794px fits A4
 * 1 px border (2x 0.5)
 * 26 px margin
 * 740 px slide width
*/
.print-slide-container {
    @apply relative overflow-hidden !break-after-avoid translate-0;
}


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: 1.5cm;
    margin-bottom: 1.0cm;
    margin-left: 1cm;
    margin-right: 1cm;
}
</style>

I also need to overwrite .print-slide-container to avoid page breaks after slides. Works but is a bit awkward to do it like that. Maybe this needs to be restructured as well

.print-slide-container {
    @apply relative overflow-hidden !break-after-avoid translate-0;
}

antfu · 2024-04-17T19:00:05Z

packages/client/setup/routes.ts

+ {
+ name: 'cover',
+ path: '/cover',
+ component: () => import('../pages/cover/print.vue'),


Can this component be in /handout without being a route?

antfu · 2024-04-17T19:01:10Z

packages/slidev/node/cli.ts

+ .option('cover', {
+ type: 'boolean',
+ describe: 'prepend cover to handout, needs handout-cover.vue in project',
+ })


I suppose we don't need this option? We could do it automatically when handout-cover.vue presents.

antfu · 2024-04-17T19:02:35Z

packages/slidev/node/cli.ts

+ .option('handout', {
+ type: 'boolean',
+ describe: 'Export handout with slides on top and notes on bottom, optionally prepending a cover',
+ })


Could be --type=handout (default to slides). So later, we could merge export-notes to --type=notes and unify into a single command.

Oh I see @KermanX is doing --template in #1513

We could first discuss there

oripka added 7 commits March 12, 2024 13:01

feat: Handouts wip

8f070b6

fix: margins and remove debugging bg colors

d37e759

fix: align naming

b1e4dab

fix: add to restart globs

0449640

chore: cleanup

0a037d6

refactor: export function include it in slide export as arg and reuse…

f4f1213

… code

fix: make examples more apt

c8aa976

oripka changed the title ~~feat: PDF handout (slides on top, notes bottom of page)~~ feat: PDF handout (slides on top, notes on bottom of page) Mar 12, 2024

oripka and others added 5 commits March 12, 2024 21:41

fix: make name work with relative and absolute paths

eac5d2f

fix: make other filenames work with rel and abs paths

dff0ee1

Merge branch 'main' into feat/handout

255dc6e

chore: format code and fix types

12c55cc

chore: autofix

3107954

KermanX approved these changes Mar 17, 2024

View reviewed changes

oripka commented Mar 17, 2024

View reviewed changes

oripka added 4 commits April 15, 2024 20:48

Merge branch 'main' into feat/handout

c2d0208

fix: readd routes to moves routes.ts file

78317aa

fix: make export work with handout and cover

dbe8dd6

Merge branch 'main' into feat/handout

3e20b97

antfu reviewed Apr 17, 2024

View reviewed changes

oripka mentioned this pull request Apr 17, 2024

feat: print templates, slide layers and rewrite export function #1513

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

oripka commented Mar 12, 2024 •

edited

netlify bot commented Mar 12, 2024 •

edited

KermanX left a comment

KermanX Mar 17, 2024

oripka Mar 17, 2024

oripka Mar 21, 2024 •

edited

KermanX Mar 17, 2024

KermanX Mar 17, 2024

oripka commented Mar 17, 2024 •

edited

oripka Mar 17, 2024

KermanX commented Apr 16, 2024

oripka commented Apr 16, 2024

oripka commented Apr 16, 2024

oripka commented Apr 16, 2024 •

edited

antfu Apr 17, 2024

antfu Apr 17, 2024

antfu Apr 17, 2024

antfu Apr 17, 2024

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

Are you sure you want to change the base?

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

Conversation

oripka commented Mar 12, 2024 • edited

Example Usage

Caveat

Possible enhancements.

Terminology

Fix pageNumber param

Configure output name

netlify bot commented Mar 12, 2024 • edited

✅ Deploy Preview for slidev ready!

KermanX left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oripka Mar 21, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oripka commented Mar 17, 2024 • edited

Choose a reason for hiding this comment

KermanX commented Apr 16, 2024

oripka commented Apr 16, 2024

oripka commented Apr 16, 2024

oripka commented Apr 16, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oripka commented Mar 12, 2024 •

edited

Fix `pageNumber` param

netlify bot commented Mar 12, 2024 •

edited

oripka Mar 21, 2024 •

edited

oripka commented Mar 17, 2024 •

edited

oripka commented Apr 16, 2024 •

edited