Add getContentTitle to properly render the title for sites & legacy published content (#2343)

Author: taranvohra

src/app/(space)/(content)/layout.tsx

@@ -12,6 +12,7 @@ import { buildVersion } from '@/lib/build';
 import { getContentSecurityPolicyNonce } from '@/lib/csp';
 import { absoluteHref, baseUrl } from '@/lib/links';
 import { shouldIndexSpace } from '@/lib/seo';
+import { getContentTitle } from '@/lib/utils';
 
 import { ClientContexts } from './ClientContexts';
 import { RocketLoaderDetector } from './RocketLoaderDetector';
@@ -104,7 +105,7 @@ export async function generateMetadata(): Promise<Metadata> {
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
 
     return {
-        title: `${parent ? parent.title : customization.title ?? space.title}`,
+        title: getContentTitle(space, customization, parent),
         generator: `GitBook (${buildVersion()})`,
         metadataBase: new URL(baseUrl()),
         icons: {

src/app/(space)/(core)/~gitbook/icon/route.tsx

@@ -14,6 +14,7 @@ import {
 } from '@/lib/api';
 import { getEmojiForCode } from '@/lib/emojis';
 import { tcls } from '@/lib/tailwind';
+import { getContentTitle } from '@/lib/utils';
 
 export const runtime = 'edge';
 
@@ -54,7 +55,7 @@ export async function GET(req: NextRequest) {
             : space.visibility === ContentVisibility.InCollection && space.parent
               ? await getCollection(space.parent)
               : null;
-    const contentTitle = parent?.title ?? customization.title ?? space.title;
+    const contentTitle = getContentTitle(space, customization, parent);
 
     return new ImageResponse(
         (

src/app/(space)/(core)/~gitbook/ogimage/[pageId]/route.tsx

@@ -3,6 +3,8 @@ import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
 import React from 'react';
 
+import { getContentTitle } from '@/lib/utils';
+
 import { PageIdParams, fetchPageData } from '../../../../fetch';
 
 export const runtime = 'edge';
@@ -31,7 +33,7 @@ export async function GET(req: NextRequest, { params }: { params: PageIdParams }
                 }}
             >
                 <h2 tw="text-7xl font-bold tracking-tight text-left">
-                    {parent?.title ?? customization.title ?? space.title}
+                    {getContentTitle(space, customization, parent)}
                 </h2>
                 <div tw="flex flex-1">
                     <p tw="text-4xl">{page ? page.title : 'Not found'}</p>

src/components/Header/HeaderLogo.tsx

@@ -11,6 +11,7 @@ import { HeaderMobileMenu } from '@/components/Header/HeaderMobileMenu';
 import { Image } from '@/components/utils';
 import { absoluteHref } from '@/lib/links';
 import { tcls } from '@/lib/tailwind';
+import { getContentTitle } from '@/lib/utils';
 
 import { Link } from '../primitives';
 
@@ -145,7 +146,7 @@ function LogoFallback(props: HeaderLogoProps) {
                         : 'text-header-link',
                 )}
             >
-                {parent ? parent.title : customization.title ?? space.title}
+                {getContentTitle(space, customization, parent)}
             </h1>
         </>
     );

src/lib/utils.ts

@@ -0,0 +1,25 @@
+import {
+    Collection,
+    CustomizationSettings,
+    Site,
+    SiteCustomizationSettings,
+    Space,
+} from '@gitbook/api';
+
+/**
+ * Get the title to display for a content.
+ */
+export function getContentTitle(
+    space: Space,
+    customization: CustomizationSettings | SiteCustomizationSettings,
+    parent: Site | Collection | null,
+) {
+    // When we are rendering a site, always give priority to the customization title first
+    // and then fallback to the site title
+    if (parent?.object === 'site') {
+        return customization.title ?? parent.title ?? space.title;
+    }
+
+    // Otherwise the legacy behavior is not changed to avoid regressions
+    return parent ? parent.title : customization.title ?? space.title;
+}