Add breadcrumbs to search results

Author: zenoachtig

Diff for: .changeset/giant-carrots-divide.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add breadcrumbs to search results

Diff for: packages/gitbook/src/components/Search/SearchPageResultItem.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@gitbook/icons';
 import React from 'react';
 
+import { AncestorRevisionPage } from '@/lib/pages';
 import { tcls } from '@/lib/tailwind';
 
 import { HighlightQuery } from './HighlightQuery';
@@ -17,6 +18,11 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
 ) {
     const { query, item, active } = props;
 
+    const breadcrumbs = item.ancestors.map((ancestor) => ancestor.title);
+    if (item.spaceTitle) {
+        breadcrumbs.unshift(item.spaceTitle);
+    }
+
     return (
         <Link
             ref={ref}
@@ -56,7 +62,7 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
                 />
             </div>
             <div className={tcls('flex', 'flex-col', 'w-full')}>
-                {item.spaceTitle ? (
+                {breadcrumbs.length > 0 ? (
                     <div
                         className={tcls(
                             'text-xs',
@@ -65,9 +71,34 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
                             'uppercase',
                             'tracking-wider',
                             'mb-1',
+                            'flex',
+                            'flex-wrap',
+                            'gap-x-2',
+                            'gap-y-1',
+                            'items-center',
                         )}
                     >
-                        {item.spaceTitle}
+                        {(breadcrumbs.length > 3
+                            ? [
+                                  ...breadcrumbs.slice(0, 2),
+                                  <Icon key="ellipsis" icon="ellipsis-h" className="size-3" />,
+                                  ...breadcrumbs.slice(-1),
+                              ]
+                            : breadcrumbs
+                        ).map((crumb, index) => (
+                            <>
+                                {index !== 0 ? (
+                                    <Icon
+                                        key={index + '-icon'}
+                                        icon="chevron-right"
+                                        className="size-3"
+                                    />
+                                ) : null}
+                                <span key={index} className="line-clamp-1">
+                                    {crumb}
+                                </span>
+                            </>
+                        ))}
                     </div>
                 ) : null}
                 <HighlightQuery query={query} text={item.title} />

Diff for: packages/gitbook/src/components/Search/server-actions.tsx

@@ -5,10 +5,11 @@ import { captureException } from '@sentry/nextjs';
 import * as React from 'react';
 import { assert } from 'ts-essentials';
 
+import { fetchPageData } from '@/app/middleware/(site)/fetch';
 import { streamResponse } from '@/lib/actions';
 import * as api from '@/lib/api';
 import { getAbsoluteHref, getPageHref } from '@/lib/links';
-import { resolvePageId } from '@/lib/pages';
+import { AncestorRevisionPage, resolvePageId } from '@/lib/pages';
 import { filterOutNullable } from '@/lib/typescript';
 
 import { DocumentView } from '../DocumentView';
@@ -31,6 +32,8 @@ export interface ComputedPageResult {
 
     /** When part of a multi-spaces search, the title of the space */
     spaceTitle?: string;
+
+    ancestors: AncestorRevisionPage[];
 }
 
 export interface AskAnswerSource {
@@ -317,12 +320,15 @@ async function transformSectionsAndPage(args: {
         })) ?? [],
     );
 
+    const pageData = await fetchPageData({ pathname: [item.path] });
+
     const page: ComputedPageResult = {
         type: 'page',
         id: item.id,
         title: item.title,
         href: await getURL(item.path, spaceURL),
         spaceTitle: space?.title,
+        ancestors: pageData.ancestors,
     };
 
     return [page, sections];