feat(routing): color-coded RouteAnatomy component + routing docs sync#531
Conversation
Add a RouteAnatomy component that renders a Fiber route declaration with each part (method, path, parameter, handler) color-coded and linked to its guide section, so readers can hover or click parts directly in the example. Sync the routing guide, grouping guide, app reference, and routing partials from gofiber/fiber so docs/core uses the component and matches the upstream restructure. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request significantly reorganizes and enhances the Fiber documentation, particularly regarding routing, middleware, and handler types. Key additions include a new RouteAnatomy component for visual guidance and a comprehensive breakdown of supported handler signatures. Feedback was provided regarding the RouteAnatomy component, where the current JSX structure within a
tag may inadvertently introduce unwanted whitespace, potentially disrupting the intended code block formatting.
There was a problem hiding this comment.
Pull request overview
Introduces a new RouteAnatomy MDX component to visually explain Fiber route declarations, and updates/syncs routing-related documentation content/structure to match upstream changes so the docs site builds and the routing guide reads cohesently.
Changes:
- Added
src/components/route-anatomyto render a color-coded, linkable route “anatomy” block. - Reorganized and expanded routing documentation (new partials, new guide structure/sections, updated examples).
- Restructured
docs/core/api/app.mdrouting-related sections (including Route Management + moved Helpers) and aligned internal links/TOC depth.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/route-anatomy/styles.module.css | Adds styling for the new route anatomy block, including light/dark token colors. |
| src/components/route-anatomy/index.tsx | Implements the new RouteAnatomy component with clickable, color-coded route parts. |
| docs/core/partials/routing/use.md | New “Use” partial extracted for reuse in guide/API docs. |
| docs/core/partials/routing/handler.md | Updates/condenses route handler documentation content. |
| docs/core/partials/routing/handler-types.md | New partial documenting supported handler shapes and examples. |
| docs/core/guide/routing.md | Major routing guide restructure; embeds RouteAnatomy and new partials. |
| docs/core/guide/grouping.md | Adds documentation for Route and RouteChain. |
| docs/core/api/app.md | Reorganizes App API docs sections and links; adds Route Management section and TOC depth. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Point the `func(c fiber.Ctx) error` part at the Handler types section, since it is a handler shape. Sync routing.md to match. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
Warning Review limit reached
Your plan currently allows 2 reviews/hour. Refill in 12 minutes and 56 seconds. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more review capacity refills, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than trial, open-source, and free plans. In all cases, review capacity refills continuously over time. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughRestructures Fiber routing docs: adds a Route Anatomy component, new handler-types and Use partials, expands routing guide (parameters, constraints, middleware), extends grouping with Route/RouteChain, and reorganizes the API App reference with a Route Management section. ChangesFiber Routing Documentation Restructuring
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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
🧹 Nitpick comments (3)
docs/core/guide/grouping.md (3)
98-102: 💤 Low valueConsider clarifying the scope of "route-local" middleware terminology.
The description uses "route-specific middleware" (line 98) and the comment says "route-local middleware" (line 102), which might suggest the middleware only applies to the exact path
/events. However, the note correctly clarifies thatAllhas prefix-matched behavior and "also runs for sub-paths of the chain path."While the note provides accurate technical details, readers might initially misunderstand the scope from the "route-local" terminology. Consider rephrasing to make the prefix-matched nature more prominent upfront, such as: "An
Allin the chain runs as prefix-matched middleware before the verb handlers" or updating the comment to "prefix-matched middleware for this path and sub-paths."Also applies to: 107-109
🤖 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 `@docs/core/guide/grouping.md` around lines 98 - 102, Update the phrasing around RouteChain/All so it clearly states that All is prefix-matched middleware rather than implying it only applies to the exact path: change the sentence "An `All` in the chain runs before the verb handlers on that path, acting as route-specific middleware." and the inline comment "route-local middleware" to explicitly say something like "An `All` in the chain runs as prefix-matched middleware before the verb handlers for the chain path and its sub-paths" (apply same change to the repeated instance around lines 107-109); reference the RouteChain and All examples so readers know this behavior applies to the chain path and its sub-paths.
87-87: Fix cross-reference:../api/app.md#routecorrectly targets the### Routesection
docs/core/api/app.mdcontains### Route(line 215), providing the#routefragment target.- Consider rewording “route-local middleware” to avoid implying exact-path semantics (the prefix-matched behavior is clarified in the note).
🤖 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 `@docs/core/guide/grouping.md` at line 87, The cross-reference should point to the `#route` fragment (keep or correct the link text `Route` to ../api/app.md#route) and the wording "route-local middleware" should be rephrased to avoid implying exact-path semantics—replace it with something like "middleware scoped to the group/prefix (applies to all routes under that prefix)" so readers understand the prefix-matched behavior; update the sentence around the `Route` link and the phrase "route-local middleware" accordingly.
98-98: Fix cross-reference:#routechainanchor is valid
docs/core/api/app.mdcontains the### RouteChainheading, so the generated fragment#routechainresolves (matching how### Useis linked as#use); no anchor update needed. Optionally tighten the wording (“route-specific”) to better align with the clarified prefix-matched behavior.🤖 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 `@docs/core/guide/grouping.md` at line 98, The cross-reference to RouteChain is correct — leave the `#routechain` link unchanged — and instead update the wording in docs/core/guide/grouping.md (the sentence mentioning RouteChain and All) to clarify that an `All` runs before verb handlers as prefix-matched, route-specific middleware; keep references to the `RouteChain` and `All` symbols intact while tightening the phrase “route-specific middleware” to reflect the prefix-matching behavior.
🤖 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 `@src/components/route-anatomy/styles.module.css`:
- Line 26: Update the border-bottom value to use lowercase CSS keywords: locate
the border-bottom declaration in styles.module.css (the line with
"border-bottom: 2px dashed currentColor;") and change the value so the keyword
casing is all lowercase (e.g., use "currentcolor") to satisfy the
value-keyword-case rule while keeping the same style and dash type.
---
Nitpick comments:
In `@docs/core/guide/grouping.md`:
- Around line 98-102: Update the phrasing around RouteChain/All so it clearly
states that All is prefix-matched middleware rather than implying it only
applies to the exact path: change the sentence "An `All` in the chain runs
before the verb handlers on that path, acting as route-specific middleware." and
the inline comment "route-local middleware" to explicitly say something like "An
`All` in the chain runs as prefix-matched middleware before the verb handlers
for the chain path and its sub-paths" (apply same change to the repeated
instance around lines 107-109); reference the RouteChain and All examples so
readers know this behavior applies to the chain path and its sub-paths.
- Line 87: The cross-reference should point to the `#route` fragment (keep or
correct the link text `Route` to ../api/app.md#route) and the wording
"route-local middleware" should be rephrased to avoid implying exact-path
semantics—replace it with something like "middleware scoped to the group/prefix
(applies to all routes under that prefix)" so readers understand the
prefix-matched behavior; update the sentence around the `Route` link and the
phrase "route-local middleware" accordingly.
- Line 98: The cross-reference to RouteChain is correct — leave the
`#routechain` link unchanged — and instead update the wording in
docs/core/guide/grouping.md (the sentence mentioning RouteChain and All) to
clarify that an `All` runs before verb handlers as prefix-matched,
route-specific middleware; keep references to the `RouteChain` and `All` symbols
intact while tightening the phrase “route-specific middleware” to reflect the
prefix-matching behavior.
🪄 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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a9bef5e7-cbe8-499c-be3b-25cb1eadce8a
📒 Files selected for processing (8)
docs/core/api/app.mddocs/core/guide/grouping.mddocs/core/guide/routing.mddocs/core/partials/routing/handler-types.mddocs/core/partials/routing/handler.mddocs/core/partials/routing/use.mdsrc/components/route-anatomy/index.tsxsrc/components/route-anatomy/styles.module.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: copilot-pull-request-reviewer
- GitHub Check: deploy (docs, gofiber/docs, docs.gofiber.io)
🧰 Additional context used
🪛 LanguageTool
docs/core/partials/routing/handler-types.md
[style] ~6-~6: Consider using a more concise synonym.
Context: ...ler types --- Fiber's adapter converts a variety of handler shapes into native `func(fiber....
(A_VARIETY_OF)
docs/core/guide/routing.md
[style] ~297-~297: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...")andc.Params("*2")for wildcards,c.Params("+1")andc.Params("+2")` for plus se...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~297-~297: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...")for wildcards,c.Params("+1")andc.Params("+2")` for plus segments. A single wild...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
[style] ~463-~463: Consider shortening or rephrasing this to strengthen your wording.
Context: ...dleware Functions that are designed to make changes to the request or response are called **mi...
(MAKE_CHANGES)
🪛 markdownlint-cli2 (0.22.1)
docs/core/partials/routing/handler-types.md
[warning] 8-8: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
🪛 Stylelint (17.11.1)
src/components/route-anatomy/styles.module.css
[error] 26-26: Expected "currentColor" to be "currentcolor" (value-keyword-case)
(value-keyword-case)
🔇 Additional comments (25)
src/components/route-anatomy/index.tsx (1)
1-48: LGTM!src/components/route-anatomy/styles.module.css (1)
1-25: LGTM!Also applies to: 27-71
docs/core/partials/routing/handler-types.md (1)
1-81: LGTM!docs/core/partials/routing/handler.md (1)
1-40: LGTM!docs/core/partials/routing/use.md (1)
1-47: LGTM!docs/core/guide/routing.md (9)
1-25: LGTM!
26-51: LGTM!
52-169: LGTM!
170-196: LGTM!
197-300: LGTM!
301-460: LGTM!
461-489: LGTM!
490-542: LGTM!
543-583: LGTM!docs/core/api/app.md (10)
6-6: LGTM!
14-24: LGTM!
28-28: LGTM!Also applies to: 54-56
189-189: LGTM!
342-342: LGTM!
628-628: LGTM!
766-777: LGTM!
836-836: LGTM!
857-968: LGTM!
969-1004: LGTM!docs/core/guide/grouping.md (1)
108-108: Validate theapp.md#usecross-reference anchor
docs/core/api/app.mdcontains a### Usesection, and the file already links to it via[app.Use](#use), so../api/app.md#useresolves correctly.
- Build the example separators as explicit string expressions so `white-space: pre` does not pick up stray JSX whitespace. - Add aria-label to each part for screen-reader/keyboard accessibility. - Lint the CSS (lowercase `currentcolor`) and run prettier for consistent formatting. - Sync the app.Test wording from gofiber/fiber. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Mirror the routing changes into versioned_docs/version-v3.x so the released v3 docs match docs/core: restructured routing guide (Anatomy, tabs, Get vs Use vs All, Route/RouteChain), grouping additions, app.md reorg (State, Route Management, Helpers, Test), and the new use.md / handler-types.md partials. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Summary
Adds a
RouteAnatomycomponent used at the top of the routing guide, and syncs the routing docs from the companion PR gofiber/fiber#4311.New component:
src/components/route-anatomyRenders a multi-line Fiber route declaration where each part of the example is color-coded and links to the section that explains it:
app.Get-> Route Handlers (method)"/users/:id"-> Paths (path), with:id-> Parametersfunc(c fiber.Ctx) error-> Route Handlers (handler / middleware)Details:
Synced
docs/core(from gofiber/fiber#4311)Brings
docs/corein line with the upstream routing-docs restructure so the site builds with the new component:guide/routing.mdreorganized (Anatomy -> Route Handlers -> Get vs Use vs All -> Paths -> Parameters -> Middleware -> Grouping -> Automatic HEAD -> Handler types), examples flattened into tabs.guide/grouping.mdgains Route and RouteChain.api/app.md: State / SharedState sorted, RebuildTree + RemoveRoute* grouped under Route Management, Helpers moved to the bottom,toc_max_heading_level: 4.use.md,handler-types.md) and updatedhandler.md.Validation
npm run typecheckpasses.npm run build:docssucceeds; the component renders in light and dark mode.🤖 Generated with Claude Code
Summary by CodeRabbit
Documentation
New Features