Use customization.title instead of space.title (#194)

* Use customization.title instead of space.title

* Format

* Fix TS

src/app/(space)/(content)/[[...pathname]]/page.tsx

@@ -90,13 +90,15 @@ export async function generateViewport({ params }: { params: PagePathParams }):
 }
 
 export async function generateMetadata({ params }: { params: PagePathParams }): Promise<Metadata> {
-    const { space, page, customization } = await fetchPageData(params);
+    const { space, page, customization, collection } = await fetchPageData(params);
     if (!page) {
         notFound();
     }
 
     return {
-        title: `${page.title} | ${space.title}`,
+        title: [page.title, customization.title ?? space.title, collection?.title]
+            .filter(Boolean)
+            .join(' | '),
         description: page.description ?? '',
         openGraph: {
             images: [

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

@@ -91,7 +91,7 @@ export async function generateMetadata(): Promise<Metadata> {
     const customIcon = 'icon' in customization.favicon ? customization.favicon.icon : null;
 
     return {
-        title: `${space.title}`,
+        title: `${collection ? collection.title : customization.title ?? space.title}`,
         generator: `GitBook (${buildVersion()})`,
         // We pass `metadataBase` to avoid warnings from Next, but we still use absolute URLs
         // as metadataBase doesn't seem to work well on next-on-cloudflare.

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

@@ -11,7 +11,7 @@ export const runtime = 'edge';
  * Render the OpenGraph image for a space.
  */
 export async function GET(req: NextRequest, { params }: { params: PageIdParams }) {
-    const { space, page, customization } = await fetchPageData(params);
+    const { space, page, customization, collection } = await fetchPageData(params);
     const url = new URL(space.urls.published ?? space.urls.app);
 
     if (customization.socialPreview.url) {
@@ -30,7 +30,9 @@ export async function GET(req: NextRequest, { params }: { params: PageIdParams }
                     flexDirection: 'column',
                 }}
             >
-                <h2 tw="text-7xl font-bold tracking-tight text-left">{space.title}</h2>
+                <h2 tw="text-7xl font-bold tracking-tight text-left">
+                    {collection?.title ?? customization.title ?? space.title}
+                </h2>
                 <div tw="flex flex-1">
                     <p tw="text-4xl">{page ? page.title : 'Not found'}</p>
                 </div>

src/app/(space)/(core)/~gitbook/pdf/page.tsx

@@ -1,5 +1,11 @@
 import { ArrowLeft, Printer } from '@geist-ui/icons';
-import { Revision, RevisionPageDocument, RevisionPageGroup, Space } from '@gitbook/api';
+import {
+    CustomizationSettings,
+    Revision,
+    RevisionPageDocument,
+    RevisionPageGroup,
+    Space,
+} from '@gitbook/api';
 import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import * as React from 'react';
@@ -135,7 +141,7 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
                 }
             />
 
-            {pdfParams.only ? null : <PDFSpaceIntro space={space} />}
+            {pdfParams.only ? null : <PDFSpaceIntro space={space} customization={customization} />}
             {pages.map(({ page, depth }) =>
                 page.type === 'group' ? (
                     <PDFPageGroup key={page.id} space={space} page={page} />
@@ -166,13 +172,15 @@ export default async function PDFHTMLOutput(props: { searchParams: { [key: strin
     );
 }
 
-async function PDFSpaceIntro(props: { space: Space }) {
-    const { space } = props;
+async function PDFSpaceIntro(props: { space: Space; customization: CustomizationSettings }) {
+    const { space, customization } = props;
 
     return (
         <PrintPage isFirst>
             <div className={tcls('flex', 'items-center', 'justify-center', 'py-12')}>
-                <h1 className={tcls('text-6xl', 'font-bold')}>{space.title}</h1>
+                <h1 className={tcls('text-6xl', 'font-bold')}>
+                    {customization.title ?? space.title}
+                </h1>
             </div>
         </PrintPage>
     );

src/components/Header/HeaderLogo.tsx

@@ -135,7 +135,7 @@ function LogoFallback(props: HeaderLogoProps) {
                         : 'text-header-link',
                 )}
             >
-                {collection ? collection.title : space.title}
+                {collection ? collection.title : customization.title ?? space.title}
             </h1>
         </>
     );