feat(explore): Medium-style explore topics surface#6138
Open
tsahimatsliah wants to merge 12 commits into
Open
Conversation
Rebuild the tag/topic discovery surfaces under a new Explore brand, behind the explore_topics_v2 flag (default ON for review): - /explore lobby: hero, topic search, category quick-nav, tagsCategories sections, and the existing trending/popular/recent leaderboards. - /explore/[tag] topic page: related-tags chip bar, centered header with stats (followers when available + stories) and Follow/Block, recommended stories feed, who-to-follow cards, and top sources. - /tags and /tags/[tag] render the new design when the flag is on, legacy otherwise; /explore* redirects to /tags* when the flag is off. - Feed nav repoints Tags -> Explore; explore header gains a Topics sub-tab. - Shared getStaticProps + JSON-LD helper reused by both topic routes. Follower count is an optional Keyword field; it renders only when the backend exposes it (tracked dependency). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
- Search: trigger autocomplete at 3 chars, keyboard navigation (↑/↓/Enter) over results, and a zero-results state that suggests popular topics; add loading skeleton chips. - Accessibility: roving-tabindex + arrow/Home/End keyboard navigation and toolbar roles on the related-tags chip bar and category quick-nav (useChipBarNavigation hook). - SEO: canonical /explore URLs on the topic page and both lobby routes so /tags and /explore don't duplicate content. - Loading skeletons for the who-to-follow rail. - Tests for the lobby and the upgraded search behavior. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rework both Explore surfaces into clean, centered, constrained columns matching the recruiter glossary hub + Medium, in our design system: - Lobby: centered hero with a descriptive subtitle + search, a wrapping centered category quick-nav, and a multi-column directory of topic links (formatted names) grouped under category headings — replacing the flat full-width chip grid. Trending leaderboards become a titled section. - Topic page: drop the bordered card header for a clean centered identity header (larger title, stat row, description, Follow/Following + Block), wrap all content in a centered max-w column with consistent rhythm and section dividers, and align the feeds/rails to the column. - Category section renders topic links (formatKeyword) instead of chips. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…tory Move the trending, popular, and recently-added lists up to sit between the hero separator and the category directory, and render them flat as link columns (same treatment as the categories) instead of bordered leaderboard cards. A single border divider separates the featured lists from the full directory. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Replace the category-grouped directory with an alphabetical browse: tags are grouped by first letter (A–Z + #) under letter headings, and a letter filter sits below the search to narrow the directory to a single letter (disabled letters that have no tags, "All" to reset). Trending/popular/recently-added flat lists remain above the directory. tagsCategories stays plumbed for future category browsing. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Remove the divider below the featured lists (it read as a double border next to the first letter heading's rule). - Cap each letter group at 40 tags with a "Show all N tags" toggle so dense letters don't dominate the page. - Hide the trending/popular/recently-added lists once a letter is selected, so that letter's tags sit directly under the A–Z filter (live update). - Rename the topic-page entity label from "Topic" to "Tag". Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Dramatically improve the /explore/[tag] page: - Content (recommended stories, who-to-follow, top sources, feeds) now spans the full content width instead of being squeezed in a narrow column; only the identity header stays centered & readable. - Widen the description paragraph so it wraps over fewer lines. - New shared ExploreEntityCard (avatar, name, @handle, bio, full-width Follow button at the bottom) used for BOTH "Who to follow" (users) and "Top sources covering it" (sources), laid out in a responsive grid with skeletons. - Followers stat remains in the header (renders once the backend field lands). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add a shared ExploreTopicNav chip bar shown at the top of both the lobby and every topic page: an "Explore" entry that returns to the lobby (active on the lobby), followed by the user's selected/followed tags and then recommended tags. On a topic page the current tag is pinned first and marked active. This replaces the topic page's related-tags bar so navigation stays consistent (Medium's topic-bar pattern), with roving keyboard nav and a gradient fade. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
- Routing: the discovery surface is canonical at /tags (the standalone /explore feed is a separate page). All internal links, the Explore nav pill, feed-nav entry, and canonical URLs now point to /tags; /explore stays a working alias. The "Explore" item is always first and returns to the /tags lobby. - Entity cards: add the reputation badge for users (like the profile tooltip); users + sources share one card with a full-width Follow button. - Add a right-edge gradient fade to the horizontal post rails so the last card blends into the background instead of being hard-cut. - Remove the duplicated "Recommended stories" heading (the rail owns it). - Unify the topic page gutter (px-4 tablet:px-6) and cap/center the column so titles, grids, and rails align consistently. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add a signup-first conversion banner above the feed on topic pages, aimed at the high-traffic logged-out SEO/AEO landings (mirrors the new-tab hijacking strip from #6127): a tag-contextual headline, concrete value props (feed tuned to your stack, save posts, upvote & discuss, never miss what matters), a primary "Sign up — it's free" CTA with "Log in" secondary, and free-forever reassurance. Renders only for logged-out users and logs impression + click events to measure conversion. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Introduce a shared ExploreHubHeader (primary tabs: Stories · Topics · Sources · People) rendered above each discovery surface so they read as one hub, while each page keeps its route and secondary controls (Option A): - Topics lobby + topic page: hub header on top; the topic page's related-tags bar (ExploreTopicNav) loses its now-redundant "Explore" pill since the hub's Topics tab returns to the lobby. - Sources + Leaderboard pages: hub header added above their content (flag-gated). - Stories: hub header rendered in FeedExploreHeader above the Popular/Upvoted/ Discussed/Latest/Best-of sub-tabs; removed the stopgap "Topics" sub-tab. Active tab is derived from the route; keyboard-navigable; flag-gated via featureExploreTopics. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
…eader Lobby: - Each topic row now shows a follow control: a persistent check indicator on topics you already follow, and a subtle "+" that appears on hover/focus for the rest (ExploreTagListItem), wired through useTagAndSource (logged-out → login). Applies to the A–Z directory and the featured lists. - Search is now live: typing filters the whole directory client-side and shows a results view instead of a separate autocomplete. - The hub header replaces the "Explore" page title and gains a bottom border, so the lobby and topic pages share the same header. Topic page: - "Who to follow" and "Top sources" now use the canonical UserEntityCard / SourceEntityCard (compact, with handle, bio, followers/upvotes, reputation) in a wrapping row, replacing the oversized custom card; sources query now fetches membersCount + flags.totalUpvotes. 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
Rebuilds tag/topic discovery as a Medium-inspired Explore experience, behind the
explore_topics_v2GrowthBook flag (default ON for review).Explore lobby (
/explore)SEARCH_TAGS_QUERY) with a "Recommended:" quick row.tagsCategories(emoji + title + tag chips).Topic page (
/explore/[tag])· {followers} · {stories}stats, Follow + Block, share/new-feed menu, sponsored hero + roadmap preserved.UserEntityCard) rail, and Top sources.getStaticPropsreused via a sharedlib/topicPage.tshelper.Routing & nav
/tagsand/tags/[tag]render the new design when the flag is on (legacy as fallback);/explore*redirect to/tags*when off. Canonical topic URL is/explore/[tag].Backend dependency
Tag follower count is not yet in the GraphQL schema. The header renders the followers stat only when the optional
Keyword.followersfield is present — it lights up automatically once the backend exposes it. Posts/stories count ships now.Testing
TagPagesuite (now exercising the default-on Explore topic page) — 12/12 pass.ExploreTopicsPagelobby test — 3/3 pass.🤖 Generated with Claude Code
Preview domain
https://claude-gifted-wozniak-1a0c4b.preview.app.daily.dev