[Website] Use Font Awesome Pro

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:-}

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,15 @@ 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
+import { config } from "@fortawesome/fontawesome-svg-core";
+import "@fortawesome/fontawesome-svg-core/styles.css";
+config.autoAddCss = false;
 
 const inter = Inter({
   subsets: ["latin"],

website/package.json

@@ -22,9 +22,10 @@
     "@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/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",
     "@next/mdx": "^16.2.6",

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({
               >
                 <div style={ts.inferredDot(info.color)} />
                 <span style={ts.inferredIcon(info.color)}>
-                  <FontAwesomeIcon icon={info.icon} />
+                  <IconElement icon={info.icon} />
                 </span>
                 <span style={ts.inferredLabel} title={info.label}>
                   {info.label}
@@ -488,7 +468,7 @@ function TraceStepList({
             >
               <div style={ts.badge}>{index + 1}</div>
               <span style={ts.icon(color)}>
-                <FontAwesomeIcon icon={icon} />
+                <IconElement icon={icon} />
               </span>
               <div style={ts.content}>
                 <div style={ts.topRow}>

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}
-        <ChevronDownIcon className="h-3 w-3 fill-current" />
+        <IconElement icon="chevron-down" widthAuto size="sm" />
       </Link>
 
       <SubmenuPanel
@@ -212,7 +212,8 @@ function SubLinkRow({
   const linkProps = isExternal
     ? { target: "_blank" as const, rel: "noopener noreferrer" as const }
     : {};
-  const Icon = link.icon;
+  // const Icon = link.icon;
+  const { icon } = link;
 
   return (
     <Link
@@ -222,9 +223,9 @@ function SubLinkRow({
       {...linkProps}
       className="group/link text-cc-ink-dim hover:bg-cc-hover flex items-start gap-3 rounded-md px-2 py-2 no-underline transition-colors"
     >
-      {Icon && (
+      {icon && (
         <span className="text-cc-ink-dim group-hover/link:text-cc-ink mt-0.5 flex h-5 w-5 flex-none items-center justify-center transition-colors">
-          <Icon className="h-4 w-4 fill-current" />
+          <SubLinkRowIcon link={link} />
         </span>
       )}
       <div>
@@ -239,6 +240,19 @@ function SubLinkRow({
   );
 }
 
+function SubLinkRowIcon({ link }: { link: SubLink }) {
+  const { icon } = link;
+  if (!icon) {
+    return null;
+  }
+  if (typeof icon === "string") {
+    return <IconElement icon={icon} />;
+  }
+
+  const IconComponent = icon;
+  return <IconComponent className="h-4 w-4 fill-current" />;
+}
+
 function LatestBlogPanel({
   post,
   image,