portal: Update SDK Reference breadcrumbs UI #8662
Conversation
|
github-actions
bot
added
the
Portal
WalkthroughThe changes add breadcrumb navigation to category pages, update sidebar styling with an optional className prop, and pass sidebar links to the footer component. Page headings are adjusted with additional margin utilities, and breadcrumb display names now use sdkTitle instead of "References." Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 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: 1
🤖 Fix all issues with AI agents
In `@apps/portal/src/app/references/components/TDoc/PageLayout.tsx`:
- Around line 55-75: The breadcrumb is using the raw docSlug for the second
crumb instead of the human-friendly subgroup display name; update the second
crumb's name to map docSlug to subgroups[docSlug]?.displayName (or whichever
property holds the readable name) with a fallback to docSlug so Breadcrumb shows
the subgroup display name; modify the component where Breadcrumb is rendered
(the block containing Breadcrumb and CategoryPage) to compute a label from
subgroups and pass that as the crumb name while keeping hrefs unchanged.
| <div> | ||
| <Breadcrumb | ||
| crumbs={[ | ||
| { | ||
| href: `/references/${packageSlug}/${version}`, | ||
| name: sdkTitle, | ||
| }, | ||
| { | ||
| href: `/references/${packageSlug}/${version}/${docSlug}`, | ||
| name: docSlug, | ||
| }, | ||
| ]} | ||
| /> | ||
|
|
||
| <CategoryPage | ||
| doc={doc} | ||
| packageSlug={packageSlug} | ||
| slug={docSlug as keyof typeof subgroups} | ||
| version={version} | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
Use the subgroup display name for the category breadcrumb.
The breadcrumb currently shows the raw slug, which is less readable than the subgroup name already used in the page heading. Consider mapping to subgroups[...] with a fallback.
💡 Suggested fix
- if (docSlug in subgroups) {
- return (
- <div>
- <Breadcrumb
- crumbs={[
- {
- href: `/references/${packageSlug}/${version}`,
- name: sdkTitle,
- },
- {
- href: `/references/${packageSlug}/${version}/${docSlug}`,
- name: docSlug,
- },
- ]}
- />
-
- <CategoryPage
- doc={doc}
- packageSlug={packageSlug}
- slug={docSlug as keyof typeof subgroups}
- version={version}
- />
- </div>
- );
- }
+ if (docSlug in subgroups) {
+ const subgroupKey = docSlug as keyof typeof subgroups;
+ return (
+ <div>
+ <Breadcrumb
+ crumbs={[
+ {
+ href: `/references/${packageSlug}/${version}`,
+ name: sdkTitle,
+ },
+ {
+ href: `/references/${packageSlug}/${version}/${docSlug}`,
+ name: subgroups[subgroupKey] ?? docSlug,
+ },
+ ]}
+ />
+
+ <CategoryPage
+ doc={doc}
+ packageSlug={packageSlug}
+ slug={subgroupKey}
+ version={version}
+ />
+ </div>
+ );
+ }📝 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.
| <div> | |
| <Breadcrumb | |
| crumbs={[ | |
| { | |
| href: `/references/${packageSlug}/${version}`, | |
| name: sdkTitle, | |
| }, | |
| { | |
| href: `/references/${packageSlug}/${version}/${docSlug}`, | |
| name: docSlug, | |
| }, | |
| ]} | |
| /> | |
| <CategoryPage | |
| doc={doc} | |
| packageSlug={packageSlug} | |
| slug={docSlug as keyof typeof subgroups} | |
| version={version} | |
| /> | |
| </div> | |
| if (docSlug in subgroups) { | |
| const subgroupKey = docSlug as keyof typeof subgroups; | |
| return ( | |
| <div> | |
| <Breadcrumb | |
| crumbs={[ | |
| { | |
| href: `/references/${packageSlug}/${version}`, | |
| name: sdkTitle, | |
| }, | |
| { | |
| href: `/references/${packageSlug}/${version}/${docSlug}`, | |
| name: subgroups[subgroupKey] ?? docSlug, | |
| }, | |
| ]} | |
| /> | |
| <CategoryPage | |
| doc={doc} | |
| packageSlug={packageSlug} | |
| slug={subgroupKey} | |
| version={version} | |
| /> | |
| </div> | |
| ); | |
| } |
🤖 Prompt for AI Agents
In `@apps/portal/src/app/references/components/TDoc/PageLayout.tsx` around lines
55 - 75, The breadcrumb is using the raw docSlug for the second crumb instead of
the human-friendly subgroup display name; update the second crumb's name to map
docSlug to subgroups[docSlug]?.displayName (or whichever property holds the
readable name) with a fallback to docSlug so Breadcrumb shows the subgroup
display name; modify the component where Breadcrumb is rendered (the block
containing Breadcrumb and CategoryPage) to compute a label from subgroups and
pass that as the crumb name while keeping hrefs unchanged.
|
@MananTank is attempting to deploy a commit to the thirdweb Team on Vercel. A member of the Team first needs to authorize it. |
1 participant
Before
After
PR-Codex overview
This PR focuses on enhancing the
DocSidebarcomponent by adding aclassNameprop for better styling flexibility and updating theDocLayoutandPageLayoutcomponents to improve layout structure and breadcrumb navigation.Detailed summary
classNameprop to theDocSidebarcomponent.DocSidebarusage inDocLayoutto includeclassName="pt-1".DocLayout.CategoryPagein adivand added aBreadcrumbcomponent inPageLayout.sdkTitle.HeadinginIndexContent.Summary by CodeRabbit
New Features
Style