Skip to content

fix: og image avatar clipping - #188

Merged
raae merged 7 commits into
mainfrom
fix/og-image-avatar-clipping
Feb 3, 2026
Merged

raae merged 7 commits into
mainfrom
fix/og-image-avatar-clipping

Conversation

@raae

@raae raae commented Feb 3, 2026

Copy link
Copy Markdown
Member

No description provided.

raae and others added 3 commits February 3, 2026 17:20
Use absolute positioning for the avatar circle matching Gatsby's original
layout — a 628px diameter circle centered at (1043, 377) that overflows
the right and bottom edges of the 1200×628 canvas. Constrain text column
to 609px matching Gatsby's copyWidth calculation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Render emojis via Satori's loadAdditionalAsset using Twemoji SVGs
- Add textWrap: 'balance' to title for more even line distribution

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Avatar uses absolute positioning matching Gatsby's geometry (628px
  diameter circle, clipped at canvas edges)
- Title allowed to overlap avatar with rounded background for readability
- Title truncated to ~2 lines (60 chars) with ellipsis
- Description stays within original 609px copy width

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

netlify Bot commented Feb 3, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for queen-raae-codes ready!

Name Link
🔨 Latest commit 4d187ab
🔍 Latest deploy log https://app.netlify.com/projects/queen-raae-codes/deploys/69823dbec3c19600088c2729
😎 Deploy Preview https://deploy-preview-188--queen-raae-codes.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Use DEPLOY_PRIME_URL env var for social image URLs so deploy previews
reference their own domain instead of the hardcoded production URL.
Falls back to siteUrl for local development.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@raae
raae force-pushed the fix/og-image-avatar-clipping branch from 15f7989 to e523565 Compare February 3, 2026 17:23
raae and others added 3 commits February 3, 2026 19:12
…alks

Add content-hash query param (?v=<hash>) to OG image URLs so social
platforms re-fetch when title or description changes. Use frontmatter
speaker images for talk pages instead of generating dynamic OG images.
Non-post pages fall back to the default raae.jpg.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The public/ directory was gitignored (leftover from Gatsby where it was
the build output). In Astro, public/ holds static assets that must be
deployed — raae.jpg, testimonials, landing images, etc. The Astro build
output goes to dist/ which remains gitignored.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
data.image.src alone doesn't trigger Astro's image pipeline, so the
JPEG wasn't output to dist/. Using getImage() with format: 'jpeg'
properly processes the image and emits it to the build output.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@raae
raae merged commit bd7dc29 into main Feb 3, 2026
5 checks passed
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