fix: image optimization (#1955)

fern-api · Jan 7, 2025 · e9144f4 · e9144f4
1 parent 61ef953
commit e9144f4
Show file tree

Hide file tree

Showing 18 changed files with 383 additions and 203 deletions.
diff --git a/packages/fern-docs/ui/src/api-reference/ApiEndpointPage.tsx b/packages/fern-docs/ui/src/api-reference/ApiEndpointPage.tsx
@@ -6,9 +6,11 @@ import { useNavigationNodes, useWriteApiDefinitionAtom } from "../atoms";
 import { ALL_ENVIRONMENTS_ATOM } from "../atoms/environment";
 import { BottomNavigationNeighbors } from "../components/BottomNavigationNeighbors";
 import { FernErrorBoundary } from "../components/FernErrorBoundary";
-import { ApiPageContext } from "../contexts/api-page";
 import { DocsContent } from "../resolver/DocsContent";
-import { BuiltWithFern } from "../sidebar/BuiltWithFern";
+import {
+  BuiltWithFern,
+  HideBuiltWithFernContext,
+} from "../sidebar/BuiltWithFern";
 import {
   ApiPackageContent,
   isApiPackageContentNode,
@@ -50,22 +52,22 @@ export default function ApiEndpointPage({
   }
 
   return (
-    <ApiPageContext.Provider value={true}>
+    <>
       <FernErrorBoundary component="ApiEndpointPage">
-        <ApiPackageContent
-          node={node}
-          apiDefinition={content.apiDefinition}
-          breadcrumb={content.breadcrumb}
-          mdxs={EMPTY_OBJECT}
-          showErrors={content.showErrors}
-        />
+        <HideBuiltWithFernContext.Provider value={true}>
+          <ApiPackageContent
+            node={node}
+            apiDefinition={content.apiDefinition}
+            breadcrumb={content.breadcrumb}
+            mdxs={EMPTY_OBJECT}
+            showErrors={content.showErrors}
+          />
+        </HideBuiltWithFernContext.Provider>
       </FernErrorBoundary>
       <div className="px-4 md:px-6 lg:hidden lg:px-8">
         <BottomNavigationNeighbors />
       </div>
-      <div className="mx-auto my-8 w-fit">
-        <BuiltWithFern />
-      </div>
-    </ApiPageContext.Provider>
+      <BuiltWithFern className="mx-auto my-8 w-fit" />
+    </>
   );
 }
diff --git a/packages/fern-docs/ui/src/api-reference/ApiReferencePage.tsx b/packages/fern-docs/ui/src/api-reference/ApiReferencePage.tsx
@@ -4,9 +4,11 @@ import {
   useNavigationNodes,
   useWriteApiDefinitionAtom,
 } from "../atoms";
-import { ApiPageContext } from "../contexts/api-page";
 import { DocsContent } from "../resolver/DocsContent";
-import { BuiltWithFern } from "../sidebar/BuiltWithFern";
+import {
+  BuiltWithFern,
+  HideBuiltWithFernContext,
+} from "../sidebar/BuiltWithFern";
 import { ApiReferenceContent } from "./ApiReferenceContent";
 
 export default function ApiReferencePage({
@@ -28,22 +30,22 @@ export default function ApiReferencePage({
   }
 
   return (
-    <ApiPageContext.Provider value={true}>
-      <ApiReferenceContent
-        apiDefinition={content.apiDefinition}
-        showErrors={node.showErrors ?? false}
-        node={node}
-        breadcrumb={content.breadcrumb}
-        mdxs={content.mdxs}
-        slug={content.slug}
-      />
+    <>
+      <HideBuiltWithFernContext.Provider value={true}>
+        <ApiReferenceContent
+          apiDefinition={content.apiDefinition}
+          showErrors={node.showErrors ?? false}
+          node={node}
+          breadcrumb={content.breadcrumb}
+          mdxs={content.mdxs}
+          slug={content.slug}
+        />
+      </HideBuiltWithFernContext.Provider>
 
       {/* anchor links should get additional padding to scroll to on initial load */}
       {!hydrated && <div className="h-full" />}
       <div className="pb-36" />
-      <div className="mx-auto my-8 w-fit">
-        <BuiltWithFern />
-      </div>
-    </ApiPageContext.Provider>
+      <BuiltWithFern className="mx-auto my-8 w-fit" />
+    </>
   );
 }
diff --git a/packages/fern-docs/ui/src/api-reference/endpoints/Endpoint.tsx b/packages/fern-docs/ui/src/api-reference/endpoints/Endpoint.tsx
@@ -4,6 +4,7 @@ import {
 } from "@fern-api/fdr-sdk/api-definition";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { memo, useMemo } from "react";
+import { WithAside } from "../../contexts/api-page";
 import { EndpointContent } from "./EndpointContent";
 
 export declare namespace Endpoint {
@@ -36,13 +37,15 @@ const UnmemoizedEndpoint: React.FC<Endpoint.Props> = ({
   }
 
   return (
-    <EndpointContent
-      breadcrumb={breadcrumb}
-      showErrors={showErrors}
-      context={context}
-      streamToggle={streamToggle}
-      last={last}
-    />
+    <WithAside.Provider value={true}>
+      <EndpointContent
+        breadcrumb={breadcrumb}
+        showErrors={showErrors}
+        context={context}
+        streamToggle={streamToggle}
+        last={last}
+      />
+    </WithAside.Provider>
   );
 };
 

diff --git a/packages/fern-docs/ui/src/api-reference/web-socket/WebSocket.tsx b/packages/fern-docs/ui/src/api-reference/web-socket/WebSocket.tsx
@@ -16,6 +16,7 @@ import {
 } from "react";
 import { FernAnchor } from "../../components/FernAnchor";
 import { FernBreadcrumbs } from "../../components/FernBreadcrumbs";
+import { WithAside } from "../../contexts/api-page";
 import { useHref } from "../../hooks/useHref";
 import { Markdown } from "../../mdx/Markdown";
 import { PlaygroundButton } from "../../playground/PlaygroundButton";
@@ -49,11 +50,13 @@ export const WebSocket: FC<WebSocketProps> = (props) => {
   }
 
   return (
-    <WebhookContent
-      context={context}
-      breadcrumb={props.breadcrumb}
-      last={props.last}
-    />
+    <WithAside.Provider value={true}>
+      <WebhookContent
+        context={context}
+        breadcrumb={props.breadcrumb}
+        last={props.last}
+      />
+    </WithAside.Provider>
   );
 };
 

diff --git a/packages/fern-docs/ui/src/api-reference/webhooks/Webhook.tsx b/packages/fern-docs/ui/src/api-reference/webhooks/Webhook.tsx
@@ -1,6 +1,7 @@
 import * as ApiDefinition from "@fern-api/fdr-sdk/api-definition";
 import type * as FernNavigation from "@fern-api/fdr-sdk/navigation";
 import { useMemo } from "react";
+import { WithAside } from "../../contexts/api-page";
 import { WebhookContent } from "./WebhookContent";
 import { WebhookContextProvider } from "./webhook-context/WebhookContextProvider";
 
@@ -30,8 +31,10 @@ export const Webhook: React.FC<Webhook.Props> = ({
   }
 
   return (
-    <WebhookContextProvider>
-      <WebhookContent breadcrumb={breadcrumb} context={context} last={last} />
-    </WebhookContextProvider>
+    <WithAside.Provider value={true}>
+      <WebhookContextProvider>
+        <WebhookContent breadcrumb={breadcrumb} context={context} last={last} />
+      </WebhookContextProvider>
+    </WithAside.Provider>
   );
 };
diff --git a/packages/fern-docs/ui/src/atoms/layout.ts b/packages/fern-docs/ui/src/atoms/layout.ts
@@ -5,7 +5,11 @@ import { selectAtom } from "jotai/utils";
 import { ANNOUNCEMENT_HEIGHT_ATOM } from "./announcement";
 import { DOCS_ATOM } from "./docs";
 import { TABS_ATOM } from "./navigation";
-import { MOBILE_SIDEBAR_ENABLED_ATOM, VIEWPORT_HEIGHT_ATOM } from "./viewport";
+import {
+  BREAKPOINT_ATOM,
+  MOBILE_SIDEBAR_ENABLED_ATOM,
+  VIEWPORT_HEIGHT_ATOM,
+} from "./viewport";
 
 export const DOCS_LAYOUT_ATOM = selectAtom(
   DOCS_ATOM,
@@ -153,3 +157,80 @@ export const SEARCHBAR_PLACEMENT_ATOM = atom<DocsV1Read.SearchbarPlacement>(
   }
 );
 SEARCHBAR_PLACEMENT_ATOM.debugLabel = "SEARCHBAR_PLACEMENT_ATOM";
+
+// guides are by default 44rem wide (long-form content)
+export const LAYOUT_CONTENT_GUIDE_WIDTH_ATOM = atom<number>((get) => {
+  const layout = get(DOCS_LAYOUT_ATOM)?.contentWidth;
+  if (layout == null) {
+    return 44 * 16; // 44rem (default)
+  }
+  return layout.type === "px" ? layout.value : layout.value * 16;
+});
+
+export const LAYOUT_SIDEBAR_WIDTH_ATOM = atom<number>((get) => {
+  const layout = get(DOCS_LAYOUT_ATOM)?.sidebarWidth;
+  if (layout == null) {
+    return 18 * 16; // 18rem (default)
+  }
+  return layout.type === "px" ? layout.value : layout.value * 16;
+});
+
+// pages are by default 88rem wide, but if layout.type === "full" then it's 100% of the viewport width and cannot be constrained
+export const LAYOUT_PAGE_WIDTH_ATOM = atom<number | undefined>((get) => {
+  const layout = get(DOCS_LAYOUT_ATOM)?.pageWidth;
+  if (layout == null) {
+    return 88 * 16; // 88rem (default)
+  }
+  return layout.type === "px"
+    ? layout.value
+    : layout.type === "rem"
+      ? layout.value * 16
+      : undefined;
+});
+
+export const LAYOUT_CONTENT_PAGE_WIDTH_ATOM = atom<number | undefined>(
+  (get) => {
+    const pageWidth = get(LAYOUT_PAGE_WIDTH_ATOM);
+    if (pageWidth == null) {
+      return undefined;
+    }
+    return pageWidth - 32 * 2;
+  }
+);
+
+// overview pages are 50% wider than guide pages, but the table of contents is still visible
+export const LAYOUT_CONTENT_OVERVIEW_WIDTH_ATOM = atom<number>((get) => {
+  const contentWidth = get(LAYOUT_CONTENT_GUIDE_WIDTH_ATOM);
+  return (contentWidth * 3) / 2 + 8;
+});
+
+// reference pages fill up the entire page width, minus the sidebar
+export const LAYOUT_CONTENT_REFERENCE_WIDTH_ATOM = atom<number | undefined>(
+  (get) => {
+    const pageWidth = get(LAYOUT_PAGE_WIDTH_ATOM);
+    if (pageWidth == null) {
+      return undefined;
+    }
+    const sidebarWidth = get(LAYOUT_SIDEBAR_WIDTH_ATOM);
+    const margin = 32;
+    return pageWidth - sidebarWidth - margin * 2;
+  }
+);
+
+// api references split into two columns, with a 48px gap between them
+export const LAYOUT_CONTENT_REFERENCE_COLUMN_WIDTH_ATOM = atom<
+  number | undefined
+>((get) => {
+  const breakpoint = get(BREAKPOINT_ATOM);
+
+  // when the viewport is < 768px, the reference page is treated as the same width as the guide page
+  if (breakpoint === "sm" || breakpoint === "mobile") {
+    return get(LAYOUT_CONTENT_GUIDE_WIDTH_ATOM);
+  }
+
+  const contentWidth = get(LAYOUT_CONTENT_REFERENCE_WIDTH_ATOM);
+  if (contentWidth == null) {
+    return undefined;
+  }
+  return contentWidth / 2 - 48; // 48px is the column gap
+});