refactor(home): redesign hackathon top bar with aurora gradient style#72
refactor(home): redesign hackathon top bar with aurora gradient style#72
Conversation
📝 Walkthrough总体概述主页添加了黑客马拉松推广顶栏，由 React 状态控制其显隐。组件使用 变更清单
代码审查要点审查建议：
审查工作量评估🎯 2 (简单) | ⏱️ ~8 分钟 庆祝诗句
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
⚔️ Resolve merge conflicts
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. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@pages/index.tsx`:
- Line 69: Replace the hardcoded event name inside the span (className
styles.hackathonTopBarEventName) with a call to the i18n t() function and add a
corresponding translation key (e.g. "hackathon.eventName") to your locale files;
update pages/index.tsx to use t('hackathon.eventName') (or the chosen key) so
the visible text is localized and ensure the new key exists in all supported
locales.
- Around line 57-84: The top-banner uses raw HTML elements and a hard-coded
event name; replace the <aside>/<div>/<a>/<button>/<span> usage with React
Bootstrap components (e.g., Alert, Card, Button/CloseButton) while preserving
behavior tied to isHackathonTopBarVisible, hackathonTopBarStyle,
HackathonTopBarLink and the closeHackathonTopBar handler, and move the literal
"Labor AI Hackathon 2026" into i18n as home_hackathon_top_bar_event_name,
rendering it via t('home_hackathon_top_bar_event_name') alongside the existing
t('home_hackathon_top_bar_title'), t('home_hackathon_top_bar_description') and
t('home_hackathon_top_bar_action'); ensure aria-label/title still use
t('home_hackathon_top_bar_aria_label') and t('home_hackathon_top_bar_close').
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: afcd89f5-d1e7-40d2-bfc2-16789a915968
⛔ Files ignored due to path filters (6)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by nonestyles/Home.module.lessis excluded by none and included by nonestyles/globals.cssis excluded by none and included by nonetranslation/en-US.tsis excluded by none and included by nonetranslation/zh-CN.tsis excluded by none and included by nonetranslation/zh-TW.tsis excluded by none and included by none
📒 Files selected for processing (1)
pages/index.tsx
| {isHackathonTopBarVisible && ( | ||
| <aside | ||
| className={styles.hackathonTopBar} | ||
| aria-label={t('home_hackathon_top_bar_aria_label')} | ||
| style={hackathonTopBarStyle} | ||
| > | ||
| <div className={styles.hackathonTopBarInner}> | ||
| <a className={styles.hackathonTopBarContent} href={HackathonTopBarLink}> | ||
| <span className={styles.hackathonTopBarText}> | ||
| <strong>{t('home_hackathon_top_bar_title')}</strong> | ||
| <span>{t('home_hackathon_top_bar_description')}</span> | ||
| </span> | ||
| <span className={styles.hackathonTopBarEventName}>Labor AI Hackathon 2026</span> | ||
| <span className={styles.hackathonTopBarAction}> | ||
| {t('home_hackathon_top_bar_action')} | ||
| </span> | ||
| </a> | ||
| <button | ||
| className={styles.hackathonTopBarClose} | ||
| type="button" | ||
| aria-label={t('home_hackathon_top_bar_close')} | ||
| title={t('home_hackathon_top_bar_close')} | ||
| onClick={closeHackathonTopBar} | ||
| > | ||
| × | ||
| </button> | ||
| </div> | ||
| </aside> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 只做只读检索：查找 pages/components 中已有的 React Bootstrap 横幅/通知条模式。
rg -n --type tsx '(<Alert|<Button|<Stack|<Badge|<CloseButton|<Card)' pages componentsRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 119
🏁 Script executed:
#!/bin/bash
# Search for React Bootstrap component usage with correct approach
rg -n --type ts '<(Alert|Button|Stack|Badge|CloseButton|Card|Container|Row|Col)' pages/ components/Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 13658
🏁 Script executed:
#!/bin/bash
# Also search by file content for Bootstrap imports to understand usage patterns
rg -n "from.*react-bootstrap" pages/ components/Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 4001
🏁 Script executed:
#!/bin/bash
# Examine the full pages/index.tsx file to understand context
wc -l pages/index.tsxRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 111
🏁 Script executed:
#!/bin/bash
# Look at the specific lines mentioned in the review (57-84) plus surrounding context
sed -n '50,90p' pages/index.tsxRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 1618
🏁 Script executed:
#!/bin/bash
# Check if there are any CloseButton or dismissible banner patterns in existing code
rg -n "CloseButton|Alert.*dismissible" pages/ components/ -A 2Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 73
🏁 Script executed:
#!/bin/bash
# Look at how Alert is used in pages/recipe/index.tsx to understand the pattern
sed -n '40,60p' pages/recipe/index.tsxRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 700
将活动横幅改为 React Bootstrap 组件，并将硬编码的事件名提取为 i18n 文本。
根据编码约束 {pages,components}/**/*.tsx，此页面必须统一使用 React Bootstrap 组件（不用原生 HTML 元素），且所有用户文本必须使用 t() 国际化函数。
当前代码的两个问题：
-
使用了原生 HTML 元素（
<aside>、<div>、<a>、<button>、<span>），应改为 React Bootstrap 的 Alert、Button、CloseButton 等组件。参考项目中已有的 Alert 用法（pages/recipe/index.tsx:45）。 -
硬编码事件名称："Labor AI Hackathon 2026" 是用户可见的文本，应移至 i18n 配置文件并使用
t('home_hackathon_top_bar_event_name')调用，与其他文本保持一致。
建议用 <Alert> 或 <Card> 加上 Bootstrap utility classes 重构此横幅，用 <Button> 替代 <button>，并补充缺失的 i18n 键。
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@pages/index.tsx` around lines 57 - 84, The top-banner uses raw HTML elements
and a hard-coded event name; replace the <aside>/<div>/<a>/<button>/<span> usage
with React Bootstrap components (e.g., Alert, Card, Button/CloseButton) while
preserving behavior tied to isHackathonTopBarVisible, hackathonTopBarStyle,
HackathonTopBarLink and the closeHackathonTopBar handler, and move the literal
"Labor AI Hackathon 2026" into i18n as home_hackathon_top_bar_event_name,
rendering it via t('home_hackathon_top_bar_event_name') alongside the existing
t('home_hackathon_top_bar_title'), t('home_hackathon_top_bar_description') and
t('home_hackathon_top_bar_action'); ensure aria-label/title still use
t('home_hackathon_top_bar_aria_label') and t('home_hackathon_top_bar_close').
| <strong>{t('home_hackathon_top_bar_title')}</strong> | ||
| <span>{t('home_hackathon_top_bar_description')}</span> | ||
| </span> | ||
| <span className={styles.hackathonTopBarEventName}>Labor AI Hackathon 2026</span> |
There was a problem hiding this comment.
把活动名称也接入 i18n。
当前横幅里的 Labor AI Hackathon 2026 还是硬编码，和“所有用户可见文案都必须走 t()”的约束不一致。建议补一个翻译 key，再替换成 t(...)。
As per coding guidelines: All user-facing text MUST use the i18n t() function (no hardcoded strings).
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@pages/index.tsx` at line 69, Replace the hardcoded event name inside the span
(className styles.hackathonTopBarEventName) with a call to the i18n t() function
and add a corresponding translation key (e.g. "hackathon.eventName") to your
locale files; update pages/index.tsx to use t('hackathon.eventName') (or the
chosen key) so the visible text is localized and ensure the new key exists in
all supported locales.
| .navbar .navbar-brand, | ||
| .navbar .nav-link { | ||
| white-space: nowrap; | ||
| } |
There was a problem hiding this comment.
| .navbar .navbar-brand, | |
| .navbar .nav-link { | |
| white-space: nowrap; | |
| } |
直接在 JSX 中加工具类
| home_hackathon_top_bar_aria_label: 'Labor AI Hackathon 2026 活动宣传', | ||
| home_hackathon_top_bar_badge: '活动招募中', | ||
| home_hackathon_top_bar_title: '打工人の终极反叛', | ||
| home_hackathon_top_bar_description: '48 小时，来这里创造未来', |
There was a problem hiding this comment.
There was a problem hiding this comment.
某方面专用的功能放到独立组件中实现，再在页面中引用，不要在一个页面里堆砌大量不同功能的代码，样式那边也要跟随组件一同迁移为独立 CSS modules 文件。
2 participants
Checklist（清单）:
pnpm-lock.yaml有变动导致eslint.config.ts:29的@next/next插件类型不匹配Summary by CodeRabbit
发布说明