Skip to content

Add image lightbox for blog posts#58

Open
riccjohn wants to merge 2 commits intomainfrom
feat/image-lightbox
Open

Add image lightbox for blog posts#58
riccjohn wants to merge 2 commits intomainfrom
feat/image-lightbox

Conversation

@riccjohn
Copy link
Copy Markdown
Owner

@riccjohn riccjohn commented Apr 9, 2026

Summary

  • Adds `src/components/Lightbox.astro` — a self-contained click-to-enlarge lightbox using native `` + vanilla JS, no libraries
  • Integrates into `BlogPost.astro` via `` — layout stays clean
  • Hero image opted out via `data-no-lightbox`

Features

  • Click any in-article image to open it enlarged (scales to fill 85vw × 75vh)
  • Close via backdrop click, Escape key, close button, or clicking the enlarged image
  • Loading skeleton for large/slow images (e.g. GIFs), sized to the expected image dimensions
  • Terminal aesthetic: sharp borders, monospace caption with `//` prefix, cyan accent on hover
  • Respects `prefers-reduced-motion` (skeleton animation disabled)

Test plan

  • Click an in-article image — lightbox opens with image enlarged
  • Click outside (backdrop) — closes
  • Press Escape — closes
  • Click the ✕ button — closes
  • Click the enlarged image — closes
  • Check the whac-a-mole post GIF — skeleton appears briefly before image loads
  • Hero image — should NOT open a lightbox
  • Mobile (375px) — centered, usable

All 8 criteria verified with Playwright.

🤖 Generated with Claude Code

Clicking any article image opens it enlarged in a centered modal overlay.
Closes on backdrop click, Escape, close button, or clicking the enlarged image.
Includes loading skeleton for large images (e.g. GIFs), respects
prefers-reduced-motion, and excludes the hero image via data-no-lightbox.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 9, 2026

Deploy Preview for arcanegrain ready!

Name Link
🔨 Latest commit 166dcd3
🔍 Latest deploy log https://app.netlify.com/projects/arcanegrain/deploys/69d815e40473bc0008ef49bb
😎 Deploy Preview https://deploy-preview-58--arcanegrain.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 100
Accessibility: 97
Best Practices: 100
SEO: 100
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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