From d0e2f858d9958f34c91bebf7608df3938f4dadd5 Mon Sep 17 00:00:00 2001 From: Maxime Preaux Date: Fri, 10 Jul 2026 15:32:54 +0000 Subject: [PATCH 1/2] Use Font Awesome Pro --- website/.yarnrc.yml | 14 +++++ website/app/layout.tsx | 6 ++ website/package.json | 3 +- website/src/components/header/HeaderNav.tsx | 28 ++++++--- website/src/components/header/navData.tsx | 58 ++++++++----------- website/src/components/help/SelfServeGrid.tsx | 16 ++--- website/src/icons/IconElement.tsx | 40 +++++++++++++ website/yarn.lock | 21 ++++++- 8 files changed, 132 insertions(+), 54 deletions(-) create mode 100644 website/src/icons/IconElement.tsx diff --git a/website/.yarnrc.yml b/website/.yarnrc.yml index 35307537963..ff9cfd7ad75 100644 --- a/website/.yarnrc.yml +++ b/website/.yarnrc.yml @@ -10,6 +10,10 @@ plugins: # 7 days (in minutes) npmMinimalAgeGate: 10080 +# FontAwesome generates and hosts the package below for us +npmPreapprovedPackages: + - "@awesome.me/kit-04be88f754" + supportedArchitectures: cpu: - current @@ -22,3 +26,13 @@ supportedArchitectures: - win32 yarnPath: .yarn/releases/yarn-4.15.0.cjs + +npmScopes: + fortawesome: + npmAlwaysAuth: true + npmRegistryServer: "https://npm.fontawesome.com/" + npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN} + awesome.me: + npmAlwaysAuth: true + npmRegistryServer: "https://npm.fontawesome.com/" + npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN} diff --git a/website/app/layout.tsx b/website/app/layout.tsx index ca9d442e159..901fe87640b 100644 --- a/website/app/layout.tsx +++ b/website/app/layout.tsx @@ -15,6 +15,12 @@ import { } from "@/src/helpers/site"; import { SITE_URL } from "@/src/helpers/siteUrl"; +// Set up the styling for fontawesome, including duotone icons +// https://docs.fontawesome.com/web/use-with/react/use-with#getting-font-awesome-css-to-work +import { config } from "@fortawesome/fontawesome-svg-core"; +import "@fortawesome/fontawesome-svg-core/styles.css"; +config.autoAddCss = false; + const inter = Inter({ subsets: ["latin"], display: "swap", diff --git a/website/package.json b/website/package.json index ea673c94a0d..3d5319a6af2 100644 --- a/website/package.json +++ b/website/package.json @@ -19,12 +19,13 @@ "test:visual:update": "yarn build-storybook:test && playwright test --update-snapshots" }, "dependencies": { + "@awesome.me/kit-04be88f754": "^1.0.16", "@chillicream/mocha-visualizer": "file:../src/Mocha/src/mocha-visualizer", "@docsearch/css": "^4.6.3", "@docsearch/react": "^4.6.3", "@fortawesome/fontawesome-svg-core": "^7.1.0", "@fortawesome/free-solid-svg-icons": "^7.1.0", - "@fortawesome/react-fontawesome": "^3.1.1", + "@fortawesome/react-fontawesome": "^3.3.1", "@mdx-js/loader": "^3.1.1", "@mdx-js/react": "^3.1.1", "@next/mdx": "^16.2.6", diff --git a/website/src/components/header/HeaderNav.tsx b/website/src/components/header/HeaderNav.tsx index 6b7bc8b1f50..b28c0fac242 100644 --- a/website/src/components/header/HeaderNav.tsx +++ b/website/src/components/header/HeaderNav.tsx @@ -1,10 +1,10 @@ "use client"; +import type { BlogPostSummary } from "@/src/helpers/blogPosts"; +import { formatDate } from "@/src/helpers/formatDate"; +import { IconElement } from "@/src/icons/IconElement"; import Link from "next/link"; import { type MouseEvent, type ReactNode, useState } from "react"; -import { formatDate } from "@/src/helpers/formatDate"; -import type { BlogPostSummary } from "@/src/helpers/blogPosts"; -import { ChevronDownIcon } from "@/src/icons/ChevronDown"; import { NAV_ITEMS, type NavItem, @@ -98,7 +98,7 @@ function NavWithSubmenu({ className="text-cc-heading flex items-center gap-1.5 px-4 text-sm font-medium no-underline" > {item.label} - + - {Icon && ( + {icon && ( - + )}
@@ -239,6 +240,19 @@ function SubLinkRow({ ); } +function SubLinkRowIcon({ link }: { link: SubLink }) { + const { icon } = link; + if (!icon) { + return null; + } + if (typeof icon === "string") { + return ; + } + + const IconComponent = icon; + return ; +} + function LatestBlogPanel({ post, image, diff --git a/website/src/components/header/navData.tsx b/website/src/components/header/navData.tsx index 25f15561da4..6b013f236c2 100644 --- a/website/src/components/header/navData.tsx +++ b/website/src/components/header/navData.tsx @@ -1,20 +1,10 @@ -import type { ComponentType, SVGProps } from "react"; -import { BlogIcon } from "@/src/icons/Blog"; import { GitHubIcon } from "@/src/icons/GitHub"; import { LinkedInIcon } from "@/src/icons/LinkedIn"; import { SlackIcon } from "@/src/icons/Slack"; import { XIcon } from "@/src/icons/X"; import { YouTubeIcon } from "@/src/icons/YouTube"; -import { - BuildingIcon, - CloudIcon, - HandshakeAngleIcon, - NewspaperIcon, - RocketIcon, - ServerIcon, - SparklesIcon, - WavePulseIcon, -} from "@/src/icons/NavIcons"; +import { IconName } from "@awesome.me/kit-04be88f754/icons"; +import type { ComponentType, SVGProps } from "react"; export const TOOLS = { blog: "/blog", @@ -38,7 +28,7 @@ export interface SubLink { href: string; label: string; description?: string; - icon?: Icon; + icon?: Icon | IconName; } export interface SubGroup { @@ -68,19 +58,19 @@ export const NAV_ITEMS: NavItem[] = [ href: "/platform/analytics", label: "Analytics", description: "Instant Insights. Enhanced Performance.", - icon: WavePulseIcon, + icon: "chart-line-up", }, { href: "/platform/continuous-integration", label: "Continuous Integration", description: "Innovate with Confidence. Deliver with Quality.", - icon: SparklesIcon, + icon: "star", }, { href: "/platform/ecosystem", label: "Ecosystem", description: "An Ecosystem You Trust and Love.", - icon: CloudIcon, + icon: "cloud", }, ], }, @@ -91,7 +81,7 @@ export const NAV_ITEMS: NavItem[] = [ href: "/products/nitro", label: "Nitro", description: "Observability, Governance, Delivery", - icon: RocketIcon, + icon: "rocket", }, ], }, @@ -110,19 +100,19 @@ export const NAV_ITEMS: NavItem[] = [ href: "/services/advisory", label: "Advisory", description: "Consulting / Contracting", - icon: HandshakeAngleIcon, + icon: "handshake-angle", }, { href: "/services/support", label: "Support", description: "Get Help from Experts", - icon: ServerIcon, + icon: "server", }, { href: "/services/training", label: "Training", description: "Increase Your Team's Productivity", - icon: BuildingIcon, + icon: "building", }, ], }, @@ -140,23 +130,23 @@ export const NAV_ITEMS: NavItem[] = [ { href: "/docs/hotchocolate", label: "Hot Chocolate", - icon: RocketIcon, + icon: "rocket", }, { href: "/docs/strawberryshake", label: "Strawberry Shake", - icon: RocketIcon, + icon: "rocket", }, - { href: "/docs/mocha", label: "Mocha", icon: RocketIcon }, - { href: "/docs/fusion", label: "Fusion", icon: RocketIcon }, - { href: "/docs/nitro", label: "Nitro", icon: RocketIcon }, - { href: "/docs/skillz", label: "Skillz", icon: RocketIcon }, + { href: "/docs/mocha", label: "Mocha", icon: "rocket" }, + { href: "/docs/fusion", label: "Fusion", icon: "rocket" }, + { href: "/docs/nitro", label: "Nitro", icon: "rocket" }, + { href: "/docs/skillz", label: "Skillz", icon: "rocket" }, ], }, { title: "Additional Resources", links: [ - { href: TOOLS.blog, label: "Blog", icon: BlogIcon }, + { href: TOOLS.blog, label: "Blog", icon: "blog" }, { href: TOOLS.github, label: "GitHub", icon: GitHubIcon }, { href: TOOLS.slack, label: "Slack / Community", icon: SlackIcon }, { href: TOOLS.youtube, label: "YouTube Channel", icon: YouTubeIcon }, @@ -178,33 +168,33 @@ export const NAV_ITEMS: NavItem[] = [ { href: "/services/support/contact", label: "Contact", - icon: NewspaperIcon, + icon: "message", }, - { href: TOOLS.shop, label: "Shop", icon: NewspaperIcon }, + { href: TOOLS.shop, label: "Shop", icon: "shirt" }, { href: "/legal/acceptable-use-policy", label: "Acceptable Use Policy", - icon: NewspaperIcon, + icon: "clipboard-check", }, { href: "/legal/cookie-policy", label: "Cookie Policy", - icon: NewspaperIcon, + icon: "cookie-bite", }, { href: "/legal/privacy-policy", label: "Privacy Policy", - icon: NewspaperIcon, + icon: "building-lock", }, { href: "/legal/terms-of-service", label: "Terms of Service", - icon: NewspaperIcon, + icon: "file-contract", }, { href: "/licensing/chillicream-license", label: "ChilliCream License", - icon: NewspaperIcon, + icon: "file-certificate", }, ], }, diff --git a/website/src/components/help/SelfServeGrid.tsx b/website/src/components/help/SelfServeGrid.tsx index 99eedf07cce..806c0d74fde 100644 --- a/website/src/components/help/SelfServeGrid.tsx +++ b/website/src/components/help/SelfServeGrid.tsx @@ -4,11 +4,7 @@ import type { ReactElement } from "react"; import { GITHUB, SLACK, YOUTUBE } from "@/src/components/help/helpLinks"; import { IconFeatureCard } from "@/src/components/IconFeatureCard"; import { SectionHeading } from "@/src/components/SectionHeading"; -import { ArticleIcon } from "@/src/icons/Article"; -import { BranchIcon } from "@/src/icons/BranchIcon"; -import { ChatIcon } from "@/src/icons/ChatIcon"; -import { DocsIcon } from "@/src/icons/Docs"; -import { PlayIcon } from "@/src/icons/Play"; +import { IconElement } from "@/src/icons/IconElement"; interface Channel { readonly title: string; @@ -24,35 +20,35 @@ const CHANNELS: readonly Channel[] = [ copy: "Guides, recipes, and the full Hot Chocolate and Fusion reference.", href: "/docs", external: false, - icon: , + icon: , }, { title: "Blog", copy: "Release notes, deep dives, and patterns from the team.", href: "/blog", external: false, - icon: , + icon: , }, { title: "Slack", copy: "Live conversation with maintainers and 7000+ developers.", href: SLACK, external: true, - icon: , + icon: , }, { title: "YouTube", copy: "Workshops, talks, and walkthroughs from the ChilliCream team.", href: YOUTUBE, external: true, - icon: , + icon: , }, { title: "GitHub", copy: "Source, issues, and discussions for graphql-platform.", href: GITHUB, external: true, - icon: , + icon: , }, ]; diff --git a/website/src/icons/IconElement.tsx b/website/src/icons/IconElement.tsx new file mode 100644 index 00000000000..99c2d4b6f19 --- /dev/null +++ b/website/src/icons/IconElement.tsx @@ -0,0 +1,40 @@ +import { + IconDefinition, + IconLookup, + IconName, + byPrefixAndName, +} from "@awesome.me/kit-04be88f754/icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { ComponentProps, ReactNode } from "react"; + +declare module "@fortawesome/fontawesome-svg-core" { + export function icon(icon: IconName | IconLookup, params?: IconParams): Icon; + export function findIconDefinition(iconLookup: IconLookup): IconDefinition; +} + +// TODO implement a fallback for tokenless development since this is a public +// repo +const FREE_NAMESPACE = "todo"; + +const STYLE_MAPPING = { + classic: "far", + duotone: "fadr", + duolight: "fadl", +} as const; + +interface IconElementProps extends Omit< + ComponentProps, + "icon" +> { + icon: IconName; + variant?: keyof typeof STYLE_MAPPING; +} + +export function IconElement({ + icon, + variant = "classic", + ...rest +}: IconElementProps): ReactNode { + const namespace = STYLE_MAPPING[variant]; + return ; +} diff --git a/website/yarn.lock b/website/yarn.lock index cf794cc7fbc..114a2a7cfc9 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -60,6 +60,15 @@ __metadata: languageName: node linkType: hard +"@awesome.me/kit-04be88f754@npm:^1.0.16": + version: 1.0.16 + resolution: "@awesome.me/kit-04be88f754@npm:1.0.16" + dependencies: + "@fortawesome/fontawesome-common-types": "npm:^7.3.0" + checksum: 10c0/6655244dbd418aec7ece03cd482cbfb575e2cbd63fb6e55c834ec8082828896b3365c985e9cdc98f605a43d4283a7506703bcc0b18a5d9800ac2c96a102bedb2 + languageName: node + linkType: hard + "@babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0": version: 7.29.0 resolution: "@babel/code-frame@npm:7.29.0" @@ -837,6 +846,13 @@ __metadata: languageName: node linkType: hard +"@fortawesome/fontawesome-common-types@npm:^7.3.0": + version: 7.3.0 + resolution: "@fortawesome/fontawesome-common-types@npm:7.3.0" + checksum: 10c0/2d7310609b520e68cbc8737d551f526e434eb4cd093a3f7d420998809fa21e23aa96123c7d23bacb451ff49bb4eda79272583463ca6cf29a4335f24fe6babcd9 + languageName: node + linkType: hard + "@fortawesome/fontawesome-free@npm:^6.0.0": version: 6.7.2 resolution: "@fortawesome/fontawesome-free@npm:6.7.2" @@ -862,7 +878,7 @@ __metadata: languageName: node linkType: hard -"@fortawesome/react-fontawesome@npm:^3.1.1": +"@fortawesome/react-fontawesome@npm:^3.3.1": version: 3.3.1 resolution: "@fortawesome/react-fontawesome@npm:3.3.1" peerDependencies: @@ -10300,12 +10316,13 @@ __metadata: version: 0.0.0-use.local resolution: "website@workspace:." dependencies: + "@awesome.me/kit-04be88f754": "npm:^1.0.16" "@chillicream/mocha-visualizer": "file:../src/Mocha/src/mocha-visualizer" "@docsearch/css": "npm:^4.6.3" "@docsearch/react": "npm:^4.6.3" "@fortawesome/fontawesome-svg-core": "npm:^7.1.0" "@fortawesome/free-solid-svg-icons": "npm:^7.1.0" - "@fortawesome/react-fontawesome": "npm:^3.1.1" + "@fortawesome/react-fontawesome": "npm:^3.3.1" "@mdx-js/loader": "npm:^3.1.1" "@mdx-js/react": "npm:^3.1.1" "@next/mdx": "npm:^16.2.6" From a7e80720487f087c7a38984bf9a0ad3ce0e01170 Mon Sep 17 00:00:00 2001 From: Maxime Preaux Date: Mon, 13 Jul 2026 14:47:24 +0200 Subject: [PATCH 2/2] Simplify the icons --- website/.yarnrc.yml | 4 +- website/app/layout.tsx | 6 +- website/package.json | 6 +- .../MochaTopologyVisualizationInner.tsx | 84 ++++++--------- website/src/components/help/SelfServeGrid.tsx | 10 +- website/src/icons/IconElement.tsx | 101 +++++++++++++----- website/yarn.lock | 53 ++++----- 7 files changed, 142 insertions(+), 122 deletions(-) diff --git a/website/.yarnrc.yml b/website/.yarnrc.yml index ff9cfd7ad75..b937666c095 100644 --- a/website/.yarnrc.yml +++ b/website/.yarnrc.yml @@ -31,8 +31,8 @@ npmScopes: fortawesome: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" - npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN} + npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN:-} awesome.me: npmAlwaysAuth: true npmRegistryServer: "https://npm.fontawesome.com/" - npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN} + npmAuthToken: ${FONTAWESOME_PACKAGE_TOKEN:-} diff --git a/website/app/layout.tsx b/website/app/layout.tsx index 901fe87640b..e94c59aee3f 100644 --- a/website/app/layout.tsx +++ b/website/app/layout.tsx @@ -1,6 +1,3 @@ -import "./globals.css"; -import type { Metadata } from "next"; -import { Inter, Josefin_Sans } from "next/font/google"; import { Analytics } from "@/src/components/Analytics"; import { AnalyticsScripts } from "@/src/components/AnalyticsScripts"; import { EnableSmoothScroll } from "@/src/components/EnableSmoothScroll"; @@ -14,6 +11,9 @@ import { TWITTER_HANDLE, } from "@/src/helpers/site"; import { SITE_URL } from "@/src/helpers/siteUrl"; +import type { Metadata } from "next"; +import { Inter, Josefin_Sans } from "next/font/google"; +import "./globals.css"; // Set up the styling for fontawesome, including duotone icons // https://docs.fontawesome.com/web/use-with/react/use-with#getting-font-awesome-css-to-work diff --git a/website/package.json b/website/package.json index 3d5319a6af2..d9f259f969d 100644 --- a/website/package.json +++ b/website/package.json @@ -19,12 +19,12 @@ "test:visual:update": "yarn build-storybook:test && playwright test --update-snapshots" }, "dependencies": { - "@awesome.me/kit-04be88f754": "^1.0.16", "@chillicream/mocha-visualizer": "file:../src/Mocha/src/mocha-visualizer", "@docsearch/css": "^4.6.3", "@docsearch/react": "^4.6.3", - "@fortawesome/fontawesome-svg-core": "^7.1.0", - "@fortawesome/free-solid-svg-icons": "^7.1.0", + "@fortawesome/fontawesome-svg-core": "^7.3.0", + "@fortawesome/free-solid-svg-icons": "^7.3.0", + "@fortawesome/pro-solid-svg-icons": "^7.3.0", "@fortawesome/react-fontawesome": "^3.3.1", "@mdx-js/loader": "^3.1.1", "@mdx-js/react": "^3.1.1", diff --git a/website/src/components/MochaTopologyVisualizationInner.tsx b/website/src/components/MochaTopologyVisualizationInner.tsx index 87450ca938a..e519f109853 100644 --- a/website/src/components/MochaTopologyVisualizationInner.tsx +++ b/website/src/components/MochaTopologyVisualizationInner.tsx @@ -1,43 +1,23 @@ "use client"; -import React, { - FC, - useMemo, - useState, - useEffect, - useRef, - useCallback, -} from "react"; -import { - ReactFlowProvider, - useReactFlow, - useStore, - type Node, - type Edge, -} from "@xyflow/react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"; -import { - faEnvelope, - faArrowRightArrowLeft, - faGear, - faDiagramProject, - faRightLeft, - faLayerGroup, - faHashtag, - faCubes, - faRoute, - faLink, - faEllipsis, -} from "@fortawesome/free-solid-svg-icons"; import { TopologyFlow, type DiagramData, - type MessageTrace, type MessageActivity, - type TraceTopologyMapping, + type MessageTrace, type SidebarTab, + type TraceTopologyMapping, } from "@chillicream/mocha-visualizer"; +import type { IconName } from "@fortawesome/fontawesome-svg-core"; +import { + ReactFlowProvider, + useReactFlow, + useStore, + type Edge, + type Node, +} from "@xyflow/react"; +import { FC, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { IconElement } from "../icons/IconElement"; /** * Minimal scoped styles for embedding the visualizer in the docs page. @@ -230,7 +210,7 @@ const ts = { } as const; function getOperationIcon(activity: MessageActivity): { - icon: IconDefinition; + icon: IconName; color: string; } { switch (activity.operation) { @@ -239,15 +219,15 @@ function getOperationIcon(activity: MessageActivity): { case "request": case "reply": case "subscribe": - return { icon: faEnvelope, color: "#d29922" }; + return { icon: "envelope", color: "#d29922" }; case "dispatch": - return { icon: faArrowRightArrowLeft, color: "#db61a2" }; + return { icon: "arrow-right-arrow-left", color: "#db61a2" }; case "receive": - return { icon: faArrowRightArrowLeft, color: "#58a6ff" }; + return { icon: "arrow-right-arrow-left", color: "#58a6ff" }; case "consume": - return { icon: faGear, color: "#3fb950" }; + return { icon: "gear", color: "#3fb950" }; case "saga-transition": - return { icon: faDiagramProject, color: "#a371f7" }; + return { icon: "diagram-project", color: "#a371f7" }; } } @@ -275,7 +255,7 @@ function getOperationLabel(activity: MessageActivity): string { } function getNodeIcon(node: Node): { - icon: IconDefinition; + icon: IconName; color: string; label: string; } { @@ -286,29 +266,29 @@ function getNodeIcon(node: Node): { if (nodeType === "entity") { if (entityKind === "exchange") - return { icon: faRightLeft, color: "#d29922", label }; + return { icon: "right-left", color: "#d29922", label }; if (entityKind === "queue") - return { icon: faLayerGroup, color: "#3fb950", label }; + return { icon: "layer-group", color: "#3fb950", label }; if (entityKind === "topic") - return { icon: faHashtag, color: "#58a6ff", label }; - return { icon: faCubes, color: "#a371f7", label }; + return { icon: "hashtag", color: "#58a6ff", label }; + return { icon: "cubes", color: "#a371f7", label }; } - if (nodeType === "route") return { icon: faRoute, color: "#6e7681", label }; - if (nodeType === "binding") return { icon: faLink, color: "#6e7681", label }; + if (nodeType === "route") return { icon: "route", color: "#6e7681", label }; + if (nodeType === "binding") return { icon: "link", color: "#6e7681", label }; if (nodeType === "endpoint") { const subType = data.subType as string | undefined; return { - icon: faArrowRightArrowLeft, + icon: "arrow-right-arrow-left", color: subType === "receive" ? "#58a6ff" : "#db61a2", label, }; } - if (nodeType === "consumer") return { icon: faGear, color: "#3fb950", label }; + if (nodeType === "consumer") return { icon: "gear", color: "#3fb950", label }; if (nodeType === "message") - return { icon: faEnvelope, color: "#d29922", label }; + return { icon: "envelope", color: "#d29922", label }; if (nodeType === "saga") - return { icon: faDiagramProject, color: "#a371f7", label }; - return { icon: faEllipsis, color: "#484f58", label }; + return { icon: "diagram-project", color: "#a371f7", label }; + return { icon: "ellipsis", color: "#484f58", label }; } function formatDuration(ms: number): string { @@ -453,7 +433,7 @@ function TraceStepList({ >
- + {info.label} @@ -488,7 +468,7 @@ function TraceStepList({ >
{index + 1}
- +
diff --git a/website/src/components/help/SelfServeGrid.tsx b/website/src/components/help/SelfServeGrid.tsx index 806c0d74fde..28267611d2e 100644 --- a/website/src/components/help/SelfServeGrid.tsx +++ b/website/src/components/help/SelfServeGrid.tsx @@ -20,35 +20,35 @@ const CHANNELS: readonly Channel[] = [ copy: "Guides, recipes, and the full Hot Chocolate and Fusion reference.", href: "/docs", external: false, - icon: , + icon: , }, { title: "Blog", copy: "Release notes, deep dives, and patterns from the team.", href: "/blog", external: false, - icon: , + icon: , }, { title: "Slack", copy: "Live conversation with maintainers and 7000+ developers.", href: SLACK, external: true, - icon: , + icon: , }, { title: "YouTube", copy: "Workshops, talks, and walkthroughs from the ChilliCream team.", href: YOUTUBE, external: true, - icon: , + icon: , }, { title: "GitHub", copy: "Source, issues, and discussions for graphql-platform.", href: GITHUB, external: true, - icon: , + icon: , }, ]; diff --git a/website/src/icons/IconElement.tsx b/website/src/icons/IconElement.tsx index 99c2d4b6f19..ab38878bc5b 100644 --- a/website/src/icons/IconElement.tsx +++ b/website/src/icons/IconElement.tsx @@ -1,40 +1,87 @@ -import { - IconDefinition, - IconLookup, - IconName, - byPrefixAndName, -} from "@awesome.me/kit-04be88f754/icons"; +import type { IconName } from "@fortawesome/fontawesome-svg-core"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { ComponentProps, ReactNode } from "react"; +import type { ComponentProps, ReactNode } from "react"; -declare module "@fortawesome/fontawesome-svg-core" { - export function icon(icon: IconName | IconLookup, params?: IconParams): Icon; - export function findIconDefinition(iconLookup: IconLookup): IconDefinition; -} +import { library } from "@fortawesome/fontawesome-svg-core"; -// TODO implement a fallback for tokenless development since this is a public -// repo -const FREE_NAMESPACE = "todo"; +import { + faArrowRightArrowLeft, + faBlog, + faBuilding, + faBuildingLock, + faChartLineUp, + faChevronDown, + faCirclePlay, + faClipboardCheck, + faCloud, + faCodeBranch, + faCookieBite, + faCubes, + faDiagramProject, + faEllipsis, + faEnvelope, + faFileCertificate, + faFileContract, + faFileLines, + faGear, + faHandshakeAngle, + faHashtag, + faLayerGroup, + faLink, + faMessage, + faMessageQuestion, + faNewspaper, + faRightLeft, + faRocket, + faRoute, + faServer, + faShirt, + faStar, +} from "@fortawesome/pro-solid-svg-icons"; -const STYLE_MAPPING = { - classic: "far", - duotone: "fadr", - duolight: "fadl", -} as const; +library.add( + faArrowRightArrowLeft, + faBlog, + faBuilding, + faBuildingLock, + faChartLineUp, + faChevronDown, + faCirclePlay, + faClipboardCheck, + faCloud, + faCodeBranch, + faCookieBite, + faCubes, + faDiagramProject, + faEllipsis, + faEnvelope, + faFileCertificate, + faFileContract, + faFileLines, + faGear, + faHandshakeAngle, + faHashtag, + faLayerGroup, + faLink, + faMessage, + faMessageQuestion, + faNewspaper, + faRightLeft, + faRocket, + faRocket, + faRoute, + faServer, + faShirt, + faStar, +); interface IconElementProps extends Omit< ComponentProps, "icon" > { icon: IconName; - variant?: keyof typeof STYLE_MAPPING; } -export function IconElement({ - icon, - variant = "classic", - ...rest -}: IconElementProps): ReactNode { - const namespace = STYLE_MAPPING[variant]; - return ; +export function IconElement({ icon, ...rest }: IconElementProps): ReactNode { + return ; } diff --git a/website/yarn.lock b/website/yarn.lock index 114a2a7cfc9..767e01497dd 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -60,15 +60,6 @@ __metadata: languageName: node linkType: hard -"@awesome.me/kit-04be88f754@npm:^1.0.16": - version: 1.0.16 - resolution: "@awesome.me/kit-04be88f754@npm:1.0.16" - dependencies: - "@fortawesome/fontawesome-common-types": "npm:^7.3.0" - checksum: 10c0/6655244dbd418aec7ece03cd482cbfb575e2cbd63fb6e55c834ec8082828896b3365c985e9cdc98f605a43d4283a7506703bcc0b18a5d9800ac2c96a102bedb2 - languageName: node - linkType: hard - "@babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0": version: 7.29.0 resolution: "@babel/code-frame@npm:7.29.0" @@ -839,14 +830,7 @@ __metadata: languageName: node linkType: hard -"@fortawesome/fontawesome-common-types@npm:7.2.0": - version: 7.2.0 - resolution: "@fortawesome/fontawesome-common-types@npm:7.2.0" - checksum: 10c0/991ca1390c078d973e92034cf7dbae2fc3aa50cd7ff322b7b23e4c54ec84dae12979bada9a782bdaea11a1577ae74d802aa651c590f41d2e1b1126c17e6cd413 - languageName: node - linkType: hard - -"@fortawesome/fontawesome-common-types@npm:^7.3.0": +"@fortawesome/fontawesome-common-types@npm:7.3.0": version: 7.3.0 resolution: "@fortawesome/fontawesome-common-types@npm:7.3.0" checksum: 10c0/2d7310609b520e68cbc8737d551f526e434eb4cd093a3f7d420998809fa21e23aa96123c7d23bacb451ff49bb4eda79272583463ca6cf29a4335f24fe6babcd9 @@ -860,21 +844,30 @@ __metadata: languageName: node linkType: hard -"@fortawesome/fontawesome-svg-core@npm:^7.1.0": - version: 7.2.0 - resolution: "@fortawesome/fontawesome-svg-core@npm:7.2.0" +"@fortawesome/fontawesome-svg-core@npm:^7.3.0": + version: 7.3.0 + resolution: "@fortawesome/fontawesome-svg-core@npm:7.3.0" dependencies: - "@fortawesome/fontawesome-common-types": "npm:7.2.0" - checksum: 10c0/5c6655b030254804999eb87b96111cdcc42c0789e6e9ea13bc1e37d5ebf9fb982c79a618b68272cc59c23c4e1abf73d487e747a17a61499eac5f9f528fc54ad4 + "@fortawesome/fontawesome-common-types": "npm:7.3.0" + checksum: 10c0/8d0d8a297a26fa05d407cb4c3c280b84af4b5991eb31d868a02392d9d1b9ad32f73be7e0703e2a1e98b2cdc356edca75f0f8e70ba140e0edb1cfe8739b2b86a4 languageName: node linkType: hard -"@fortawesome/free-solid-svg-icons@npm:^7.1.0": - version: 7.2.0 - resolution: "@fortawesome/free-solid-svg-icons@npm:7.2.0" +"@fortawesome/free-solid-svg-icons@npm:^7.3.0": + version: 7.3.0 + resolution: "@fortawesome/free-solid-svg-icons@npm:7.3.0" + dependencies: + "@fortawesome/fontawesome-common-types": "npm:7.3.0" + checksum: 10c0/62d8978860a4838fc9b3f15eb433c09ccff7d6242c074dacde3ea816d807f5af83a6ba3ea8da9fea02bace7b361dd3acf79c12f95841e190e0d8f75e2f3c7232 + languageName: node + linkType: hard + +"@fortawesome/pro-solid-svg-icons@npm:^7.3.0": + version: 7.3.0 + resolution: "@fortawesome/pro-solid-svg-icons@npm:7.3.0" dependencies: - "@fortawesome/fontawesome-common-types": "npm:7.2.0" - checksum: 10c0/922ffe0f53b3cebcf36a4a6872958e7d6a0fbaa5c5c73cddbdea9301181fe8625331a0bf8aa09ca54c4d284805473e38d0eb9f06da05546f1914cec2c062343f + "@fortawesome/fontawesome-common-types": "npm:7.3.0" + checksum: 10c0/05d3e26de1bd4cc2ef2d0be63a7f514451f3fff0fa6c55e320bca10faec4fbcd0a1c4cec7422cc0627a653027f01662e9f787e7e5f49eaa7d08f5ff389758c95 languageName: node linkType: hard @@ -10316,12 +10309,12 @@ __metadata: version: 0.0.0-use.local resolution: "website@workspace:." dependencies: - "@awesome.me/kit-04be88f754": "npm:^1.0.16" "@chillicream/mocha-visualizer": "file:../src/Mocha/src/mocha-visualizer" "@docsearch/css": "npm:^4.6.3" "@docsearch/react": "npm:^4.6.3" - "@fortawesome/fontawesome-svg-core": "npm:^7.1.0" - "@fortawesome/free-solid-svg-icons": "npm:^7.1.0" + "@fortawesome/fontawesome-svg-core": "npm:^7.3.0" + "@fortawesome/free-solid-svg-icons": "npm:^7.3.0" + "@fortawesome/pro-solid-svg-icons": "npm:^7.3.0" "@fortawesome/react-fontawesome": "npm:^3.3.1" "@mdx-js/loader": "npm:^3.1.1" "@mdx-js/react": "npm:^3.1.1"