Skip to content

feat: add Export to PDF action on public profile page (#2604) - #3495

Open
aaniya22 wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
aaniya22:feat/print-profile-export-pdf-2604
Open

feat: add Export to PDF action on public profile page (#2604)#3495
aaniya22 wants to merge 1 commit into
Priyanshu-byte-coder:mainfrom
aaniya22:feat/print-profile-export-pdf-2604

Conversation

@aaniya22

Copy link
Copy Markdown
Contributor

closes #2604

Summary

Adds a "Print Profile / Export to PDF" action on the public profile page. Clicking the button triggers the browser's native window.print(), with @media print CSS overrides that hide navigation, share, and footer elements so the printed output shows a clean, card-based metrics layout.

Closes #2604


Type of Change

  • ✨ New feature (non-breaking change that adds functionality)

What Changed

  • Added src/components/ExportPdfButton.tsx — client button that triggers window.print()
  • Wired ExportPdfButton into src/app/u/[username]/page.tsx, placed alongside the compare buttons
  • Added print:hidden to the Share section, Powered-by-DevTrack footer, and other non-essential UI so they're excluded from the printed/PDF output
  • Added @media print rules in src/app/globals.css to strip shadows, flatten borders on card elements (.surface-card, [class*="rounded-2xl"]), and prevent cards from breaking across pages

How to Test

  1. Visit any public profile page, e.g. /u/<username>
  2. Click the new "Export to PDF" button near the top of the profile
  3. In the print preview dialog, confirm the layout shows only the profile cards — no nav, share buttons, or footer
  4. Save as PDF and confirm cards render cleanly without being cut across pages

Expected result: A clean, print-ready view of the profile stats with no interactive UI elements, matching the layout described in the issue.


Checklist

  • Linked the related issue above
  • Self-reviewed my own diff
  • No unnecessary console.log, debug code, or commented-out blocks
  • npm run lint passes locally
  • No TypeScript errors (npm run type-check)
  • Added or updated tests where applicable
  • Updated documentation / comments if behavior changed

Accessibility (UI changes only)

  • Keyboard navigation works correctly
  • Color contrast meets WCAG AA standard
  • ARIA labels / roles added where needed
  • Tested on mobile / responsive layout

Additional Context

No external dependencies added — uses native window.print() and CSS @media print per the issue's acceptance criteria.

@github-actions github-actions Bot added type:bug GSSoC type bonus: bug fix type:feature GSSoC type bonus: new feature type:design GSSoC type bonus: UI/design (+10 pts) type:performance GSSoC type bonus: performance (+15 pts) gssoc26 GSSoC 2026 contribution labels Aug 13, 2026
@github-actions

Copy link
Copy Markdown

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

  • level:beginner — 20 pts
  • level:intermediate — 35 pts
  • level:advanced — 55 pts
  • level:critical — 80 pts

Quality (optional):

  • quality:clean — ×1.2 multiplier
  • quality:exceptional — ×1.5 multiplier

Validation (required to score):

  • gssoc:approved — counts for points
  • gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

@aaniya22

Copy link
Copy Markdown
Contributor Author

The 2 failing tests (in ProfileQrModal.test.tsx and ShortcutsModal.test.tsx) are pre-existing failures on main, unrelated to this PR. I verified by running the same test files directly against main before my changes — they fail there too with identical errors. Nothing in this PR touches those files. Flagging here in case it's worth tracking as a separate issue.

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

Labels

gssoc26 GSSoC 2026 contribution type:bug GSSoC type bonus: bug fix type:design GSSoC type bonus: UI/design (+10 pts) type:feature GSSoC type bonus: new feature type:performance GSSoC type bonus: performance (+15 pts)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEAT] Add "Print Profile / Export to PDF" action on Public Profile Page

1 participant