Automate compile-time personalized OG image generation and testing#489
Open
google-labs-jules[bot] wants to merge 2 commits into
Open
Conversation
…ompile-time and add test event logic
✅ Deploy Preview for shyparty ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Owner
|
Why have you added a dummy event? We have a live event in the system you can use for local testing only. You don't need to commit those tests into prod. |
Contributor
Author
|
I've removed the |
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
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.
Why This Change is Necessary
To increase social sharing engagement, we want to provide personalized Open Graph (OG) image previews for event RSVP links (e.g., displaying the specific invitee's name and event details).
To maintain the architectural benefits of a fully static site and avoid slow dynamic runtime rendering or relying on external dynamic image-generation APIs, we opted to pre-render these assets strictly at compile-time within our static build pipeline (
freeze.py).Key Decisions & Rationale
We utilized Pillow (PIL) during the static build/freeze process to programmatically draw and format text onto a standardized
1200x630template. This guarantees high-performance, cost-effective static hosting with zero runtime compute overhead.We refactored
app/templates/base.htmlandapp/templates/attendee_rsvp.htmlto use a modular{% block og_image %}block. This allows the RSVP template to override the default fallback OG image and cleanly link to the static/images/og/rsvp_{{ event_junction_public_id }}.pngasset.To robustly verify end-to-end integration of our image generation pipeline, we introduced a
setup_dummy_event()hook during the freeze phase. This injects a mock event inviting "Shy Ruparel" into the database. This ensures that static templates and custom OG images are generated and verified for this dummy state during every build run.Fixed SQL compatibility/syntax issues in
app/models.py(such as timestamp casting issues between SQLite/PostgreSQL) to ensure local builds/freezes execute reliably without schema-resolution errors.Detailed Changes
Templates
app/templates/base.html: Added a defaultog_imageblock pointing to the fallback generic image.app/templates/attendee_rsvp.html: Overrode theog_imageblock to dynamically fetch the pre-rendered image associated with the attendee's specific RSVP identifier.Build Pipeline (
freeze.py)generate_og_images()to parse active event/attendee junctions and programmatically output high-quality, readable PNG images toapp/static/images/og/.setup_dummy_event()to seed the local database context with a custom event inviting 'Shy Ruparel' before the generator compiles the static output.Models (
app/models.py)