feat(docusaurus-website): upgrade to docusaurus v3

Author: Pessimistress

modules/docusaurus-website/package.json

@@ -43,22 +43,24 @@
   "scripts": {},
   "dependencies": {
     "@cmfcmf/docusaurus-search-local": "^1.0.0",
-    "@docusaurus/plugin-client-redirects": "^2.0.0",
-    "@docusaurus/plugin-content-docs": "^2.0.0",
-    "@docusaurus/preset-classic": "^2.0.0",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/plugin-client-redirects": "^3.0.0",
+    "@docusaurus/plugin-content-docs": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "babel-plugin-styled-components": "^2.0.0",
+    "cheerio": "1.0.0-rc.9",
     "deepmerge": "^4.2.2",
     "glob": "^7.1.4",
+    "prism-react-renderer": "^2.3.0",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
-    "@docusaurus/core": "^2.0.0",
+    "@docusaurus/core": "^3.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "peerDependencies": {
-    "@docusaurus/core": "^2.0.0",
+    "@docusaurus/core": "^3.0.0",
     "react": "*",
     "react-dom": "*"
   },

modules/docusaurus-website/src/components/examples-index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 // Note: this is internal API and may change in a future release
 // https://github.com/facebook/docusaurus/discussions/7457
-import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+import {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import styled from 'styled-components';
 import {isMobile} from './common.js';

modules/docusaurus-website/src/get-default-config.ts

@@ -1,12 +1,13 @@
 import fs from 'fs';
 import {resolve, dirname} from 'path';
-import lightCodeTheme from 'prism-react-renderer/themes/nightOwlLight';
-import darkCodeTheme from 'prism-react-renderer/themes/nightOwl';
 import deepmerge from 'deepmerge';
 import type {Config} from '@docusaurus/types';
 import type {Options as ClassicThemeOptions, ThemeConfig} from '@docusaurus/preset-classic';
+import {themes} from 'prism-react-renderer';
 
 const cwd = dirname(typeof require === 'undefined' ? import.meta.url : __filename);
+const lightCodeTheme = themes.nightOwlLight;
+const darkCodeTheme = themes.nightOwl;
 
 type SidebarItem = {
   type: 'category' | 'doc';
@@ -90,6 +91,9 @@ export type OcularWebsiteConfig = {
 
   /** Search settings */
   search?: false | 'local' | ThemeConfig['algolia'];
+
+  /** Additional CSS files to include */
+  customCss?: string[];
 };
 
 export function getDocusaurusConfig(config: OcularWebsiteConfig): Config {
@@ -104,7 +108,8 @@ export function getDocusaurusConfig(config: OcularWebsiteConfig): Config {
     docsTableOfContents,
     examplesDir,
     exampleTableOfContents,
-    webpackConfig = {}
+    webpackConfig = {},
+    customCss = []
   } = config;
   const hasExamples = Boolean(examplesDir && exampleTableOfContents);
 
@@ -131,7 +136,7 @@ export function getDocusaurusConfig(config: OcularWebsiteConfig): Config {
             editUrl: `${repoUrl}/tree/master/docs`
           },
           theme: {
-            customCss: [resolve(cwd, '../src/styles.css')]
+            customCss: [resolve(cwd, '../src/styles.css'), ...customCss]
           }
         } as ClassicThemeOptions
       ]