feat(web): redesign opensource page with 5 new sections#2143
feat(web): redesign opensource page with 5 new sections#2143ComputelessComputer merged 10 commits intomainfrom
Conversation
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
✅ Deploy Preview for hyprnote-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for hyprnote ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Warning Rate limit exceeded@ComputelessComputer has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 4 minutes and 8 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughReplaces several static Open Source page sections with data-driven, reusable components (LetterSection, TechStackSection, SponsorsSection, ProgressSection, JoinMovementSection); adds StatCard and ConfettiIcons, integrates GitHub metrics via useGitHubStats with last-seen fallbacks, and updates CTASection to accept a heroInputRef. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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
🧹 Nitpick comments (1)
apps/web/src/routes/_view/opensource.tsx (1)
370-377: Consider updating milestone dates or making them dynamic.The milestones array contains hard-coded dates including "Dec 2024" for "5K Stars" and "2025" for "10K Stars". Since we're currently in December 2025, these dates may be outdated or already achieved. Consider either updating these to reflect current progress or implementing a dynamic milestone system that shows actual achievement dates.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/routes/_view/opensource.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/opensource.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/opensource.tsx (5)
apps/web/src/components/slash-separator.tsx (1)
SlashSeparator(1-8)packages/utils/src/cn.ts (1)
cn(20-22)apps/web/src/queries.ts (3)
useGitHubStats(9-21)GITHUB_LAST_SEEN_STARS(37-37)GITHUB_LAST_SEEN_FORKS(38-38)apps/web/src/components/image.tsx (1)
Image(4-24)apps/web/src/components/download-button.tsx (1)
DownloadButton(7-56)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: Redirect rules - hyprnote-storybook
- GitHub Check: Header rules - hyprnote-storybook
- GitHub Check: Pages changed - hyprnote-storybook
- GitHub Check: Devin
🔇 Additional comments (1)
apps/web/src/routes/_view/opensource.tsx (1)
607-611: Verify icon.png file exists in public directory.The Image component references
/icon.pngwhich should be served from the public directory. If this file doesn't exist, the icon will fail to load.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/routes/_view/opensource.tsx (1)
160-165: Align gradient class names with Tailwind utilities mentioned in PR summaryYou’re using
bg-linear-to-tin the GitHub CTA button and the sponsor CTA:"bg-linear-to-t from-neutral-800 to-neutral-700 text-white", ... "bg-linear-to-t from-pink-100 to-white text-stone-700",The PR notes say
bg-linear-to-twas renamed tobg-gradient-to-twhilebg-linear-to-bremains a custom utility. To avoid relying on a possibly removed alias, consider switching these tobg-gradient-to-t:- "bg-linear-to-t from-neutral-800 to-neutral-700 text-white", + "bg-gradient-to-t from-neutral-800 to-neutral-700 text-white", ... - "bg-linear-to-t from-pink-100 to-white text-stone-700", + "bg-gradient-to-t from-pink-100 to-white text-stone-700",Also applies to: 595-599
🧹 Nitpick comments (2)
apps/web/src/routes/_view/opensource.tsx (2)
177-305: LetterSection copy and structure are coherent and accessibleThe letter content reads clearly, flows well, and is semantically wrapped in an
<article>within a<section>. The signatures and team images are correctly labeled and sized. If you intend the signature image to be purely decorative, you could setalt=""andaria-hiddenon it, but that’s optional.
781-825: JoinMovementSection grid works; border logic can be simplifiedThe contribution options and their external links look good and cover a nice range of actions. The grid/border logic for the cards behaves correctly across breakpoints, but the
hasBorderR && "lg:border-r"condition appears twice in thecnarray, which is redundant and slightly obscures intent:className={cn([ "p-6 border-neutral-100 flex flex-col justify-between", hasBorderR && "lg:border-r", hasBorderB && "lg:border-b", index % 2 === 0 && "sm:border-r lg:border-r-0", index > 1 && "border-t sm:border-t-0 lg:border-t-0", hasBorderR && "lg:border-r", // duplicate ])}You can safely drop one of the
hasBorderR && "lg:border-r"entries to simplify the class list without changing behavior.Also applies to: 826-887
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/routes/_view/opensource.tsx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/opensource.tsx
🧠 Learnings (2)
📚 Learning: 2025-11-24T16:32:19.706Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:19.706Z
Learning: Applies to **/*.{ts,tsx} : Use `motion/react` instead of `framer-motion`.
Applied to files:
apps/web/src/routes/_view/opensource.tsx
📚 Learning: 2025-11-24T16:32:23.055Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:23.055Z
Learning: Applies to **/*.{ts,tsx} : Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
Applied to files:
apps/web/src/routes/_view/opensource.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/opensource.tsx (3)
apps/web/src/routes/_view/index.tsx (1)
CTASection(2012-2105)apps/web/src/components/image.tsx (1)
Image(4-24)apps/web/src/queries.ts (2)
useGitHubStats(9-21)GITHUB_LAST_SEEN_STARS(37-37)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: fmt
- GitHub Check: ci
🔇 Additional comments (5)
apps/web/src/routes/_view/opensource.tsx (5)
2-4: CTASection heroInputRef wiring is safe but effectively unused on this page
heroInputRefis created and passed intoCTASection, but unlike the index route there is no input bound to this ref in the/opensourcetree, so the “waitlist” path inCTASectionwill only scroll to top and skip focusing/highlighting an input. This is functionally safe (guarded byif (heroInputRef.current)), but worth confirming this UX is intended for this page and not relying on the focus behavior here.Also applies to: 57-82
90-99: Hero & stargazer grid logic looks solidThe stargazer grid correctly guards against empty data (
stargazers.length > 0) before renderingStargazersGrid, so the modulo indexing overstargazers.lengthis safe from divide-by-zero and undefined access. Overall the hero layout and CTA buttons look consistent and well-structured.Also applies to: 136-175
402-421: SponsorsSection layout and links look good; just verify external targetsThe sponsors grid logic (borders per breakpoint, icon/image handling, and final “Sponsor on GitHub” CTA) is clean and consistent. The external URLs (
tauri-apps,MrKai77,jamesgpearce,github.com/sponsors/fastrepl) all look plausible, but since they’re hard-coded, they should be manually clicked once in a browser before release to confirm there are no typos or redirects.Also applies to: 519-609
611-665: ConfettiIcons + StatCard + ProgressSection implementation is correct; check hard-coded stats
useGitHubStatsis now correctly used by extractingdataand readingdata?.stars/data?.forks, with numeric fallbacks toGITHUB_LAST_SEEN_*viatoLocaleString(). This resolves the earlier destructuring bug.- Confetti icons only render on hover, so the
Math.random()usage doesn’t affect SSR hydration (initial render hasisHovered === false).- The 5-column stats layout and hover confetti trigger all look structurally sound.
Please double-check the static values before merging:
Contributors: "17"Downloads: "40k+"Discord Members: "1k+"and update them if they’re out of date.
Also applies to: 667-711, 713-779
3-4: Good use of motion/react per project guidelinesUsing
AnimatePresenceandmotionfrom"motion/react"instead offramer-motionis exactly in line with the repo’s TSX guidelines and the retrieved learnings. The hover-triggered confetti animation is nicely scoped and doesn’t introduce extra state management.Also applies to: 611-665
- Add letter section explaining why open source is necessary in AI age - Add tech stack section with sponsorship info (GitHub Sponsors, Open Collective) - Add progress section with GitHub stats and milestone timeline - Add join movement section with contribution options - Add CTA section following vs/$slug pattern Sections are separated by SlashSeparator and use consistent styling with stone color palette, serif fonts, and responsive grid layouts. Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Co-Authored-By: john@hyprnote.com <john@hyprnote.com>
Add a faint grid background to the letter section to improve visual texture and distinguish the letter from the page. The section was made relative and given a dual linear-gradient background with a 40px grid size, and the inner content was raised with a z-index so the grid sits behind the text.
Replace inline style background-image and backgroundSize with Tailwind-style utility classes on the section element. This simplifies the markup, reduces inline style usage, and consolidates positioning by moving the relative/z-index adjustments off the inner container. The change keeps the same visual grid background while making the component markup more consistent with project styling conventions.
Make the background grid lines lighter to reduce visual contrast and improve subtlety of the pattern. Updated the linear-gradient color from #f5f5f5 to #fafafa in the LetterSection to achieve a softer line appearance.
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/routes/_view/opensource.tsx (1)
140-171: Replacebg-linear-to-twithbg-gradient-to-tThe utility class
bg-linear-to-tdoes not exist in Tailwind CSS v4. Use the standard Tailwind gradient utility instead:- "bg-linear-to-t from-neutral-800 to-neutral-700 text-white", + "bg-gradient-to-t from-neutral-800 to-neutral-700 text-white",This applies to all three instances in this file:
- Line 162
- Line 596
- Line 877
Note:
bg-linear-to-bused elsewhere in the file should also be replaced withbg-gradient-to-b.
♻️ Duplicate comments (1)
apps/web/src/routes/_view/opensource.tsx (1)
437-513: Fix missing key on fragment inTechStackSectionmap
techStack.mapcurrently returns a fragment (<>...</>) without akey, while thekeyis applied only to the header<div>. React’s list diffing happens at the fragment level, so this will emit a warning and can make reconciliation brittle.You can move the key onto a real fragment wrapper:
-import { useRef, useState } from "react"; +import { Fragment, useRef, useState } from "react"; ... - <div className="grid grid-cols-6"> - {techStack.map((section) => { - return ( - <> - <div - key={`header-${section.category}`} + <div className="grid grid-cols-6"> + {techStack.map((section) => { + return ( + <Fragment key={section.category}> + <div className="col-span-6 p-6 border-t border-b border-neutral-100 bg-stone-50/50" > <h3 className="text-xl font-serif text-stone-600"> {section.category} </h3> </div> {section.items.map((tech, techIndex) => { ... })} - </> + </Fragment> ); })} </div>This keeps the grid structure (header + items as siblings) while satisfying React’s key requirements.
🧹 Nitpick comments (2)
apps/web/src/routes/_view/opensource.tsx (2)
2-4: CTA wiring withheroInputRefis currently a no-op on this routeYou create
heroInputRefand pass it toCTASection, but there is no input in this route that attaches this ref, so CTASection’s “waitlist & focus the hero input” behavior can never fire here. Functionally it’s harmless, but it means this page can’t benefit from that UX.Consider either:
- Wiring
heroInputRefto an input in this page’s hero if you intend to support the waitlist flow here, or- Making
heroInputRefoptional inCTASectionand omitting it from this route if focusing isn’t needed.Also applies to: 9-19, 58-79
787-830: JoinMovementSection grid is solid; consider minor border-class cleanupThe contributions data and CTAs cover the intended actions well, and the responsive grid works. There is a small duplication in border logic:
hasBorderR && "lg:border-r", ... hasBorderR && "lg:border-r",You can drop one of these without changing behavior:
- hasBorderR && "lg:border-r", - index % 2 === 0 && "sm:border-r lg:border-r-0", + hasBorderR && "lg:border-r", + index % 2 === 0 && "sm:border-r lg:border-r-0", - hasBorderR && "lg:border-r",Not urgent, but it keeps the class list easier to reason about.
Also applies to: 832-888
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/routes/_view/opensource.tsx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/opensource.tsx
🧠 Learnings (2)
📚 Learning: 2025-11-24T16:32:23.055Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:23.055Z
Learning: Applies to **/*.{ts,tsx} : Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
Applied to files:
apps/web/src/routes/_view/opensource.tsx
📚 Learning: 2025-11-24T16:32:19.706Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:19.706Z
Learning: Applies to **/*.{ts,tsx} : Use `motion/react` instead of `framer-motion`.
Applied to files:
apps/web/src/routes/_view/opensource.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/opensource.tsx (4)
apps/web/src/routes/_view/index.tsx (1)
CTASection(2012-2105)apps/web/src/components/image.tsx (1)
Image(4-24)owhisper/owhisper-client/src/adapter/parsing.rs (1)
value(4-4)apps/web/src/queries.ts (3)
useGitHubStats(9-21)GITHUB_LAST_SEEN_STARS(37-37)GITHUB_LAST_SEEN_FORKS(38-38)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: fmt
- GitHub Check: ci
🔇 Additional comments (9)
apps/web/src/routes/_view/opensource.tsx (9)
84-100: Stargazer avatar tweaks look goodAvatar styling (border, hover scale, opacity, and lazy-loaded
<img>) is appropriate for the grid animation, with correctrel="noopener noreferrer"for external links.
136-175: Hero section structure and Stargazers integration are solidHeroSection cleanly integrates
useGitHubStargazerswith a guarded grid render (stargazers.length > 0), uses a radial overlay for readability, and exposes clear primary CTAs. No logical issues found.
177-305: LetterSection content and semantics look goodThe letter uses an
<article>wrapper, appropriate heading levels, list markup, and the sharedImagecomponent for team avatars/signature. Copy is clear and layout classes are consistent; nothing blocking here.
307-400: Tech stack data is well-structuredThe
techStackdata covers the major technologies with accurate names/links and a consistent shape (iconvsimageUrl). This should feed the grid cleanly and is easy to extend later.
402-421: Sponsors data list is straightforwardThe
sponsorsarray is minimal and coherent (single union of icon-based vs image-based entries), and works well with the conditional rendering inSponsorsSection.
519-609: SponsorsSection grid and CTA behavior look correctThe sponsors grid applies borders responsively based on index, renders either icon or avatar image, and ends with a clear sponsorship CTA linking to GitHub Sponsors. Structure and logic are sound.
611-665: ConfettiIcons hover animation is constrained and safeConfettiIcons generates a small in-memory list of items, renders only on hover, and is wrapped in
AnimatePresencewithpointer-events-none, so it shouldn’t impact layout or interactivity. No issues seen.
667-717: StatCard hover behavior and layout look goodStatCard’s local hover state drives ConfettiIcons only while hovered, and the layout (icon + value + label) is vertically balanced. Border logic via
hasBorderkeeps styling control at the caller, which is clean.
719-785: GitHub stats wiring now correctly usesuseGitHubStatsdata with fallbacksProgressSection destructures
datafromuseGitHubStats()and derivesstars/forksfrom it, then falls back toGITHUB_LAST_SEEN_*when data is absent.toLocaleString()keeps display formatting consistent, and the stats array cleanly feeds StatCard.
Fix React key warnings by moving the key from an inner header div to the mapped fragment. The techStack.map() returned a shorthand fragment without a key while the key was placed on a nested div, which can still trigger React list-key issues. Replace the shorthand fragment with a keyed Fragment (imported from React) and remove the key from the inner div so each mapped section has a unique key at the fragment level.
ComputelessComputer
force-pushed
the
devin/1764923809-opensource-redesign
branch
from
f4da996 to
a9e006b
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/web/src/routes/_view/opensource.tsx(6 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Avoid creating a bunch of types/interfaces if they are not shared. Especially for function props, just inline them instead.
Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
If there are many classNames with conditional logic, usecn(import from@hypr/utils). It is similar toclsx. Always pass an array and split by logical grouping.
Usemotion/reactinstead offramer-motion.
Files:
apps/web/src/routes/_view/opensource.tsx
🧠 Learnings (2)
📚 Learning: 2025-11-24T16:32:23.055Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:23.055Z
Learning: Applies to **/*.{ts,tsx} : Never do manual state management for form/mutation. Use useForm (from tanstack-form) and useQuery/useMutation (from tanstack-query) instead for 99% of cases. Avoid patterns like setError.
Applied to files:
apps/web/src/routes/_view/opensource.tsx
📚 Learning: 2025-11-24T16:32:19.706Z
Learnt from: CR
Repo: fastrepl/hyprnote PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T16:32:19.706Z
Learning: Applies to **/*.{ts,tsx} : Use `motion/react` instead of `framer-motion`.
Applied to files:
apps/web/src/routes/_view/opensource.tsx
🧬 Code graph analysis (1)
apps/web/src/routes/_view/opensource.tsx (3)
apps/web/src/routes/_view/index.tsx (1)
CTASection(2012-2105)apps/web/src/components/image.tsx (1)
Image(4-24)apps/web/src/queries.ts (3)
useGitHubStats(9-21)GITHUB_LAST_SEEN_STARS(37-37)GITHUB_LAST_SEEN_FORKS(38-38)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: Redirect rules - hyprnote
- GitHub Check: Header rules - hyprnote
- GitHub Check: Pages changed - hyprnote
- GitHub Check: fmt
- GitHub Check: ci
🔇 Additional comments (7)
apps/web/src/routes/_view/opensource.tsx (7)
1-175: LGTM! Imports and hero section follow guidelines.The imports correctly use
motion/reactas specified in the coding guidelines, and the hero section properly integrates the stargazers grid animation with the restored hero content.
177-305: LGTM! Letter section content and structure are well-executed.The philosophical letter effectively communicates the open source mission, and the styling with team photos and signature adds a personal touch.
307-421: LGTM! Data structures are well-organized and consistent.The
techStack,sponsors, andcontributionsdata structures follow a consistent pattern and support flexible rendering with both icon and image URL options.
423-514: LGTM! Tech stack section handles complex responsive grid correctly.The responsive border logic is complex but functional, and the conditional rendering for icon vs imageUrl is handled properly. The
cn()usage follows the coding guidelines with arrays split by logical grouping.
516-606: LGTM! Sponsors section with integrated CTA.The section follows the same pattern as TechStackSection and includes a well-designed call-to-action for GitHub sponsorship.
608-714: LGTM! Helper components follow coding guidelines.Both
ConfettiIconsandStatCardproperly inline their props as per guidelines, andConfettiIconscorrectly usesmotion/reactfor animations. The hover state management inStatCardis appropriate for UI interactions.
716-782: Verify missing milestone timeline mentioned in PR objectives.The PR objectives describe the Progress Section as including "GitHub stats (stars, forks, contributors, countries) and milestone timeline with hardcoded dates." However, the current implementation only renders the stats grid without a milestone timeline component. Please confirm whether the timeline is intentionally deferred or should be added.
1 participant
Summary
Complete redesign of the
/opensourcepage with a new 6-section structure:Removed the previous
WhyOpenSourceSection,TransparencySection,GitHubOpenSourcecomponent, andContributeSectionin favor of the new content-focused sections.Updates since last revision
Stargazertype anduseGitHubStargazersimportsReview & Testing Checklist for Human
Review letter content - The philosophical letter about open source in AI should align with company messaging and tone. This is new marketing copy that needs approval.
Verify milestone dates and stats are accurate - The timeline shows hardcoded dates (Jan 2024 first commit, Mar 2024 public beta, Jun 2024 1K stars, Sep 2024 v1.0, Dec 2024 5K stars, 2025 10K stars) and stats (50+ contributors, 30+ countries) that need verification
Verify sponsors list is accurate - Lists Tauri, llama.cpp, and whisper.cpp as sponsored projects
Verify all external links work - Several new links added:
https://github.com/sponsors/fastreplhttps://opencollective.com/hyprnotehttps://discord.gg/Hyprnote(note: capitalization changed from previoushyprnote)Visual review on desktop and mobile - Test responsive layouts at various breakpoints. Visit
/opensourcelocally or on deploy preview to verify styling and layoutNotes
bg-linear-to-tclass was changed tobg-gradient-to-tper coderabbit review, butbg-linear-to-bwas kept as it's a custom utility used throughout the codebaseLinkfrom tanstack router,GitHubOpenSourcecomponentRESTATE_INGRESS_URLenvironment variable (unrelated to this PR)Link to Devin run: https://app.devin.ai/sessions/48c01c87f11748819e789fea4a4b9b55
Requested by: john@hyprnote.com (@ComputelessComputer)