feat(tags): new-user conversion layer for tag page + directory#6116
Open
tsahimatsliah wants to merge 8 commits into
Open
feat(tags): new-user conversion layer for tag page + directory#6116tsahimatsliah wants to merge 8 commits into
tsahimatsliah wants to merge 8 commits into
Conversation
Adds a flag-gated (tag_page_redesign, default ON) redesign of the tag
page and tags directory. The existing logged-in layout stays the
baseline; anonymous SEO/share traffic gets a conversion-focused layer on
top. No SEO content is removed — elements are reorganized and added to.
- TagPageHeader: value-prop hero + single "Get my {tag} feed" CTA for
logged-out visitors; members keep the familiar header.
- TagBestOfPosts: collapses the 3 stacked carousels into one tabbed
surface (Top / Most upvoted / Best discussed) — nothing removed.
- TagBuildYourFeed: anonymous multi-select related-topics funnel.
- Directory: anon value-prop hero + CTA and a client-side search filter
over the A-Z wall (full list stays in SSG HTML for crawlers).
- All sr-only links, JSON-LD, breadcrumbs, sources/contributors,
archive card and roadmap preserved in both layouts.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Ground-up UX pass on the tag page (still behind tag_page_redesign,
default ON). Content/data fully preserved for SEO — only layout,
hierarchy, order and styling changed.
- Topic-hub hero: icon/title lockup, scannable meta chips
(related topics / contributors / updated daily), readable description
width, action row; anon value-prop band + single CTA.
- Consistent section rhythm via shared TagSectionHeader (h2 outline
under the single hero h1) with anchorable, scroll-margin sections.
- TagPeople: groups top sources + top contributors under one
"Who shapes #{tag}" section, only when populated.
- Reordered: Hero → Related topics → Best of → Who shapes → Learn →
All posts (archive + feed). Best-of tabs restyled with a divider.
- All sr-only SEO links, JSON-LD, breadcrumbs, roadmap and archive
preserved. Flag-off fallback unchanged.
- Updated TagPage test for the renamed contributors section copy.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Editing the test pulled it into the strict-changed typecheck scope, surfacing a pre-existing gap: the settings mock was missing the new gamification props (optOutAchievements, isGamificationEnabled, toggleOptOutAchievements, toggleAllGamification). Add them. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Make the tag page read as THE authoritative hub for a topic instead of a
generic feed. Adds real, data-backed editorial substance up top and the
schema that gets pages cited by search + answer engines.
- TagKeyFacts: scannable "at a glance" strip of real stats (posts via
occurrences, related topics, contributors, daily freshness, tracked-since).
- Overview: a "What is {tag}?" section built from the tag description,
backed by DefinedTerm structured data (entity definition for AEO).
- TagFaq: concise, data-backed Q&A (how to keep up, top contributors,
related topics, how to learn) rendered fully in the DOM, backed by
FAQPage structured data — the page's main answer-engine surface.
- Single source of truth (getTagFaqItems) feeds both the visible FAQ and
the JSON-LD so they never drift.
- Hero slimmed to identity + action; substance now lives in dedicated
sections with clear hierarchy.
All real data only — nothing fabricated; sections self-hide without data.
SEO content preserved; flag-off fallback unchanged.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tellation Push the tag page from "organized lists" to a standout, alive topic hub aimed at developer discovery. All real data; SEO content preserved; behind tag_page_redesign (default ON); honors prefers-reduced-motion. - TagHero: full-bleed panel with an ambient drifting gradient, a live pulse pill, a developer terminal motif, a giant wordmark, animated count-up stats (SSR-safe), and a bold CTA. - TagPulse: auto-scrolling "live" ticker of the latest posts (real SSR titles, pause-on-hover, links out) for instant aliveness. - TagConstellation: related tags as an interactive orbiting constellation with connector lines and float — a spatial take on topic discovery. - Scoped tagShowcase.module.css for the custom animations (transforms only; colors stay in the design system). - Retired TagPageHeader / TagKeyFacts / TagBuildYourFeed (superseded; key facts now live as count-up stats in the hero). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Address review: the giant cover, fuzzy section breaks, oversized/
inconsistent entity chips, the heavy centered FAQ and the big related-tags
map all hurt scannability. Rework into a dedicated, scannable hub.
- TagHero: shrunk from a full-bleed cover to a compact identity bar
(icon + #tag + headline stats + primary action). The "what is" moved
out of the hero.
- TagModule: one consistent bordered card with a clear header used by every
context block, so each section reads as a distinct module.
- TagAbout: "What is #{tag}" overview + compact key-facts grid (DefinedTerm
substance), now a single tidy module.
- TagPeople: top sources / top contributors as compact, uniform avatar+name
rows (no more variable-width cards).
- TagRelatedTopics: dense, consistent chip cloud — replaces the oversized
constellation map (removed).
- TagFaq: native <details> (answers stay in the DOM for SEO/AEO) inside a
module — collapsible and out of the center spotlight.
- Layout: header → live ticker → Best of → context hub (About + FAQ main,
sources/contributors/related/learn right rail) → full-width feed.
- TagSectionHeader: subtitle now aligns under the title, not the icon.
Behind tag_page_redesign (default ON); SEO content preserved; flag-off
fallback unchanged; all tag tests pass.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Completely different direction: compose the tag page like the front page of a publication dedicated to the topic, instead of stacked sections or uniform cards. - Enrich TAG_TOP_POSTS_QUERY (image, source, engagement, readTime) so the page has real material to compose with. - TagMasthead: editorial wordmark + live "dek" + rule + italic standfirst (the topic definition) — no boxed cover. - TagFrontPage: a big lead story + a ranked "Most read" rail built from the top posts — the signature, asymmetric centerpiece. - TagRibbon: voices / top sources / related desks as a light banded strip of editorial columns (kickers + rules), not heavy cards. - TagFaq: slim editorial Q&A (<details>, DOM-present for SEO/AEO). - Layout: masthead → front page → Trending (Best of) → ribbon → Learn → FAQ → "More in #tag" feed. - Retired the modular-hub components (TagHero/TagPulse/TagModule/TagAbout/ TagPeople/TagRelatedTopics/constellation). Behind tag_page_redesign (default ON); SEO content preserved; flag-off fallback unchanged; all tag tests pass. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Stop inventing chrome; compose the page from daily.dev's own design language (briefing-home rows + WidgetCard widgets), so it feels like part of the product instead of a one-off. - TagHubHeader: briefing-style header — bold #tag title, a one-line stat dek, primary action, rule. Compact, no cover. - TagPostRow / TagPostList: native list rows (mirroring BriefListItem): bordered rounded-16 rows with rank, clamped title, one meta line, thumbnail and a full-row CardLink. "Top in #tag" is a scannable, discussion-style ranked board (the hero) — built from the enriched top-posts data. - TagWidgets: everything-about-the-topic in native WidgetCards — About (definition + key stats + related topics + learning path), People & sources, and FAQ (<details>, DOM-present for SEO/AEO). - Layout: header → Top in #tag (rows) → widgets → "Latest in #tag" feed. - Retired the editorial experiment (masthead/front-page/ribbon) and the earlier card modules. Behind tag_page_redesign (default ON); SEO content + schema preserved; flag-off fallback unchanged; all tag tests pass. 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
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.
What
Flag-gated redesign of the tag page and tags directory that adds a new-user (anonymous) conversion layer on top of the existing layout. Existing members keep their familiar experience as the baseline; cold SEO/share traffic gets a path to the "aha moment" fast.
Gated by
featureTagPageRedesign(tag_page_redesign, default ON for review). Flip off → both pages render exactly as today.No SEO content removed — every element/link/JSON-LD is preserved; things are reorganized, redesigned, and added to.
Changes
sr-onlylinks, JSON-LD, breadcrumbs, top sources/contributors, archive card and roadmap preserved in both layouts.Review notes
<header>with matching spacing). Can scope the restyle to anonymous-only if preferred.Testing
tscclean for changed files; ESLint clean.TagPagetests pass with the flag ON.🤖 Generated with Claude Code
Preview domain
https://claude-kind-moore-20021b.preview.app.daily.dev