Improve GitHub stats and add slash separators #1612
Merged
Conversation
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
Implement dynamic GitHub repository stats fetching using React Query and replace hardcoded values. Extract slash separator pattern into a reusable component to clean up section transitions across the landing page.
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughCentralizes GitHub repo stats into a new React Query hook and constants, adds a reusable SlashSeparator component, updates several pages (index, download, pricing) to use the separator and new CTA/FAQ sections, changes booking/CTA routing to a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Web as Web App
participant ReactQuery as React Query
participant GitHub as GitHub API
participant Cal as Cal.com
User->>Web: Open page (uses GitHub stats)
Web->>ReactQuery: useGitHubStats (["github-stats"])
ReactQuery->>GitHub: GET /repos/{GITHUB_ORG_REPO}
GitHub-->>ReactQuery: { stargazers_count, forks_count }
ReactQuery-->>Web: githubStats.data
alt Data present
Web->>User: Render stars/forks from githubStats.data
else No data
Web->>User: Render GITHUB_LAST_SEEN_* fallback values
end
User->>Web: Click booking/CTA
Web->>Web: Navigate to /founders
Web->>Cal: beforeLoad redirect -> Cal.com/team/hyprnote/welcome...
Cal-->>User: Cal.com booking page opens
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Possibly related PRs
Pre-merge checks and finishing touches✅ Passed checks (2 passed)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
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: 3
🧹 Nitpick comments (1)
apps/web/src/components/github-stars.tsx (1)
11-21: Consider adding error handling and query configuration.The GitHub API has rate limits (60 requests/hour unauthenticated) and may fail. Consider adding error handling and query configuration to improve resilience:
const githubStats = useQuery({ queryKey: ["github-stats"], queryFn: async () => { const response = await fetch(`https://api.github.com/repos/${ORG_REPO}`); + if (!response.ok) { + throw new Error(`GitHub API error: ${response.status}`); + } const data = await response.json(); return { stars: data.stargazers_count ?? LAST_SEEN_STARS, forks: data.forks_count ?? LAST_SEEN_FORKS, }; }, + staleTime: 5 * 60 * 1000, // 5 minutes + retry: 2, });
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
apps/web/src/routeTree.gen.tsis excluded by!**/*.gen.ts
📒 Files selected for processing (8)
apps/web/src/components/github-open-source.tsx(2 hunks)apps/web/src/components/github-stars.tsx(2 hunks)apps/web/src/components/slash-separator.tsx(1 hunks)apps/web/src/routes/_view/download.tsx(5 hunks)apps/web/src/routes/_view/index.tsx(3 hunks)apps/web/src/routes/_view/pricing.tsx(5 hunks)apps/web/src/routes/cal.tsx(1 hunks)apps/web/src/routes/founders.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (4)
apps/web/src/routes/founders.tsx (4)
apps/web/src/routes/_view/download.tsx (1)
Route(8-10)apps/web/src/routes/_view/index.tsx (1)
Route(91-93)apps/web/src/routes/_view/pricing.tsx (1)
Route(8-10)apps/web/src/routes/cal.tsx (1)
Route(5-7)
apps/web/src/routes/_view/pricing.tsx (2)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)packages/utils/src/cn.ts (1)
cn(20-22)
apps/web/src/routes/_view/index.tsx (1)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)
apps/web/src/routes/_view/download.tsx (1)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)
🔇 Additional comments (4)
apps/web/src/components/github-stars.tsx (2)
25-26: LGTM!The fallback pattern correctly handles both loading and error states by defaulting to
LAST_SEEN_STARS.
38-38: LGTM!The rendering correctly uses the computed
starCountvalue with proper formatting.apps/web/src/components/github-open-source.tsx (2)
4-4: LGTM!The import correctly brings in React Query for data fetching functionality.
155-156: LGTM!The computed values correctly derive from the query data with proper fallbacks, and both are appropriately used in the
StatBadgecomponents throughout the layout.
Comment on lines
+153
to
158
| <SlashSeparator /> | ||
| <ManifestoSection /> | ||
| <SlashSeparator /> | ||
| <BlogSection /> | ||
| <SlashSeparator /> | ||
| <CTASection heroInputRef={heroInputRef} /> |
There was a problem hiding this comment.
Avoid empty double separators when the blog is absent
BlogSection already returns null when there are no articles, but these two surrounding <SlashSeparator /> calls still render. In environments with no blog posts (fresh deploys, local dev), this leaves back-to-back slash bars with nothing between them, which is a visible layout glitch. Please gate the separators alongside the section so they only appear when there’s actual blog content.
Apply this diff to keep a single separator after the manifesto when the blog is empty, and wrap the blog + trailing separator inside the same condition:
@@
<ManifestoSection />
<SlashSeparator />
- <BlogSection />
- <SlashSeparator />
+ {allArticles.length > 0 && (
+ <>
+ <BlogSection />
+ <SlashSeparator />
+ </>
+ )}
<CTASection heroInputRef={heroInputRef} />Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In apps/web/src/routes/_view/index.tsx around lines 153 to 158, the two
SlashSeparator components around BlogSection render even when BlogSection
returns null, producing back-to-back separators; guard the separators with the
same condition that BlogSection uses (e.g., derive a hasBlog boolean from the
articles/posts prop or the data source) so that you render: ManifestoSection
followed by a single SlashSeparator always, but render BlogSection together with
its trailing SlashSeparator only when hasBlog is true — move the conditional to
wrap both BlogSection and the following SlashSeparator (or compute hasBlog above
and use it to conditionally render both).
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Implement dynamic GitHub repository stats fetching using React Query and replace hardcoded values. Extract slash separator pattern into a reusable component to clean up section transitions across the landing page.