Pass down ancestors instead of computing them (#2635)

Author: SamyPesse

packages/gitbook/src/app/(site)/(content)/[[...pathname]]/page.tsx

@@ -35,6 +35,7 @@ export default async function Page(props: {
         customization,
         pages,
         page,
+        ancestors,
         document,
     } = await getPageDataWithFallback({
         pagePathParams: params,
@@ -103,6 +104,7 @@ export default async function Page(props: {
                     customization={customization}
                     context={contentRefContext}
                     page={page}
+                    ancestors={ancestors}
                     document={document}
                     withPageFeedback={
                         // Display the page feedback in the page footer if the aside is not visible

packages/gitbook/src/components/PageBody/PageBody.tsx

@@ -11,6 +11,7 @@ import { getSpaceLanguage } from '@/intl/server';
 import { t } from '@/intl/translate';
 import { ContentTarget, SiteContentPointer, api } from '@/lib/api';
 import { hasFullWidthBlock, isNodeEmpty } from '@/lib/document';
+import { AncestorRevisionPage } from '@/lib/pages';
 import { ContentRefContext, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 import { shouldTrackPageViews } from '@/lib/tracking';
@@ -31,6 +32,7 @@ export function PageBody(props: {
     contentTarget: ContentTarget;
     customization: CustomizationSettings | SiteCustomizationSettings;
     page: RevisionPageDocument;
+    ancestors: AncestorRevisionPage[];
     document: JSONDocument | null;
     context: ContentRefContext;
     withPageFeedback: boolean;
@@ -42,6 +44,7 @@ export function PageBody(props: {
         customization,
         context,
         page,
+        ancestors,
         document,
         withPageFeedback,
     } = props;
@@ -79,7 +82,7 @@ export function PageBody(props: {
                     <PageCover as="hero" page={page} cover={page.cover} context={context} />
                 ) : null}
 
-                <PageHeader page={page} pages={context.pages} />
+                <PageHeader page={page} ancestors={ancestors} pages={context.pages} />
                 {document && !isNodeEmpty(document) ? (
                     <React.Suspense
                         fallback={

packages/gitbook/src/components/PageBody/PageHeader.tsx

@@ -1,40 +1,32 @@
-import {
-    RevisionPage,
-    RevisionPageDocument,
-    RevisionPageGroup,
-    RevisionPageType,
-} from '@gitbook/api';
+import { RevisionPage, RevisionPageDocument } from '@gitbook/api';
 import { Icon } from '@gitbook/icons';
 
 import { pageHref } from '@/lib/links';
+import { AncestorRevisionPage } from '@/lib/pages';
 import { tcls } from '@/lib/tailwind';
 
 import { PageIcon } from '../PageIcon';
 import { StyledLink } from '../primitives';
 
-export function PageHeader(props: { page: RevisionPageDocument; pages: RevisionPage[] }) {
-    const { page, pages } = props;
+export function PageHeader(props: {
+    page: RevisionPageDocument;
+    ancestors: AncestorRevisionPage[];
+    pages: RevisionPage[];
+}) {
+    const { page, ancestors, pages } = props;
 
     if (!page.layout.title && !page.layout.description) {
         return null;
     }
 
-    const pathSegments = page.path.split('/').slice(0, -1); // Exclude the current page from the breadcrumbs
-    const flattenedPages = flattenPages(pages);
-    const breadcrumbs = pathSegments
-        .map((pathSegment) =>
-            flattenedPages.find((page) => 'slug' in page && page.slug == pathSegment),
-        )
-        .filter((page): page is RevisionPageDocument | RevisionPageGroup => page !== undefined);
-
     return (
         <header
             className={tcls('max-w-3xl', 'mx-auto', 'mb-6', 'space-y-3', 'page-api-block:ml-0')}
         >
-            {breadcrumbs?.length > 0 && (
+            {ancestors.length > 0 && (
                 <nav>
                     <ol className={tcls('flex', 'flex-wrap', 'items-center', 'gap-2')}>
-                        {breadcrumbs.map((breadcrumb, index) => (
+                        {ancestors.map((breadcrumb, index) => (
                             <>
                                 <li key={breadcrumb.id}>
                                     <StyledLink
@@ -58,7 +50,7 @@ export function PageHeader(props: { page: RevisionPageDocument; pages: RevisionP
                                         {breadcrumb.title}
                                     </StyledLink>
                                 </li>
-                                {index != breadcrumbs.length - 1 && (
+                                {index != ancestors.length - 1 && (
                                     <Icon
                                         icon="chevron-right"
                                         className={tcls(
@@ -87,10 +79,3 @@ export function PageHeader(props: { page: RevisionPageDocument; pages: RevisionP
         </header>
     );
 }
-
-function flattenPages(pages: RevisionPage[]): RevisionPage[] {
-    return pages.reduce<RevisionPage[]>((acc, page) => {
-        const nestedPages = 'pages' in page && page.pages ? flattenPages(page.pages) : [];
-        return acc.concat(page, ...nestedPages);
-    }, []);
-}