feat(dashboard): unify visual editor UI with live docs for section names and subtitles

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageContents.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import * as FernNavigation from "@fern-api/fdr-sdk/navigation";
+import { FernBreadcrumbs } from "@fern-docs/components/FernBreadcrumbs";
+import type { SerializableFoundNode } from "@fern-docs/components/navigation";
 import type { MdxToHtmlResponse } from "@fern-docs/mdx";
 
 import PageEditor from "./PageEditor";
@@ -11,25 +14,33 @@ export declare namespace PageContents {
         filename: string;
         initialHtml: MdxToHtmlResponse["html"];
         initialFrontmatter: MdxToHtmlResponse["frontmatter"];
+        foundNode?: SerializableFoundNode;
     }
 }
 
-export default function PageContents({ filename, initialHtml, initialFrontmatter }: PageContents.Props) {
+export default function PageContents({ filename, initialHtml, initialFrontmatter, foundNode }: PageContents.Props) {
     const { title, subtitle, layout } = initialFrontmatter ?? {};
 
     const hidePageHeader = layout === "custom";
 
+    const breadcrumb = foundNode ? FernNavigation.utils.createBreadcrumb(foundNode.parents) : [];
+
     return (
         <div className="max-w-content-width-wide mx-auto w-full pb-64">
             {!hidePageHeader && (
-                <>
+                <div className="mx-5 not-prose">
+                    {breadcrumb.length > 0 && (
+                        <div className="mb-2">
+                            <FernBreadcrumbs breadcrumb={breadcrumb} />
+                        </div>
+                    )}
                     <PageTitle className="w-full" filename={filename} initialText={title ? String(title) : undefined} />
                     <PageSubtitle
                         className="w-full"
                         filename={filename}
                         initialText={subtitle ? String(subtitle) : undefined}
                     />
-                </>
+                </div>
             )}
             <PageEditor className="-m-2 w-full p-3" filename={filename} initialHtml={initialHtml} />
         </div>

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageNode.tsx

@@ -99,6 +99,7 @@ export default function PageNode(props: PageNode.Props) {
                     filename={initialPageData.filename}
                     initialHtml={initialPageData.html}
                     initialFrontmatter={initialPageData.frontmatter}
+                    foundNode={found}
                 />
             </CSSProvider>
         </>

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageSubtitle.tsx

@@ -41,7 +41,7 @@ export default function PageSubtitle({ className, filename, initialText }: PageS
     return (
         <div className={cn("flex", className)}>
             <AutoResizingInput
-                className="mx-5 text-base"
+                className="break-words leading-7 text-(color:--grayscale-a11)"
                 name="subtitle"
                 onChange={onChange}
                 disabled={isEditingDisabled}

packages/fern-dashboard/src/app/[orgName]/(visual-editor)/editor/[docsUrl]/[branch]/[...slug]/PageTitle.tsx

@@ -37,9 +37,9 @@ export default function PageTitle({ className, filename, initialText }: PageTitl
 
     return (
         <div className={["flex", className].join(" ")}>
-            <h1 className="fern-page-heading mb-3 h-fit w-full font-extrabold">
+            <h1 className="fern-page-heading h-fit w-full font-extrabold">
                 <AutoResizingInput
-                    className="mx-5 font-extrabold"
+                    className="font-extrabold"
                     name="title"
                     onChange={onChange}
                     placeholder="Add a title"

packages/fern-docs/bundle/src/components/PageHeader.tsx

@@ -1,15 +1,14 @@
 import "server-only";
 
 import type { FernNavigation } from "@fern-api/fdr-sdk";
+import { FernBreadcrumbs } from "@fern-docs/components/FernBreadcrumbs";
 import type { FernDropdown } from "@fern-docs/components/FernDropdown";
 import { FernLink } from "@fern-docs/components/FernLink";
 import { ChevronLeft } from "lucide-react";
 import React from "react";
-
 import { MdxServerComponent } from "@/mdx/components/server-component";
 import type { MdxSerializer } from "@/server/mdx-serializer";
 
-import { FernBreadcrumbs } from "./FernBreadcrumbs";
 import { PageActionsDropdown } from "./PageActionsDropdown";
 import { PageFilters } from "./PageFilters";
 import { RSSFeedButton } from "./RSSFeedButton";

packages/fern-docs/bundle/src/components/index.scss

@@ -3,10 +3,9 @@
 @import "./css/components.scss";
 @import "./FernAnchor.scss";
 @import "./HorizontalOverflowMask.scss";
-@import "./FernBreadcrumbs.scss";
 @import "./api-reference/index.scss";
 @import "./playground/index.scss";
 @import "./changelog/index.scss";
 @import "./PageActions.scss";
 @import "./themes/index.scss";
-@import "./bottom-nav.scss";
+@import "./bottom-nav.scss";

packages/fern-docs/bundle/src/components/FernBreadcrumbs.tsx → packages/fern-docs/components/src/FernBreadcrumbs.tsx

@@ -2,9 +2,9 @@
 
 import { slugToHref } from "@fern-api/docs-utils";
 import type { FernNavigation } from "@fern-api/fdr-sdk";
-import { FernLink } from "@fern-docs/components/FernLink";
 import { ChevronRight } from "lucide-react";
 import { Fragment, type ReactElement } from "react";
+import { FernLink } from "./FernLink";
 
 export interface FernBreadcrumbsProps {
     breadcrumb: readonly FernNavigation.BreadcrumbItem[];

packages/fern-docs/components/src/index.css

@@ -9,6 +9,7 @@
 @import "./FernScrollArea.scss";
 @import "./FernSegmentedControl.scss";
 @import "./FernHighlight.scss";
+@import "./FernBreadcrumbs.scss";
 @import "./badges/index.scss";
 @import "./kbd.css";
 @import "./accordion.scss";