Upgrade website to Docusaurus 3

packages/website/docs/02-Getting Started/03-project-structure.mdx

@@ -163,7 +163,7 @@ export * from "./components/MyCustomComponent/MyCustomComponent";
 export const BentoProvider = createBentoProvider(config, theme, sprinkles);
 ```
 
-, like we saw in [Quick Start](./Quick-Start).
+, like we saw in [Quick Start](01-quick-start.mdx).
 
 ## Setting up Turborepo
 

packages/website/docs/03-Customization/03-atoms-augmentation.mdx

@@ -1,4 +1,5 @@
 import { Canvas } from "@site/src/components/Canvas";
+import { PackageManagerCommand } from "@site/src/components/PackageManagerCommand";
 
 # Atoms Augmentation
 

packages/website/docs/04-Components/_ComponentDoc.mdx

@@ -2,6 +2,7 @@ import { Canvas } from "@site/src/components/Canvas";
 import { PropTable } from "@site/src/components/PropTable";
 import { ExternalLinkCard } from "@site/src/components/ExternalLinkCard";
 import { ComponentHeader } from "@site/src/components/ComponentHeader";
+import React from "react";
 
 <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
   {props.name && <ExternalLinkCard type="github" componentName={props.name} />}

packages/website/docs/05-Guides/typography.mdx

@@ -4,11 +4,11 @@ import { Canvas } from "@site/src/components/Canvas";
 
 Bento type scale organizes styles into five roles, semantically named to describe their purposes:
 
-- [Display](../components/Display): reserved for short, important text or numerals. Usually, they work best on large screens.
-- [Headline](../components/Headline): best suited for short, high-emphasis text. These styles can be suitable for marking primary text passages or important content regions.
-- [Title](../components/Title): used to divide secondary text passages or content regions.
-- [Body](../components/Body): used for longer passages of text and paragraphs.
-- [Label](../components/Label): utilitarian styles used for text inside of components or very small supporting text in the content body, like captions.
+- [Display](../04-Components/Display.mdx): reserved for short, important text or numerals. Usually, they work best on large screens.
+- [Headline](../04-Components/Headline.mdx): best suited for short, high-emphasis text. These styles can be suitable for marking primary text passages or important content regions.
+- [Title](../04-Components/Title.mdx): used to divide secondary text passages or content regions.
+- [Body](../04-Components/Body.mdx): used for longer passages of text and paragraphs.
+- [Label](../04-Components/Label.mdx): utilitarian styles used for text inside of components or very small supporting text in the content body, like captions.
 
 ## Usage
 

packages/website/docusaurus.config.js

@@ -1,6 +1,7 @@
 // @ts-check
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const { themes } = require("prism-react-renderer");
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 const { ProvidePlugin } = require("webpack");
 
 /** @type {import('@docusaurus/types').Config} */

packages/website/package.json

@@ -28,43 +28,43 @@
     "@babel/standalone": "7.22.20",
     "@babel/traverse": "7.23.3",
     "@buildo/bento-design-system": "workspace:*",
-    "@docusaurus/core": "2.0.1",
-    "@docusaurus/preset-classic": "2.0.1",
-    "@docusaurus/theme-common": "2.0.1",
-    "@easyops-cn/docusaurus-search-local": "0.35.0",
-    "@mdx-js/react": "1.6.22",
+    "@docusaurus/core": "3.5.2",
+    "@docusaurus/preset-classic": "3.5.2",
+    "@docusaurus/theme-common": "3.5.2",
+    "@easyops-cn/docusaurus-search-local": "0.45.0",
+    "@mdx-js/react": "3.0.1",
     "assert": "2.0.0",
     "buffer": "6.0.3",
     "clsx": "1.2.1",
     "docusaurus-plugin-react-docgen-typescript": "1.1.0",
     "playroom": "0.32.1",
     "prettier": "2.8.8",
-    "prism-react-renderer": "1.3.5",
+    "prism-react-renderer": "2.4.0",
     "process": "0.11.10",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-docgen-typescript": "2.2.2",
-    "react-dom": "18.2.0",
+    "react-dom": "18.3.1",
     "react-markdown": "8.0.7"
   },
   "devDependencies": {
     "@babel/types": "7.22.19",
-    "@docusaurus/module-type-aliases": "2.0.1",
-    "@docusaurus/theme-classic": "2.0.1",
-    "@docusaurus/theme-live-codeblock": "2.0.1",
-    "@docusaurus/types": "2.0.1",
+    "@docusaurus/module-type-aliases": "3.5.2",
+    "@docusaurus/theme-classic": "3.5.2",
+    "@docusaurus/theme-live-codeblock": "3.5.2",
+    "@docusaurus/types": "3.5.2",
     "@phosphor-icons/react": "2.1.7",
-    "@tsconfig/docusaurus": "1.0.6",
+    "@docusaurus/tsconfig": "3.5.2",
     "@types/babel__generator": "7.6.8",
     "@types/babel__standalone": "7.1.7",
     "@types/babel__traverse": "7.20.6",
     "@types/node": "18.19.55",
-    "@types/react": "18.2.21",
+    "@types/react": "18.3.11",
     "@typescript-eslint/parser": "5.62.0",
     "@vanilla-extract/sprinkles": "1.6.3",
     "eslint-config-react-app": "7.0.1",
     "lint-staged": "13.3.0",
     "raw-loader": "4.0.2",
-    "typescript": "4.9.5",
+    "typescript": "5.6.3",
     "webpack": "5.94.0"
   },
   "browserslist": {

packages/website/tsconfig.json

@@ -1,6 +1,6 @@
 {
   // This file is not used in compilation. It is here just for a nice editor experience.
-  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
     "skipLibCheck": true,