Skip to content

Add image lightbox opt-in and PDF lightbox support for cheatsheets#290

Open
gregswinehart wants to merge 4 commits into
mainfrom
gs/lightbox
Open

Add image lightbox opt-in and PDF lightbox support for cheatsheets#290
gregswinehart wants to merge 4 commits into
mainfrom
gs/lightbox

Conversation

@gregswinehart

Copy link
Copy Markdown
Collaborator

Summary

  • Add opt-in image lightbox functionality via lightbox: true frontmatter
  • Display full PDFs in lightbox for cheatsheet thumbnails instead of low-res images
  • Each thumbnail opens to its corresponding PDF page using #page=N fragments
  • Enhance code copy button styling with improved colors and animations

Features

Lightbox

  • Custom-built lightbox with accessibility features (ARIA roles, focus management, keyboard navigation)
  • Opens regular images in modal view for blog posts and other content
  • Opens full PDF in modal for cheatsheet thumbnails (click thumbnail 1 → PDF page 1, etc.)
  • Loading indicator and error handling for PDF display
  • Mobile touch panning support
  • Smooth animations and transitions

Code Copy Button

  • Updated icon colors (gray-400 default, gray-800 hover)
  • Green checkmark on successful copy
  • Animated checkmark "draw-in" effect
  • "Copied!" tooltip positioned above button

Test plan

  • Test lightbox on blog post images (opens image modal)
  • Test lightbox on cheatsheet thumbnails (opens PDF to correct page)
  • Verify PDF loading indicator appears and disappears correctly
  • Test error handling if PDF fails to load
  • Verify mobile touch panning works on images
  • Test keyboard navigation (Tab, Escape) in lightbox
  • Verify focus returns to trigger element on close
  • Test code copy button colors and animation
  • Verify "Copied!" tooltip appears correctly

🤖 Generated with Claude Code

gregswinehart and others added 3 commits June 3, 2026 01:30
Major improvements to image lightbox functionality:

**Accessibility:**
- Add ARIA dialog role and modal attributes
- Implement focus trap to keep focus within lightbox
- Add screen reader announcements for state changes
- Focus management: move to close button on open, restore on close
- Add title attribute to PDF iframe

**Error Handling:**
- Loading indicator with spinner for PDFs
- Error message for failed PDF loads
- 10-second timeout for slow loads
- Cross-browser iframe stopping on close
- Hugo build warnings for missing PDF/thumbnail files

**Mobile Support:**
- Responsive viewport sizing (95vw mobile, 90vw desktop)
- Touch panning support for images
- Pinch-to-zoom enabled via touch-action CSS

**Code Quality:**
- Extract magic numbers to named constants
- Add helper function to reduce duplication
- Fix memory leak: properly clear PDF load timeout
- Reset image transform on close
- Add explanatory comments for complex logic
- Consistent error handling across PDF/thumbnail lookups

**Security:**
- Add sandbox attribute to PDF iframe (allow-same-origin allow-scripts)

**Animation:**
- Separate animations for images (zoom) vs iframes (fade)
- Better cross-browser support for PDF transitions

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Each thumbnail now links to its corresponding page in the PDF using the
#page=N fragment. Removed sandbox attribute from PDF iframe to allow
same-origin PDF loading.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@netlify

netlify Bot commented Jun 3, 2026

Copy link
Copy Markdown

Deploy Preview for posit-open-source canceled.

Name Link
🔨 Latest commit be511a3
🔍 Latest deploy log https://app.netlify.com/projects/posit-open-source/deploys/6a21971485f7c900086b8ede

@github-actions

github-actions Bot commented Jun 3, 2026

Copy link
Copy Markdown

@gregswinehart gregswinehart changed the title Add image lightbox with PDF support for cheatsheets Add image lightbox opt-in and PDF lightbox support for cheatsheets Jun 4, 2026
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.

1 participant