feat(website): hero rebuild — npx CTA + inline validation + SSR star count#425
Merged
Conversation
…count Five user-reported issues against agent-memory.dev v0.9.16: 1. AGENT/MEMORY title was clamp(54px, 12vw, 160px) — eating ~half the viewport on most desktop widths and forcing FeaturedIn below the fold. Reduced to clamp(44px, 9vw, 124px). Mobile-stacked variant now clamp(40px, 14vw, 72px) — cleaner. 2. Primary CTA was a generic "START IN 30 SECONDS" button that anchored to #install. Replaced with a copyable terminal command — `$ npx @agentmemory/agentmemory` rendered as a gold-bordered cell with "CLICK TO COPY" affordance. Copy → clipboard, transient "COPIED" state. Matches what users actually type. 3. FeaturedIn was a standalone section below the fold. Now inlined inside the hero (compact mode — no border, no own padding, transparent background) so AlphaSignal / Agentic AI Foundation / Trendshift validation lands above the fold. 4. Star count was missing from the hero CTA button. The component only fetched client-side from unauthenticated github.com/api which is rate-limited to ~60 req/hr/IP — first paint had no count, often forever on mobile (which is what the user screenshot showed). Hero is now an async server component; calls lib/github.ts fetchRepoStats (same path Nav already uses), passes the SSR'd count into GitHubStarButton via new optional initialStars prop. Client-side refetch still fires in useEffect as a best-effort refresh. 5. Mobile layout was unverified. Tightened all clamp() values, added explicit @media (max-width: 760px) breakpoint that drops padding, stacks the title, and reduces the chip size. The new HeroNpxCommand has its own mobile breakpoint at 640px that hides the "CLICK TO COPY" hint and stretches to full width. CTA stacks vertically now: copyable command (primary, gold border) on row 1, then "SEE IT MOVE" + STAR-with-count on row 2. FeaturedIn strip sits below row 2 as part of the above-the-fold validation. Build clean. No new deps.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe PR refactors the homepage hero section by introducing a new interactive copy-to-clipboard component for the ChangesHero Section Interactive Components & SSR Optimization
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@website/components/Hero.tsx`:
- Line 11: The call to fetchRepoStats() in the Hero component can throw and
break the render; wrap the await fetchRepoStats() call in a try/catch (or use
.catch) and assign a safe fallback (e.g., an empty stats object or zeros) to the
stats variable so rendering can proceed; also guard any subsequent reads of
stats in the Hero render logic (e.g., when accessing stats.stars or stats.forks)
to use the fallback values when fetchRepoStats fails.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: e93bdb8a-b7a5-4b15-88fe-0d978f72e60a
📒 Files selected for processing (9)
website/app/page.tsxwebsite/components/FeaturedIn.module.csswebsite/components/FeaturedIn.tsxwebsite/components/GitHubStarButton.tsxwebsite/components/Hero.module.csswebsite/components/Hero.tsxwebsite/components/HeroNpxCommand.module.csswebsite/components/HeroNpxCommand.tsxwebsite/lib/generated-meta.json
💤 Files with no reviewable changes (1)
- website/app/page.tsx
| export function Hero() { | ||
| export async function Hero() { | ||
| const meta = getProjectMeta(); | ||
| const stats = await fetchRepoStats(); |
There was a problem hiding this comment.
Guard the stats fetch to prevent render-path failure.
At Line 11, await fetchRepoStats() has no local fallback. If that call throws, the hero can fail to render. Add a safe fallback so the page still ships core content.
Proposed fix
export async function Hero() {
const meta = getProjectMeta();
- const stats = await fetchRepoStats();
+ const stats = await fetchRepoStats().catch(() => ({ stars: 0 }));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const stats = await fetchRepoStats(); | |
| export async function Hero() { | |
| const meta = getProjectMeta(); | |
| const stats = await fetchRepoStats().catch(() => ({ stars: 0 })); |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@website/components/Hero.tsx` at line 11, The call to fetchRepoStats() in the
Hero component can throw and break the render; wrap the await fetchRepoStats()
call in a try/catch (or use .catch) and assign a safe fallback (e.g., an empty
stats object or zeros) to the stats variable so rendering can proceed; also
guard any subsequent reads of stats in the Hero render logic (e.g., when
accessing stats.stars or stats.forks) to use the fallback values when
fetchRepoStats fails.
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.
Summary
Five issues caught on agent-memory.dev v0.9.16:
$ npx @agentmemory/agentmemoryterminal command as primary CTA (gold border, click-to-copy, transient 'COPIED' state).lib/github.ts fetchRepoStats(same path Nav uses) and passes the SSR'd value into a newinitialStarsprop on GitHubStarButton.Test plan
npm run buildcleanSummary by CodeRabbit
New Features
Improvements