Revert "fix: rewrite fontawesome CDN" (#932)

fern-api · May 28, 2024 · 946e9f7 · 946e9f7
1 parent c53d2a4
commit 946e9f7
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 140 deletions.
diff --git a/packages/ui/app/src/next-app/NextApp.tsx b/packages/ui/app/src/next-app/NextApp.tsx
@@ -1,19 +1,12 @@
-import {
-    DEFAULT_FERN_COMPONENTS_CONTEXT_VALUE,
-    FernComponentsContextProvider,
-    FernTooltipProvider,
-    Toaster,
-} from "@fern-ui/components";
+import { 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, useMemo } from "react";
-import urljoin from "url-join";
+import { ReactElement, useEffect } from "react";
 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";
@@ -37,42 +30,25 @@ 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 (
-        <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>
+        <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>
     );
 }
 

diff --git a/packages/ui/components/package.json b/packages/ui/components/package.json
@@ -56,8 +56,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "sonner": "^1.4.41",
-    "url-join": "4.0.1"
+    "sonner": "^1.4.41"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
@@ -76,7 +75,6 @@
     "@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
diff --git a/packages/ui/components/src/FontAwesomeIcon.tsx b/packages/ui/components/src/FontAwesomeIcon.tsx
@@ -1,7 +1,6 @@
 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.
@@ -14,17 +13,16 @@ 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, fontAwesomeBaseUrl)}")`,
+                        maskImage: `url("${getIconUrl(icon)}")`,
                         maskRepeat: "no-repeat",
                         maskPosition: "center center",
-                        WebkitMaskImage: `url("${getIconUrl(icon, fontAwesomeBaseUrl)}")`,
+                        WebkitMaskImage: `url("${getIconUrl(icon)}")`,
                         WebkitMaskRepeat: "no-repeat",
                         WebkitMaskPosition: "center center",
                         backgroundColor: lightModeColor ?? color,
@@ -38,7 +36,7 @@ export const RemoteFontAwesomeIcon = forwardRef<HTMLSpanElement, RemoteFontAweso
     },
 );
 
-function getIconUrl(icon: string | undefined, baseUrl: string): string {
+function getIconUrl(icon: string | undefined): string {
     if (icon == null) {
         return "";
     }
@@ -52,7 +50,15 @@ function getIconUrl(icon: string | undefined, baseUrl: string): string {
         return "";
     }
     const [style, iconName] = parsed;
-    return urljoin(baseUrl, `/${style}/${iconName}.svg`);
+    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;
 }
 
 function parseFontAwesomeIcon(icon: string): [string, string] | undefined {

diff --git a/packages/ui/components/src/index.ts b/packages/ui/components/src/index.ts
@@ -5,7 +5,6 @@ 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,8 +34,6 @@ 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
@@ -129,14 +127,6 @@ 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",
 });