feat: Cohere Docs Theme

package.json

@@ -90,8 +90,6 @@
   },
   "resolutions": {
     "postcss": "8.4.31",
-    "@mdx-js/mdx": "3.0.1",
-    "@mdx-js/react": "3.0.1",
     "esbuild": "0.20.2"
   },
   "packageManager": "[email protected]",

packages/ui/app/package.json

@@ -88,7 +88,7 @@
     "mdast-util-to-hast": "^13.1.0",
     "moment": "^2.30.1",
     "next": "^14.2.3",
-    "next-mdx-remote": "^4.4.1",
+    "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.3.0",
     "nprogress": "^0.2.0",
     "numeral": "^2.0.6",

packages/ui/app/src/__test__/setup.ts

@@ -5,7 +5,11 @@ import { afterEach, beforeAll, expect, vi } from "vitest";
 expect.extend(matchers);
 
 beforeAll(() => {
-    vi.mock("next/router", () => require("next-router-mock"));
+    vi.mock("next/router", async () => {
+        const mock = await require("next-router-mock");
+        mock.Router = mock.memoryRouter;
+        return mock;
+    });
 });
 
 afterEach(() => {

packages/ui/app/src/api-page/ApiPage.tsx

@@ -2,9 +2,10 @@ import { EMPTY_ARRAY } from "@fern-ui/core-utils";
 import { useSetAtom } from "jotai";
 import { useEffect } from "react";
 import { APIS } from "../atoms/apis";
-import { useFeatureFlags } from "../atoms/flags";
-import { useIsReady } from "../contexts/useIsReady";
+import { useIsReady } from "../atoms/viewport";
+import { ApiPageContext } from "../contexts/useApiPageContext";
 import { ResolvedRootPackage } from "../resolver/types";
+import { BuiltWithFern } from "../sidebar/BuiltWithFern";
 import { ApiPackageContents } from "./ApiPackageContents";
 
 export declare namespace ApiPage {
@@ -16,15 +17,14 @@ export declare namespace ApiPage {
 
 export const ApiPage: React.FC<ApiPage.Props> = ({ initialApi, showErrors }) => {
     const hydrated = useIsReady();
-    const { isApiScrollingDisabled } = useFeatureFlags();
     const setDefinitions = useSetAtom(APIS);
 
     useEffect(() => {
         setDefinitions((prev) => ({ ...prev, [initialApi.api]: initialApi }));
     }, [initialApi, setDefinitions]);
 
     return (
-        <div className="min-h-0 pb-36">
+        <ApiPageContext.Provider value={true}>
             <ApiPackageContents
                 api={initialApi.api}
                 types={initialApi.types}
@@ -34,14 +34,16 @@ export const ApiPage: React.FC<ApiPage.Props> = ({ initialApi, showErrors }) =>
                 anchorIdParts={EMPTY_ARRAY}
             />
 
-            {isApiScrollingDisabled && (
+            {/* {isApiScrollingDisabled && (
                 <div className="mx-4 max-w-content-width md:mx-6 md:max-w-endpoint-width lg:mx-8">
-                    {/* <BottomNavigationButtons showPrev={true} /> */}
+                    <BottomNavigationButtons showPrev={true} />
                 </div>
-            )}
+            )} */}
 
             {/* anchor links should get additional padding to scroll to on initial load */}
             {!hydrated && <div className="h-full" />}
-        </div>
+            <div className="pb-36" />
+            <BuiltWithFern className="w-fit mx-auto my-8" />
+        </ApiPageContext.Provider>
     );
 };

packages/ui/app/src/api-page/ApiSectionMarkdownPage.tsx

@@ -1,37 +1,41 @@
 import clsx from "clsx";
-import { ReactElement } from "react";
+import { ReactElement, memo } from "react";
 import { useShouldHideFromSsg } from "../contexts/navigation-context/useNavigationContext";
 import { MdxContent } from "../mdx/MdxContent";
 import { ResolvedPageMetadata } from "../resolver/types";
 import { useApiPageCenterElement } from "./useApiPageCenterElement";
 
-export const ApiSectionMarkdownPage = ({
-    page,
-    hideBottomSeparator,
-}: {
-    page: ResolvedPageMetadata;
-    hideBottomSeparator: boolean;
-}): ReactElement | null => {
-    const slug = page.slug;
+export const ApiSectionMarkdownPage = memo(
+    ({
+        page,
+        hideBottomSeparator,
+    }: {
+        page: ResolvedPageMetadata;
+        hideBottomSeparator: boolean;
+    }): ReactElement | null => {
+        const slug = page.slug;
 
-    const { setTargetRef } = useApiPageCenterElement({ slug });
+        const { setTargetRef } = useApiPageCenterElement({ slug });
 
-    // TODO: this is a temporary fix to only SSG the content that is requested by the requested route.
-    // - webcrawlers will accurately determine the canonical URL (right now every page "returns" the same full-length content)
-    // - this allows us to render the static page before hydrating, preventing layout-shift caused by the navigation context.
-    if (useShouldHideFromSsg(slug)) {
-        return null;
-    }
+        // TODO: this is a temporary fix to only SSG the content that is requested by the requested route.
+        // - webcrawlers will accurately determine the canonical URL (right now every page "returns" the same full-length content)
+        // - this allows us to render the static page before hydrating, preventing layout-shift caused by the navigation context.
+        if (useShouldHideFromSsg(slug)) {
+            return null;
+        }
 
-    return (
-        <div
-            className={clsx("scroll-mt-header-height-padded", {
-                "border-default border-b mb-px": !hideBottomSeparator,
-            })}
-            ref={setTargetRef}
-            data-route={`/${slug}`}
-        >
-            <MdxContent mdx={page.markdown} />
-        </div>
-    );
-};
+        return (
+            <div
+                className={clsx("scroll-mt-content", {
+                    "border-default border-b mb-px": !hideBottomSeparator,
+                })}
+                ref={setTargetRef}
+                data-route={`/${slug}`}
+            >
+                <MdxContent mdx={page.markdown} />
+            </div>
+        );
+    },
+);
+
+ApiSectionMarkdownPage.displayName = "ApiSectionMarkdownPage";

packages/ui/app/src/api-page/artifacts/ApiArtifacts.tsx

@@ -26,7 +26,7 @@ export const ApiArtifacts: React.FC<ApiArtifacts.Props> = ({ apiDefinition, apiA
 
     return (
         <ApiPageMargins>
-            <div ref={setTargetRef} data-route={`/${slug}`.toLowerCase()} className="scroll-mt-header-height-padded">
+            <div ref={setTargetRef} data-route={`/${slug}`.toLowerCase()} className="scroll-mt-content">
                 <h1 className="pt-20">{API_ARTIFACTS_TITLE}</h1>
                 <div className="t-muted mt-5 text-lg">
                     Official open-source client libraries for your favorite platforms.

packages/ui/app/src/api-page/endpoints/Endpoint.tsx

@@ -1,7 +1,9 @@
-import { useAtomValue } from "jotai";
+import { useAtom } from "jotai";
+import { memo, useEffect } from "react";
 import { useFeatureFlags } from "../../atoms/flags";
+import { useResolvedPath } from "../../atoms/navigation";
 import { FERN_STREAM_ATOM } from "../../atoms/stream";
-import { useNavigationContext, useShouldHideFromSsg } from "../../contexts/navigation-context/useNavigationContext";
+import { useShouldHideFromSsg } from "../../contexts/navigation-context/useNavigationContext";
 import { ResolvedEndpointDefinition, ResolvedTypeDefinition } from "../../resolver/types";
 import { useApiPageCenterElement } from "../useApiPageCenterElement";
 import { EndpointContent } from "./EndpointContent";
@@ -17,13 +19,30 @@ export declare namespace Endpoint {
     }
 }
 
-export const Endpoint: React.FC<Endpoint.Props> = ({ api, showErrors, endpoint, breadcrumbs, isLastInApi, types }) => {
-    const isStream = useAtomValue(FERN_STREAM_ATOM);
-    const { resolvedPath } = useNavigationContext();
+const UnmemoizedEndpoint: React.FC<Endpoint.Props> = ({
+    api,
+    showErrors,
+    endpoint,
+    breadcrumbs,
+    isLastInApi,
+    types,
+}) => {
+    const [isStream, setStream] = useAtom(FERN_STREAM_ATOM);
+    const resolvedPath = useResolvedPath();
     const { isApiScrollingDisabled } = useFeatureFlags();
 
     const endpointSlug = endpoint.stream != null && isStream ? endpoint.stream.slug : endpoint.slug;
 
+    useEffect(() => {
+        if (endpoint.stream != null) {
+            if (endpoint.slug === resolvedPath.fullSlug) {
+                setStream(false);
+            } else if (endpoint.stream.slug === resolvedPath.fullSlug) {
+                setStream(true);
+            }
+        }
+    }, [endpoint.slug, endpoint.stream, resolvedPath.fullSlug, setStream]);
+
     const { setTargetRef } = useApiPageCenterElement({ slug: endpointSlug });
 
     // TODO: this is a temporary fix to only SSG the content that is requested by the requested route.
@@ -41,8 +60,9 @@ export const Endpoint: React.FC<Endpoint.Props> = ({ api, showErrors, endpoint,
             breadcrumbs={breadcrumbs}
             containerRef={setTargetRef}
             hideBottomSeparator={isLastInApi || isApiScrollingDisabled}
-            isInViewport={resolvedPath.fullSlug === endpoint.slug}
             types={types}
         />
     );
 };
+
+export const Endpoint = memo(UnmemoizedEndpoint);