[TA-5120] Add Separators & labels to sections#155
Conversation
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThis update introduces custom sidebar section labeling in the documentation site. It adds new frontmatter fields to several markdown files, updates the Docusaurus configuration to use a custom sidebar generator, and implements the generator function. CSS changes support the new sidebar labels, and minor improvements are made to color codes and background image declarations. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Sidebar
participant sidebarLabelGenerator
participant MarkdownDoc
User->>Sidebar: Loads documentation sidebar
Sidebar->>sidebarLabelGenerator: Generate sidebar items (with doc metadata)
sidebarLabelGenerator->>MarkdownDoc: Read frontmatter (sectionTopLabel/sectionBottomLabel)
sidebarLabelGenerator-->>Sidebar: Return sidebar items with injected section labels
Sidebar-->>User: Render sidebar with section labels
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![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 (2)
docs/changelog/v0.1.x/changelog.md (1)
3-4: Consider label consistency for changelog contentThe
sectionTopLabel: Introductionseems inconsistent for a changelog document. Consider using a more appropriate label like "Changelog" or "Release Notes" that better reflects the content nature.The
sectionBottomLabel: Versionsis appropriate for this context.-sectionTopLabel: Introduction +sectionTopLabel: Changelogdocs/src/theme/sidebar/sidebarLabelGenerator.ts (1)
24-24: Consider safer handling of the non-null assertion.The non-null assertion operator (
!) assumesdefaultSidebarItemsGeneratorexists, which could cause runtime errors if it doesn't.Consider adding a guard check:
- const defaultItems = await args.defaultSidebarItemsGenerator!(args); + if (!args.defaultSidebarItemsGenerator) { + throw new Error('defaultSidebarItemsGenerator is required'); + } + const defaultItems = await args.defaultSidebarItemsGenerator(args);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
docs/changelog/v0.1.x/changelog.md(1 hunks)docs/docs/intro.md(1 hunks)docs/docs/keypairs.md(1 hunks)docs/docusaurus.config.ts(3 hunks)docs/src/css/custom.css(2 hunks)docs/src/theme/sidebar/sidebarLabelGenerator.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: AgustinMJ
PR: Peersyst/near-mobile#0
File: :0-0
Timestamp: 2025-03-13T15:02:36.526Z
Learning: When adding labels to PRs, ensure they exactly match the package name as specified in package.json (e.g., "frontend/chain"), the app folder name, or "generic" for monorepo root changes. Avoid creating custom labels that don't correspond to actual package or app names.
🧬 Code Graph Analysis (1)
docs/docusaurus.config.ts (1)
docs/src/theme/sidebar/sidebarLabelGenerator.ts (1)
sidebarLabelGenerator(23-58)
🔇 Additional comments (10)
docs/docs/intro.md (1)
3-3: LGTM: Frontmatter addition looks correctThe
sectionTopLabelfield is properly added to the frontmatter and will be processed by the custom sidebar generator to display "Introduction" above this document in the sidebar navigation.docs/docs/keypairs.md (1)
4-4: LGTM: Appropriate section label for package documentationThe
sectionTopLabel: Packagesis semantically correct for the keypairs package documentation and will enhance sidebar navigation clarity.docs/docusaurus.config.ts (3)
4-4: LGTM: Correct import of custom sidebar generatorThe import statement properly references the
sidebarLabelGeneratorfunction that will process the frontmatter fields to inject section labels.
43-43: Good practice: Using require.resolve for module resolutionSwitching from string paths to
require.resolveensures proper module resolution and is a best practice for Docusaurus configuration.Also applies to: 50-50
46-47: LGTM: Consistent application of custom sidebar generatorThe
sidebarLabelGeneratoris correctly applied to both the main docs plugin and the changelog plugin, ensuring consistent sidebar labeling behavior across the documentation site.Also applies to: 72-73
docs/src/css/custom.css (3)
9-15: Good practice: Consistent hex color formatConverting hex color codes to lowercase follows common CSS conventions and improves code consistency.
Also applies to: 22-28
33-36: LGTM: Consolidated background image propertiesThe background image properties are properly consolidated into single-line declarations, making the CSS more concise and maintainable.
78-90: Well-implemented styling for sidebar section labelsThe
.sidebarSectionLabelstyling is comprehensive and appropriate:
- Proper margin and positioning adjustments
- Clear typography with uppercase transformation
- Appropriate color choice matching the theme
- Good integration with the sidebar layout
This styling will work correctly with the HTML elements generated by the
sidebarLabelGeneratorfunction.docs/src/theme/sidebar/sidebarLabelGenerator.ts (2)
28-30: The document lookup logic looks correct.The logic for finding document metadata and extracting front-matter properties is well-structured and handles the optional nature of the properties appropriately.
25-58: Good use of flatMap for transforming sidebar items.The overall structure using
flatMapto transform items and conditionally inject labels is clean and efficient. The logic correctly handles both doc and non-doc items.
2 participants
[TA-5120] Add Separators & labels to sections
Description
This PR aims to add Separators & labels to the Sidebars sections in the documentation.
Type of change
Checklist:
Changes
sidebarLabelGeneratorindocusaurus.config.tsto inject custom sidebar labelssectionTopLabel/sectionBottomLabelfront-matter to relevant .md files.Summary by CodeRabbit
New Features
Style
Documentation