fix: rewrite fontawesome CDN (#923)

fern-api · May 25, 2024 · 5bf0fc7 · 5bf0fc7
1 parent 0a719c4
commit 5bf0fc7
Show file tree

Hide file tree

Showing 7 changed files with 140 additions and 129 deletions.
diff --git a/packages/ui/app/src/next-app/NextApp.tsx b/packages/ui/app/src/next-app/NextApp.tsx
@@ -1,12 +1,19 @@
-import { FernTooltipProvider, Toaster } from "@fern-ui/components";
+import {
+    DEFAULT_FERN_COMPONENTS_CONTEXT_VALUE,
+    FernComponentsContextProvider,
+    FernTooltipProvider,
+    Toaster,
+} from "@fern-ui/components";
 import { Provider as JotaiProvider, createStore } from "jotai";
 import type { AppProps } from "next/app";
 import PageLoader from "next/dist/client/page-loader";
 import { Router } from "next/router";
-import { ReactElement, useEffect } from "react";
+import { ReactElement, useEffect, useMemo } from "react";
+import urljoin from "url-join";
 import DatadogInit from "../analytics/datadog";
 import { initializePosthog } from "../analytics/posthog";
 import { FernErrorBoundary } from "../components/FernErrorBoundary";
+import { useLocalPreviewContext } from "../contexts/LocalPreviewContext";
 import { LayoutBreakpointProvider } from "../contexts/layout-breakpoint/LayoutBreakpointProvider";
 import { IsReadyProvider } from "../contexts/useIsReady";
 import { RouteListenerContextProvider } from "../contexts/useRouteListener";
@@ -30,25 +37,42 @@ export function NextApp({ Component, pageProps, router }: AppProps<DocsPage.Prop
         host: pageProps?.baseUrl?.domain,
     });
 
+    const { isLocalPreview } = useLocalPreviewContext();
+
+    const basePath = pageProps?.baseUrl.basePath ?? "/";
+    const fernComponentsContextValue = useMemo(() => {
+        if (isLocalPreview) {
+            return DEFAULT_FERN_COMPONENTS_CONTEXT_VALUE;
+        }
+        return {
+            fontAwesomeBaseUrl: urljoin(basePath, "/api/fern-docs/fontawesome"),
+        };
+    }, [isLocalPreview, basePath]);
+
     return (
-        <FernTooltipProvider>
-            <FernErrorBoundary className="flex h-screen items-center justify-center" refreshOnError>
-                <ThemeProvider colors={pageProps?.colors}>
-                    <IsReadyProvider>
-                        <RouteListenerContextProvider>
-                            <DatadogInit />
-                            <JotaiProvider store={store}>
-                                <LayoutBreakpointProvider>
-                                    <NextNProgress options={{ showSpinner: false, speed: 400 }} showOnShallow={false} />
-                                    <Component {...pageProps} />
-                                </LayoutBreakpointProvider>
-                            </JotaiProvider>
-                        </RouteListenerContextProvider>
-                    </IsReadyProvider>
-                    <Toaster />
-                </ThemeProvider>
-            </FernErrorBoundary>
-        </FernTooltipProvider>
+        <FernComponentsContextProvider value={fernComponentsContextValue}>
+            <FernTooltipProvider>
+                <FernErrorBoundary className="flex h-screen items-center justify-center" refreshOnError>
+                    <ThemeProvider colors={pageProps?.colors}>
+                        <IsReadyProvider>
+                            <RouteListenerContextProvider>
+                                <DatadogInit />
+                                <JotaiProvider store={store}>
+                                    <LayoutBreakpointProvider>
+                                        <NextNProgress
+                                            options={{ showSpinner: false, speed: 400 }}
+                                            showOnShallow={false}
+                                        />
+                                        <Component {...pageProps} />
+                                    </LayoutBreakpointProvider>
+                                </JotaiProvider>
+                            </RouteListenerContextProvider>
+                        </IsReadyProvider>
+                        <Toaster />
+                    </ThemeProvider>
+                </FernErrorBoundary>
+            </FernTooltipProvider>
+        </FernComponentsContextProvider>
     );
 }
 

diff --git a/packages/ui/components/package.json b/packages/ui/components/package.json
@@ -56,7 +56,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "sonner": "^1.4.41"
+    "sonner": "^1.4.41",
+    "url-join": "4.0.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
@@ -75,6 +76,7 @@
     "@types/node": "^18.7.18",
     "@types/react": "^18.0.20",
     "@types/react-dom": "^18.2.18",
+    "@types/url-join": "4.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
     "chromatic": "^11.3.0",

diff --git a/packages/ui/components/src/FernComponentsContext.ts b/packages/ui/components/src/FernComponentsContext.ts
@@ -0,0 +1,15 @@
+import { createContext, useContext } from "react";
+
+interface FernComponentsContextValue {
+    fontAwesomeBaseUrl: string;
+}
+
+export const DEFAULT_FERN_COMPONENTS_CONTEXT_VALUE: FernComponentsContextValue = {
+    fontAwesomeBaseUrl: "https://fontawesome-cdn.vercel.app",
+};
+
+const FernComponentsContext = createContext<FernComponentsContextValue>(DEFAULT_FERN_COMPONENTS_CONTEXT_VALUE);
+
+export const useFernComponentsContext = (): FernComponentsContextValue => useContext(FernComponentsContext);
+
+export const FernComponentsContextProvider = FernComponentsContext.Provider;
diff --git a/packages/ui/components/src/FontAwesomeIcon.tsx b/packages/ui/components/src/FontAwesomeIcon.tsx
@@ -1,6 +1,7 @@
 import cn from "clsx";
 import { forwardRef } from "react";
-
+import urljoin from "url-join";
+import { useFernComponentsContext } from "./FernComponentsContext";
 export declare namespace RemoteFontAwesomeIcon {
     export interface Props {
         className?: string; // you must specify the bg-color rather than text-color because this is a mask.
@@ -13,16 +14,17 @@ export declare namespace RemoteFontAwesomeIcon {
 }
 export const RemoteFontAwesomeIcon = forwardRef<HTMLSpanElement, RemoteFontAwesomeIcon.Props>(
     function RemoteFontAwesomeIcon({ className, icon, color, darkModeColor, lightModeColor, size }, ref) {
+        const { fontAwesomeBaseUrl } = useFernComponentsContext();
         return (
             <span
                 ref={ref}
                 className={cn(className, "fa-icon")}
                 style={
                     {
-                        maskImage: `url("${getIconUrl(icon)}")`,
+                        maskImage: `url("${getIconUrl(icon, fontAwesomeBaseUrl)}")`,
                         maskRepeat: "no-repeat",
                         maskPosition: "center center",
-                        WebkitMaskImage: `url("${getIconUrl(icon)}")`,
+                        WebkitMaskImage: `url("${getIconUrl(icon, fontAwesomeBaseUrl)}")`,
                         WebkitMaskRepeat: "no-repeat",
                         WebkitMaskPosition: "center center",
                         backgroundColor: lightModeColor ?? color,
@@ -36,7 +38,7 @@ export const RemoteFontAwesomeIcon = forwardRef<HTMLSpanElement, RemoteFontAweso
     },
 );
 
-function getIconUrl(icon: string | undefined): string {
+function getIconUrl(icon: string | undefined, baseUrl: string): string {
     if (icon == null) {
         return "";
     }
@@ -50,15 +52,7 @@ function getIconUrl(icon: string | undefined): string {
         return "";
     }
     const [style, iconName] = parsed;
-    return `${getCdnHost()}/${style}/${iconName}.svg`;
-}
-
-function getCdnHost() {
-    const CDN_HOST = process.env.NEXT_PUBLIC_FONTAWESOME_CDN_HOST;
-    if (CDN_HOST == null) {
-        return "https://fontawesome-cdn.vercel.app";
-    }
-    return CDN_HOST;
+    return urljoin(baseUrl, `/${style}/${iconName}.svg`);
 }
 
 function parseFontAwesomeIcon(icon: string): [string, string] | undefined {

diff --git a/packages/ui/components/src/index.ts b/packages/ui/components/src/index.ts
@@ -5,6 +5,7 @@ export * from "./FernCard";
 export * from "./FernCheckbox";
 export * from "./FernChip";
 export * from "./FernCollapse";
+export * from "./FernComponentsContext";
 export * from "./FernDropdown";
 export * from "./FernInput";
 export * from "./FernModal";

diff --git a/packages/ui/docs-bundle/next.config.js b/packages/ui/docs-bundle/next.config.js
@@ -34,6 +34,8 @@ const nextConfig = {
         const PATH_STAR = "/:path*";
         return {
             beforeFiles: [
+                { source: "/api/fern-docs/fontawesome/:path*", destination: `${getCdnHost()}/:path*` },
+                { source: "/:prefix*/api/fern-docs/fontawesome/:path*", destination: `${getCdnHost()}/:path*` },
                 /**
                  * while /_next/static routes are handled by the assetPrefix config, we need to handle the /_next/data routes separately
                  * when the user is hovering over a link, Next.js will prefetch the data route using `/_next/data` routes. We intercept
@@ -127,6 +129,14 @@ const nextConfig = {
     },
 };
 
+function getCdnHost() {
+    const CDN_HOST = process.env.NEXT_PUBLIC_FONTAWESOME_CDN_HOST;
+    if (CDN_HOST == null) {
+        return "https://fontawesome-cdn.vercel.app";
+    }
+    return CDN_HOST;
+}
+
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
     enabled: process.env.ANALYZE === "true",
 });