feat(dashboard): unify visual editor UI with live docs for section names and subtitles #4567
Conversation
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
…mes and subtitles - Add section name rendering above page title for guide layout pages - Create PageSectionName component to display parent section title - Update PageSubtitle styling to match live docs UI (prose-p:text-(color:--grayscale-a11) mt-2 break-words leading-7) - Pass foundNode data from PageNode to PageContents to access navigation hierarchy - Only show section name for guide layout pages when applicable Co-Authored-By: Sarah Bawabe <[email protected]>
Contributor
Author
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
5 Skipped Deployments
|
- Move FernBreadcrumbs from fern-docs/bundle to @fern-docs/components for reuse - Update PageHeader in bundle to import from new location - Delete custom PageSectionName component from dashboard - Update PageContents in dashboard to use FernBreadcrumbs with computed breadcrumb - Use createBreadcrumb from FernNavigation to compute breadcrumb from foundNode - Render breadcrumbs above page title for guide layout pages in visual editor Co-Authored-By: Sarah Bawabe <[email protected]>
…dcrumbs Co-Authored-By: Sarah Bawabe <[email protected]>
vercel
bot
temporarily deployed
to
Preview – prod-assets.ferndocs.com
Co-Authored-By: Sarah Bawabe <[email protected]>
vercel
bot
temporarily deployed
to
Preview – prod-assets.ferndocs.com
sbawabe
reviewed
Oct 30, 2025
...ashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageTitle.tsx
Outdated
Show resolved
Hide resolved
vercel
bot
temporarily deployed
to
Preview – prod-assets.ferndocs.com
sbawabe
reviewed
Oct 30, 2025
| docsUrl: docsUrl as EncodedDocsUrl, | ||
| branchName: branch, | ||
| slug: breadcrumb.pointsTo | ||
| })} |
Collaborator
There was a problem hiding this comment.
devin is EditorAwareBreadcrumbs necessary? we have our EditorRouteInterceptor logic anyways would think this is unnecessary and would be caught by our interceptor.
Contributor
Author
|
Good question! I investigated this and you're right that the breadcrumbs are within
Without editor-prefixed hrefs, these actions would navigate to If you'd prefer to remove the wrapper component, I could add an optional |
…readcrumbs Per Sarah's guidance, switched to using the shared FernBreadcrumbs component from @fern-docs/components instead of the custom EditorAwareBreadcrumbs wrapper. Left-click navigation is handled by EditorLinkInterceptor which intercepts clicks within #preview-container and rewrites URLs to editor routes. Note: Middle-click, right-click 'open in new tab', and copy link address will navigate to relative URLs (e.g., /getting-started) instead of staying in the editor context. This is an accepted tradeoff for code simplicity. Co-Authored-By: Sarah Bawabe <[email protected]>
vercel
bot
temporarily deployed
to
Preview – prod-assets.ferndocs.com
sbawabe
approved these changes
Oct 30, 2025
sbawabe
deleted the
devin/1761768444-unify-visual-editor-section-name-subtitle
branch
kennyderek
pushed a commit
that referenced
this pull request
Oct 31, 2025
…mes and subtitles (#4567) Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Sarah Bawabe <[email protected]> Co-authored-by: sarah bawabe <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Fixes FER-7094
Unify breadcrumb UI between visual editor and live docs
This PR adds breadcrumb navigation to the visual editor matching live docs UI, moves FernBreadcrumbs to a shared package for reuse, and refactors spacing to use a wrapper div.
What was the motivation & context behind this PR?
The visual editor was missing breadcrumb navigation (section names) that appears in live docs. Additionally:
mx-5classes on individual componentsChanges made
Component sharing:
FernBreadcrumbs.tsxandFernBreadcrumbs.scssfrom bundle to@fern-docs/componentspackagePageHeader.tsxto import from shared locationindex.cssVisual editor breadcrumbs:
PageContents.tsxusing sharedFernBreadcrumbscomponentfoundNode.parentsusingFernNavigation.utils.createBreadcrumb()foundNodeprop fromPageNode.tsxtoPageContents.tsx/getting-started) and rely on EditorLinkInterceptor for navigationSpacing & styling refactor:
mx-5fromPageTitleandPageSubtitleinput componentsdivwithmx-5 not-proseclassesbreak-words,leading-7, text color)How has this PR been tested?
Human review checklist
/getting-started) instead of staying in editor. This is an accepted tradeoff per Sarah's guidance.fern-breadcrumb,fern-breadcrumb-item,fern-breadcrumb-arrow) load properly in dashboardNice to have:
Link to Devin run: https://app.devin.ai/sessions/91a4960c012d4f4682cb1173f6c903d3
Requested by: Sarah Bawabe ([email protected]) (@sbawabe)