From 9bf4502ffe29adee3aadd382395d3bcb3df7f927 Mon Sep 17 00:00:00 2001 From: Andrew Jiang Date: Wed, 31 Jan 2024 20:48:49 -0500 Subject: [PATCH] improvement: move fontawesome to cdn (#422) --- .github/workflows/development.yml | 1 + .github/workflows/preview.yml | 1 + .github/workflows/production.yml | 1 + .pnp.cjs | 112 ++++++++++++------ ...wesome-npm-0.2.0-a36215138f-f652a0c217.zip | Bin 13805 -> 0 bytes packages/ui/app/package.json | 8 -- .../endpoints/CodeExampleClientDropdown.tsx | 48 +++++--- .../api-playground/ApiPlaygroundContent.tsx | 14 +-- .../ui/app/src/commons/FontAwesomeIcon.tsx | 55 +++++++-- packages/ui/app/src/components/FernMenu.tsx | 4 +- packages/ui/app/src/mdx/components/Card.tsx | 4 +- packages/ui/app/src/next-app/NextApp.tsx | 4 - .../ui/app/src/sidebar/SidebarTabButton.tsx | 10 +- .../ui/app/src/util/setupFontAwesomeIcons.ts | 14 --- packages/ui/fontawesome-cdn/.depcheckrc.json | 1 + packages/ui/fontawesome-cdn/.env-cmdrc.cjs | 1 + packages/ui/fontawesome-cdn/.mrlint.json | 9 ++ packages/ui/fontawesome-cdn/.prettierrc.cjs | 1 + packages/ui/fontawesome-cdn/.stylelintrc.json | 1 + packages/ui/fontawesome-cdn/jest.config.ts | 1 + packages/ui/fontawesome-cdn/next.config.js | 5 + packages/ui/fontawesome-cdn/package.json | 59 +++++++++ .../ui/fontawesome-cdn/src/declarations.d.ts | 37 ++++++ packages/ui/fontawesome-cdn/src/index.ts | 1 + .../src/pages/[style]/[icon].ts | 75 ++++++++++++ packages/ui/fontawesome-cdn/tsconfig.json | 15 +++ packages/ui/public-docs-bundle/.env-cmdrc.cjs | 6 +- packages/ui/public-docs-bundle/.mrlint.json | 3 +- yarn.lock | 48 ++++---- 29 files changed, 417 insertions(+), 122 deletions(-) delete mode 100644 .yarn/cache/@fortawesome-react-fontawesome-npm-0.2.0-a36215138f-f652a0c217.zip delete mode 100644 packages/ui/app/src/util/setupFontAwesomeIcons.ts create mode 100644 packages/ui/fontawesome-cdn/.depcheckrc.json create mode 100644 packages/ui/fontawesome-cdn/.env-cmdrc.cjs create mode 100644 packages/ui/fontawesome-cdn/.mrlint.json create mode 100644 packages/ui/fontawesome-cdn/.prettierrc.cjs create mode 100644 packages/ui/fontawesome-cdn/.stylelintrc.json create mode 100644 packages/ui/fontawesome-cdn/jest.config.ts create mode 100644 packages/ui/fontawesome-cdn/next.config.js create mode 100644 packages/ui/fontawesome-cdn/package.json create mode 100644 packages/ui/fontawesome-cdn/src/declarations.d.ts create mode 100644 packages/ui/fontawesome-cdn/src/index.ts create mode 100644 packages/ui/fontawesome-cdn/src/pages/[style]/[icon].ts create mode 100644 packages/ui/fontawesome-cdn/tsconfig.json diff --git a/.github/workflows/development.yml b/.github/workflows/development.yml index 65e0c17d2e..78a5eb0362 100644 --- 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 index 5618479c8c..a04c0eece7 100644 --- 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 index 96653d5e68..5a711b65b1 100644 --- 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 index b631382008..e5ef126934 100644 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -67,6 +67,10 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "name": "@fern-ui/ui",\ "reference": "workspace:packages/ui/app"\ },\ + {\ + "name": "@fern-ui/fontawesome-cdn",\ + "reference": "workspace:packages/ui/fontawesome-cdn"\ + },\ {\ "name": "@fern-ui/local-preview-bundle",\ "reference": "workspace:packages/ui/local-preview-bundle"\ @@ -88,6 +92,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@fern-ui/common-components", ["workspace:packages/commons/react/common-components"]],\ ["@fern-ui/compile-root", ["workspace:packages/_root"]],\ ["@fern-ui/core-utils", ["workspace:packages/commons/core-utils"]],\ + ["@fern-ui/fontawesome-cdn", ["workspace:packages/ui/fontawesome-cdn"]],\ ["@fern-ui/fonts", ["workspace:packages/commons/react/fonts"]],\ ["@fern-ui/loadable", ["workspace:packages/commons/loadable"]],\ ["@fern-ui/local-preview-bundle", ["workspace:packages/ui/local-preview-bundle"]],\ @@ -4382,6 +4387,36 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "SOFT"\ }]\ ]],\ + ["@fern-ui/fontawesome-cdn", [\ + ["workspace:packages/ui/fontawesome-cdn", {\ + "packageLocation": "./packages/ui/fontawesome-cdn/",\ + "packageDependencies": [\ + ["@fern-ui/fontawesome-cdn", "workspace:packages/ui/fontawesome-cdn"],\ + ["@fortawesome/fontawesome-svg-core", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-svg-core%2F-%2F6.5.1%2Ffontawesome-svg-core-6.5.1.tgz"],\ + ["@fortawesome/free-brands-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffree-brands-svg-icons%2F-%2F6.5.1%2Ffree-brands-svg-icons-6.5.1.tgz"],\ + ["@fortawesome/free-solid-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffree-solid-svg-icons%2F-%2F6.5.1%2Ffree-solid-svg-icons-6.5.1.tgz"],\ + ["@fortawesome/pro-duotone-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-duotone-svg-icons%2F-%2F6.5.1%2Fpro-duotone-svg-icons-6.5.1.tgz"],\ + ["@fortawesome/pro-light-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-light-svg-icons%2F-%2F6.5.1%2Fpro-light-svg-icons-6.5.1.tgz"],\ + ["@fortawesome/pro-regular-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-regular-svg-icons%2F-%2F6.5.1%2Fpro-regular-svg-icons-6.5.1.tgz"],\ + ["@fortawesome/pro-solid-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-solid-svg-icons%2F-%2F6.5.1%2Fpro-solid-svg-icons-6.5.1.tgz"],\ + ["@next/bundle-analyzer", "npm:14.0.3"],\ + ["@types/jest", "npm:29.5.11"],\ + ["@types/node", "npm:18.18.13"],\ + ["@types/react", "npm:18.0.20"],\ + ["depcheck", "npm:1.4.3"],\ + ["eslint", "npm:8.56.0"],\ + ["jest", "virtual:81cc2531fc6bda045c87d6c3b21351574209a7d87ba11b639412d754d2fbdd0831d00d35ee7d39be3226e871d899842f300a82fbfbdd17e263ce302a51c65de6#npm:29.7.0"],\ + ["next", "virtual:cf6fbd07d81e6c070e1d18b6ec0fb7336cfec041fcde20c98947f8564f9b6fb68d67e538b00e8fa6087067487182a29316882652bf651e41897aa30e5a9283e1#npm:14.0.4"],\ + ["organize-imports-cli", "npm:0.10.0"],\ + ["prettier", "npm:3.2.4"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:365c5e55d4374302d83e985bf13cdc0e1b9981623dceff55d2afbcfc02ee37332be44cf95e9c81193f89ad56d1cfe060a8b59dd16c83a03bcf51abe82d13ecf2#npm:18.2.0"],\ + ["stylelint", "npm:16.1.0"],\ + ["typescript", "patch:typescript@npm%3A4.9.4#~builtin::version=4.9.4&hash=289587"]\ + ],\ + "linkType": "SOFT"\ + }]\ + ]],\ ["@fern-ui/fonts", [\ ["workspace:packages/commons/react/fonts", {\ "packageLocation": "./packages/commons/react/fonts/",\ @@ -4654,14 +4689,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { ["@fern-ui/loadable", "workspace:packages/commons/loadable"],\ ["@fern-ui/react-commons", "workspace:packages/commons/react/react-commons"],\ ["@fontsource/ibm-plex-mono", "npm:4.5.13"],\ - ["@fortawesome/fontawesome-svg-core", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-svg-core%2F-%2F6.5.1%2Ffontawesome-svg-core-6.5.1.tgz"],\ - ["@fortawesome/free-brands-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffree-brands-svg-icons%2F-%2F6.5.1%2Ffree-brands-svg-icons-6.5.1.tgz"],\ - ["@fortawesome/free-solid-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffree-solid-svg-icons%2F-%2F6.5.1%2Ffree-solid-svg-icons-6.5.1.tgz"],\ - ["@fortawesome/pro-duotone-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-duotone-svg-icons%2F-%2F6.5.1%2Fpro-duotone-svg-icons-6.5.1.tgz"],\ - ["@fortawesome/pro-light-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-light-svg-icons%2F-%2F6.5.1%2Fpro-light-svg-icons-6.5.1.tgz"],\ - ["@fortawesome/pro-regular-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-regular-svg-icons%2F-%2F6.5.1%2Fpro-regular-svg-icons-6.5.1.tgz"],\ - ["@fortawesome/pro-solid-svg-icons", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Fpro-solid-svg-icons%2F-%2F6.5.1%2Fpro-solid-svg-icons-6.5.1.tgz"],\ - ["@fortawesome/react-fontawesome", "virtual:78e90867e46510db2994cf6ed805ab4ba701c55b6d7a2c33f6cc04865dc082c172bef019989477dda8bc6824512d13cb3bcb74ef12bd113a2f6bdcd291ad70f1#npm:0.2.0"],\ ["@headlessui/react", "virtual:78e90867e46510db2994cf6ed805ab4ba701c55b6d7a2c33f6cc04865dc082c172bef019989477dda8bc6824512d13cb3bcb74ef12bd113a2f6bdcd291ad70f1#npm:1.7.18"],\ ["@react-hook/size", "virtual:78e90867e46510db2994cf6ed805ab4ba701c55b6d7a2c33f6cc04865dc082c172bef019989477dda8bc6824512d13cb3bcb74ef12bd113a2f6bdcd291ad70f1#npm:2.1.2"],\ ["@testing-library/react", "virtual:78e90867e46510db2994cf6ed805ab4ba701c55b6d7a2c33f6cc04865dc082c172bef019989477dda8bc6824512d13cb3bcb74ef12bd113a2f6bdcd291ad70f1#npm:14.0.0"],\ @@ -4798,33 +4825,6 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "linkType": "HARD"\ }]\ ]],\ - ["@fortawesome/react-fontawesome", [\ - ["npm:0.2.0", {\ - "packageLocation": "./.yarn/cache/@fortawesome-react-fontawesome-npm-0.2.0-a36215138f-f652a0c217.zip/node_modules/@fortawesome/react-fontawesome/",\ - "packageDependencies": [\ - ["@fortawesome/react-fontawesome", "npm:0.2.0"]\ - ],\ - "linkType": "SOFT"\ - }],\ - ["virtual:78e90867e46510db2994cf6ed805ab4ba701c55b6d7a2c33f6cc04865dc082c172bef019989477dda8bc6824512d13cb3bcb74ef12bd113a2f6bdcd291ad70f1#npm:0.2.0", {\ - "packageLocation": "./.yarn/__virtual__/@fortawesome-react-fontawesome-virtual-4761f86e1d/0/cache/@fortawesome-react-fontawesome-npm-0.2.0-a36215138f-f652a0c217.zip/node_modules/@fortawesome/react-fontawesome/",\ - "packageDependencies": [\ - ["@fortawesome/react-fontawesome", "virtual:78e90867e46510db2994cf6ed805ab4ba701c55b6d7a2c33f6cc04865dc082c172bef019989477dda8bc6824512d13cb3bcb74ef12bd113a2f6bdcd291ad70f1#npm:0.2.0"],\ - ["@fortawesome/fontawesome-svg-core", "npm:6.5.1::__archiveUrl=https%3A%2F%2Fnpm.fontawesome.com%2F%40fortawesome%2Ffontawesome-svg-core%2F-%2F6.5.1%2Ffontawesome-svg-core-6.5.1.tgz"],\ - ["@types/fortawesome__fontawesome-svg-core", null],\ - ["@types/react", "npm:18.0.20"],\ - ["prop-types", "npm:15.8.1"],\ - ["react", "npm:18.2.0"]\ - ],\ - "packagePeers": [\ - "@fortawesome/fontawesome-svg-core",\ - "@types/fortawesome__fontawesome-svg-core",\ - "@types/react",\ - "react"\ - ],\ - "linkType": "HARD"\ - }]\ - ]],\ ["@gar/promisify", [\ ["npm:1.1.3", {\ "packageLocation": "./.yarn/cache/@gar-promisify-npm-1.1.3-ac1a325862-4059f790e2.zip/node_modules/@gar/promisify/",\ @@ -15766,6 +15766,48 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) { "sass"\ ],\ "linkType": "HARD"\ + }],\ + ["virtual:cf6fbd07d81e6c070e1d18b6ec0fb7336cfec041fcde20c98947f8564f9b6fb68d67e538b00e8fa6087067487182a29316882652bf651e41897aa30e5a9283e1#npm:14.0.4", {\ + "packageLocation": "./.yarn/__virtual__/next-virtual-050a8862cf/0/cache/next-npm-14.0.4-93c7e4ca0b-879842979d.zip/node_modules/next/",\ + "packageDependencies": [\ + ["next", "virtual:cf6fbd07d81e6c070e1d18b6ec0fb7336cfec041fcde20c98947f8564f9b6fb68d67e538b00e8fa6087067487182a29316882652bf651e41897aa30e5a9283e1#npm:14.0.4"],\ + ["@next/env", "npm:14.0.4"],\ + ["@next/swc-darwin-arm64", "npm:14.0.4"],\ + ["@next/swc-darwin-x64", "npm:14.0.4"],\ + ["@next/swc-linux-arm64-gnu", "npm:14.0.4"],\ + ["@next/swc-linux-arm64-musl", "npm:14.0.4"],\ + ["@next/swc-linux-x64-gnu", "npm:14.0.4"],\ + ["@next/swc-linux-x64-musl", "npm:14.0.4"],\ + ["@next/swc-win32-arm64-msvc", "npm:14.0.4"],\ + ["@next/swc-win32-ia32-msvc", "npm:14.0.4"],\ + ["@next/swc-win32-x64-msvc", "npm:14.0.4"],\ + ["@opentelemetry/api", null],\ + ["@swc/helpers", "npm:0.5.2"],\ + ["@types/opentelemetry__api", null],\ + ["@types/react", "npm:18.0.20"],\ + ["@types/react-dom", null],\ + ["@types/sass", null],\ + ["busboy", "npm:1.6.0"],\ + ["caniuse-lite", "npm:1.0.30001576"],\ + ["graceful-fs", "npm:4.2.11"],\ + ["postcss", "npm:8.4.31"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:365c5e55d4374302d83e985bf13cdc0e1b9981623dceff55d2afbcfc02ee37332be44cf95e9c81193f89ad56d1cfe060a8b59dd16c83a03bcf51abe82d13ecf2#npm:18.2.0"],\ + ["sass", null],\ + ["styled-jsx", "virtual:1fb4793cda658baa2784e33af35bd4eb8b51de4759933685f057e3640bfdc682d7fa82fa1edb5a01c899681a1d18776cc50dfb9cadcf037888f9270bc612a8bf#npm:5.1.1"],\ + ["watchpack", "npm:2.4.0"]\ + ],\ + "packagePeers": [\ + "@opentelemetry/api",\ + "@types/opentelemetry__api",\ + "@types/react-dom",\ + "@types/react",\ + "@types/sass",\ + "react-dom",\ + "react",\ + "sass"\ + ],\ + "linkType": "HARD"\ }]\ ]],\ ["next-mdx-remote", [\ 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 deleted file mode 100644 index 068f66c7f3f2d4ac1d18a6e94e346af00c82455a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 13805 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 z } + icon={ + + } align="right" > - {clients.map(({ id: clientId, name: clientName }) => ( - onClickClient(clientId)} - > - -
- {clientName} -
- - ))} + {clients.map(({ id: clientId, name: clientName }) => { + const selected = clientId === selectedClient.id; + return ( + onClickClient(clientId)} + > + {(active) => ( + <> + +
+ {clientName} +
+ + )} + + ); + })} ); diff --git a/packages/ui/app/src/api-playground/ApiPlaygroundContent.tsx b/packages/ui/app/src/api-playground/ApiPlaygroundContent.tsx index d0b17b7bca..8629e3ad7c 100644 --- a/packages/ui/app/src/api-playground/ApiPlaygroundContent.tsx +++ b/packages/ui/app/src/api-playground/ApiPlaygroundContent.tsx @@ -2,13 +2,13 @@ import { NonIdealState, Spinner } from "@blueprintjs/core"; import { APIV1Read, joinUrlSlugs } from "@fern-api/fdr-sdk"; import { ResolvedEndpointDefinition } from "@fern-ui/app-utils"; import { failed, Loadable, loaded, loading, notStartedLoading, visitLoadable } from "@fern-ui/loadable"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import classNames from "classnames"; import { useAtom } from "jotai"; import { atomWithStorage } from "jotai/utils"; import { isEmpty, round } from "lodash-es"; import { Dispatch, FC, SetStateAction, useCallback, useState } from "react"; import { capturePosthogEvent } from "../analytics/posthog"; +import { RemoteFontAwesomeIcon } from "../commons/FontAwesomeIcon"; import { PlaygroundEndpointForm } from "./PlaygroundEndpointForm"; import { PlaygroundRequestPreview } from "./PlaygroundRequestPreview"; import { PlaygroundResponsePreview } from "./PlaygroundResponsePreview"; @@ -219,14 +219,14 @@ export const ApiPlayroundContent: FC = ({ {response.type !== "notStartedLoading" && endpoint != null && (
@@ -278,14 +278,14 @@ export const ApiPlayroundContent: FC = ({ icon={ response.type === "notStartedLoading" ? ( diff --git a/packages/ui/app/src/commons/FontAwesomeIcon.tsx b/packages/ui/app/src/commons/FontAwesomeIcon.tsx index 7aaaf43d22..08d2171836 100644 --- a/packages/ui/app/src/commons/FontAwesomeIcon.tsx +++ b/packages/ui/app/src/commons/FontAwesomeIcon.tsx @@ -1,13 +1,52 @@ -import { IconProp } from "@fortawesome/fontawesome-svg-core"; -import { FontAwesomeIcon as _FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - -export declare namespace FontAwesomeIcon { +export declare namespace RemoteFontAwesomeIcon { export interface Props { - className?: string; + className?: string; // you must specify the bg-color rather than text-color because this is a mask. icon?: string; } } - -export const FontAwesomeIcon: React.FC = ({ className, icon }) => { - return <_FontAwesomeIcon className={className} icon={icon as IconProp} />; +export const RemoteFontAwesomeIcon: React.FC = ({ className, icon }) => { + return ( + + ); }; + +function getIconUrl(icon: string | undefined): string { + const parsed = parseFontAwesomeIcon(icon); + if (!parsed) { + 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) { + throw new Error("NEXT_PUBLIC_FONTAWESOME_CDN_HOST is not set"); + } + return CDN_HOST; +} + +function parseFontAwesomeIcon(icon: string | undefined): [string, string] | undefined { + if (!icon) { + return; + } + const [left, right] = icon.split(" "); + if (left && right) { + return [left.replace("fa-", ""), right.replace("fa-", "")]; + } + if (left) { + return ["solid", left.replace("fa-", "")]; + } + return; +} diff --git a/packages/ui/app/src/components/FernMenu.tsx b/packages/ui/app/src/components/FernMenu.tsx index 83af73ba0e..8eafe9cc6e 100644 --- a/packages/ui/app/src/components/FernMenu.tsx +++ b/packages/ui/app/src/components/FernMenu.tsx @@ -1,8 +1,8 @@ -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { Menu as HeadlessMenu, Transition } from "@headlessui/react"; import classNames from "classnames"; import Link, { LinkProps } from "next/link"; import { FC, Fragment, PropsWithChildren, ReactNode } from "react"; +import { RemoteFontAwesomeIcon } from "../commons/FontAwesomeIcon"; import { CheckIcon } from "../commons/icons/CheckIcon"; import { ChevronDownIcon } from "../commons/icons/ChevronDownIcon"; @@ -59,7 +59,7 @@ export const FernMenu: FC = ({ className="hover:bg-tag-primary border-border-primary dark:border-border-primary-dark text-accent-primary dark:text-accent-primary-dark -ml-px inline-flex w-fit items-center justify-center rounded-lg rounded-l-none border px-2 py-1 tracking-tight transition hover:border-2 hover:px-[calc(theme(spacing[2])-1px)]" onClick={clearSelection} > - + )}
diff --git a/packages/ui/app/src/mdx/components/Card.tsx b/packages/ui/app/src/mdx/components/Card.tsx index b4f334f44e..9c241c27e0 100644 --- a/packages/ui/app/src/mdx/components/Card.tsx +++ b/packages/ui/app/src/mdx/components/Card.tsx @@ -1,6 +1,6 @@ import classNames from "classnames"; import Link from "next/link"; -import { FontAwesomeIcon } from "../../commons/FontAwesomeIcon"; +import { RemoteFontAwesomeIcon } from "../../commons/FontAwesomeIcon"; export declare namespace Card { export interface Props { @@ -30,7 +30,7 @@ export const Card: React.FC = ({ title, icon, iconPosition = "top", const content = ( <> - +
{title}
{children != null &&
{children}
} diff --git a/packages/ui/app/src/next-app/NextApp.tsx b/packages/ui/app/src/next-app/NextApp.tsx index 0af05c7236..62c07a6b2b 100644 --- a/packages/ui/app/src/next-app/NextApp.tsx +++ b/packages/ui/app/src/next-app/NextApp.tsx @@ -1,16 +1,12 @@ -import "@fortawesome/fontawesome-svg-core/styles.css"; import { SpeedInsights } from "@vercel/speed-insights/next"; 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 { ThemeProvider } from "../docs/ThemeProvider"; -import { setupFontAwesomeIcons } from "../util/setupFontAwesomeIcons"; import { DocsPage } from "./DocsPage"; import "./globals.css"; -setupFontAwesomeIcons(); - export function NextApp({ Component, pageProps, router }: AppProps>): ReactElement { const theme = pageProps.config?.colorsV3?.type; useInterceptNextDataHref({ diff --git a/packages/ui/app/src/sidebar/SidebarTabButton.tsx b/packages/ui/app/src/sidebar/SidebarTabButton.tsx index 5e6d8f8867..6e9a881851 100644 --- a/packages/ui/app/src/sidebar/SidebarTabButton.tsx +++ b/packages/ui/app/src/sidebar/SidebarTabButton.tsx @@ -2,7 +2,7 @@ import { DocsV1Read } from "@fern-api/fdr-sdk"; import classNames from "classnames"; import Link from "next/link"; import { memo } from "react"; -import { FontAwesomeIcon } from "../commons/FontAwesomeIcon"; +import { RemoteFontAwesomeIcon } from "../commons/FontAwesomeIcon"; export declare namespace SidebarTabButton { export interface Props { @@ -38,12 +38,12 @@ const UnmemoizedSidebarTabButton: React.FC = ({ tab, sel }, )} > - >; + +declare module "*.module.scss" { + const classes: CSSModuleClasses; + export default classes; +} + +// CSS +declare module "*.css" {} +declare module "*.scss" {} + +// images +declare module "*.png" { + const src: string; + export default { src }; +} +declare module "*.jpg" { + const src: string; + export default { src }; +} +declare module "*.jpeg" { + const src: string; + export default { src }; +} +declare module "*.gif" { + const src: string; + export default { src }; +} +declare module "*.svg" { + const src: string; + export default { src }; +} +declare module "*.ico" { + const src: string; + export default { src }; +} diff --git a/packages/ui/fontawesome-cdn/src/index.ts b/packages/ui/fontawesome-cdn/src/index.ts new file mode 100644 index 0000000000..cb0ff5c3b5 --- /dev/null +++ b/packages/ui/fontawesome-cdn/src/index.ts @@ -0,0 +1 @@ +export {}; diff --git a/packages/ui/fontawesome-cdn/src/pages/[style]/[icon].ts b/packages/ui/fontawesome-cdn/src/pages/[style]/[icon].ts new file mode 100644 index 0000000000..865d0b61ea --- /dev/null +++ b/packages/ui/fontawesome-cdn/src/pages/[style]/[icon].ts @@ -0,0 +1,75 @@ +import { AbstractElement, icon, IconPrefix, library } from "@fortawesome/fontawesome-svg-core"; +import { fab, IconName } from "@fortawesome/free-brands-svg-icons"; +import { fas } from "@fortawesome/free-solid-svg-icons"; +import { fad } from "@fortawesome/pro-duotone-svg-icons"; +import { fal } from "@fortawesome/pro-light-svg-icons"; +import { far } from "@fortawesome/pro-regular-svg-icons"; +import { fas as fasPro } from "@fortawesome/pro-solid-svg-icons"; +import { GetServerSideProps } from "next"; + +library.add(fas, fab, fad, fal, far, fasPro); + +export default function FontawesomeIcon(): null { + return null; +} + +// This gets called on every request +export const getServerSideProps: GetServerSideProps = async ({ params = {}, res }) => { + const { style, icon: iconName } = params; + + if (typeof style !== "string" || typeof iconName !== "string" || !iconName.endsWith(".svg")) { + return { notFound: true }; + } + const prefix = getIconPrefix(style); + + const foundIcon = icon({ prefix, iconName: iconName.replace(".svg", "") as IconName }); + + if (foundIcon == null || foundIcon.abstract[0] == null) { + return { notFound: true }; + } + + const iconAbstract = foundIcon.abstract[0]; + + res.setHeader("Content-Type", "image/svg+xml"); + res.setHeader("Access-Control-Allow-Origin", "*"); + res.setHeader("Access-Control-Allow-Methods", "GET"); + + res.setHeader("Cache-Control", "public, max-age=31536000, immutable"); + res.write(abstractToString(iconAbstract)); + res.end(); + return { props: {} }; +}; + +const DUOTONE_CSS = ""; + +function abstractToString(abstract: AbstractElement): string { + const attributes = Object.entries(abstract.attributes) + .map(([key, value]) => `${key}="${value}"`) + .join(" "); + if (abstract.children == null) { + return `<${abstract.tag} ${attributes} />`; + } else { + const children = abstract.children.map(abstractToString).join(""); + if (abstract.tag === "svg") { + return `<${abstract.tag} ${attributes}>${DUOTONE_CSS}${children}`; + } + return `<${abstract.tag} ${attributes}>${children}`; + } +} + +function getIconPrefix(style: string): IconPrefix { + switch (style) { + case "brands": + return "fab"; + case "duotone": + return "fad"; + case "light": + return "fal"; + case "regular": + return "far"; + case "solid": + return "fas"; + default: + return "fas"; + } +} diff --git a/packages/ui/fontawesome-cdn/tsconfig.json b/packages/ui/fontawesome-cdn/tsconfig.json new file mode 100644 index 0000000000..16a75a892e --- /dev/null +++ b/packages/ui/fontawesome-cdn/tsconfig.json @@ -0,0 +1,15 @@ +{ + "extends": "../../../shared/tsconfig.shared.json", + "compilerOptions": { + "composite": true, + "outDir": "lib", + "rootDir": "src", + "allowJs": true, + "incremental": true, + "noEmit": true, + "jsx": "preserve", + "plugins": [{ "name": "next" }] + }, + "include": ["./src/**/*"], + "exclude": ["node_modules"] +} diff --git a/packages/ui/public-docs-bundle/.env-cmdrc.cjs b/packages/ui/public-docs-bundle/.env-cmdrc.cjs index b891cddd18..dffda38714 100644 --- a/packages/ui/public-docs-bundle/.env-cmdrc.cjs +++ b/packages/ui/public-docs-bundle/.env-cmdrc.cjs @@ -4,14 +4,16 @@ module.exports = { NEXT_PUBLIC_POSTHOG_API_KEY: "", NEXT_PUBLIC_ALGOLIA_APP_ID: "CQINPZSKS3", NEXT_PUBLIC_ALGOLIA_API_KEY: "9515d5b15764da73b5cfad85772779fa", - NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX: "search_index_dev" + NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX: "search_index_dev", + NEXT_PUBLIC_FONTAWESOME_CDN_HOST: process.env.FONTAWESOME_CDN_HOST }, "fern-prod": { NEXT_PUBLIC_FDR_ORIGIN: "https://registry.buildwithfern.com", NEXT_PUBLIC_POSTHOG_API_KEY: process.env.POSTHOG_API_KEY, NEXT_PUBLIC_ALGOLIA_APP_ID: process.env.ALGOLIA_APP_ID, NEXT_PUBLIC_ALGOLIA_API_KEY: process.env.ALGOLIA_API_KEY, - NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX: "search_index_prod" + NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX: "search_index_prod", + NEXT_PUBLIC_FONTAWESOME_CDN_HOST: process.env.FONTAWESOME_CDN_HOST }, "fern-preview": { NEXT_PUBLIC_FDR_ORIGIN: "http://localhost:3000" diff --git a/packages/ui/public-docs-bundle/.mrlint.json b/packages/ui/public-docs-bundle/.mrlint.json index 8720297b7d..e9f912760e 100644 --- a/packages/ui/public-docs-bundle/.mrlint.json +++ b/packages/ui/public-docs-bundle/.mrlint.json @@ -8,7 +8,8 @@ "NEXT_PUBLIC_POSTHOG_API_KEY", "NEXT_PUBLIC_ALGOLIA_APP_ID", "NEXT_PUBLIC_ALGOLIA_API_KEY", - "NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX" + "NEXT_PUBLIC_ALGOLIA_SEARCH_INDEX", + "NEXT_PUBLIC_FONTAWESOME_CDN_HOST" ] }, "rules": { diff --git a/yarn.lock b/yarn.lock index 3b6761ba66..8fd76ca41d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2565,6 +2565,34 @@ __metadata: languageName: unknown linkType: soft +"@fern-ui/fontawesome-cdn@workspace:packages/ui/fontawesome-cdn": + version: 0.0.0-use.local + resolution: "@fern-ui/fontawesome-cdn@workspace:packages/ui/fontawesome-cdn" + dependencies: + "@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 + "@next/bundle-analyzer": ^14.0.3 + "@types/jest": ^29.5.11 + "@types/node": ^18.7.18 + "@types/react": ^18.0.20 + depcheck: ^1.4.3 + eslint: ^8.56.0 + jest: ^29.7.0 + next: ^14.0.4 + organize-imports-cli: ^0.10.0 + prettier: ^3.2.4 + react: ^18.2.0 + react-dom: ^18.2.0 + stylelint: ^16.1.0 + typescript: 4.9.4 + languageName: unknown + linkType: soft + "@fern-ui/fonts@workspace:*, @fern-ui/fonts@workspace:packages/commons/react/fonts": version: 0.0.0-use.local resolution: "@fern-ui/fonts@workspace:packages/commons/react/fonts" @@ -2818,14 +2846,6 @@ __metadata: "@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 "@testing-library/react": ^14.0.0 @@ -2950,18 +2970,6 @@ __metadata: languageName: node linkType: hard -"@fortawesome/react-fontawesome@npm:0.2.0": - version: 0.2.0 - resolution: "@fortawesome/react-fontawesome@npm:0.2.0" - dependencies: - prop-types: ^15.8.1 - peerDependencies: - "@fortawesome/fontawesome-svg-core": ~1 || ~6 - react: ">=16.3" - checksum: f652a0c2172e7b209e2d9e7e511f9b8c17abad85f55e0bd09bb1175ea1927693215da47eb6cd95b1f3a23bd124368553c677907fa76cb17c5093afc1fcffe338 - languageName: node - linkType: hard - "@gar/promisify@npm:^1.1.3": version: 1.1.3 resolution: "@gar/promisify@npm:1.1.3"