Skip to content

feat: implement professional Export to PDF with optimized print media styles#202

Closed
Dev1822 wants to merge 1 commit into
Mohit-368:mainfrom
Dev1822:feature/export-pdf
Closed

feat: implement professional Export to PDF with optimized print media styles#202
Dev1822 wants to merge 1 commit into
Mohit-368:mainfrom
Dev1822:feature/export-pdf

Conversation

@Dev1822
Copy link
Copy Markdown

@Dev1822 Dev1822 commented May 28, 2026

Closes #197

Overview

This PR implements a robust, high-fidelity "Export to PDF" feature. It upgrades the simple "Print Preview" functionality to a polished, professional PDF export system. Using native browser print capabilities coupled with highly optimized print media stylesheets, it renders beautiful vector-scaled README documents without requiring heavy external dependencies.


Key Enhancements

1. Theme-Lock & High Contrast Contrast

  • Overrode and locked all :root markdown-rendering variables (--gh-preview-*) to light-mode values inside the print media query.
  • The exported PDF will always print in standard GitHub light-theme aesthetics (black text, light-gray code block borders, soft backgrounds, blue links) even if the user is editing in Dark Mode.

2. Auto-Zoom Resolution

  • Overrode the --preview-zoom variable to 1 !important for printing.
  • Custom client-side zoom scales on the preview window are automatically ignored during export, guaranteeing that the generated PDF prints at precisely 100% scale.

3. Full-length Printing (Preventing Viewport Cutoffs)

  • Set all parent container wrappers (html, body, #root, #app-builder, .main, .preview, .preview-body) to height: auto !important and overflow: visible !important.
  • This ensures that long, multi-page READMEs print in their entirety instead of getting clipped at the active screen/viewport boundary.

4. Page Break Optimizations

  • Applied break-inside: avoid / page-break-inside: avoid for code block wrappers (pre), blockquotes, tables, table rows (tr), list items (li), and images to prevent ugly horizontal splits.
  • Applied break-after: avoid for headings (h1-h6) so headers stay anchored to the paragraphs below them.

5. Interface De-cluttering (Chrome Removal)

  • Cleanly hides all layout elements including the main navbar, sidebars, dashboard headers, editor panel inputs, quality meters, back-to-top buttons, toasts, and overlays.

UI Changes

  • Added a new primary "Export to PDF" button to the main editor header right-side controls in ReadmeMaker.jsx with a clean SVG document icon.
  • Upgraded the existing button in the preview panel PreviewPanel.jsx from "Print Preview" to "Export to PDF" with matching icon, styles, and notification toasts.

Verification & Tests Done

  • Successfully built the application using the production compiler (npm run build) to ensure zero esbuild or linting errors.
  • Verified print layout previews in modern browsers:
    • Confirmed UI elements are hidden perfectly.
    • Confirmed light-mode values are locked and high-contrast is preserved.
    • Confirmed text scales cleanly and spans pages perfectly.

@Dev1822 Dev1822 closed this May 29, 2026
@Dev1822 Dev1822 deleted the feature/export-pdf branch May 29, 2026 21:15
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.

[Feature] Support exporting the generated README file to a PDF

1 participant