Fix missing eyebrow headers in markdown pages (#211)

* Add a reference to section from page node

* Add sectionTitle to resolved path

packages/commons/app-utils/src/path-resolver/__test__/PathResolver/mock-definitions/versioned-untabbed.ts

@@ -54,7 +54,7 @@ export const DEFINITION_VERSIONED_UNTABBED: DocsDefinitionSummary = {
                         items: [
                             {
                                 type: "section",
-                                title: "Introduction",
+                                title: "Welcome",
                                 urlSlug: "introduction",
                                 skipUrlSlug: false,
                                 collapsed: false,

packages/commons/app-utils/src/path-resolver/__test__/PathResolver/nodes.test.ts

@@ -0,0 +1,50 @@
+import { PathResolver } from "../../PathResolver";
+import { expectDocsSection, expectPageNode } from "../util";
+import { DEFINITION_UNVERSIONED_TABBED } from "./mock-definitions/unversioned-tabbed";
+import { DEFINITION_UNVERSIONED_UNTABBED } from "./mock-definitions/unversioned-untabbed";
+import { DEFINITION_VERSIONED_TABBED } from "./mock-definitions/versioned-tabbed";
+import { DEFINITION_VERSIONED_UNTABBED } from "./mock-definitions/versioned-untabbed";
+
+describe("resolveNavigatable", () => {
+    describe("correctly gets the section associated with page", () => {
+        it("with unversioned and untabbed docs", () => {
+            const resolver = new PathResolver({
+                definition: DEFINITION_UNVERSIONED_UNTABBED,
+            });
+            const node = resolver.rootNavigatable;
+            expectPageNode(node);
+            expectDocsSection(node.section);
+            expect(node.section.title).toBe("Introduction");
+        });
+
+        it("with unversioned and tabbed docs", () => {
+            const resolver = new PathResolver({
+                definition: DEFINITION_UNVERSIONED_TABBED,
+            });
+            const node = resolver.resolveNavigatable("welcome/advanced-concepts/sharding");
+            expectPageNode(node);
+            expectDocsSection(node.section);
+            expect(node.section.title).toBe("Advanced Concepts");
+        });
+
+        it("with versioned and untabbed docs", () => {
+            const resolver = new PathResolver({
+                definition: DEFINITION_VERSIONED_UNTABBED,
+            });
+            const node = resolver.resolveNavigatable("v1-2/introduction/authentication");
+            expectPageNode(node);
+            expectDocsSection(node.section);
+            expect(node.section.title).toBe("Welcome");
+        });
+
+        it("with versioned and tabbed docs", () => {
+            const resolver = new PathResolver({
+                definition: DEFINITION_VERSIONED_TABBED,
+            });
+            const node = resolver.resolveNavigatable("help-center/documents/uploading-documents");
+            expectPageNode(node);
+            expectDocsSection(node.section);
+            expect(node.section.title).toBe("Documents");
+        });
+    });
+});

packages/commons/app-utils/src/path-resolver/__test__/util.ts

@@ -1,3 +1,4 @@
+import type * as FernRegistryDocsRead from "@fern-fern/registry-browser/api/resources/docs/resources/v1/resources/read";
 import type { DocsNode, DocsNodeType } from "../types";
 
 export function expectDocsSectionNode(node: DocsNode | undefined): asserts node is DocsNode.DocsSection {
@@ -16,6 +17,14 @@ export function expectPageNode(node: DocsNode | undefined): asserts node is Docs
     expectNode(node).toBeOfType("page");
 }
 
+export function expectDocsSection(
+    section: FernRegistryDocsRead.DocsSection | null
+): asserts section is FernRegistryDocsRead.DocsSection {
+    if (section == null) {
+        throw new Error("Expected 'section' to be non-null");
+    }
+}
+
 interface NodeExpectation {
     toBeOfType: (type: DocsNodeType | undefined) => void;
 }

packages/commons/app-utils/src/path-resolver/build-tree.ts

@@ -81,6 +81,7 @@ export function buildDefinitionTree(definition: DocsDefinitionSummary): DocsNode
                 const children = buildNodesForNavigationItems({
                     items: navigationConfig.items,
                     parentSlugs: [],
+                    section: null,
                     context: {
                         type: "versioned-untabbed",
                         root,
@@ -115,6 +116,7 @@ export function buildDefinitionTree(definition: DocsDefinitionSummary): DocsNode
         const children = buildNodesForNavigationItems({
             items: rootNavigationConfig.items,
             parentSlugs: [],
+            section: null,
             context: {
                 type: "unversioned-untabbed",
                 root,
@@ -169,6 +171,7 @@ function buildNodeForNavigationTab({
     const children = buildNodesForNavigationItems({
         items: tab.items,
         parentSlugs: [...parentSlugs, tab.urlSlug],
+        section: null,
         context:
             context.type === "versioned"
                 ? {
@@ -193,16 +196,19 @@ function buildNodeForNavigationTab({
 function buildNodesForNavigationItems({
     items,
     parentSlugs,
+    section,
     context,
 }: {
     items: FernRegistryDocsRead.NavigationItem[];
     parentSlugs: string[];
+    section: FernRegistryDocsRead.DocsSection | null;
     context: NodeDocsContext;
 }): ChildDocsNode[] {
     return items.map((childItem) =>
         buildNodeForNavigationItem({
             item: childItem,
             parentSlugs: [...parentSlugs],
+            section,
             context,
         })
     ) as ChildDocsNode[];
@@ -211,10 +217,12 @@ function buildNodesForNavigationItems({
 function buildNodeForNavigationItem({
     item,
     parentSlugs,
+    section,
     context,
 }: {
     item: FernRegistryDocsRead.NavigationItem;
     parentSlugs: string[];
+    section: FernRegistryDocsRead.DocsSection | null;
     context: NodeDocsContext;
 }): DocsNode {
     switch (item.type) {
@@ -224,6 +232,7 @@ function buildNodeForNavigationItem({
                 slug: page.urlSlug,
                 leadingSlug: joinUrlSlugs(...parentSlugs, page.urlSlug),
                 page,
+                section,
                 context,
             });
         }
@@ -263,6 +272,7 @@ function buildNodeForDocsSection({
     const children = buildNodesForNavigationItems({
         items: section.items,
         parentSlugs: nextSectionParentSlugs(section, parentSlugs),
+        section,
         context,
     });
     addNodeChildren(sectionNode, children);

packages/commons/app-utils/src/path-resolver/node-factory.ts

@@ -216,18 +216,21 @@ export class NodeFactory {
         slug,
         leadingSlug,
         page,
+        section,
         context,
     }: {
         slug: string;
         leadingSlug: string;
         page: FernRegistryDocsRead.PageMetadata;
+        section: FernRegistryDocsRead.DocsSection | null;
         context: NodeDocsContext;
     }): DocsNode.Page {
         return {
             type: "page",
             slug,
             leadingSlug,
             page,
+            section,
             context,
         };
     }

packages/commons/app-utils/src/path-resolver/types.ts

@@ -215,6 +215,7 @@ export declare namespace DocsNode {
     export interface Page extends BaseNode, NavigatableNode {
         type: "page";
         page: FernRegistryDocsRead.PageMetadata;
+        section: FernRegistryDocsRead.DocsSection | null;
         context: NodeDocsContext;
     }
 }

packages/ui/app/src/ResolvedPath.ts

@@ -6,6 +6,7 @@ export declare namespace ResolvedPath {
         type: "custom-markdown-page";
         fullSlug: string;
         page: FernRegistryDocsRead.PageMetadata;
+        sectionTitle: string | null;
         serializedMdxContent: SerializedMdxContent;
     }
 

packages/ui/app/src/custom-docs-page/CustomDocsPage.tsx

@@ -1,12 +1,10 @@
-import type * as FernRegistryDocsRead from "@fern-fern/registry-browser/api/resources/docs/resources/v1/resources/read";
-import { DocsNode, isUnversionedUntabbedNavigationConfig, SerializedMdxContent } from "@fern-ui/app-utils";
-import { useCallback, useMemo } from "react";
+import { DocsNode, SerializedMdxContent } from "@fern-ui/app-utils";
+import { useMemo } from "react";
 import { BottomNavigationButtons } from "../bottom-navigation-buttons/BottomNavigationButtons";
 import { HEADER_HEIGHT } from "../constants";
 import { useDocsContext } from "../docs-context/useDocsContext";
 import { MdxContent } from "../mdx/MdxContent";
 import { ResolvedPath } from "../ResolvedPath";
-import { useDocsSelectors } from "../selectors/useDocsSelectors";
 import { TableOfContents } from "./TableOfContents";
 
 export declare namespace CustomDocsPage {
@@ -17,52 +15,21 @@ export declare namespace CustomDocsPage {
     }
 }
 
-export const CustomDocsPage: React.FC<CustomDocsPage.Props> = ({ navigatable, serializedMdxContent, resolvedPath }) => {
+export const CustomDocsPage: React.FC<CustomDocsPage.Props> = ({ serializedMdxContent, resolvedPath }) => {
     const { resolvePage } = useDocsContext();
-    const { activeNavigationConfigContext } = useDocsSelectors();
 
     const page = useMemo(() => resolvePage(resolvedPath.page.id), [resolvedPath.page.id, resolvePage]);
 
-    const findTitle = useCallback(
-        (navigationItems: FernRegistryDocsRead.NavigationItem[]) => {
-            for (const navigationItem of navigationItems) {
-                if (navigationItem.type !== "section") {
-                    continue;
-                }
-                const [sectionSlugInferredFromPath] = navigatable.leadingSlug.split("/");
-                if (sectionSlugInferredFromPath != null && navigationItem.urlSlug === sectionSlugInferredFromPath) {
-                    return navigationItem.title;
-                }
-            }
-            return undefined;
-        },
-        [navigatable.leadingSlug]
-    );
-
-    const sectionTitle = useMemo(() => {
-        if (isUnversionedUntabbedNavigationConfig(activeNavigationConfigContext.config)) {
-            return findTitle(activeNavigationConfigContext.config.items);
-        } else {
-            for (const tab of activeNavigationConfigContext.config.tabs) {
-                const title = findTitle(tab.items);
-                if (title != null) {
-                    return title;
-                }
-            }
-            return undefined;
-        }
-    }, [activeNavigationConfigContext, findTitle]);
-
     const content = useMemo(() => {
         return serializedMdxContent != null ? <MdxContent mdx={serializedMdxContent} /> : null;
     }, [serializedMdxContent]);
 
     return (
         <div className="flex space-x-16 px-6 md:px-12">
             <div className="w-full min-w-0 max-w-3xl pt-8">
-                {sectionTitle != null && (
+                {resolvedPath.sectionTitle != null && (
                     <div className="text-accent-primary mb-4 text-xs font-semibold uppercase tracking-wider">
-                        {sectionTitle}
+                        {resolvedPath.sectionTitle}
                     </div>
                 )}
 

packages/ui/app/src/navigation-context/NavigationContext.ts

@@ -28,6 +28,7 @@ export const NavigationContext = React.createContext<NavigationContextValue>({
             title: "",
             urlSlug: "",
         },
+        section: null,
         context: {
             type: "unversioned-untabbed",
             root: NodeFactory.createRoot(EMPTY_DEFINITION_SUMMARY),
@@ -54,6 +55,7 @@ export const NavigationContext = React.createContext<NavigationContextValue>({
             title: "",
             urlSlug: "",
         },
+        sectionTitle: "",
         serializedMdxContent: { compiledSource: "", frontmatter: {}, scope: {} },
     },
 });

packages/ui/fe-bundle/src/utils/convertNavigatableToResolvedPath.ts

@@ -20,6 +20,7 @@ export async function convertNavigatableToResolvedPath({
                 type: "custom-markdown-page",
                 fullSlug,
                 page: serializedNavigatable.page,
+                sectionTitle: serializedNavigatable.section?.title ?? null,
                 serializedMdxContent: serializedNavigatable.serializedMdxContent,
             };
         case "endpoint":