feat: Google Cloud advertiser-takeover demo#6230
Open
tsahimatsliah wants to merge 41 commits into
Open
Conversation
Render the floating glass action bar on feed cards fully expanded by default instead of hover-to-reveal, and drop the appearance animation. - FeedCardGlassActions: remove the morph/fade transitions, the hover-collapse grid tracks, and the Segment wrapper. Every action now gets an equal-width centered slot so icons stay evenly spaced regardless of upvote/comment counts. - ArticleGrid: clamp glass-card titles to 2 lines so long titles don't crowd the card. - AdGrid: move the CTA / advertise / remove-ad row above the cover image to match the new card design. - CardCoverShare: pad the "Should anyone else see this post?" overlay (pb-12) so its buttons clear the bottom action bar. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Render the ad grid card's cover image like the glass feed cards: square top corners, rounded bottom (rounded-b-16), full width with no side margin, flush to the card bottom, and no border. Also neutralize the inner CardImage radius so the wrapper's clip defines the shape cleanly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds a dedicated /demo/google-cloud route for a Google Cloud sales call, showing the four advertiser slots a takeover would occupy in a first-time-user feed: a double-height announcement bar, a sponsored first feed card promoting Google Cloud's latest blog post, a head ad slot, and an in-feed strip reskinning the briefing banner. Self-contained (no ad-fetch / feed-internal hooks) and noindex so it renders deterministically for a demo. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Moves the Google Cloud takeover components into packages/shared/src/features/googleCloudTakeover/ (so the shared Feed can use them) and renders the four placements directly in the My Feed / Popular feeds: announcement bar via the feed topContent, the sponsored blog card and head ad as the first two grid cells, and the branded strip as a full-row item mid-feed (same pattern as BriefBannerFeed). Gated by a single hardcoded demo switch (googleCloudTakeoverEnabled, default on) with no flag/auth/Plus checks, so the takeover shows for all users on any account for the sales demo. The standalone /demo/google-cloud route still works and now reuses the shared components. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The always-on takeover changed feed output for every render, breaking the "placeholder when loading" Feed spec (first article was the sponsored card, not the placeholder). Gate the injection on !isTesting so existing feed specs keep validating real feed behavior; the takeover stays live in dev and on the production preview deploy. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…strip) - Announcement bar: drop the "SPONSORED BY GOOGLE CLOUD" eyebrow, shrink to a single compact row, and move it above the feed header/shortcuts (rendered at the top of MainFeedLayout on the home feed). - Blog card: render the real ArticleGrid/ArticleList so the sponsored post is identical to an organic post (action bar, no "Sponsored" label). - Ad card: render the real AdGrid/AdList so it matches the live ad slot exactly. - Strip: move it down to a whole grid row (row 4, accounting for the two prepended cards) so the row above is full — no empty cells. - Logo: replace the Google "G" with a four-color Google Cloud "cloud" mark, including a data-URI variant used as the post avatar / ad favicon. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…m/dailydotdev/apps into claude/hungry-jackson-735044
…cards - Logo: use the official Google Cloud cloud mark (replaces the hand-drawn version) for the component and the data-URI avatar/favicon. - Ad slot: move the Google Cloud ad to the 3rd feed position (blog card, then a real post, then the ad). - Announcement bar: render it in MainLayout above the feed's floating-card box (alongside HomepageTopBanners) instead of inside the feed. - Cards: merged #6225 so the blog/ad cards render with the latest ArticleGrid/AdGrid design (ad CTA row above the cover image). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The fixed index-based strip position didn't account for the feed's dynamic insertions (cadence ads, wide/hero cards), so the row above the strip could end up partial with empty cells. Walk the actual rendered cells (prepended blog, ad at index 1, each item's colSpan) and place the strip at the first column-0 boundary at/after the target row. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Use a different Google Cloud blog cover for the ad slot (Google I/O header) so it doesn't repeat the sponsored blog card's image. - Hide the "Start building free" CTA by default and reveal it on hover in the top-right corner (mirrors the post card's "Read post" affordance). - Left-align the advertiser label (Advertise here / Promoted). - Grid layout gets the custom hover card; list/mobile keeps the standard AdList. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The bar forced six equal-width flex-1 slots, each 1/6 of the pill. On tight (e.g. 5-column) cards a count-bearing button (upvote/comment) is wider than its slot, so buttons overflowed their slots — overlapping neighbours and spilling past the rounded edge. Size each action to its content and spread the row with justify-between (the standard action-bar pattern), which fits all six without overlap from 272px up. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Announcement bar: center the logo/text/CTA group and pin the close button to the far-right corner, with a short bar body so "Claim credits" sits centrally and clear of the X (full message kept on the in-feed strip). - Ad card: center the "Start building free" hover CTA over the cover image with equal padding, instead of pinning it to the corner. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Clicking the sponsored Google Cloud post now opens the standard article post modal (like any other post), populated from the post object — PostContent renders from the passed post and usePostById falls back to initialData, so no backend post is required. The modal's "Read post" link, the card's read action, and cmd/ctrl-click all redirect to the Google Cloud blog. Added a summary so the modal shows richer content. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Move the 'Start building free' hover button from the image center to the top-right corner, vertically aligned with the Google Cloud logo/source row (matches the read-post affordance), with equal top and right insets. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Second feed card is now a hardcoded popular post wrapped in a scoped EngagementAdsProvider with a Google Cloud creative, so upvoting plays the branded upvote animation and the post modal highlights the sponsored tag. - Wire brandAnimation into FeedCardGlassActions so the glass action bar shows the advertiser upvote animation too. - Make the simulated discussion look real: photo avatars, granular upvote counts, and author reputation + verified-company badges. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Keeps the compact feed-card actions static and smooth for the demo (no spin/icon-swap flicker on upvote). The Google Cloud engagement ad still shows the branded upvote animation and sponsored tag inside the post modal, where the action bar has room. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…ssion - First (Google Cloud blog) card's Read post opens the URL in the daily.dev in-app reader (post is Article type; card opens ReaderPreview directly so it works on any account). Body-click still opens the discussion. - Advertiser (3rd) card now shows tag chips, like organic/ad cards. - Rewrote the simulated discussion to feel like a real community: varied voices/lengths/vibes, code snippets, an embedded chart, threaded replies, skeptics and war stories. Removed em dashes. - Timestamps are relative to load time so the long-lived demo never looks stale (it is not meant to be merged). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…cover - Bring back the branded upvote animation in the glass action bar so the engagement card's upvote swaps the icon to the Google Cloud logo again (reverts the earlier removal). - Replace the ad (third) card cover with a self-contained SVG recreation of the 'Wasting time managing infra?' Google Cloud creative (no external host). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Embed the advertiser's 'Wasting time managing infra?' cover as a base64 data URI (replaces the SVG recreation; no expiring CDN dependency). - Extend the takeover to the tag feed (OtherFeedPage.Tag) so clicking the sponsored 'ai' tag lands on a page that also carries the engagement placement. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…mbed) Google returns 403 to the in-app reader's embed proxy for cloud.google.com, so revert the first card to a non-reader-gated Share type and open the real blog URL in a new tab on Read post. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drops the 'Wasting time managing infra' embedded image and restores the prior storage.googleapis.com cover. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Suppress app-wide engagement-ads creatives while the takeover is on, so real feed posts no longer animate / fetch a brand logo on upvote (the spinner). The Google Cloud engagement card keeps its animation via its scoped provider. - Make the glass-bar copy-link button a static synchronous clipboard write with no interaction tracking, so it can never render a loading spinner. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The AI tab in the feed bar opens the explore-tag feed (OtherFeedPage.ExploreTag), not /tags/ai. Add it to the takeover gate so the Google Cloud engagement placements appear there as well. No Plus gating exists on the takeover, so it shows for all users. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Root cause: the tag page's post feed ('All posts about …') is the last section,
so the in-feed takeover lands far below the fold (under Roadmaps, recommended
stories, and who-to-follow). Render the Google Cloud strip prominently near the
top of the tag page so the placement is visible without scrolling.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The second (engagement) card now seeds a separate set of comments about shipping AI agents to production (tool calling, evals, cost control, guardrails) instead of reusing the blog post's Google Cloud launch discussion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Wire the branded upvote animation into FocusCardActionBar so opening the engagement post and upvoting shows the Google Cloud icon swap, matching the feed card. Scoped to the engagement card's provider, so real posts are unaffected. - Remove the primary white CTA button from the Google Cloud ad (3rd) card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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.
Changes
Sales-demo for a Google Cloud sales call: an advertiser takeover of a first-time-user feed, on a dedicated route
/demo/google-cloud. It shows the four ad slots a takeover would occupy so the call can walk through exactly which placements Google Cloud would get.The four placements (all GCP-branded, self-contained — no ad-fetch / feed-internal hooks):
AdGrid(company row, "Ad" label, four-color cover, "Start building free")BriefBannerat the same size/position, branded blue with the same messagingSupporting files:
GoogleCloudTakeover(composition + surrounding mock posts),content.ts(copy + hardcoded post),brand.ts(brand colors),GoogleCloudLogo,GoogleCloudCta,MockFeedCard.Notes for reviewers:
noindexand self-contained so it renders deterministically for the demo.style(hex) / SVGfill, not Tailwind classes, to stay within theno-custom-colorrule (same pattern asbriefButtonBg).MainLayout→BootDataProvider), so it needs a reachable backend — it shows on a preview deploy, not a bare localnext dev. Components were verified at MobileL / Tablet / Laptop via a throwaway boot-free/dev/route (removed).Events
No new tracking events.
Experiment
No new experiments.
Manual Testing
Verified the takeover renders across breakpoints (mobile single-column, tablet/laptop grid) and that the strip CTA keeps contrast (white-on-blue). No existing components were modified — all additions live under
packages/webapp/components/demo/andpackages/webapp/pages/demo/.🤖 Generated with Claude Code
Preview domain
https://claude-hungry-jackson-735044.preview.app.daily.dev