improvement: move fontawesome to cdn (#422)

fern-api · Feb 1, 2024 · 9bf4502 · 9bf4502
1 parent 80f1895
commit 9bf4502
Show file tree

Hide file tree

Showing 29 changed files with 417 additions and 122 deletions.
diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml
@@ -5,6 +5,7 @@ env:
   ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_INDEX: ${{ secrets. ALGOLIA_SEARCH_INDEX }}
+  FONTAWESOME_CDN_HOST: https://fontawesome-cdn.vercel.app
 on:
   push:
     branches:

diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
@@ -5,6 +5,7 @@ env:
   ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_KEY }}
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_INDEX: ${{ secrets. ALGOLIA_SEARCH_INDEX }}
+  FONTAWESOME_CDN_HOST: https://fontawesome-cdn.vercel.app
 on:
   push:
     branches-ignore:

diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml
@@ -6,6 +6,7 @@ env:
   ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
   ALGOLIA_SEARCH_INDEX: ${{ secrets. ALGOLIA_SEARCH_INDEX }}
   POSTHOG_API_KEY: ${{ secrets.POSTHOG_API_KEY }}
+  FONTAWESOME_CDN_HOST: https://fontawesome-cdn.vercel.app
 on:
   push:
     tags:

diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/cache/@fortawesome-react-fontawesome-npm-0.2.0-a36215138f-f652a0c217.zip b/.yarn/cache/@fortawesome-react-fontawesome-npm-0.2.0-a36215138f-f652a0c217.zip
diff --git a/packages/ui/app/package.json b/packages/ui/app/package.json
@@ -40,14 +40,6 @@
     "@fern-ui/loadable": "workspace:*",
     "@fern-ui/react-commons": "workspace:*",
     "@fontsource/ibm-plex-mono": "^4.5.13",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/pro-duotone-svg-icons": "^6.5.1",
-    "@fortawesome/pro-light-svg-icons": "^6.5.1",
-    "@fortawesome/pro-regular-svg-icons": "^6.5.1",
-    "@fortawesome/pro-solid-svg-icons": "^6.5.1",
-    "@fortawesome/react-fontawesome": "0.2.0",
     "@headlessui/react": "^1.7.18",
     "@react-hook/size": "^2.1.2",
     "@vercel/speed-insights": "^1.0.7",

diff --git a/packages/ui/app/src/api-page/endpoints/CodeExampleClientDropdown.tsx b/packages/ui/app/src/api-page/endpoints/CodeExampleClientDropdown.tsx
@@ -1,4 +1,5 @@
-import { FontAwesomeIcon } from "../../commons/FontAwesomeIcon";
+import classNames from "classnames";
+import { RemoteFontAwesomeIcon } from "../../commons/FontAwesomeIcon";
 import { FernMenu, FernMenuItem } from "../../components/FernMenu";
 import type { CodeExampleClient, CodeExampleClientId } from "../examples//code-example";
 
@@ -31,21 +32,40 @@ export const CodeExampleClientDropdown: React.FC<CodeExampleClientDropdown.Props
         <div className="flex justify-end">
             <FernMenu
                 text={selectedClient.name}
-                icon={<FontAwesomeIcon className="h-4 w-4" icon={getIconForClient(selectedClient.id)} />}
+                icon={
+                    <RemoteFontAwesomeIcon
+                        className="bg-accent-primary dark:bg-accent-primary-dark h-4 w-4"
+                        icon={getIconForClient(selectedClient.id)}
+                    />
+                }
                 align="right"
             >
-                {clients.map(({ id: clientId, name: clientName }) => (
-                    <FernMenuItem
-                        key={clientId}
-                        selected={clientId === selectedClient.id}
-                        onClick={() => onClickClient(clientId)}
-                    >
-                        <FontAwesomeIcon className="h-4 w-4" icon={getIconForClient(clientId)} />
-                        <div className="flex items-center whitespace-nowrap">
-                            <span className="font-mono text-xs font-normal">{clientName}</span>
-                        </div>
-                    </FernMenuItem>
-                ))}
+                {clients.map(({ id: clientId, name: clientName }) => {
+                    const selected = clientId === selectedClient.id;
+                    return (
+                        <FernMenuItem
+                            key={clientId}
+                            selected={clientId === selectedClient.id}
+                            onClick={() => onClickClient(clientId)}
+                        >
+                            {(active) => (
+                                <>
+                                    <RemoteFontAwesomeIcon
+                                        className={classNames("h-4 w-4", {
+                                            "!bg-accent-primary dark:!bg-accent-primary-dark":
+                                                selected || (active && !selected),
+                                            "!bg-text-muted-light dark:!bg-text-muted-dark": !active && !selected,
+                                        })}
+                                        icon={getIconForClient(clientId)}
+                                    />
+                                    <div className="flex items-center whitespace-nowrap">
+                                        <span className="font-mono text-xs font-normal">{clientName}</span>
+                                    </div>
+                                </>
+                            )}
+                        </FernMenuItem>
+                    );
+                })}
             </FernMenu>
         </div>
     );