feat: Upgrade Fontawesome to 6.6

website/public/_docs.page/fa/solid.min.css

@@ -1,6 +1,6 @@
 /*!
- * Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2022 Fonticons, Inc.
+ * Copyright 2024 Fonticons, Inc.
  */
 :host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

website/src/components/Content.tsx

@@ -57,7 +57,7 @@ export function Content() {
       const { default: MDX } = runSync(
         bundle.code,
         // @ts-expect-error - seems to be a bug in the types
-        { ...runtime },
+        { ...runtime }
       );
 
       return (
@@ -108,14 +108,18 @@ export function Content() {
 
   // Show the page title if the frontmatter or config has it enabled
   const showPageTitle =
-    Boolean(bundle.frontmatter.showPageTitle) ||
-    Boolean(bundle.config.content?.showPageTitle) ||
-    false;
+    bundle.frontmatter.showPageTitle === false
+      ? false
+      : Boolean(bundle.frontmatter.showPageTitle) ||
+        Boolean(bundle.config.content?.showPageTitle) ||
+        false;
 
   const showPageImage =
-    Boolean(bundle.frontmatter.showPageImage) ||
-    Boolean(bundle.config.content?.showPageImage) ||
-    false;
+    bundle.frontmatter.showPageImage === false
+      ? false
+      : Boolean(bundle.frontmatter.showPageImage) ||
+        Boolean(bundle.config.content?.showPageImage) ||
+        false;
 
   const title = bundle.frontmatter.title;
   const description = bundle.frontmatter.description;

website/src/components/Sidebar.tsx

@@ -84,16 +84,18 @@ function SidebarGroup(props: { group: Pages[number] } & { depth: number }) {
   // A recursive function to determine if this group
   // has an active child link. If so, it is open.
   function hasActiveChild(pages: Pages): boolean {
+    let isActive = false;
     for (const page of pages) {
       if ("group" in page) {
         if (hasActiveChild(page.pages)) {
-          return true;
+          isActive = true;
         }
       } else if (page.href) {
-        return getHrefIsActive(ctx, router.asPath, page.href);
+        isActive = getHrefIsActive(ctx, router.asPath, page.href);
       }
     }
-    return false;
+
+    return isActive;
   }
 
   // Determine if this group has an active child link.
@@ -122,6 +124,7 @@ function SidebarGroup(props: { group: Pages[number] } & { depth: number }) {
         depth={props.depth}
         href={props.group.href}
         icon={props.group.icon}
+        isOpen={open}
         collapse={
           open ? <ChevronUpIcon size={14} /> : <ChevronDownIcon size={14} />
         }
@@ -142,26 +145,32 @@ function SidebarGroup(props: { group: Pages[number] } & { depth: number }) {
 function SidebarAnchor(props: {
   title: string;
   depth: number;
+  isOpen?: boolean;
   href?: string;
   icon?: string;
   collapse?: ReactElement;
   onClick?: () => void;
 }) {
   const { href, isActive } = useHrefMeta(props.href ?? "");
-  const className = cn("relative group flex items-center pr-5 gap-2 py-2 pl-3");
+  const className = cn("py-2 inline-flex gap-2 grow");
+  const style = {
+    paddingLeft: `${(props.depth + 1) * 12}px`,
+  };
 
   const element = props.href ? (
     <Link
       href={href}
-      onClick={props.collapse ? props.onClick : undefined}
+      onClick={props.collapse && !props.isOpen ? props.onClick : undefined}
       className={cn(className, {
         "nav-link-active": isActive,
       })}
+      style={style}
     />
   ) : (
     <div
       role="button"
       className={className}
+      style={style}
       onKeyDown={props.onClick}
       onClick={props.onClick}
     />
@@ -173,26 +182,30 @@ function SidebarAnchor(props: {
         <Icon key="icon" name={props.icon} />
       </span>
     ) : null,
-    <span key="title" className="flex-1">
+    <span key="title" className="flex-1 text-ellipsis overflow-hidden">
       {props.title}
     </span>,
-    props.collapse ? (
-      <div key="toggle" onKeyDown={props.onClick} onClick={props.onClick}>
-        {props.collapse}
-      </div>
-    ) : null,
   ]);
 
   return (
-    <div className="opacity-75 has-[.nav-link-active]:opacity-100 hover:opacity-100 mb-px relative rounded-md hover:bg-black/5 dark:hover:bg-white/5 has-[.nav-link-active]:bg-primary-light/10 dark:has-[.nav-link-active]:bg-primary-light/10 dark:hover:has-[.nav-link-active]:bg-primary-light/10 transition-all">
-      <div
-        className="has-[.nav-link-active]:font-bold has-[.nav-link-active]:text-primary-light dark:has-[.nav-link-active]:text-primary-light"
-        style={{
-          paddingLeft: `${props.depth * 12}px`,
-        }}
-      >
-        {anchor}
-      </div>
+    <div
+      className={cn(
+        "flex opacity-75 hover:opacity-100 mb-px relative rounded-md hover:bg-black/5 dark:hover:bg-white/5  transition-all has-[.nav-link-active]:font-bold",
+        "has-[.nav-link-active]:opacity-100 has-[.nav-link-active]:bg-primary-light/10 dark:has-[.nav-link-active]:bg-primary-light/10  dark:hover:has-[.nav-link-active]:bg-primary-light/10  has-[.nav-link-active]:text-primary-light dark:has-[.nav-link-active]:text-primary-light"
+      )}
+    >
+      {anchor}
+      {props.collapse ? (
+        <button
+          key="toggle"
+          type="button"
+          onKeyDown={props.onClick}
+          onClick={props.onClick}
+          className="px-3"
+        >
+          {props.collapse}
+        </button>
+      ) : null}
     </div>
   );
 }