Fix CV PDF export layout and preserve scroll-reveal animations#57
Open
google-labs-jules[bot] wants to merge 2 commits into
Open
Conversation
Contributor
Author
|
[CI/CD Fix Attempt 1] Fixed Prettier formatting issue in |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR resolves critical rendering issues with the client-side CV PDF export functionality. It ensures a complete, clean PDF render (with off-screen elements fully visible and web-only interactive links omitted) while completely preserving the integrity and state of scroll-reveal animations on the live web page post-export.
Why These Changes are Necessary
Previously, generating a PDF of the CV was prone to timing mismatches and layout issues:
html2pdf) was triggered synchronously right after settingshowLinks = false. Because Svelte's DOM updates are batched, the snapshot was often taken before the DOM updated, resulting in web-only links appearing in the final PDF.IntersectionObserverbindings and animation states, ruining the interactive web experience once the export was complete.Key Architectural Decisions
exportCVPDF()insrc/routes/cv/+page.svelteto an async flow. By utilizing Svelte's nativetick(), we guarantee that Svelte's reactive rendering queue finishes updating the DOM and web-only elements are fully omitted before the PDF compiler takes its snapshot..revealand.reveal-staggerclasses on individual elements (which broke active observers), we keep these classes static. During the export process, we temporarily append an.exporting-pdfclass todocument.body..exporting-pdfscope, we apply clean CSS overrides to force complete visibility and bypass transforms/transitions on all revealable elements for the PDF engine without modifying their actual state:try...finallyblock. This guarantees that regardless of compilation success or failure, the.exporting-pdfclass is removed andshowLinksis restored, bringing back default interactive behaviors with zero UI flicker, layout shift, or page reloads.Detailed Changes
src/routes/cv/+page.svelte:exportCVPDFto beasync.await tick()after updatingshowLinks = false..exporting-pdfclass ondocument.bodyinside atry...finallyblock..revealand.reveal-staggerstatic.src/app.css:.exporting-pdfclass to force instant layout rendering for hidden off-screen elements.Verification & Acceptance Criteria