feat: enhance site performance and add advanced animation components#72
Conversation
- 配置 Next.js 性能优化选项，包括图片格式、缓存和移除生产环境 console - 优化字体加载策略，添加预连接和字体回退 - 重构 CSS 动画使用 GPU 加速技术 - 实现组件懒加载和静态数据缓存 - 完全重构 Canvas 动画组件，提升性能同时保持视觉效果 - 使用 memo 和 useCallback 优化组件渲染
新增Dither、ColorBends、GradientText和SpotlightCard等高级动画组件 重构全局CSS样式和布局，增强暗黑模式支持 优化首页视觉效果，替换旧版Canvas动画为Three.js实现 更新package.json添加相关依赖 移除旧版hero-canvas组件
实现一个基于Three.js的交互式动态背景组件PixelBlast，支持多种像素形状、波纹效果和液体动画。该组件可配置像素大小、颜色、密度等参数，并添加了边缘淡出效果以提升视觉体验。用于首页快速安装卡片背景，增强页面动效表现。
- 新增 CountUp 数字动画组件用于展示核心指标 - 添加 MagicBento 组件实现响应式数据卡片布局 - 更新文档内容，增加技术背景和原理解析链接 - 优化示例文档结构，移除冗余代码 - 在首页添加数据安全指标展示区域 - 更新依赖版本并添加 GSAP 动画库
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly upgrades the site's front-end by focusing on both performance and visual appeal. It introduces a range of advanced, interactive animation components and optimizes the Next.js build process to ensure a fast and engaging user experience. The changes aim to modernize the site's look and feel while maintaining high performance standards. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
本次更新对文档网站的主页进行了全面的视觉和性能升级，引入了多个高级动画组件（如 MagicBento, ColorBends, PixelBlast 等）并优化了性能。代码层面，通过懒加载、memo、useCallback 等方式提升了 React 组件的渲染效率，并通过 translate3d 等技术优化了 CSS 动画的 GPU 加速。整体来看，这是一次出色的功能增强。不过，我发现了一些可以改进的地方，主要涉及 Next.js 客户端导航的最佳实践、代码冗余以及一个导致主题功能失效的关键问题。修复这些问题将进一步提升网站的性能和用户体验。
| export default function Layout({ children }: LayoutProps<'/'>) { | ||
| return ( | ||
| <html lang="en" className={inter.className} suppressHydrationWarning> | ||
| <html lang="en" className={cn(inter.className, "font-sans", geist.variable, "dark")} suppressHydrationWarning> |
There was a problem hiding this comment.
在 <html> 标签上硬编码了 "dark" 类，这将导致网站强制显示为暗黑模式，并破坏了 page.tsx 中实现的动态主题检测和切换功能。应移除此硬编码，让主题管理机制（如 fumadocs-ui provider 或系统设置）来动态控制主题类。
| <html lang="en" className={cn(inter.className, "font-sans", geist.variable, "dark")} suppressHydrationWarning> | |
| <html lang="en" className={cn(inter.className, "font-sans", geist.variable)} suppressHydrationWarning> |
| href="/docs/quick-start" | ||
| className="inline-flex items-center px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors font-medium transform hover:-translate-y-0.5 shadow-lg hover:shadow-xl" | ||
| className="inline-flex items-center px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-all duration-200 shadow-sm hover:shadow-md font-medium" | ||
| onClick={handleDocsClick} |
There was a problem hiding this comment.
在 Next.js 的 <Link> 组件上使用 onClick 事件处理器并通过 window.location.href 进行导航，会禁用 Next.js 的客户端路由功能，导致全页面刷新，从而影响性能。建议移除 onClick 处理器，让 <Link> 组件本身来处理导航。
| href="/docs/quick-start" | |
| className="inline-flex items-center px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-colors font-medium transform hover:-translate-y-0.5 shadow-lg hover:shadow-xl" | |
| className="inline-flex items-center px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-all duration-200 shadow-sm hover:shadow-md font-medium" | |
| onClick={handleDocsClick} | |
| href="/docs/quick-start" | |
| className="inline-flex items-center px-8 py-4 bg-black dark:bg-white text-white dark:text-black rounded-lg hover:bg-gray-800 dark:hover:bg-gray-200 transition-all duration-200 shadow-sm hover:shadow-md font-medium" |
| {/* @ts-expect-error - ColorBends组件是JSX文件，TypeScript类型推断不完整 */} | ||
| <ColorBends |
There was a problem hiding this comment.
代码中多处使用了 @ts-expect-error 或 @ts-ignore 来抑制因引入 .jsx 文件（如 ColorBends, MagicBento, CountUp 等）而产生的类型错误。为了提高代码的类型安全性和可维护性，建议将这些新组件从 .jsx 转换为 .tsx，并为其 props 添加明确的类型定义。
| className="inline-flex items-center px-8 py-4 border border-gray-300 dark:border-gray-600 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 shadow-sm hover:shadow-md" | ||
| onClick={handleGitHubClick} |
There was a problem hiding this comment.
这个 <a> 标签已经设置了 href 和 target="_blank" 属性，浏览器会默认处理在新标签页打开链接。附带的 onClick 事件处理器是多余的，建议移除以简化代码。
| className="inline-flex items-center px-8 py-4 border border-gray-300 dark:border-gray-600 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 shadow-sm hover:shadow-md" | |
| onClick={handleGitHubClick} | |
| className="inline-flex items-center px-8 py-4 border border-gray-300 dark:border-gray-600 bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-200 shadow-sm hover:shadow-md" |
| href="https://github.com/rpamis/rpamis-security" | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-full font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition-all duration-200 shadow-sm hover:shadow-md" | ||
| onClick={handleStarClick} |
There was a problem hiding this comment.
“Star 项目”按钮的 href 属性指向项目主页，而 onClick 事件则打开 stargazers 页面，这造成了行为不一致。为了保持一致性并简化代码，建议将 href 直接指向 stargazers 页面，并移除多余的 onClick 事件处理器。
| href="https://github.com/rpamis/rpamis-security" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-full font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition-all duration-200 shadow-sm hover:shadow-md" | |
| onClick={handleStarClick} | |
| href="https://github.com/rpamis/rpamis-security/stargazers" | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="inline-flex items-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-full font-medium hover:bg-gray-800 dark:hover:bg-gray-100 transition-all duration-200 shadow-sm hover:shadow-md" |
1 participant
Rpamis-Security Version
[The version of Rpamis-Security you are working on, e.g. 1.1.0, check your pom.xml dependency version]
Description
[Please describe the background, purpose, changes made, and how to test this PR]
Checklist
Please check the following items before code is ready to be reviewed.
mvn spring-javaformat:applymvn test)