Update to Docusaurus 3.10

docusaurus.config.ts

@@ -117,7 +117,7 @@ const config: Config = {
   onBrokenAnchors: 'throw',
   future: {
     v4: true,
-    experimental_faster: true,
+    faster: true,
   },
 
   // Even if you don't use internationalization, you can use this field to set
@@ -433,6 +433,12 @@ const config: Config = {
   themes: ['docusaurus-theme-openapi-docs'],
 
   markdown: {
+    mdx1Compat: {
+      // TODO Migrate to strict MDX
+      comments: true,
+      admonitions: true,
+      headingIds: true,
+    },
     hooks: {
       onBrokenMarkdownLinks: 'throw',
     },

package.json

@@ -23,18 +23,18 @@
     "fix-lint": "npm run lint -- --fix"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.9.2",
-    "@docusaurus/faster": "^3.9.2",
-    "@docusaurus/plugin-client-redirects": "^3.9.2",
-    "@docusaurus/plugin-google-gtag": "^3.9.2",
-    "@docusaurus/plugin-google-tag-manager": "^3.9.2",
-    "@docusaurus/preset-classic": "^3.9.2",
+    "@docusaurus/core": "^3.10.0",
+    "@docusaurus/faster": "^3.10.0",
+    "@docusaurus/plugin-client-redirects": "^3.10.0",
+    "@docusaurus/plugin-google-gtag": "^3.10.0",
+    "@docusaurus/plugin-google-tag-manager": "^3.10.0",
+    "@docusaurus/preset-classic": "^3.10.0",
     "@mdx-js/react": "^3.1.1",
     "@webcoder49/code-input": "^2.8.2",
     "clsx": "^2.1.1",
     "docusaurus-plugin-image-zoom": "^3.0.1",
-    "docusaurus-plugin-openapi-docs": "^4.7.1",
-    "docusaurus-theme-openapi-docs": "^4.7.1",
+    "docusaurus-plugin-openapi-docs": "^5.0.0",
+    "docusaurus-theme-openapi-docs": "^5.0.0",
     "prism-react-renderer": "^2.4.1",
     "prismjs": "^1.30.0",
     "react": "^19.2.4",
@@ -43,9 +43,9 @@
     "url": "^0.11.4"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.9.2",
-    "@docusaurus/tsconfig": "^3.9.2",
-    "@docusaurus/types": "^3.9.2",
+    "@docusaurus/module-type-aliases": "^3.10.0",
+    "@docusaurus/tsconfig": "^3.10.0",
+    "@docusaurus/types": "^3.10.0",
     "@eslint/js": "~9.39.4",
     "dotenv": "^17.3.1",
     "eslint": "~9.39.4",

src/components/Icon/index.tsx

@@ -1,4 +1,4 @@
-import React, { JSX } from 'react';
+import React, { JSX, type ReactNode } from 'react';
 import ThemedImage, { type Props as ThemedImageProps } from '@theme/ThemedImage';
 import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
 import AdobeIcon from '@site/static/img/adobe.svg';
@@ -32,10 +32,10 @@ import styles from './styles.module.css';
 interface IconProps {
   className?: string;
   icon?: string;
-  defaultIcon: string;
+  defaultIcon: ReactNode;
 }
 
-function TextIcon({ className, icon }: { className?: string; icon: string }): JSX.Element | string {
+function TextIcon({ className, icon }: { className?: string; icon: ReactNode }): ReactNode {
   return className ? <span className={className}>{icon}</span> : icon;
 }
 

src/theme/DocCard/Description/index.tsx

@@ -0,0 +1,21 @@
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import type { Props } from '@theme/DocCard/Description';
+
+import styles from './styles.module.css';
+
+export default function DocCardDescription({ description }: Props): ReactNode {
+  return (
+    <p
+      className={clsx(
+        /* 'text--truncate', */
+        ThemeClassNames.docs.docCard.description,
+        styles.cardDescription
+      )}
+      /* title={description} */
+    >
+      {description}
+    </p>
+  );
+}

src/theme/DocCard/Description/styles.module.css

@@ -0,0 +1,3 @@
+.cardDescription {
+  font-size: 0.8rem;
+}

src/theme/DocCard/Heading/Icon/index.tsx

@@ -0,0 +1,16 @@
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+import Icon from '@site/src/components/Icon';
+import { ThemeClassNames } from '@docusaurus/theme-common';
+import type { Props } from '@theme/DocCard/Heading/Icon';
+
+import styles from './styles.module.css';
+
+interface SidebarItemCustomProps {
+  icon?: string;
+}
+
+export default function DocCardHeadingIcon({ item, icon }: Props): ReactNode {
+  const customIcon = (item.customProps as SidebarItemCustomProps)?.icon;
+  return <Icon icon={customIcon} defaultIcon={icon} className={clsx(ThemeClassNames.docs.docCard.icon, styles.cardTitleIcon)} />;
+}

src/theme/DocCard/Heading/Icon/styles.module.css

@@ -0,0 +1,10 @@
+.cardTitleIcon {
+  font-size: 1.6rem;
+  margin-right: 0.6rem;
+}
+
+img.cardTitleIcon,
+svg.cardTitleIcon {
+  width: 1.6rem;
+  height: 1.6rem;
+}