feat(feed): sponsored strip docked on the main feed [mock-up] - #6490
Draft
tsahimatsliah wants to merge 27 commits into
Draft
feat(feed): sponsored strip docked on the main feed [mock-up]#6490tsahimatsliah wants to merge 27 commits into
tsahimatsliah wants to merge 27 commits into
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
A bottom rail carrying one lead sponsor and a wall of partner marks. The lead mark keeps brand colour, sits ~20% larger than the wall, and is the only link and the only hover in the strip. NVIDIA's lockup renders inline rather than as a flat file so its wordmark can take currentColor — black on the light feed, white on the dark one — while the symbol holds #76B900. A single flat asset cannot do that. The wall is silhouetted through a CSS mask so one asset works in both themes, sized by area rather than cap height so a 2:1 mark and a 6:1 lockup carry the same weight, reshuffled per page load so no advertiser is permanently first, and trimmed to the marks that fit whole rather than clipped behind a fade. Sponsors are fixtures. Real inventory needs an ad-service source.
The dock stacks a value rail beneath the sponsor row, which does two jobs at once. It gives the strip a reason to exist for the reader: a permanent bar carrying only advertising is rent, one carrying something the reader came for is a feature that happens to be sponsored. It also answers the browser's link tooltip. That tooltip paints over the bottom-left corner, cannot be read or suppressed from a page, and is as wide as the URL inside it — measured on the live feed, post slugs run 393px and promoted cards' signed click-throughs run to Chrome's 50%-of-viewport cap. Horizontal clearance therefore cannot be a guarantee; vertical clearance is 26px whatever the URL says. The rail gives the paid row 32px of it, and each rail opens with its label on the left, where the tooltip lands first, so what it covers is a word rather than a number. Eleven channels, all backed by data already in the app — trendingTags, userStreak, the leaderboard queries, live rooms, opportunities, poll posts. The label doubles as the switcher, so the control costs no space the row was not already spending. The choice lives in localStorage and is read after mount, so server and client agree on the first paint.
MOCK-UP — not for merge. Wired unconditionally so the design can be reviewed on a preview deployment rather than only in Storybook. The dock is sticky rather than fixed: fixed positions against the viewport, so it spans the whole window and slides under the left sidebar. Sticky keeps it in flow inside the layout's padded main, which is where the sidebar offset already lives, so it spans the feed and follows that offset across both layout variants without knowing what either is. Missing before this could ship: an ad-service source instead of the fixture, a feature flag, impression logging, and the rail wired to its real queries.
Stories for the shipped design and for the exploration behind it: five placements evaluated over a real feed, the dock and its eleven rails, ten ways to hold a bar at the bottom, and ten technical answers to the link tooltip. The rejected explorations live in the storybook package rather than in shared. They are decision-making artifacts, not product code, and nothing outside their own stories imports them. The tooltip bench is a testbed rather than a gallery: hovering a card draws a stand-in at the real size and corner, and the feed's link length is switchable, because the card href comes from the post slug and benching against a short one hides the problem entirely. Storybook's tailwind config now scans packages/extension. Utilities used only there generated no CSS, so ShortcutLinks and any story importing an extension component rendered a layout the app would not. Mockup-to-eng-pass: 1
CodeRabbit takes the paid slot and NVIDIA becomes a regular partner mark, silhouetted with the rest of the wall. CodeRabbit has the same problem NVIDIA did: an orange mark with a near-black (#171717) wordmark, which is the only version the advertiser library ships and which disappears on the dark feed. So it renders inline as well — the mark keeps #FF570A, the wordmark takes `currentColor` and flips black to white with the theme. The split is by fill colour rather than by eye: ten #171717 paths are the wordmark, #FF570A is the mark, #FEFEFE is the detail inside it. NVIDIA is not in the advertiser library, so its silhouette source is a data URI rather than a hosted file — the app and Storybook would otherwise each need their own copy, and only one of them had it last time. Verified in both themes: wordmark computes to white on dark and #0f1218 on light, mark holds #FF570A in both. Mockup-to-eng-pass: 1
Leaves twelve marks: eleven from the advertiser library plus NVIDIA. Mockup-to-eng-pass: 1
"Hot right now" becomes "Breaking news", in the rail, the switcher menu and the feed wiring's default. The label also sat 4px right of "Made possible by" above it: the dropdown trigger carries `px-1` so its hover chip has something to sit on, and that padding pushed the text in. `-ml-1` cancels it, so the two rows start on the same left edge and the chip keeps its padding. Mockup-to-eng-pass: 1
…the wall NVIDIA returns to the paid slot with its two-tone lockup: symbol on #76B900, wordmark inheriting `currentColor` so it flips with the theme. CodeRabbit becomes a regular silhouetted mark, taken from the advertiser library like the rest of the wall. The data URI that let NVIDIA be masked in the wall goes with it — it was only needed because NVIDIA has no library asset, and the lead slot renders inline instead. Both lockups stay: the one not currently leading appears in LogoTreatment's candidate list, which is where the two-tone argument is made, so neither is dead code. Wall stays at twelve. Mockup-to-eng-pass: 1
CodeRabbit's mark carries a white detail painted inside the orange shape. The wall silhouettes through a CSS mask, which reads paint as opaque, so the flat asset came through as a featureless disc rather than the rabbit. The lockup now renders inline in the wall as well, and in that treatment the mark and its detail become one path under `evenodd`, so the detail is a hole. Colour treatment is unchanged. `Sponsor.Artwork` is therefore used in both treatments and is told which one it is drawing, via a shared `LockupProps`. NVIDIA's lockup takes the same prop: its symbol keeps #76B900 in colour and joins the silhouette in the wall, so either sponsor can hold either slot without a second asset. This is the general fix for the knockout problem the LogoTreatment story documents — it just needs an inline lockup rather than a flat file, which is what the two sponsors that hit it already have. Mockup-to-eng-pass: 1
…ped hole The faithful monochrome transcription of the mark keeps the brand disc and knocks the rabbit out of it. That is correct and unreadable: at the 16-20px the partner wall gives a logo, the disc is the ink and the rabbit is a smudge of background, so the mark reads as a plain circle next to eleven other light-on-dark glyphs. Drop the disc in the silhouette treatment and draw the rabbit itself. The colour treatment, which has the orange to carry the disc, is unchanged. Mockup-to-eng-pass: 1
…bbit-shaped hole" This reverts commit fc8a5cd. The wall shows the knockout — disc plus rabbit-shaped hole — which is CodeRabbit's actual mark. Rabbit-only reads better at 16-20px but is artwork we invented for them, and this is a paid slot. Noted in the file so it does not get "fixed" again. Mockup-to-eng-pass: 1
Google's wordmark is six letters in four inks, none of them close to either ground, so it clears light and dark without the two-tone handling the previous leads needed. Rendered inline like the others: there is no flat single-colour Google wordmark that still reads as Google, and the silhouette treatment in the wall keeps the letterforms when it drops the colour. NVIDIA moves down into the wall rather than leaving the strip; its lockup already silhouettes, so it needed nothing. The Storybook lead-slot comparison now leads with Google and keeps NVIDIA as the two-tone example, which is what it actually demonstrates. Mockup-to-eng-pass: 1
Replaces the plain Google wordmark in the paid slot. The lockup is two-tone rather than four-ink: the cloud keeps Google's colours, but the shipped wordmark is #5F6368 — dark grey, which greys out against the dark feed — so it rides `currentColor` and flips with the ground instead, the way Google's own light and dark lockups do from two files. GoogleLockup goes with it; nothing referenced it once the slot changed. The Storybook lead-slot comparison now describes Google Cloud as two-tone rather than four-ink, which is what it is. Mockup-to-eng-pass: 1
Back to twelve marks, which is what the Storybook wall copy describes. Mockup-to-eng-pass: 1
Swapping Amazon (2:1) for NVIDIA (5.5:1) widened the wall, so every number in the fitting line moved: all twelve now need ~1340px rather than ~1250, and the counts below that shifted too. Measured on the deployed strip at each width rather than re-derived. Mockup-to-eng-pass: 1
The previous artwork was the cloud-symbol lockup, which Google no longer leads with. cloud.google.com serves gstatic.com/cgc/google-cloud-logo-fullcolor.svg: the four-ink Google wordmark followed by "Cloud", no symbol, in their refreshed palette (#3186FF, #FC413D, #FFBE00, #00AF57) rather than the classic four. "Cloud" ships as #212226 — near-black, and it all but disappears against the dark feed — so it rides `currentColor` and flips with the ground, which is the only change from their file. Mockup-to-eng-pass: 1
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
1 participant
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.
A sponsored strip docked to the bottom of the main feed. Sponsors and every rail's data are hard-coded fixtures. Nothing here has been sold.
What it is
A 72px dock, flush and sticky, spanning the feed column:
The lead mark keeps brand colour, sits ~20% larger than the wall, and is the only link and the only hover in the strip. NVIDIA's lockup renders inline rather than as a flat file so its wordmark can take
currentColor— black on the light feed, white on the dark one — while the symbol holds#76B900. A single flat asset cannot do that.The partner wall is silhouetted through a CSS mask so one asset works in both themes, sized by area rather than cap height so a 2:1 mark and a 6:1 lockup carry the same weight, reshuffled on every page load so no advertiser is permanently first, and trimmed to the marks that fit whole — never a half logo under a fade.
The value rail defaults to Hot right now. Eleven channels, all backed by data already in the app:
trendingTags,userStreak, the leaderboard queries, live rooms, opportunities, poll posts. The choice is kept inlocalStorage.Why there are two rows
The browser's link tooltip paints over the bottom-left corner, cannot be read or suppressed from a page, and is exactly as wide as the URL inside it. Measured on the live feed, 28 links on one screen:
Horizontal clearance therefore cannot be a guarantee — it would need half the bar. Vertical clearance is 26px whatever the URL says. The rail gives the paid row 32px of it, and each rail opens with its label on the left, where the tooltip lands first, so what it covers is a word rather than a number.
Worth fixing separately: promoted cards link through a signed token, so that URL carries a whole JWT.
Storybook
Rejected explorations live in the storybook package, not in
shared— they are decision-making artifacts, not product code.Before this could ship
business.daily.dev.svg, which mask to a solid block🤖 Generated with Claude Code
Preview domain
https://feat-feed-sponsored-strip.preview.app.daily.dev