Skip to content

Conversation

@devin-ai-integration
Copy link
Contributor

Add PDF download functionality to landing page

Summary

Added a "Download PDF" button to the documentation landing page (buildwithfern.com/learn/home) that allows users to save the page as a PDF using their browser's print dialog. The implementation includes:

  • New pdf-download.js script that dynamically adds a download button to the hero section
  • Print-optimized CSS styles that hide navigation, animations, and other non-content elements
  • Auto-initialization that works with the site's SPA navigation
  • Button only appears on the /home route as requested

The solution uses the browser's native window.print() API, which opens the print dialog where users can select "Save as PDF" as the destination.

Review & Testing Checklist for Human

This PR has moderate risk due to limited automated testing capabilities. Please verify:

  • Test the actual PDF generation flow: Click the "Download PDF" button and verify the print dialog opens correctly, then save as PDF and review the output quality in Chrome, Firefox, and Safari
  • Review PDF print styles: Check that the generated PDF properly hides navigation/header/footer, maintains readable formatting, and handles page breaks appropriately
  • Verify button UX: The button currently says "Generating PDF..." but really just opens the print dialog - confirm this messaging is acceptable or if it should say "Print Page" instead
  • Check responsive behavior: Test that the button displays correctly on mobile/tablet viewports and that the print styles work on smaller screens
  • Confirm scope matches requirements: I interpreted "start by just adding one page to the PDF which is the landing page or the first guide" to mean adding a button to the landing page only. If you wanted the button on other pages or a multi-page PDF export, let me know and I can extend this.

Notes

  • The implementation is scoped to only the /home route to keep the initial rollout contained
  • URLs are appended to links in the printed version (can be adjusted if too cluttered)
  • The print styles hide Rive animations and canvas elements since they don't render well in PDFs
  • This can be extended to other pages by modifying the path check in addPdfDownloadButton()

Link to Devin run: https://app.devin.ai/sessions/0b901c6bca8e4a429dc8f15595515048
Requested by: Deep Singhvi (@dsinghvi)

- Created pdf-download.js script that adds a 'Download PDF' button to the home page
- Button triggers browser's print dialog which can save as PDF
- Added print-specific CSS styles to optimize PDF output
- Registered the script in docs.yml to load on all pages
- Button only appears on the home page (/home route)

Co-Authored-By: Deep Singhvi <[email protected]>
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@dsinghvi dsinghvi closed this Oct 23, 2025
@github-actions
Copy link
Contributor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants