Add [Open Library] & Library Work Flow#20
Open
dethan3 wants to merge 12 commits into
Open
Conversation
TechQuery
requested changes
Jul 9, 2025
TechQuery
left a comment
TechQuery
left a comment
Member
There was a problem hiding this comment.
- 很多问题在不同文件都有，不一一列举，但都要改
- 软件开发要一个一个模块来，代码量太大对开发者、reviewer、AI 都有巨大上下文负担，很容易跑偏、卡死
- 以后要在看板上多拆几个 issue，不要闷头搞很久后发一个差不多做完整个项目的巨大 PR……
# Conflicts: # .husky/pre-commit # .husky/pre-push # package.json # pages/_app.tsx # translation/en-US.ts # translation/zh-CN.ts # translation/zh-TW.ts
📝 WalkthroughWalkthrough新增 Open Library 的图书数据模型、共享组件、首页、目录页、详情页与借阅说明页，并将其接入全局路由框架；同时对若干现有组件的类型声明、JSX 与 Less 排版做了整理。 ChangesOpen Library 功能新增
现有代码格式与类型整理
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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. 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: 15
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
components/Activity/Hackathon/theme.less (2)
132-143:⚠️ Potential issue | 🔴 Critical | ⚡ Quick win
.button-ghost()同样缺失.button-base()调用与
.button-primary()相同的问题，Line 133 的空语句导致 ghost 按钮丢失所有基础样式（flex 布局、padding、border-radius、字体、hover 动效等）。🐛 建议恢复 mixin 调用
.button-ghost() { - ; + .button-base(); border-color: rgba(255, 255, 255, 0.14);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/Activity/Hackathon/theme.less` around lines 132 - 143, The `.button-ghost()` mixin in the theme.less file contains an empty statement (a standalone semicolon) on the first line inside the mixin definition. Replace this empty statement with a call to the `.button-base()` mixin to ensure ghost buttons inherit all the foundational styles including flex layout, padding, border-radius, fonts, and transition effects. This will restore the missing base styling that ghost buttons currently lack.
118-130:⚠️ Potential issue | 🔴 Critical | ⚡ Quick win
.button-primary()缺失.button-base()调用，按钮将丢失基础样式
.button-base()提供了按钮的核心样式：display: inline-flex、justify-content、align-items、gap、transition、border-radius、padding、font系列属性以及&:hover的transform效果。当前 Line 119 的
;是空语句，导致Hero.module.less和ActionHub.module.less中调用.button-primary()的按钮将缺失这些基础布局与交互样式。🐛 建议恢复 mixin 调用
.button-primary() { - ; + .button-base(); box-shadow: 0 0 24px rgba(44, 232, 255, 0.18);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/Activity/Hackathon/theme.less` around lines 118 - 130, The .button-primary() mixin in theme.less is missing a required call to the .button-base() mixin. Currently, there is only an empty semicolon on line 119, which means buttons using .button-primary() are losing essential base styles like display, flexbox properties, transitions, border-radius, padding, and hover transform effects. Replace the empty semicolon in the .button-primary() mixin body with a call to .button-base() to restore these foundational styles that are needed by buttons in Hero.module.less and ActionHub.module.less.
♻️ Duplicate comments (1)
pages/open-library/index.tsx (1)
210-224:⚠️ Potential issue | 🟠 Major | ⚡ Quick win“支持我们”区块请改为 React Bootstrap 按钮组件而非原生
a/span伪按钮。Line 210-224 当前实现破坏了 UI 组件一致性，也影响可维护性与可访问性语义。
As per coding guidelines, “ALWAYS use React Bootstrap components instead of custom HTML elements in UI code”.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@pages/open-library/index.tsx` around lines 210 - 224, The "支持我们" (Support Us) section uses native HTML elements (the `a` tag for GitHub Sponsors and the `span` within `Link` for book sharing) styled as buttons with className attributes, which violates the React Bootstrap component guideline. Replace the `a` element containing "GitHub Sponsors" with a React Bootstrap Button component using appropriate props for href, variant, and size instead of className. Similarly, replace the `Link` wrapper and `span` element containing "分享你的图书" with a React Bootstrap Button component, ensuring the Link functionality is preserved if needed. Import Button from react-bootstrap at the top of the file and apply consistent button variants (such as light and outline-light) using the variant prop instead of className.Source: Coding guidelines
🧹 Nitpick comments (1)
pages/open-library/index.tsx (1)
104-113: ⚡ Quick win建议复用
components/open-library/Layout.tsx，避免页面级重复装配导航/页脚/样式 Hook。当前首页手动拼装
LibraryNavbar + useOpenLibraryLayout + FooterComponent，与共享Layout的职责重复，后续容易出现页间不一致。As per coding guidelines, “Use minimal exports and avoid unnecessary custom implementations”.
Also applies to: 231-231
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@pages/open-library/index.tsx` around lines 104 - 113, The page is manually assembling LibraryNavbar, useOpenLibraryLayout hook, and FooterComponent instead of using the shared Layout component from components/open-library/Layout.tsx. Remove the individual LibraryNavbar, useOpenLibraryLayout hook usage, and FooterComponent composition from the page, and instead wrap the page content with the Layout component to eliminate duplication and ensure consistency across pages. Apply this same refactoring to all locations where this manual assembly occurs, including the location at line 231.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/Activity/Hackathon/theme.less`:
- Around line 31-51: The `.section-frame()` mixin is missing its internal mixin
calls and only contains empty statements. Replace the empty semicolons in the
nested selectors `.section`, `.sectionHeader`, `.sectionTitle`,
`.sectionSubtitle`, and `.accentLine` with their corresponding mixin calls
(e.g., `.section()` for the `.section` selector, `.sectionHeader()` for the
`.sectionHeader` selector, and so on). This will restore the style generation
for these elements that downstream files like `Overview.module.less` depend on
when calling `.section-frame()`.
In `@components/Layout/CardPage.tsx`:
- Around line 6-10: Replace the overly broad `Record<string, unknown>` type for
the Card property in CardPageProps with a precise union type that accurately
reflects the actual prop signatures of ActivityCard, ProjectCard, and
OrganizationCard. Alternatively, update each card component to properly accept
and handle the className and linkOf props that CardPage.tsx is passing on line
24, rather than ignoring them. Choose the approach that best aligns with your
component design intent: either define Card as a union of the three specific
card component types with their actual prop interfaces, or extend each card
component's prop interface to include className and linkOf parameters.
In `@components/Navigator/MainNavigator.tsx`:
- Around line 84-87: The menu item object for the open-library navigation route
uses the incorrect field name `name` when the MenuItem interface contract
requires the field to be named `title`. Change the property name from `name` to
`title` in the navigation item object that contains href set to '/open-library'.
This will align with the MenuItem type definition and ensure the navigation
title is properly rendered.
In `@components/open-library/BookCard.tsx`:
- Line 47: The hardcoded Chinese strings on line 47 (the conditional rendering
of '可借阅' and '已借出' based on book.status) and the alt text on line 57 are not
using the i18n t() function as required by the coding guidelines. Replace these
hardcoded user-facing strings by wrapping them with the t() function and
providing appropriate i18n keys for each string. This applies to the status
display conditional in the book.status ternary operator and any image alt text
attributes, ensuring all user-visible and accessibility-related text goes
through the translation function to avoid hardcoding and enable proper
localization.
In `@components/open-library/FeaturedBooks.tsx`:
- Around line 19-24: The FeaturedBooks component has hardcoded Chinese strings
as default values for title, subtitle, and viewAllText parameters, which
bypasses internationalization. Replace these hardcoded strings with i18n
translations by either accepting already-translated strings as parameters from
the calling component, or by integrating the I18nContext within the
FeaturedBooks component to call the t() function directly for these default
values. Ensure all user-facing text in the component uses the i18n t() function
to comply with the coding guidelines.
In `@components/open-library/Footer.tsx`:
- Around line 26-29: The Footer component contains multiple hardcoded
user-facing text strings that violate the i18n requirement. Replace all
hardcoded text with t() function calls using appropriate i18n keys: the social
media platform names (GitHub, Twitter, Feishu) around the mentioned lines, the
contact information section (联系信息) in the range specified, and
copyright/placeholder text. Ensure each hardcoded string is replaced with a
corresponding t() call and that i18n keys follow the existing naming convention
used in the component for consistency.
- Around line 31-51: The social media links in the Footer component use
placeholder href values (`#github`, `#twitter`, `#feishu`) that do not navigate to
actual external URLs. Replace the href attributes in the GitHub link, Twitter
link, and Feishu link with the real external URLs to their respective platforms,
or conditionally hide these link elements if the actual URLs are not yet
available in the application configuration.
In `@components/open-library/HeroSection.tsx`:
- Around line 16-22: The HeroSection component contains hardcoded user-facing
text strings that violate the i18n requirement. Replace all hardcoded Chinese
strings with i18n t() function calls: the default parameter values for title,
subtitle, ctaText, and heroImageAlt in the component function signature need to
use t() instead of literal Chinese strings, and the "浏览图书" text on line 59 also
needs to be wrapped with t(). Ensure all user-visible text strings are
internationalized consistently throughout the HeroSection component.
In `@components/open-library/HowItWorks.tsx`:
- Around line 23-57: The HowItWorks component has hardcoded Chinese text strings
that violate the i18n requirement. Replace all hardcoded strings in the
defaultSteps array (the title and description fields for each step object), the
default values for the title and subtitle parameters in the HowItWorksProps
destructuring, and the button text (mentioned as being on line 151) with
appropriate i18n keys wrapped in the t() function. Import and use the i18n
translation function to wrap these hardcoded strings with their corresponding
translation keys for proper internationalization support.
In `@components/open-library/Layout.tsx`:
- Around line 21-33: The default page title in the Layout component is hardcoded
as a string instead of using internationalization. Replace the hardcoded default
title value in the title parameter (currently set to 'Open Library - Open Source
Bazaar') with a call to the i18n t() function, using an appropriate translation
key like t('open_library_page_title'). This will ensure the page title changes
dynamically based on the user's language preference and complies with the coding
guideline that all user-facing text must use the i18n t() function.
In `@components/open-library/Navbar.tsx`:
- Line 31: The ternary expression in Navbar.tsx contains a hardcoded fallback
string 'Open Library' that violates the i18n constraint requiring all
user-facing text to use the t() function. Replace the hardcoded string 'Open
Library' in the false branch of the ternary operator with t('open_library') so
that both branches consistently use the translation function, ensuring proper
hydration-safe i18n handling throughout the component.
In `@pages/open-library/book/`[id].tsx:
- Around line 217-224: All user-facing text strings in the book details page
component must use the i18n t() function instead of being hardcoded. Replace all
hardcoded strings (including "Loading...", "Book Not Found", "Back", "Reviews",
"Borrow History", "Returned/Active" and others at the specified line ranges:
217-224, 234-244, 260, 282-283, 288, 294, 309-323, 335, 339, 350, 382, 389, 397,
402, 408-412, 432, 435, 446) with t() function calls using appropriate i18n
keys. First define all the necessary translation keys in your i18n
configuration, then systematically update each hardcoded string reference to use
t(keyName) instead.
In `@pages/open-library/books/index.tsx`:
- Around line 118-121: Replace all hardcoded Chinese text strings in the book
directory page with i18n t() function calls to enable proper language switching.
Locate the hardcoded strings in the h1 element containing "图书目录", the p element
containing "浏览我们的社区共享图书馆，发现有趣的书籍", and also check lines 143, 164, and 172 for
additional hardcoded text (titles, status messages, hints, or button labels).
For each hardcoded string, wrap it with the t() function using an appropriate
translation key that describes the content, ensuring all user-facing text
follows the i18n guidelines and the page properly reflects language changes when
users switch locales.
In `@pages/open-library/how-to-borrow.tsx`:
- Around line 9-13: The page contains hardcoded user-facing text like "如何借阅"
that should be internationalized. Replace all hardcoded strings throughout the
component (including the h1 title and all content in the mentioned line ranges)
with the t() function calls from the i18n library. Create corresponding
translation keys in the language resource files and ensure each hardcoded string
(titles, descriptions, process steps, rules, FAQs, and CTAs) is replaced with
t('keyName') calls, maintaining consistency with the project's i18n
implementation used in other pages.
In `@pages/open-library/index.tsx`:
- Around line 124-129: Replace all hardcoded Chinese text strings in the
component with the i18n `t()` function to comply with internationalization
standards. In the affected sections (lines 124-129, 135-156, 170-173, 202-208,
and 222-223), wrap every user-facing text string including titles like "📚
关于我们", descriptions like "freeCodeCamp 成都社区「Open Library」开放共享图书馆", list items,
and button labels with the `t()` function. Ensure each string has a
corresponding key defined in your i18n translation files.
---
Outside diff comments:
In `@components/Activity/Hackathon/theme.less`:
- Around line 132-143: The `.button-ghost()` mixin in the theme.less file
contains an empty statement (a standalone semicolon) on the first line inside
the mixin definition. Replace this empty statement with a call to the
`.button-base()` mixin to ensure ghost buttons inherit all the foundational
styles including flex layout, padding, border-radius, fonts, and transition
effects. This will restore the missing base styling that ghost buttons currently
lack.
- Around line 118-130: The .button-primary() mixin in theme.less is missing a
required call to the .button-base() mixin. Currently, there is only an empty
semicolon on line 119, which means buttons using .button-primary() are losing
essential base styles like display, flexbox properties, transitions,
border-radius, padding, and hover transform effects. Replace the empty semicolon
in the .button-primary() mixin body with a call to .button-base() to restore
these foundational styles that are needed by buttons in Hero.module.less and
ActionHub.module.less.
---
Duplicate comments:
In `@pages/open-library/index.tsx`:
- Around line 210-224: The "支持我们" (Support Us) section uses native HTML elements
(the `a` tag for GitHub Sponsors and the `span` within `Link` for book sharing)
styled as buttons with className attributes, which violates the React Bootstrap
component guideline. Replace the `a` element containing "GitHub Sponsors" with a
React Bootstrap Button component using appropriate props for href, variant, and
size instead of className. Similarly, replace the `Link` wrapper and `span`
element containing "分享你的图书" with a React Bootstrap Button component, ensuring
the Link functionality is preserved if needed. Import Button from
react-bootstrap at the top of the file and apply consistent button variants
(such as light and outline-light) using the variant prop instead of className.
---
Nitpick comments:
In `@pages/open-library/index.tsx`:
- Around line 104-113: The page is manually assembling LibraryNavbar,
useOpenLibraryLayout hook, and FooterComponent instead of using the shared
Layout component from components/open-library/Layout.tsx. Remove the individual
LibraryNavbar, useOpenLibraryLayout hook usage, and FooterComponent composition
from the page, and instead wrap the page content with the Layout component to
eliminate duplication and ensure consistency across pages. Apply this same
refactoring to all locations where this manual assembly occurs, including the
location at line 231.
🪄 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: 0b924692-11c8-4d01-b037-fb6acd2a8a56
⛔ Files ignored due to path filters (10)
.github/scripts/transform-message.tsis excluded by none and included by none.github/workflows/self-scan.ymlis excluded by none and included by none.husky/pre-commitis excluded by none and included by none.husky/pre-pushis excluded by none and included by nonepackage.jsonis excluded by none and included by nonepages/open-library/readme.mdis excluded by!**/*.mdand included bypages/**styles/open-library.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 (23)
components/Activity/Hackathon/Hero.tsxcomponents/Activity/Hackathon/Resources.tsxcomponents/Activity/Hackathon/Schedule.tsxcomponents/Activity/Hackathon/theme.lesscomponents/Layout/CardPage.tsxcomponents/License/helper.tscomponents/Map/ChinaMap.tsxcomponents/Navigator/MainNavigator.tsxcomponents/Navigator/SearchBar.tsxcomponents/Organization/Card.tsxcomponents/open-library/BookCard.tsxcomponents/open-library/FeaturedBooks.tsxcomponents/open-library/Footer.tsxcomponents/open-library/HeroSection.tsxcomponents/open-library/HowItWorks.tsxcomponents/open-library/Layout.tsxcomponents/open-library/Navbar.tsxcomponents/open-library/useOpenLibraryLayout.tspages/_app.tsxpages/open-library/book/[id].tsxpages/open-library/books/index.tsxpages/open-library/how-to-borrow.tsxpages/open-library/index.tsx
…n, types, mixin fixes
i18n / hardcoded strings:
- BookCard: replace hardcoded status text and cover alt with t()
- FeaturedBooks: add observer+useContext, replace hardcoded Chinese defaults with t()
- HowItWorks: add observer+useContext, move defaultSteps inside component, replace all hardcoded strings with t()
- Footer: fully i18n all text, replace placeholder hrefs with real URLs
- HeroSection: make all text props required, eliminate hardcoded defaults
- Navbar: replace hardcoded fallback with t('open_library')
- books/index.tsx: replace hardcoded subtitle with t()
- how-to-borrow.tsx: add observer+useContext, replace all section headings and buttons with t()
- index.tsx: replace all hardcoded strings in About/Support sections with t()
- book/[id].tsx: replace Publisher/Published/Pages/N/A labels with t()
translation keys: add ~20 new keys across zh-CN, en-US, zh-TW
(book_cover, learn_more_details, book_catalog_description, ready_to_borrow,
open_library_community_intro, our_mission_text, core_concepts, knowledge_flow,
knowledge_flow_desc, community_driven, community_driven_desc, open_sharing,
open_sharing_desc, support_us, support_us_description, share_your_book,
book_publisher, book_published_year, book_page_count, not_available)
type / style fixes:
- CardPage.tsx: replace Record<string, unknown> with ComponentType<any> to fix
pre-existing TS2322 errors where FC<ActivityCardProps|Project|OrganizationCardProps>
was not assignable to FC<Record<string,unknown>> under strict mode
- theme.less: fill empty semicolons in .section-frame() with correct mixin
calls; add missing .button-base() to .button-primary() and .button-ghost()
TechQuery
requested changes
Jun 21, 2026
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
components/open-library/Footer.tsx (1)
26-35: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win将社交链接文案接入 i18n，避免硬编码。
Line 26 与 Line 34 的
GitHub、t()key 输出，保证多语言一致性。
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 current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@components/open-library/Footer.tsx` around lines 26 - 35, The social link labels in Footer are still hardcoded user-facing text, so update the Footer component to source both the GitHub and WeChat link copy through the i18n t() function instead of inline strings. Use the existing translation keys pattern in Footer, replace the visible anchor text with translated values, and ensure all user-facing text in this section follows the same localization approach.Source: Coding guidelines
🧹 Nitpick comments (1)
pages/open-library/how-to-borrow.tsx (1)
117-145: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win把快捷链接渲染成导航列表。
nav里直接放按钮不符合项目的导航结构约定；可以继续用 React Bootstrap，但让第一层成为ul/li。建议调整
- <nav className="d-grid gap-2" aria-label={t('open_library_quick_links_label')}> - <Button - href={catalogURL} - target="_blank" - rel="noopener noreferrer" - variant="outline-primary" - > - {t('view_full_catalog')} - </Button> + <nav aria-label={t('open_library_quick_links_label')}> + <ListGroup as="ul" className="list-unstyled d-grid gap-2 mb-0" variant="flush"> + <ListGroup.Item as="li" className="border-0 p-0"> + <Button + className="w-100" + href={catalogURL} + target="_blank" + rel="noopener noreferrer" + variant="outline-primary" + > + {t('view_full_catalog')} + </Button> + </ListGroup.Item> + {/* 其余链接同样包在 ListGroup.Item as="li" 中 */} + </ListGroup> </nav>As per coding guidelines, “Use semantic HTML structure … use
<ul>for navigation; applylist-unstyledon first-level lists”.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@pages/open-library/how-to-borrow.tsx` around lines 117 - 145, The quick links in the open-library page are rendered as plain buttons inside the nav, which does not match the project’s semantic navigation pattern. Update the `nav` in `HowToBorrow` to use a first-level `ul` with `li` items (apply `list-unstyled` as needed) and keep the existing React Bootstrap `Button`/`Link` behavior inside those list items. Ensure the `aria-label` and link destinations stay the same while the structure follows the navigation list convention.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/open-library/HowItWorks.tsx`:
- Around line 73-104: The step flow rendered in HowItWorks should be
semantically marked up as a countable sequence rather than a generic grid.
Update the resolvedSteps mapping in HowItWorks to wrap the items in an <ol> and
render each step as an <li>, keeping the existing layout/styling behavior
through the current Row/Col and stepIcon/stepNumber elements. This preserves the
numbered progression while aligning with the accessibility guideline to use <ol>
for countable items.
In `@pages/_app.tsx`:
- Line 58: The footer text currently hardcodes the visible English string
instead of using i18n. Update the `Powered by` copy in `pages/_app.tsx` to go
through the existing `t()` translation function (for example via a `powered_by`
key) so all user-facing text stays localized, and keep the change scoped to the
footer render block where the string is displayed.
In `@pages/open-library/book/`[id].tsx:
- Around line 37-44: The book cover Image usage in book/[id].tsx may fail
because the fallback source is an SVG and next/image blocks SVG optimization by
default. Verify the Image import is from next/image, then either enable
dangerouslyAllowSVG in next.config.ts or replace /images/placeholder-book.svg
with a bitmap placeholder so the cover renders reliably.
In `@pages/open-library/how-to-borrow.tsx`:
- Around line 21-23: The inlineMarkupOf helper currently passes
marked.parseInline output straight into dangerouslySetInnerHTML, which leaves
XSS risk from untrusted translation content. Update inlineMarkupOf in
how-to-borrow.tsx to sanitize the marked output before returning __html, using a
DOMPurify-based approach (add isomorphic-dompurify to package.json) so the HTML
is filtered through a whitelist before injection.
---
Duplicate comments:
In `@components/open-library/Footer.tsx`:
- Around line 26-35: The social link labels in Footer are still hardcoded
user-facing text, so update the Footer component to source both the GitHub and
WeChat link copy through the i18n t() function instead of inline strings. Use
the existing translation keys pattern in Footer, replace the visible anchor text
with translated values, and ensure all user-facing text in this section follows
the same localization approach.
---
Nitpick comments:
In `@pages/open-library/how-to-borrow.tsx`:
- Around line 117-145: The quick links in the open-library page are rendered as
plain buttons inside the nav, which does not match the project’s semantic
navigation pattern. Update the `nav` in `HowToBorrow` to use a first-level `ul`
with `li` items (apply `list-unstyled` as needed) and keep the existing React
Bootstrap `Button`/`Link` behavior inside those list items. Ensure the
`aria-label` and link destinations stay the same while the structure follows the
navigation list convention.
🪄 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: b1bcbf85-2d19-48bb-b6ed-8bed36282c69
⛔ Files ignored due to path filters (10)
.husky/pre-commitis excluded by none and included by none.husky/pre-pushis excluded by none and included by nonepackage.jsonis excluded by none and included by nonepnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!pnpm-lock.yamland included by nonepnpm-workspace.yamlis excluded by none and included by nonepublic/images/placeholder-book.svgis excluded by!**/*.svg,!public/**/*.{png,jpg,jpeg,gif,webp,svg,ico,mp4,mp3,woff,woff2,ttf,otf}and included by nonepublic/images/placeholder-hero.svgis excluded by!**/*.svg,!public/**/*.{png,jpg,jpeg,gif,webp,svg,ico,mp4,mp3,woff,woff2,ttf,otf}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 (17)
components/Activity/Hackathon/theme.lesscomponents/Layout/CardPage.tsxcomponents/Navigator/MainNavigator.tsxcomponents/open-library/BookCard.tsxcomponents/open-library/FeaturedBooks.tsxcomponents/open-library/Footer.tsxcomponents/open-library/HeroSection.tsxcomponents/open-library/HowItWorks.module.lesscomponents/open-library/HowItWorks.tsxcomponents/open-library/Navbar.tsxmodels/Book.tspages/_app.tsxpages/api/open-library/books.tspages/open-library/book/[id].tsxpages/open-library/books/index.tsxpages/open-library/how-to-borrow.tsxpages/open-library/index.tsx
✅ Files skipped from review due to trivial changes (3)
- components/open-library/HowItWorks.module.less
- models/Book.ts
- components/Layout/CardPage.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- components/open-library/FeaturedBooks.tsx
Comment on lines
+73
to
+104
| <Row className="g-4"> | ||
| {resolvedSteps.map((step, index) => ( | ||
| <Col key={step.id} md={6} lg={3}> | ||
| <div className="text-center p-3"> | ||
| <div | ||
| className={`position-relative mb-3 d-flex justify-content-center ${styles.stepIconWrap}`} | ||
| > | ||
| <div | ||
| className={`rounded-circle d-flex align-items-center justify-content-center text-white fs-4 shadow position-relative ${styles.stepIcon}`} | ||
| style={{ '--step-color': step.color } as CSSProperties} | ||
| > | ||
| {step.icon} | ||
| </div> | ||
| <span | ||
| className={`position-absolute bg-danger text-white rounded-circle d-flex align-items-center justify-content-center fw-bold small ${styles.stepNumber}`} | ||
| > | ||
| {step.id} | ||
| </span> | ||
| {index < resolvedSteps.length - 1 && ( | ||
| <div | ||
| className={`position-absolute bg-secondary d-none d-lg-block ${styles.connector}`} | ||
| > | ||
| <div className={`position-absolute ${styles.connectorArrow}`} /> | ||
| </div> | ||
| )} | ||
| </div> | ||
| <h3 className="h5 fw-semibold text-dark mb-3">{step.title}</h3> | ||
| <p className="text-muted lh-base">{step.description}</p> | ||
| </div> | ||
| </Col> | ||
| ))} | ||
| </Row> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
将步骤列表改为语义化有序列表（<ol>/<li>）
Line 73-104 当前是可计数流程步骤，建议改为 <ol> 包裹并以 <li> 渲染每个 step，避免语义丢失并提升可访问性一致性。
As per coding guidelines, “use <ol> for countable items”.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/open-library/HowItWorks.tsx` around lines 73 - 104, The step flow
rendered in HowItWorks should be semantically marked up as a countable sequence
rather than a generic grid. Update the resolvedSteps mapping in HowItWorks to
wrap the items in an <ol> and render each step as an <li>, keeping the existing
layout/styling behavior through the current Row/Col and stepIcon/stepNumber
elements. This preserves the numbered progression while aligning with the
accessibility guideline to use <ol> for countable items.
Source: Coding guidelines
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| Powered by |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
统一页脚文案为 t()，不要硬编码英文。
Line 58 的 Powered by 是可见文案，建议改为 i18n key（例如 t('powered_by')）。
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 current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@pages/_app.tsx` at line 58, The footer text currently hardcodes the visible
English string instead of using i18n. Update the `Powered by` copy in
`pages/_app.tsx` to go through the existing `t()` translation function (for
example via a `powered_by` key) so all user-facing text stays localized, and
keep the change scoped to the footer render block where the string is displayed.
Source: Coding guidelines
Comment on lines
+37
to
+44
| <Image | ||
| src={book.cover || '/images/placeholder-book.svg'} | ||
| alt={book.title} | ||
| className="img-fluid" | ||
| style={{ maxHeight: '300px' }} | ||
| width={200} | ||
| height={300} | ||
| /> |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 核查 next.config 是否开启 SVG 支持，以及占位图是否存在
fd -e js -e ts -e mjs 'next.config' --max-depth 2 --exec cat -n {}
fd 'placeholder-book.svg' public 2>/dev/nullRepository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 2110
🏁 Script executed:
#!/bin/bash
head -n 20 pages/open-library/book/[id].tsx | grep -E "^import.*Image"Repository: 0.6.0:code
Length of output: 2014
🏁 Script executed:
cat -n pages/open-library/book/[id].tsx | head -n 20Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 1141
next/image 加载 SVG 可能失败
确认代码文件 pages/open-library/book/[id].tsx 导入了 next/image 的 Image 组件，而非 React Bootstrap 的 Image。next.config.ts 中未开启 dangerouslyAllowSVG 选项。由于当前书目封面占位图（/images/placeholder-book.svg）为 SVG 格式，运行时会因 Next.js 默认拦截 SVG 优化请求而导致 400 错误，封面无法显示。
建议：
- 在
next.config.ts中启用images.future.dangerouslyAllowSVG: true。 - 或者将占位图替换为位图格式。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@pages/open-library/book/`[id].tsx around lines 37 - 44, The book cover Image
usage in book/[id].tsx may fail because the fallback source is an SVG and
next/image blocks SVG optimization by default. Verify the Image import is from
next/image, then either enable dangerouslyAllowSVG in next.config.ts or replace
/images/placeholder-book.svg with a bitmap placeholder so the cover renders
reliably.
Comment on lines
+21
to
+23
| const inlineMarkupOf = (text: string) => ({ | ||
| __html: marked.parseInline(text) as string, | ||
| }); |
There was a problem hiding this comment.
🔒 Security & Privacy | 🔴 Critical
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# 检查是否已有 HTML sanitizer 依赖；预期：若已有则复用，否则新增一个 SSR 兼容方案。
jq -r '(.dependencies // {}) + (.devDependencies // {}) | keys[]' package.json \
| rg -n 'dompurify|isomorphic-dompurify|sanitize-html' || true
# 查看当前被 parseInline 渲染的翻译键内容；预期：只包含受控 markdown，不包含原始危险 HTML。
rg -n 'borrow_model_intro|borrow_model_description|borrow_step_.*description' .Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 2561
🏁 Script executed:
rg -n "inlineMarkupOf" .Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 683
🏁 Script executed:
cat package.json | jq -e '.dependencies.marked'Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 195
🏁 Script executed:
cat package.json | jq -e '.dependencies["isomorphic-dompurify"]'Repository: Open-Source-Bazaar/Open-Source-Bazaar.github.io
Length of output: 190
在 inlineMarkupOf 中对 marked 输出进行净化，防止 XSS。
当前 marked.parseInline 结果直接注入 dangerouslySetInnerHTML。由于翻译源可能包含或被注入原始 HTML，缺乏白名单过滤存在安全风险。
请在 package.json 添加 isomorphic-dompurify，并在该文件中实现净化逻辑：
建议修复方案
import { marked } from 'marked';
+import DOMPurify from 'isomorphic-dompurify';
const inlineMarkupOf = (text: string) => ({
- __html: marked.parseInline(text) as string,
+ __html: DOMPurify.sanitize(marked.parseInline(text) as string),
});🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@pages/open-library/how-to-borrow.tsx` around lines 21 - 23, The
inlineMarkupOf helper currently passes marked.parseInline output straight into
dangerouslySetInnerHTML, which leaves XSS risk from untrusted translation
content. Update inlineMarkupOf in how-to-borrow.tsx to sanitize the marked
output before returning __html, using a DOMPurify-based approach (add
isomorphic-dompurify to package.json) so the HTML is filtered through a
whitelist before injection.
Source: Linters/SAST tools
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Checklist（清单）:
Closes #15
Summary by CodeRabbit
New Features
Bug Fixes