Redesign homepage based on shadcn and fumadocs specifications#39
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
|
@copilot 浅色模式下，首页代码看不清 |
|
@copilot 继续 |
…olors Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
抱歉截图有误！这是正确的对比： Dark Mode（深色模式）: Light Mode（浅色模式 - 已修复）: 代码预览在浅色模式下现在可以清晰看到了，使用了主题感知的颜色类（如 |
github-actions
bot
added
documentation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| @@ -0,0 +1,40 @@ | |||
| import Link from 'next/link'; | |||
| import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; | |||
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note documentation
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
In general, unused imports should be removed to keep the codebase clean and avoid confusion about which components are actually used. This also helps bundlers/tree-shakers produce smaller bundles.
Specifically for apps/docs/components/feature-card.tsx, we should edit the import from @/components/ui/card so that it only imports Card, since CardHeader, CardTitle, and CardDescription are not used anywhere in this file. No other code changes are needed because the JSX already uses native h3/p tags instead of those components. The change is localized to line 2 of this file: replace the destructuring import of four names with a single import of Card.
No new methods, imports, or definitions are required beyond that; we’re only simplifying an existing import.
| @@ -1,5 +1,5 @@ | ||
| import Link from 'next/link'; | ||
| import { Card, CardHeader, CardTitle, CardDescription } from '@/components/ui/card'; | ||
| import { Card } from '@/components/ui/card'; | ||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| interface FeatureCardProps { |
| @@ -0,0 +1,69 @@ | |||
| import Link from 'next/link'; | |||
| import { Badge } from '@/components/ui/badge'; | |||
Check notice
Code scanning / CodeQL
Unused variable, import, function or class Note documentation
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI 3 months ago
In general, unused imports should be removed to keep the code clean and avoid confusion. Since the Badge component is not used anywhere in HeroSection, the simplest and safest fix is to delete the import line for Badge.
Concretely, in apps/docs/components/hero-section.tsx, remove line 2 (import { Badge } from '@/components/ui/badge';). No other changes are needed: no additional imports, methods, or definitions are required, and existing functionality will remain unchanged because Badge was never referenced.
| @@ -1,5 +1,4 @@ | ||
| import Link from 'next/link'; | ||
| import { Badge } from '@/components/ui/badge'; | ||
| import { cn } from '@/lib/utils'; | ||
|
|
||
| interface HeroSectionProps { |
Homepage Redesign - Based on shadcn & fumadocs Specifications
Goal
重新开发首页，基于 shadcn 和 fumadocs 规范 (Redevelop homepage based on shadcn and fumadocs specifications)
Implementation Checklist
Setup Phase
Component Development
Homepage Enhancement
Testing & Validation
Screenshots
Desktop View (English)
Before:
After (Dark Mode):
After (Light Mode):
Mobile View (375px)
Chinese Version (中文)
Key Improvements
✨ Modern shadcn/ui Component System
🎨 Enhanced Visual Design
🚀 Smooth Animations & Interactions
📱 Responsive Design
🌐 i18n Support
🎯 Fumadocs Best Practices
🌓 Light/Dark Mode Support
Technical Details
New Dependencies:
class-variance-authority- Component variant managementclsx- Conditional className utilitiestailwind-merge- Tailwind class mergingNew Components:
components/ui/button.tsx- Reusable button componentcomponents/ui/card.tsx- Card component systemcomponents/ui/badge.tsx- Badge componentcomponents/feature-card.tsx- Feature showcase cardscomponents/persona-card.tsx- Persona profile cardscomponents/code-preview.tsx- Enhanced code preview with theme-aware colorscomponents/hero-section.tsx- Hero section componentlib/utils.ts- Utility functionsUpdated Files:
app/[lang]/page.tsx- Refactored to use new componentstailwind.config.js- Enhanced with shadcn theme configapp/global.css- Added CSS variables and utilitiesOriginal prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.