Skip to content

Add print / save-as-PDF button (v1.2.0) - #12

Merged
impuls42 merged 2 commits into
mainfrom
claude/kind-ptolemy-fbbmo3
Jun 15, 2026
Merged

impuls42 merged 2 commits into
mainfrom
claude/kind-ptolemy-fbbmo3

Conversation

@impuls42

Copy link
Copy Markdown
Member

What

Adds a floating printer-icon button to the CV layout that opens the browser's native print / save-as-PDF dialog via window.print().

[printer button] — a round icon button pinned to the bottom-right corner on screen.

Why

The theme is already "Print/PDF friendly", but there was no in-page affordance to actually trigger printing — users had to know the Ctrl/Cmd+P shortcut. This adds a one-click control while keeping the printed output itself unchanged.

How

  • _layouts/cv.html — a <button class="cv-print-button" onclick="window.print()"> with a stroke-based printer SVG, placed at the top of the <article class="cv">. It carries aria-label/title for accessibility and the same data-ym-goal / data-goatcounter-click hooks as the other contact/social actions, so the click is tracked consistently.
  • assets/css/main.scss — .cv-print-button styles (round, fixed bottom-right, hover/focus color invert, simple CSS transition) and a display: none !important rule inside the existing @media print block so the button never appears in the PDF/printout.
  • Versioning/docs — VERSION 1.1.4 → 1.2.0 (additive feature → MINOR), plus CHANGELOG.md and the README feature list.

It's a progressive enhancement: the native dialog is the only way to trigger print programmatically, and Ctrl/Cmd+P still works if JavaScript is disabled.

Verification

Built the bundled demo site exactly as CI does (jekyll build --config _config.demo.yml, JEKYLL_ENV=production) — build succeeds, and the rendered output confirms:

  • index.html contains the button with onclick="window.print()",
  • compiled main.css contains the .cv-print-button rules, and
  • the @media print block hides it.

Rollout note

alex-cv consumes this theme as a gem pinned to a release tag, so it won't pick up the button until a v1.2.0 tag is cut and its Gemfile is bumped. Happy to open that follow-up PR on alex-cv once the tag exists.

https://claude.ai/code/session_01HiSz9TstL29dWNBT1xB5wA


Generated by Claude Code

claude and others added 2 commits June 15, 2026 21:34
Add a floating printer-icon button to the CV layout that opens the
browser's native print dialog via window.print(). It is pinned to the
bottom-right corner on screen and hidden from the printed output itself
through the existing @media print block, so it never shows up in the
PDF/printout.

The button carries the same data-ym-goal / data-goatcounter-click hooks
as the other contact and social actions so the click is tracked, and
exposes an aria-label/title for accessibility. Bump VERSION to 1.2.0
(additive feature) and document it in the changelog and README.

https://claude.ai/code/session_01HiSz9TstL29dWNBT1xB5wA
Captures the floating print/save-as-PDF button in context (full-page
viewport) and its default + hover/focus (color-inverted) states, so the
README feature line for the print button has a visual reference.
@impuls42

Copy link
Copy Markdown
Member Author

Verified locally:

  • git fetch origin pull/12/head and checked out the PR branch.
  • Built with jekyll build --config _config.demo.yml against ruby:3.2-slim (Jekyll 4.4.1) — build succeeds.
  • Confirmed in the generated _site/: index.html carries <button class="cv-print-button" onclick="window.print()">, compiled main.css contains the .cv-print-button rules, and the @media print block hides it (display: none !important).
  • Served on http://localhost:4000 and screenshotted with headless Chrome.

Full page — printer-icon button pinned to the bottom-right:

Print button in page context

Default vs. hover/focus — color-inverted on interaction, matching the CSS:

Default and hover states

I also pushed these PNGs to docs/screenshots/ and embedded them in the README feature line for the print button — see commit 037c695. Happy to drop that commit if you'd rather keep the screenshots out of the repo.

@impuls42
impuls42 merged commit 48eca2b into main Jun 15, 2026
1 check passed
@impuls42
impuls42 deleted the claude/kind-ptolemy-fbbmo3 branch June 15, 2026 23:16
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