Fix canonical URL ending with "/"

Author: gregberge

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

@@ -1,12 +1,10 @@
 import { CustomizationHeaderPreset, CustomizationThemeMode } from '@gitbook/api';
 import { Metadata, Viewport } from 'next';
-import { headers } from 'next/headers';
 import { notFound, redirect } from 'next/navigation';
-import React, { Suspense } from 'react';
+import React from 'react';
 
 import { PageAside } from '@/components/PageAside';
 import { PageBody, PageCover } from '@/components/PageBody';
-import { SkeletonHeading, SkeletonParagraph } from '@/components/primitives';
 import { PageHrefContext, absoluteHref, pageHref } from '@/lib/links';
 import { getPagePath, resolveFirstDocument } from '@/lib/pages';
 import { ContentRefContext } from '@/lib/references';
@@ -19,23 +17,15 @@ import { PagePathParams, fetchPageData, getPathnameParam, normalizePathname } fr
 
 export const runtime = 'edge';
 
-type PageProps = {
+/**
+ * Fetch and render a page.
+ */
+export default async function Page(props: {
     params: PagePathParams;
     searchParams: { fallback?: string };
-};
-
-export default async function Page(props: PageProps) {
-    // We wrap the page in Suspense to enable streaming at page level
-    // it's only enabled in "navigation" mode
-    return (
-        <Suspense fallback={<PageSkeleton />}>
-            <PageContent {...props} />
-        </Suspense>
-    );
-}
+}) {
+    const { params, searchParams } = props;
 
-async function PageContent(props: PageProps) {
-    const data = await getPageDataWithFallback(props, { redirectOnFallback: true });
     const {
         content: contentPointer,
         contentTarget,
@@ -46,7 +36,26 @@ async function PageContent(props: PageProps) {
         pages,
         page,
         document,
-    } = data;
+    } = await getPageDataWithFallback({
+        pagePathParams: params,
+        searchParams,
+        redirectOnFallback: true,
+    });
+
+    const linksContext: PageHrefContext = {};
+    const rawPathname = getPathnameParam(params);
+    if (!page) {
+        const pathname = normalizePathname(rawPathname);
+        if (pathname !== rawPathname) {
+            // If the pathname was not normalized, redirect to the normalized version
+            // before trying to resolve the page again
+            redirect(absoluteHref(pathname));
+        } else {
+            notFound();
+        }
+    } else if (getPagePath(pages, page) !== rawPathname) {
+        redirect(pageHref(pages, page, linksContext));
+    }
 
     const withTopHeader = customization.header.preset !== CustomizationHeaderPreset.None;
     const withFullPageCover = !!(
@@ -69,8 +78,6 @@ async function PageContent(props: PageProps) {
 
     return (
         <>
-            {/* Title is displayed by the browser, except in navigation mode */}
-            <title>{getTitle(data)}</title>
             {withFullPageCover && page.cover ? (
                 <PageCover as="full" page={page} cover={page.cover} context={contentRefContext} />
             ) : null}
@@ -110,30 +117,7 @@ async function PageContent(props: PageProps) {
     );
 }
 
-function PageSkeleton() {
-    return (
-        <div
-            className={tcls(
-                'flex',
-                'flex-row',
-                'flex-1',
-                'relative',
-                'py-8',
-                'lg:px-16',
-                'xl:mr-56',
-                'items-center',
-                'lg:items-start',
-            )}
-        >
-            <div className={tcls('flex-1', 'max-w-3xl', 'mx-auto', 'page-full-width:mx-0')}>
-                <SkeletonHeading style={tcls('mb-8')} />
-                <SkeletonParagraph style={tcls('mb-4')} />
-            </div>
-        </div>
-    );
-}
-
-export async function generateViewport({ params }: PageProps): Promise<Viewport> {
+export async function generateViewport({ params }: { params: PagePathParams }): Promise<Viewport> {
     const { customization } = await fetchPageData(params);
     return {
         colorScheme: customization.themes.toggeable
@@ -144,25 +128,26 @@ export async function generateViewport({ params }: PageProps): Promise<Viewport>
     };
 }
 
-function getTitle(input: Awaited<ReturnType<typeof getPageDataWithFallback>>) {
-    const { page, space, customization, site } = input;
-    return [page.title, getContentTitle(space, customization, site ?? null)]
-        .filter(Boolean)
-        .join(' | ');
-}
+export async function generateMetadata({
+    params,
+    searchParams,
+}: {
+    params: PagePathParams;
+    searchParams: { fallback?: string };
+}): Promise<Metadata> {
+    const { space, pages, page, customization, site, ancestors } = await getPageDataWithFallback({
+        pagePathParams: params,
+        searchParams,
+    });
 
-export async function generateMetadata(props: PageProps): Promise<Metadata> {
-    // We only generate metadata in navigation mode. Else we let the browser handle it.
-    if (await checkIsInAppNavigation()) {
-        return {};
+    if (!page) {
+        notFound();
     }
 
-    const data = await getPageDataWithFallback(props, { redirectOnFallback: false });
-
-    const { page, pages, space, customization, site, ancestors } = data;
-
     return {
-        title: getTitle(data),
+        title: [page.title, getContentTitle(space, customization, site ?? null)]
+            .filter(Boolean)
+            .join(' | '),
         description: page.description ?? '',
         alternates: {
             canonical: absoluteHref(getPagePath(pages, page), true),
@@ -180,30 +165,17 @@ export async function generateMetadata(props: PageProps): Promise<Metadata> {
     };
 }
 
-/**
- * Check if the navigation is in-app, meaning the user clicks on a link.
- */
-async function checkIsInAppNavigation() {
-    const headerList = await headers();
-    const fetchMode = headerList.get('sec-fetch-mode');
-
-    return fetchMode === 'cors';
-}
-
 /**
  * Fetches the page data matching the requested pathname and fallback to root page when page is not found.
  */
-async function getPageDataWithFallback(
-    props: PageProps,
-    behaviour: {
-        redirectOnFallback: boolean;
-    },
-) {
-    await new Promise((resolve) => setTimeout(resolve, 2000));
-    const { params, searchParams } = props;
-    const { redirectOnFallback } = behaviour;
+async function getPageDataWithFallback(args: {
+    pagePathParams: PagePathParams;
+    searchParams: { fallback?: string };
+    redirectOnFallback?: boolean;
+}) {
+    const { pagePathParams, searchParams, redirectOnFallback = false } = args;
 
-    const { pages, page: targetPage, ...otherPageData } = await fetchPageData(params);
+    const { pages, page: targetPage, ...otherPageData } = await fetchPageData(pagePathParams);
 
     let page = targetPage;
     const canFallback = !!searchParams.fallback;
@@ -217,21 +189,6 @@ async function getPageDataWithFallback(
         page = rootPage?.page;
     }
 
-    const linksContext: PageHrefContext = {};
-    const rawPathname = getPathnameParam(params);
-    if (!page) {
-        const pathname = normalizePathname(rawPathname);
-        if (pathname !== rawPathname) {
-            // If the pathname was not normalized, redirect to the normalized version
-            // before trying to resolve the page again
-            redirect(absoluteHref(pathname));
-        } else {
-            notFound();
-        }
-    } else if (getPagePath(pages, page) !== rawPathname) {
-        redirect(pageHref(pages, page, linksContext));
-    }
-
     return {
         ...otherPageData,
         pages,

packages/gitbook/src/lib/links.ts

@@ -79,9 +79,14 @@ export function baseUrl(): string {
 
 /**
  * Create an absolute href in the current content.
+ * If it's the root URL, the trailing slash will be removed.
  */
 export function absoluteHref(href: string, withHost: boolean = false): string {
     const base = withHost ? baseUrl() : basePath();
+    if (href === '') {
+        // Remove the trailing slash if it's the root URL
+        return base.slice(0, -1);
+    }
     return `${base}${href.startsWith('/') ? href.slice(1) : href}`;
 }