Fix handbook Slack unfurl with dynamic OG images #4432
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
Author
|
@ZJvandeWeg have a look! Code should be reviewed though in relation to Netlify edge functions. Don't have the login to that. Someone with netlify should allow the new edge function so the social media images can be allowed. |
✅ Deploy Preview for flowforge-website ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Member
|
@Yndira-E Care to review? It's an interesting change, but includes React? |
Yndira-E
reviewed
Jan 26, 2026
Contributor
|
Thanks for looping me in @ZJvandeWeg, I didn’t expect to see React on the website, but I’m happy to take a look. @dimitrieh I’d love to test this, but I’m not seeing a preview generated here, and I haven’t been able to get it running locally either. Could you point me in the right direction? If it works as expected, this feels like a nice improvement for the team. I can also see potential for applying something similar to the docs, though there I’d prefer using our preferred logo version in the top right. |
dimitrieh
added a commit
that referenced
this pull request
Jan 26, 2026
Updates the handbook OG image edge function to align with FlowFuse brand guidelines: - Change font from Inter to Heebo (brand standard for web/materials) - Replace generic hex colors with official brand gray palette from Tailwind config (Grey 900, 500, 400, 300) Addresses design feedback from @Yndira-E in #4432
- Extract first paragraph from handbook pages for og:description - Use handbook logo for og:image instead of generic tile - Set og:type to "article" for handbook pages - Add article:published_time and article:modified_time metadata This improves how handbook links appear when shared in Slack and other social platforms by showing page-specific content instead of generic site descriptions.
Creates custom social preview images for handbook pages with: - FlowFuse logo and "Handbook • section" header (48px) - Page title (64px bold, max 2 lines) - Description text (38px, max 5 lines with gradient fade) - 1200x630px optimized for Slack/social platforms Implementation: - Netlify Edge Function using og_edge library - Generates images on-demand at /og-image endpoint - Takes title, description, section as query parameters - 1-week cache for performance (604800s) Improves handbook link unfurls by showing page-specific content instead of generic site descriptions and images.
Add toDate filter before dateToRfc3339 to safely convert all date values to Date objects before calling toISOString. Fixes build failure when rendering handbook pages that have auto-assigned dates.
Handbook pages don't have valid publication dates and shouldn't include article:published_time or article:modified_time metadata. Only posts should have these date fields.
Configure /og-image endpoint to allow embedding and caching: - Allow CORS for social media platforms - Set 1-week cache for performance - Exempt from frame-ancestors restrictions This fixes Netlify header validation checks.
Updates the handbook OG image edge function to align with FlowFuse brand guidelines: - Change font from Inter to Heebo (brand standard for web/materials) - Replace generic hex colors with official brand gray palette from Tailwind config (Grey 900, 500, 400, 300) Addresses design feedback from @Yndira-E in #4432
Use correct Deno registry URL for og_edge package. The package is hosted on deno.land/x, not esm.sh. This fixes the Netlify build failure where the module could not be found.
dimitrieh
force-pushed
the
fix/handbook-slack-unfurl
branch
from
3142a51 to
a63af4f
Compare
Implement Google Fonts loading using the Vercel OG pattern: - Fetch font CSS and extract font file URL - Load font as ArrayBuffer - Pass to ImageResponse fonts option This fixes the 502 error caused by font not being available in the Deno edge runtime environment.
The loadGoogleFont function only captures the first @font-face rule. Using multiple weights (wght@400;600) returns multiple rules but only the first is captured. Simplified to load regular weight (400).
Load weight 400 (regular) and 600 (semibold) separately since loadGoogleFont extracts one weight at a time. The title uses bold/semibold weight while body text uses regular.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Improves how handbook pages appear when shared in Slack and other social platforms.
Changes
Better Meta Tags
Dynamic OG Image Generation
Files Changed
Testing
After deployment, test Slack unfurls with:
Performance