docs(overview): add neon gradient card to hero page #227
Conversation
📝 WalkthroughWalkthroughThis pull request introduces the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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 (2)
libs/docs/components/ui/neon-gradient-card.tsx (1)
89-103: Consider debouncing the resize listener.Repeatedly calling
updateDimensionson everyresizeevent can cause performance bottlenecks in rapid resizes. For smoother performance, consider debouncing or throttling this listener.+ import { debounce } from 'lodash' useEffect(() => { - const updateDimensions = () => { + const updateDimensions = debounce(() => { ... - } + }, 250) ... }, [])apps/docs/content/docs/index.mdx (1)
44-44: Minor grammar improvement.Static analysis indicates a missing determiner. You could insert “the” for smoother phrasing, e.g.:
“Here are the and text gradient enhancements…”
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
apps/docs/content/docs/index.mdx(1 hunks)apps/docs/tailwind.config.js(2 hunks)libs/docs/components/ui/neon-gradient-card.tsx(1 hunks)
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/index.mdx
[uncategorized] ~31-~31: A determiner appears to be missing. Consider inserting it.
Context: ...) hackathon platform. <NeonGradientCard className="animate-background-position-s...
(AI_EN_LECTOR_MISSING_DETERMINER)
🔇 Additional comments (11)
apps/docs/tailwind.config.js (3)
14-14: Ensured Tailwind scans new documentation routes.
Adding ./content/docs/**/*.{md,mdx} to the content array is correct. This ensures Tailwind processes the newly added page paths for class extraction.
67-81: Good use of custom keyframes for gradient and background animations.
Defining background-position-spin and text-gradient keyframes is a neat approach to creating visually appealing animated gradients.
83-89: Animation configuration looks consistent.
The addition of background-position-spin and text-gradient to animation is aligned with Tailwind's configuration patterns. This extension allows reusability across components.
libs/docs/components/ui/neon-gradient-card.tsx (6)
16-19: Straightforward color configuration.
Defining a dedicated NeonColorsProps interface is a clean approach to clarifying expected neon color fields.
21-70: Clear interface definitions with thorough prop documentation.
The doc comments help others understand the usage of each prop, which encourages maintainability.
72-76: Good practice using a default object constant.
Extracting defaultNeonColors outside the component prevents redefinitions on each render. This improves performance and readability.
78-85: Robust default prop usage and spread operator.
Using default props along with the spread operator ensures flexible composition and reduces boilerplate.
105-110: Proper dimension update when children change.
Rechecking dimensions on children updates is a positive measure, ensuring the neon card resizes properly if nested content changes dynamically.
112-153: Neat usage of CSS variables for dynamic neon styling.
Leveraging CSS custom properties for dimension-based styling is an elegant solution. The layered pseudo-elements with gradient backgrounds produce a compelling neon effect.
apps/docs/content/docs/index.mdx (2)
27-28: Successful import of the new neon card component.
Importing NeonGradientCard is succinct and clearly aligned with the new file structure.
31-41: Well-structured usage of NeonGradientCard.
Wrapping the <img> within NeonGradientCard effectively showcases the neon border, enhancing the visual appeal on the landing content.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~31-~31: A determiner appears to be missing. Consider inserting it.
Context: ...) hackathon platform. <NeonGradientCard className="animate-background-position-s...
(AI_EN_LECTOR_MISSING_DETERMINER)
HasithDeAlwis
force-pushed
the
anakafeel/docs/225-add-neon-gradient-card
branch
from
17c21ba to
5a02d4d
Compare
|
Following changes were made
|
HasithDeAlwis
force-pushed
the
anakafeel/docs/225-add-neon-gradient-card
branch
from
5a02d4d to
04ffef9
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
libs/external/magic-ui/components/ui/neon-gradient-card.stories.tsx (1)
4-12: Consider accessibility improvements in the default children.
The default children example is good for demonstrating usage; however, you might consider adding analttext that describes the image content more explicitly or clarifying the purpose for end users.libs/external/magic-ui/components/ui/neon-gradient-card.tsx (1)
87-102: Window resize handling is correct, but consider throttling or debouncing.
Depending on usage and performance requirements, you could optimize the resize updates to avoid re-renders on rapid window resizes.libs/docs/components/ui/neon-gradient-card.tsx (1)
89-102: Optional: throttle or debounce resize.
As with the external version, consider throttling or debouncing the resize listener for improved performance if you anticipate frequent resizes.apps/docs/content/docs/index.mdx (1)
44-44: Optimize gradient text implementationThe gradient configuration is duplicated across multiple spans, making the code verbose and harder to maintain. Consider extracting these common styles into a custom Tailwind component or CSS class.
Create a custom class in your Tailwind config:
// tailwind.config.js module.exports = { theme: { extend: { + textGradient: { + DEFAULT: 'bg-gradient-to-r from-[#ff00aa] via-[#00FFF1] to-[#ff00aa] bg-[length:400%_400%] text-transparent bg-clip-text font-bold animate-text-gradient', + }, }, }, }Then simplify the spans:
-<span className="bg-gradient-to-r from-[#ff00aa] via-[#00FFF1] to-[#ff00aa] bg-[length:400%_400%] text-transparent bg-clip-text font-bold animate-text-gradient"> +<span className="text-gradient">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/docs/content/docs/index.mdx(1 hunks)apps/docs/tailwind.config.js(2 hunks)libs/docs/components/ui/neon-gradient-card.stories.tsx(1 hunks)libs/docs/components/ui/neon-gradient-card.tsx(1 hunks)libs/external/magic-ui/components/ui/neon-gradient-card.stories.tsx(1 hunks)libs/external/magic-ui/components/ui/neon-gradient-card.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/docs/tailwind.config.js
🧰 Additional context used
🪛 LanguageTool
apps/docs/content/docs/index.mdx
[uncategorized] ~31-~31: A determiner appears to be missing. Consider inserting it.
Context: ...) hackathon platform. <NeonGradientCard className="animate-background-position-s...
(AI_EN_LECTOR_MISSING_DETERMINER)
🔇 Additional comments (10)
libs/external/magic-ui/components/ui/neon-gradient-card.stories.tsx (2)
14-20: Story metadata looks clean and straightforward.
You've specified a clear title, a direct reference to NeonGradientCard, and a centered layout. This effectively communicates the purpose of the story.
31-53: Adequate control definitions for props.
Good job disabling controls for children while providing meaningful ranges for numeric props. This ensures that Storybook users can intuitively experiment with various design options.
libs/docs/components/ui/neon-gradient-card.stories.tsx (3)
4-12: Ensure consistent alt text usage.
Similar to the previous story file, confirm that the image is described meaningfully for screen readers.
14-20: Title spacing and naming are clear.
Using “📚 Docs Site/Neon Gradient Card” helps keep stories organized. This is beneficial for large Storybook catalogs.
31-53: Keeping prop controls consistent with the external story version.
Repeating the approach in both story files ensures a unified documentation experience for the NeonGradientCard.
libs/external/magic-ui/components/ui/neon-gradient-card.tsx (2)
8-9: Check the availability of the cn import.
Ensure the @shadcn/lib/utils package is consistently included in your dependencies and that it doesn't introduce extra overhead. If you’ve removed certain dependencies from libs/docs, confirm they’re still required or installed for libs/external/magic-ui.
110-151: Neon gradient style approach is robust.
Leverages CSS variables nicely for a flexible and dynamic neon effect. The placeholders for before and after pseudo-elements are well-structured. This is a good separation of design concerns.
libs/docs/components/ui/neon-gradient-card.tsx (2)
8-9: Confirm newly referenced utility path.
@cuhacking/shared/utils/cn must be present in your workspace and properly maintained. Verify that it provides the same functionality as the previously used utility in other files.
130-148: Consistency in naming and background gradient usage.
Your property definitions and usage match well across the story files, ensuring consistency. It’s a good practice to keep neon effect toggles or variations consistent for brand alignment.
apps/docs/content/docs/index.mdx (1)
27-28: LGTM!
The import statement is properly structured and well-organized.
| <NeonGradientCard | ||
| className="animate-background-position-spin flex items-center justify-center h-auto z-5" | ||
| > | ||
| <div className="w-full h-auto overflow-hidden rounded-[calc(19px-3px)] bg-transparent"> | ||
| <img | ||
| className="block w-full h-full object-cover m-0 p-0" | ||
| src="https://github.com/user-attachments/assets/1a0a5cb7-95fd-49ce-a8b5-4742cccb1cc8" | ||
| alt="2025 Docs Site Cover" | ||
| /> | ||
| </div> | ||
| </NeonGradientCard> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Several improvements needed for the NeonGradientCard implementation
-
The image source URL points to a GitHub user attachment which might not be permanent. Consider moving it to a more stable location within your project's assets.
-
The border radius calculation (
calc(19px-3px)) in the className seems brittle. Consider using Tailwind's built-in border radius classes or defining a custom theme value. -
The
z-5class seems arbitrary and might cause stacking context issues. Consider if this z-index is really necessary. -
The alt text could be more descriptive to improve accessibility.
Here's a suggested improvement:
<NeonGradientCard
- className="animate-background-position-spin flex items-center justify-center h-auto z-5"
+ className="animate-background-position-spin flex items-center justify-center h-auto"
>
<div className="w-full h-auto overflow-hidden rounded-[calc(19px-3px)] bg-transparent">
<img
className="block w-full h-full object-cover m-0 p-0"
- src="https://github.com/user-attachments/assets/1a0a5cb7-95fd-49ce-a8b5-4742cccb1cc8"
+ src="/assets/images/docs-site-cover-2025.png"
- alt="2025 Docs Site Cover"
+ alt="cuHacking 2025 Documentation Site Hero Image featuring gradient effects and modern design elements"
/>
</div>
</NeonGradientCard>Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~31-~31: A determiner appears to be missing. Consider inserting it.
Context: ...) hackathon platform. <NeonGradientCard className="animate-background-position-s...
(AI_EN_LECTOR_MISSING_DETERMINER)
MFarabi619
force-pushed
the
anakafeel/docs/225-add-neon-gradient-card
branch
from
04ffef9 to
d773380
Compare
MFarabi619
changed the title
MFarabi619
changed the title
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
libs/docs/components/ui/neon-gradient-card.stories.tsx (2)
4-12: Consider improving the default children implementation.A few suggestions to enhance reliability and maintainability:
- The hardcoded GitHub image URL might break if the asset is moved or deleted. Consider using a local asset or a more stable URL.
- The border radius calculation
calc(19px-3px)is hardcoded and might not align with the card'sborderRadiusprop.- The alt text could be more descriptive for better accessibility.
Consider this improvement:
const defaultChildren = ( - <div className="w-full h-auto overflow-hidden rounded-[calc(19px-3px)] bg-transparent"> + <div className="w-full h-auto overflow-hidden rounded-[calc(var(--border-radius)-3px)] bg-transparent"> <img className="block w-full h-full object-cover m-0 p-0" - src="https://github.com/user-attachments/assets/1a0a5cb7-95fd-49ce-a8b5-4742cccb1cc8" - alt="2025 Docs Site Cover" + src="/assets/docs-cover.png" + alt="CU Hacking 2025 Documentation Site Cover - Showcasing the neon gradient card component" /> </div> )
14-54: Enhance Storybook controls configuration.The metadata configuration is well-structured, but could be improved with:
- Preset color combinations for neonColors
- Step controls for borderSize and borderRadius
Consider these enhancements:
argTypes: { 'borderSize': { - control: { type: 'number', min: 1, max: 20 }, + control: { type: 'number', min: 1, max: 20, step: 1 }, }, 'borderRadius': { - control: { type: 'number', min: 0, max: 50 }, + control: { type: 'number', min: 0, max: 50, step: 1 }, }, 'neonColors': { - control: 'object', + control: 'select', + options: { + 'Pink & Cyan': { firstColor: '#ff00aa', secondColor: '#00FFF1' }, + 'Purple & Blue': { firstColor: '#7928CA', secondColor: '#FF0080' }, + 'Orange & Yellow': { firstColor: '#FF4D4D', secondColor: '#F9CB28' }, + }, }, - 'neonColors.firstColor': { - control: 'color', - }, - 'neonColors.secondColor': { - control: 'color', - },libs/external/magic-ui/components/ui/neon-gradient-card.stories.tsx (3)
4-12: Consider improvements to the default children implementation.A few suggestions to enhance maintainability and accessibility:
- The rounded corner calculation
calc(19px-3px)is hardcoded and might not align with the dynamicborderSizeprop. Consider using a dynamic calculation.- The image URL points to a GitHub user attachment which might not be accessible in all environments. Consider moving it to a more stable location within your project assets.
- The alt text could be more descriptive for better accessibility.
Here's a suggested improvement:
const defaultChildren = ( - <div className="w-full h-auto overflow-hidden rounded-[calc(19px-3px)] bg-transparent"> + <div className={`w-full h-auto overflow-hidden rounded-[calc(${borderRadius}px-${borderSize}px)] bg-transparent`}> <img className="block w-full h-full object-cover m-0 p-0" - src="https://github.com/user-attachments/assets/1a0a5cb7-95fd-49ce-a8b5-4742cccb1cc8" + src="/assets/images/docs-site-cover.png" - alt="2025 Docs Site Cover" + alt="CUHacking 2025 Documentation Site Cover - A modern interface showcasing our development guidelines" /> </div> )
14-54: Enhance Storybook metadata with additional documentation.The configuration is well-structured, but consider adding:
- Description for each prop in the argTypes to provide better documentation
- Validation for color inputs to ensure they're valid hex colors
Here's a suggested improvement:
argTypes: { 'children': { control: false, + description: 'Content to be displayed inside the card. Defaults to an image component.', }, 'borderSize': { control: { type: 'number', min: 1, max: 20 }, + description: 'Size of the neon border in pixels. Range: 1-20px', }, 'borderRadius': { control: { type: 'number', min: 0, max: 50 }, + description: 'Border radius of the card in pixels. Range: 0-50px', }, 'neonColors': { control: 'object', + description: 'Object containing firstColor and secondColor for the gradient effect', }, 'neonColors.firstColor': { control: 'color', + description: 'First color of the gradient (hex format)', + if: { arg: 'neonColors' }, }, 'neonColors.secondColor': { control: 'color', + description: 'Second color of the gradient (hex format)', + if: { arg: 'neonColors' }, }, 'className': { control: 'text', + description: 'Additional CSS classes to apply to the card', }, },
56-60: Add description to the default story.Consider adding a description to provide context about the default story configuration.
-export const Default: Story = {} +export const Default: Story = { + parameters: { + docs: { + description: { + story: 'Default configuration of the NeonGradientCard component with a sample image.', + }, + }, + }, +}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/docs/content/docs/index.mdx(2 hunks)apps/docs/tailwind.config.js(2 hunks)libs/docs/components/ui/neon-gradient-card.stories.tsx(1 hunks)libs/docs/components/ui/neon-gradient-card.tsx(1 hunks)libs/external/magic-ui/components/ui/neon-gradient-card.stories.tsx(1 hunks)libs/external/magic-ui/components/ui/neon-gradient-card.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/docs/tailwind.config.js
- apps/docs/content/docs/index.mdx
- libs/external/magic-ui/components/ui/neon-gradient-card.tsx
- libs/docs/components/ui/neon-gradient-card.tsx
🔇 Additional comments (4)
libs/docs/components/ui/neon-gradient-card.stories.tsx (2)
1-2: LGTM! Imports are clean and necessary.
The imports are correctly defined, importing only the required types from Storybook and the component being documented.
56-60: LGTM! Type definitions and exports are correct.
The type definitions and exports follow Storybook's best practices.
libs/external/magic-ui/components/ui/neon-gradient-card.stories.tsx (2)
1-2: LGTM!
The imports are correct and properly typed.
2-2: Verify the NeonGradientCard component implementation.
Let's ensure the component file exists and implements all the props used in this story.
✅ Verification successful
Let me verify the component implementation further by checking its content.
Component implementation is complete and properly typed
The NeonGradientCard component is fully implemented with all the required props and functionality:
- Has proper TypeScript interfaces for props (
NeonGradientCardProps) - Implements all the props used in stories:
borderSize,borderRadius,neonColors, andclassName - Includes additional props like
asandchildrenwith proper JSDoc documentation - Features a complete implementation with proper styling, animations, and responsive behavior
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the NeonGradientCard component implementation
# Check if the component file exists
echo "Checking for component file..."
fd "neon-gradient-card.tsx" --type f
# Verify the component implementation
echo "Checking component implementation..."
ast-grep --pattern 'interface $interface {
$$$
borderSize?: number
borderRadius?: number
neonColors?: {
firstColor: string
secondColor: string
}
className?: string
$$$
}'
Length of output: 492
Script:
#!/bin/bash
# Check the content of the component file
echo "Content of the component file:"
cat libs/external/magic-ui/components/ui/neon-gradient-card.tsx
# Also check for any props interface definition with a different pattern
echo -e "\nChecking for props interface with a different pattern:"
ast-grep --pattern 'type $interface = {
$$$
}'
Length of output: 4625
|
🎉 This PR is included in version 1.17.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Description
This PR implements the
NeonGradientCardcomponent and enhances the hero page on the documentation site. The card is from Magic-UI, providing reusable and visually engaging components for modern UI design.Changes:
NeonGradientCardfor dynamic gradient effects.index.mdxandtailwind.config.jsfiles.This addresses Issue #225: Improve the hero page by adding dynamic gradient components for better visual engagement.
Checklist
mainbranch before creating this PR.Screenshots (if applicable)
Before :
After:
Summary by CodeRabbit
New Features
NeonGradientCardcomponent for enhanced visual presentation.Documentation
NeonGradientCardcomponent.Chores