Add session announcement sharing links & OG images - #119
Merged
Conversation
- Move DC8_TRACK_IMAGES + normalizeTrackName from social-cards/data.ts (which imports sharp, server-only) into track-images.ts so the session share page can resolve badge art client-side - data.ts keeps the same getTrackImage behavior via getDc8TrackImagePath
- Replace the placeholder night scene + ticket-back card with the DC8 KV scene design (Dev Handoff 5058/5060 frames): glowing logo, CSS-built session card (gradient, track badge, Mumbai block, speakers, type/track pill), card-width actions row (Get tickets + X/Farcaster/copy share) - New session-sharing.module.scss authored at the 1200x675 card spec in container-query units; desktop/tablet/mobile layouts per the frames (mobile: bottom-anchored stacked actions over a dark fade) - Keep tilt/parallax, gyro flow, and Matomo share tagging; bake the logo glow into a PNG (live drop-shadow stacks dropped the page to 22fps) and declare backdrop-filter unprefixed (lightningcss drops the standard property when a -webkit- duplicate is present) - Multi-speaker: overlapped avatar stack + joined names; 5+ speakers shrink the stack; long titles downscale with line clamps - Update anti-flash/theme color to the new scene (#221144)
- New renderDc8Card in api/social/schedule/[id] (Dev Handoff 5060:6142): KV backdrop with a centered 965x481 card - logo, Mumbai date block, length-bucketed title, speaker avatars + names, type/track pill, track badge bleeding off the corner; radius 32 after review - DC7/SEA sessions keep the original Inter renderer untouched - Add Poppins Regular/Bold to public/fonts (loaded via poppinsFonts()) and public/social/dc8/kv-bg.jpg (hero KV resized to render size) - Update the docs asset-layout notes accordingly
✅ Deploy Preview for devcon-monorepo ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Scott1UP
changed the title
New 570px octagon badges (one per track) plus the Devcon 8 India logomark for Community-Led Sessions, mapped via DC8_TRACK_BADGES/DC8_CLS_BADGE. The old DC8_TRACK_IMAGES art stays until the OG card redesign lands.
Dev Handoff 5058:2837/3511/4860, 5060:6752 (scenes), 5058:3193/3624/4774, 5068:4650, 5071:5730 (cards): 30% KV overlay, brighter/more fireflies, share buttons at 80%/100% hover, speaker names under the title, octagon track badges in the bottom-right corner (logomark + CLS-formatted chip for [CLS] tracks), solo avatars ringed, and stronger CTA/share shadows.
"Workshop 1h" now renders as WORKSHOP on the session share card, matching the existing parenthetical strip for Talk/Lightning Talk.
track-images.ts now owns the per-track card colors (DC8_TRACK_COLORS from the YT/OG Figma frames), the type-label cleanup (parens + durations), and the CLS chip/name helpers, shared by the session share page and the satori cards. The OG route's old octagon art (DC8_TRACK_IMAGES + track-*.png) is replaced by the round-2 badges everywhere and deleted.
New shared renderer (Dev Handoff 5068:1593 ff, 27 frames): per-track canvas color, 50%-opacity white logomark watermark, octagon badge off the bottom-right, title + speakers centered between header and footer, and the CLS gradient/glyph default. Serves /api/social/schedule at 1200x630 and /api/social/av at 1920x1080 (scale 1.6 on a 675 base); the old renderDc8Card and the AV route's DC8 prism placeholder are gone, DC7/SEA renderers are untouched. Adds Poppins Medium to poppinsFonts() and an svg entry to the asset MIME map (satori silently dropped SVG data URLs typed image/png).
Full-resolution webp-to-PNG conversions made multi-MB data URLs; with 5+ avatars the satori SVG crossed libxml2's 10MB parse cap and the render 503'd. 384px covers the largest avatar render (DC7 AV, 176px) at 2x.
The CSS-built card is replaced by the /api/social/schedule/{id} render
(Figma 5071:6944), so the sharing page, link embeds, and the YouTube
archive all show one consistent card. The tilt/parallax interaction stays;
the gradient card face doubles as a loading placeholder with a fade-in,
since cold renders take seconds until og-cache is re-enabled. Radius on
the square-cornered JPEG is 40.33px at the 1200 basis (measured from the
Figma mock's alpha channel), image sized 781px @1440 per the frame.
Removes the now-dead card DOM and ~220 lines of card styles (badge, CLS
glyph, title buckets, avatar stack, track pill, narrow-card wrapping);
SessionShareTalk slims to id + title. The CLS/type label helpers live on
in track-images.ts for the satori renderer, and getStaticProps keeps the
full talk mapping for the SEA Hero path.
A light band sweeps the gradient every 2s (1.2s sweep + rest beat) while the social image renders, removed once it loads; disabled under prefers-reduced-motion.
- Reveal the card when its image loads before hydration (the SSR'd img fired onLoad before React attached it, so the card stayed invisible); failed renders now settle on the gradient instead of shimmering. - Give the AV route the Pretalx fallback, so devcon8 thumbnails stop 503ing. - Emit og:image/og:url against the deploy's own origin, not devcon.org. - Accept an optional cache-buster segment (/schedule/devcon8/CODE/v2/) so a redesign can refresh cards already shared, mirroring /ticket. - Align the actions row to the card width; clamp long track labels.
… generation - Updated SessionSharingProps to replace pageUrl with shareBaseUrl, clarifying its purpose for generating share links. - Modified shareUrlFor function to create unique share URLs with a cache-buster segment, ensuring fresh links for social sharing. - Adjusted usage of SessionSharing in the SpeakerCard component to align with the new props structure. - Introduced a new API route for rendering social cards, enhancing the consistency of shared content across platforms.
…improved sharing links - Introduced a shareNonce state to generate unique cache-buster segments for share URLs, ensuring fresh links for social sharing. - Updated shareUrlFor function to utilize the new nonce, improving consistency across sharing platforms. - Replaced window.open calls with direct href attributes for social sharing links, enhancing user experience on mobile devices. - Adjusted share button behavior to roll the nonce on click, maintaining unique URLs for each share action.
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
2 participants
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.
No description provided.