docs(cndocs): sync admonition title syntax#1037
Merged
Merged
Conversation
❌ Deploy Preview for reactnativecn failed. Why did it fail? →
|
📝 WalkthroughWalkthroughThis PR updates Docusaurus warning admonition syntax from space-delimited ( Changescndocs admonition syntax and formatting updates
Estimated code review effort: 2 (Simple) | ~15 minutes Community section redesign with PartnersShowcase
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Community
participant siteConfig
participant PartnersShowcase
participant shuffleItems
Community->>siteConfig: read customFields.users
Community->>Community: filter apps by pinned
Community->>PartnersShowcase: render component
PartnersShowcase->>shuffleItems: shuffle PARTNERS on mount
shuffleItems-->>PartnersShowcase: shuffled partner list
PartnersShowcase-->>Community: rendered partner links
Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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: 2
🧹 Nitpick comments (3)
cnwebsite/src/components/Home/Community/PartnersShowcase.tsx (2)
66-68: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value
sortwith a random comparator is not a uniform shuffle.
(() => 0.5 - Math.random())is a well-known non-uniform, engine-dependent "shuffle" anti-pattern. For a cosmetic partner list ordering the risk is negligible, but a Fisher–Yates shuffle is the correct/idiomatic approach if precision matters.🤖 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 `@cnwebsite/src/components/Home/Community/PartnersShowcase.tsx` around lines 66 - 68, The shuffleItems helper in PartnersShowcase uses a random sort comparator, which produces a non-uniform, engine-dependent shuffle. Replace that logic with a proper Fisher–Yates shuffle inside shuffleItems so the PartnerLink array is randomized correctly and consistently while preserving the existing function contract.
52-61: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winPartner links lack an accessible name.
Each
<a>renders only an SVG wordmark with noaria-label/visible text; screen readers may announce nothing meaningful for these links.♿ Proposed fix
const PARTNERS = [ { href: 'https://callstack.com/', + name: 'Callstack', logo: <CallstackWordmark />, }, ... ]; ... {partners.map(({href, className, logo}) => ( <a key={href} href={href} target="_blank" rel="noopener noreferrer" + aria-label={name} className={className}> {logo} </a> ))}🤖 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 `@cnwebsite/src/components/Home/Community/PartnersShowcase.tsx` around lines 52 - 61, The partner links rendered in PartnersShowcase lack an accessible name because each anchor only contains a logo SVG with no text. Update the partners.map block in PartnersShowcase so each <a> gets a meaningful accessible label, either by adding an aria-label derived from the partner name or by including hidden descriptive text alongside the logo. Make sure the fix is applied to the link rendering logic using the href/className/logo mapping so screen readers can identify each partner link.cnwebsite/src/components/Home/Community/styles.module.css (1)
56-58: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueGrid column count is hardcoded to match the current 5 partners.
grid-template-columns: 1fr 1fr 1fr 1fr 1frhardcodes 5 columns to matchPARTNERS.lengthinPartnersShowcase.tsx. Adding/removing a partner later requires remembering to update this CSS too.🤖 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 `@cnwebsite/src/components/Home/Community/styles.module.css` around lines 56 - 58, The partners grid in partnersContainer is hardcoded to five columns, which must stay in sync with PartnersShowcase and PARTNERS.length. Update the styling so the layout adapts automatically to the number of partner items instead of relying on a fixed 5-column template; use a responsive grid pattern in styles.module.css that scales with available space and avoids manual updates when partners are added or removed.
🤖 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 `@cnwebsite/src/components/Home/Community/index.tsx`:
- Around line 20-22: The `apps` initialization in `Community/index.tsx` is
force-casting `siteConfig.customFields?.users` to `ShowcaseData` and passing it
straight into `Object.values`, which can still blow up if `users` is missing.
Update that expression to safely handle an absent value by defaulting to an
empty object/array before calling `Object.values`, and keep the `apps` filtering
logic intact.
- Around line 38-56: `Community` is calling `useBaseUrl` inside the `apps.map()`
callback, which violates the Rules of Hooks. Move the base URL handling to the
top level of the `Community` component, then reuse that computed value when
building `imgSource` inside the map. Keep the hook call out of the loop and
reference the existing `useBaseUrl` usage in `Community` to locate the fix.
---
Nitpick comments:
In `@cnwebsite/src/components/Home/Community/PartnersShowcase.tsx`:
- Around line 66-68: The shuffleItems helper in PartnersShowcase uses a random
sort comparator, which produces a non-uniform, engine-dependent shuffle. Replace
that logic with a proper Fisher–Yates shuffle inside shuffleItems so the
PartnerLink array is randomized correctly and consistently while preserving the
existing function contract.
- Around line 52-61: The partner links rendered in PartnersShowcase lack an
accessible name because each anchor only contains a logo SVG with no text.
Update the partners.map block in PartnersShowcase so each <a> gets a meaningful
accessible label, either by adding an aria-label derived from the partner name
or by including hidden descriptive text alongside the logo. Make sure the fix is
applied to the link rendering logic using the href/className/logo mapping so
screen readers can identify each partner link.
In `@cnwebsite/src/components/Home/Community/styles.module.css`:
- Around line 56-58: The partners grid in partnersContainer is hardcoded to five
columns, which must stay in sync with PartnersShowcase and PARTNERS.length.
Update the styling so the layout adapts automatically to the number of partner
items instead of relying on a fixed 5-column template; use a responsive grid
pattern in styles.module.css that scales with available space and avoids manual
updates when partners are added or removed.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: d70b70c6-8cbd-402b-bd9f-71f7a65d5830
⛔ Files ignored due to path filters (5)
cnwebsite/static/img/showcase/callstack_wordmark.svgis excluded by!**/*.svgcnwebsite/static/img/showcase/expo-wordmark.svgis excluded by!**/*.svgcnwebsite/static/img/showcase/infinite-red-wordmark.svgis excluded by!**/*.svgcnwebsite/static/img/showcase/microsoft-wordmark.svgis excluded by!**/*.svgcnwebsite/static/img/showcase/swm-wordmark.svgis excluded by!**/*.svg
📒 Files selected for processing (29)
cndocs/accessibilityinfo.mdcndocs/backhandler.mdcndocs/building-for-tv.mdcndocs/global-PerformanceEventTiming.mdcndocs/global-PerformanceLongTaskTiming.mdcndocs/global-PerformanceResourceTiming.mdcndocs/global-intersectionobserver.mdcndocs/global-intersectionobserverentry.mdcndocs/global-performance.mdcndocs/integration-with-android-fragment.mdcndocs/interactionmanager.mdcndocs/modal.mdcndocs/network.mdcndocs/other-debugging-methods.mdcndocs/progressbarandroid.mdcndocs/pushnotificationios.mdcndocs/safeareaview.mdcndocs/security.mdcndocs/statusbar.mdcndocs/stylesheet.mdcndocs/textinput.mdcndocs/timers.mdcndocs/transforms.mdcndocs/virtualizedlist.mdcnwebsite/docusaurus.config.tscnwebsite/src/components/Home/Community/PartnersShowcase.tsxcnwebsite/src/components/Home/Community/index.tsxcnwebsite/src/components/Home/Community/styles.module.csscnwebsite/src/types/index.d.ts
Comment on lines
+20
to
+22
| const apps = Object.values(siteConfig.customFields?.users as ShowcaseData) | ||
| .flat() | ||
| .filter(app => app.pinned); | ||
| .filter(app => Boolean(app.pinned)); |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
Optional-chained value is force-cast then dereferenced without a null check.
siteConfig.customFields?.users is optionally chained (acknowledging it may be absent), but the as ShowcaseData cast silences the type checker and Object.values(...) is called directly on the result. If customFields.users is ever missing/undefined at runtime, this throws (Object.values rejects null/undefined).
🛡️ Proposed fix
- const apps = Object.values(siteConfig.customFields?.users as ShowcaseData)
+ const apps = Object.values(
+ (siteConfig.customFields?.users as ShowcaseData) ?? {},
+ )
.flat()
.filter(app => Boolean(app.pinned));📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| const apps = Object.values(siteConfig.customFields?.users as ShowcaseData) | |
| .flat() | |
| .filter(app => app.pinned); | |
| .filter(app => Boolean(app.pinned)); | |
| const apps = Object.values( | |
| (siteConfig.customFields?.users as ShowcaseData) ?? {}, | |
| ) | |
| .flat() | |
| .filter(app => Boolean(app.pinned)); |
🤖 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 `@cnwebsite/src/components/Home/Community/index.tsx` around lines 20 - 22, The
`apps` initialization in `Community/index.tsx` is force-casting
`siteConfig.customFields?.users` to `ShowcaseData` and passing it straight into
`Object.values`, which can still blow up if `users` is missing. Update that
expression to safely handle an absent value by defaulting to an empty
object/array before calling `Object.values`, and keep the `apps` filtering logic
intact.
Comment on lines
+38
to
+56
| {apps.map((app, i) => { | ||
| const imgSource = !app.icon.startsWith('http') | ||
| ? useBaseUrl('img/showcase/' + app.icon) | ||
| : app.icon; | ||
| return ( | ||
| <li key={i} className="item"> | ||
| {app.infoLink ? ( | ||
| <a | ||
| href={app.infoLink} | ||
| target="_blank" | ||
| rel="noopener noreferrer"> | ||
| <img src={imgSource} alt={app.name} /> | ||
| )} | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| <p> | ||
| and <a href={useBaseUrl(`showcase`)}>many more</a>. | ||
| </p> | ||
| </div> | ||
| </a> | ||
| ) : ( | ||
| <img src={imgSource} alt={app.name} /> | ||
| )} | ||
| </li> | ||
| ); | ||
| })} |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate the referenced component and any useBaseUrl definitions/usages.
git ls-files 'cnwebsite/src/components/Home/Community/index.tsx' 'cnwebsite/src/**' | sed -n '1,200p'
printf '\n--- useBaseUrl references ---\n'
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' --glob '!**/build/**' '\buseBaseUrl\b' cnwebsite/src
printf '\n--- community component excerpt ---\n'
sed -n '1,140p' cnwebsite/src/components/Home/Community/index.tsxRepository: reactnativecn/react-native-website
Length of output: 8330
Hoist useBaseUrl out of the .map() callback
useBaseUrl is a hook, so calling it inside the array callback breaks the Rules of Hooks. Move the base path computation to the component top level and reuse it in the loop.
🔧 Proposed fix
+ const baseUrl = useBaseUrl('img/showcase/');
{apps.map((app, i) => {
- const imgSource = !app.icon.startsWith('http')
- ? useBaseUrl('img/showcase/' + app.icon)
- : app.icon;
+ const imgSource = !app.icon.startsWith('http')
+ ? baseUrl + app.icon
+ : app.icon;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| {apps.map((app, i) => { | |
| const imgSource = !app.icon.startsWith('http') | |
| ? useBaseUrl('img/showcase/' + app.icon) | |
| : app.icon; | |
| return ( | |
| <li key={i} className="item"> | |
| {app.infoLink ? ( | |
| <a | |
| href={app.infoLink} | |
| target="_blank" | |
| rel="noopener noreferrer"> | |
| <img src={imgSource} alt={app.name} /> | |
| )} | |
| </li> | |
| ); | |
| })} | |
| </ul> | |
| <p> | |
| and <a href={useBaseUrl(`showcase`)}>many more</a>. | |
| </p> | |
| </div> | |
| </a> | |
| ) : ( | |
| <img src={imgSource} alt={app.name} /> | |
| )} | |
| </li> | |
| ); | |
| })} | |
| const baseUrl = useBaseUrl('img/showcase/'); | |
| {apps.map((app, i) => { | |
| const imgSource = !app.icon.startsWith('http') | |
| ? baseUrl + app.icon | |
| : app.icon; | |
| return ( | |
| <li key={i} className="item"> | |
| {app.infoLink ? ( | |
| <a | |
| href={app.infoLink} | |
| target="_blank" | |
| rel="noopener noreferrer"> | |
| <img src={imgSource} alt={app.name} /> | |
| </a> | |
| ) : ( | |
| <img src={imgSource} alt={app.name} /> | |
| )} | |
| </li> | |
| ); | |
| })} |
🤖 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 `@cnwebsite/src/components/Home/Community/index.tsx` around lines 38 - 56,
`Community` is calling `useBaseUrl` inside the `apps.map()` callback, which
violates the Rules of Hooks. Move the base URL handling to the top level of the
`Community` component, then reuse that computed value when building `imgSource`
inside the map. Keep the hook call out of the loop and reference the existing
`useBaseUrl` usage in `Community` to locate the fix.
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
1 participant
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.
Summary
cndocs/*candidates whose upstream source changed to Docusaurus bracket admonition-title syntax (:::warning[Title]).VirtualizedList.disableVirtualizationdeprecation note to use an admonition block.scripts/sync-translations.sh; removed-component stubs and other unchanged files were left untouched when already aligned.website/src/components/Home/Communitywordmark-based community section intocnwebsite, preserving CN site wording and adding the required showcase wordmark assets/types.website/package.json/cnwebsite/package.jsondependency version changes were needed for this batch; the upstream merge only changedyarn.lockfor the English website dependency graph, so no CN package file was committed.Verification
git fetch origin && git fetch upstreamgit checkout production && git pull --ff-only origin productiongit merge upstream/maingit push origin productionbash scripts/sync-translations.shyarn installyarn --cwd cnwebsite build(passes; existing unresolved-link / HTML-minifier warnings remain in old versioned docs)yarn --cwd cnwebsite buildafter commit hook formatting; still passes with the same pre-existing warnings.Summary by CodeRabbit
New Features
Documentation