Print overview/slide notes to PDF

[c-harding]

Is your feature request related to a problem? Please describe.
I would like to print out my presenter notes on paper, so that I can read from them if a second display is not available.

Describe the solution you'd like

• @media print rules on the /overview page such that I can use native browser tools to print the page.
• optionally, a print button on the same page.
• the ability to hide the sides or reduce their size.

Describe alternatives you've considered
I have not yet found a way to print this page, or otherwise export the notes.

Exporting the notes to markdown would also be acceptable.

[quinnypig]

Howdy! FWIW slidev export-notes already produces a PDF with each slide and its notes. That's different from making /overview printable, but probably solves the underlying problem.

[c-harding]

So it does! That seems to be completely missing from the current documentation (Google only leads me to https://docs-legacy.sli.dev/guide/exporting).

Additionally, it only contains the slides that have notes, and no slide preview.

[c-harding]

My current workaround is to add the following styles to the /overview page, and then print at 75% scale.

@media print {
    #app nav:has(+main) { /* Hide the left nav bar */
        display: none;
    }
    
    main>*>:nth-child(2)>:nth-child(2) { /* Hide each slide’s click progress bar */
        display: none;
    }
    
    main>* { /* Avoid page breaks within slides */
        break-inside: avoid;
    }
    
    html, body, #app, #app > div:has(>main), #app main { /* Override overflow rules */
        overflow: unset;
        max-width: 100vw;
    }
    
    #app .slidev-slide-content { /* Fix slide positioning (needed when in the lower half of the page) */
        transform: scale(var(--slidev-slide-scale));
        transform-origin: top left;
        left: unset;
        top: unset;
    }

    #app main + .top-0.right-0 { /* Hide total word count */
        display: none;
    }

    #app main > * > .bottom-0.right-0 { /* Hide slide word count */
        display: none;
    }
}

[c-harding]

I’ve now added a script to export the PDF using Playwright, using these same styles:

https://github.com/c-harding/frontend-quality-talk/blob/03a39cff4b076167dc68dc29f46cdc97bdc77c8a/setup/print-overview-pdf.mjs