Conversation
…nner component from the layout.
…o heading on the home page.
…styling to be smaller and rounded with capitalized text.
…NewBadge component.
… animation keyframes.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
added
docs
WalkthroughThis PR refactors the homepage announcement by replacing the Banner component with a new AnnouncementBadge component, extracts reusable badge components (NewBadge, UpdatedBadge), updates the shimmer animation range in global styles, and refactors badge usage throughout the codebase. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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: 0
🧹 Nitpick comments (4)
apps/www/components/page/quickstart-button.tsx (1)
5-21: Simplified button design by removing decorative effects.The removal of the group hover interaction and sheen effect overlay simplifies the component. The visual changes align with the overall badge refactoring in this PR.
Optional: Consider extracting the complex className
The Button's className on line 10 is quite lengthy. Consider extracting it to a constant or using Tailwind's @apply directive for better maintainability:
+const quickstartButtonStyles = "w-full sm:w-auto text-md font-semibold text-white relative overflow-hidden rounded-xl transition-all duration-200 ease-in-out bg-linear-to-br from-blue-600 via-blue-700 to-indigo-800 hover:scale-[1.05] hover:shadow-[0_8px_30px_rgba(59,130,246,0.5)] active:scale-[0.98] border-t border-white/20 shadow-[0_4px_12px_rgba(0,0,0,0.1)]"; + export function QuickstartButton() { return ( <Button asChild size="lg" - className="w-full sm:w-auto text-md font-semibold text-white relative overflow-hidden rounded-xl transition-all duration-200 ease-in-out bg-linear-to-br from-blue-600 via-blue-700 to-indigo-800 hover:scale-[1.05] hover:shadow-[0_8px_30px_rgba(59,130,246,0.5)] active:scale-[0.98] border-t border-white/20 shadow-[0_4px_12px_rgba(0,0,0,0.1)]" + className={quickstartButtonStyles} >apps/www/components/announcement-badge.tsx (1)
1-21: Well-structured announcement badge component.The component correctly uses Next.js Link, provides accessible interactive feedback with hover states, and composes the NewBadge component effectively. The ArrowUpRight icon and decorative glow enhance the user experience.
Optional: Consider extracting the lengthy className values
Both the Link (line 9) and NewBadge (line 11) have quite lengthy className strings. For better maintainability, consider extracting these to constants:
+const linkStyles = "group relative flex items-center gap-1.5 rounded-full border border-blue-500/20 bg-blue-500/5 px-1 py-1 text-sm font-medium text-blue-900 transition-all hover:bg-blue-500/10 dark:text-blue-200 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-blue-500/30"; +const badgeStyles = "h-5 font-semibold bg-blue-500/10 text-blue-700 border-blue-500/10 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/20 shadow-none hover:bg-blue-500/20 transition-colors"; + export function AnnouncementBadge() { return ( <Link href="/docs/arkenv/coercion" - className="group relative flex items-center gap-1.5 rounded-full border border-blue-500/20 bg-blue-500/5 px-1 py-1 text-sm font-medium text-blue-900 transition-all hover:bg-blue-500/10 dark:text-blue-200 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-blue-500/30" + className={linkStyles} > - <NewBadge className="h-5 font-semibold bg-blue-500/10 text-blue-700 border-blue-500/10 dark:bg-blue-500/15 dark:text-blue-300 dark:border-blue-500/20 shadow-none hover:bg-blue-500/20 transition-colors" /> + <NewBadge className={badgeStyles} />apps/www/components/ui/new-badge.tsx (2)
4-12: LGTM! Clean NewBadge component implementation.The component is well-structured and properly uses the cn utility for className merging.
Optional: Consider using explicit type alias
Per coding guidelines, prefer
typefor type definitions. Consider defining an explicit type for the props:+type BadgeProps = { className?: string }; + -export function NewBadge({ className }: { className?: string }) { +export function NewBadge({ className }: BadgeProps) {This can be shared between both badge components for consistency.
As per coding guidelines, prefer
typeover inline type definitions.
14-25: LGTM! Clean UpdatedBadge component implementation.The component correctly implements the updated badge variant with appropriate font-weight distinction (font-semibold vs font-medium in NewBadge).
Optional: Consider reducing duplication
Both badge components share significant logic. Consider extracting a shared helper:
+type BadgeProps = { className?: string }; +type BadgeVariant = "new" | "updated"; + +function createBadge(variant: BadgeVariant, label: string, fontWeight: string) { + return function BadgeComponent({ className }: BadgeProps) { + return ( + <Badge + className={cn( + "h-4.5 text-xs px-1.5 rounded-full", + fontWeight, + className, + )} + > + {label} + </Badge> + ); + }; +} + -export function NewBadge({ className }: { className?: string }) { - return ( - <Badge - className={cn("h-4.5 text-xs px-1.5 font-medium rounded-full", className)} - > - New - </Badge> - ); -} +export const NewBadge = createBadge("new", "New", "font-medium"); +export const UpdatedBadge = createBadge("updated", "Updated", "font-semibold"); - -export function UpdatedBadge({ className }: { className?: string }) { - return ( - <Badge - className={cn( - "h-4.5 text-xs px-1.5 font-semibold rounded-full", - className, - )} - > - Updated - </Badge> - ); -}Alternatively, keep them separate if you anticipate more divergence in the future.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
apps/www/app/(home)/page.tsxapps/www/app/globals.cssapps/www/app/layout.tsxapps/www/components/announcement-badge.tsxapps/www/components/banner.tsxapps/www/components/page/quickstart-button.tsxapps/www/components/ui/new-badge.tsxapps/www/content/docs/arkenv/meta.jsonapps/www/lib/source.tsx
💤 Files with no reviewable changes (2)
- apps/www/components/banner.tsx
- apps/www/app/layout.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Prefertypeoverinterfacefor type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverageconsttype parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypeserror)
Useas constwhere appropriate for immutable values (useAsConstAssertionerror)
Don't reassign function parameters (noParameterAssignerror)
Place default parameters last in function signatures (useDefaultParameterLasterror)
Always initialize enum values (useEnumInitializerserror)
Declare one variable per statement (useSingleVarDeclaratorerror)
Avoid unnecessary template literals (noUnusedTemplateLiteralerror)
PreferNumber.parseIntover globalparseInt(useNumberNamespaceerror)
Use kebab-case for TypeScript filenames (e.g.,create-env.ts)
Use camelCase for function names (e.g.,createEnv)
Use PascalCase for type names (e.g.,ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
UseArkEnvErrorfor environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type
**/*.{ts,tsx}: UsecreateEnv(schema)function (or default import asarkenv) to create validated environment objects in TypeScript
Use built-in validators (host, port, url, email) from ArkEnv when available instead of custom ArkType schemas
Provide default values for optional environment variables using ArkType syntax (e.g., 'boolean = false')
Use ArkEnvError for environment variable errors instead of generic Error types
For environment schema definition, use ArkType string literal syntax for enumerated values (e.g., "'deve...
Files:
apps/www/components/announcement-badge.tsxapps/www/lib/source.tsxapps/www/components/page/quickstart-button.tsxapps/www/components/ui/new-badge.tsxapps/www/app/(home)/page.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use self-closing JSX elements (
useSelfClosingElementserror)
Files:
apps/www/components/announcement-badge.tsxapps/www/lib/source.tsxapps/www/components/page/quickstart-button.tsxapps/www/components/ui/new-badge.tsxapps/www/app/(home)/page.tsx
apps/www/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)
apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.
Files:
apps/www/components/announcement-badge.tsxapps/www/lib/source.tsxapps/www/components/page/quickstart-button.tsxapps/www/components/ui/new-badge.tsxapps/www/app/(home)/page.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-25T21:14:15.510Z
Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 616
File: apps/www/app/(home)/page.tsx:18-18
Timestamp: 2025-12-25T21:14:15.510Z
Learning: In projects using fumadocs-ui's HomeLayout, do not render a top-level <main> inside page components because HomeLayout already provides a main landmark with id="nd-home-layout". Ensure that page.tsx (and other pages that compose HomeLayout) return content without wrapping a new <main>, and rely on HomeLayout's landmark for accessibility. If a page needs a landmark, use subregions like <section> or <div role="region"> inside the existing main, but avoid duplicate main elements. Verify that HomeLayout is used and that the id remains unique.
Applied to files:
apps/www/app/(home)/page.tsx
🧬 Code graph analysis (2)
apps/www/components/announcement-badge.tsx (2)
apps/www/components/ui/new-badge.tsx (1)
NewBadge(4-12)apps/www/components/ui/badge.tsx (2)
BadgeProps(25-27)props(29-31)
apps/www/components/page/quickstart-button.tsx (1)
apps/www/components/ui/button.test.tsx (1)
afterEach(6-104)
⏰ 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). (3)
- GitHub Check: test-e2e (a11y)
- GitHub Check: test-e2e (e2e)
- GitHub Check: test-build (latest)
🔇 Additional comments (6)
apps/www/app/globals.css (1)
41-47: LGTM! Enhanced shimmer animation range.The shimmer animation now travels from -200% to 200%, creating a more pronounced effect. This aligns well with the new badge components introduced in this PR.
apps/www/content/docs/arkenv/meta.json (1)
16-16: LGTM! Updated integration label.The integration label has been updated from "VSCodium" to "Trae" while maintaining the same documentation link.
apps/www/lib/source.tsx (2)
7-7: LGTM! Updated import for new badge components.The import path has been correctly updated to use the new dedicated badge components.
21-22: LGTM! Refactored to use dedicated badge components.The inline Badge usage has been properly replaced with NewBadge and UpdatedBadge components, maintaining the same className for ordering. This improves consistency across the codebase.
apps/www/app/(home)/page.tsx (2)
2-2: LGTM! Added AnnouncementBadge import.The import is correctly structured and follows the project's import conventions.
24-28: AnnouncementBadge integrated with adjusted spacing.The AnnouncementBadge has been successfully integrated above the main heading with appropriate spacing adjustments. The layout properly accommodates the new badge without introducing accessibility issues (no duplicate
<main>elements).Based on learnings, this correctly avoids wrapping content in a
<main>element, as HomeLayout already provides the main landmark.
1 participant
Summary by CodeRabbit
Release Notes
New Features
Improvements
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.