docs: upgrade docs website

dangreen · dangreen · commit ec62d345e86c · 2025-10-07T21:03:55.000+04:00
diff --git a/website/docs/examples/area-chart.mdx b/website/docs/examples/area-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/area?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/area?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/bubble-chart.mdx b/website/docs/examples/bubble-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bubble/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bubble/default?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/chart-events.mdx b/website/docs/examples/chart-events.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/events?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/events?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/chart-ref.mdx b/website/docs/examples/chart-ref.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/ref?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/ref?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/doughnut-chart.mdx b/website/docs/examples/doughnut-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/doughnut/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/doughnut/default?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/gradient-chart.mdx b/website/docs/examples/gradient-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/canvas?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/canvas?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/grouped-bar-chart.mdx b/website/docs/examples/grouped-bar-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/grouped?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/grouped?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/horizontal-bar-chart.mdx b/website/docs/examples/horizontal-bar-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/horizontal?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/horizontal?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/line-chart.mdx b/website/docs/examples/line-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/default?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/multiaxis-line-chart.mdx b/website/docs/examples/multiaxis-line-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/multiaxis?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/line/multiaxis?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/multitype-chart.mdx b/website/docs/examples/multitype-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/multitype?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/chart/multitype?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/pie-chart.mdx b/website/docs/examples/pie-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/pie/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/pie/default?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/polar-area-chart.mdx b/website/docs/examples/polar-area-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/polarArea/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/polarArea/default?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/radar-chart.mdx b/website/docs/examples/radar-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/radar/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/radar/default?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/scatter-chart.mdx b/website/docs/examples/scatter-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/scatter/default?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/scatter/default?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/stacked-bar-chart.mdx b/website/docs/examples/stacked-bar-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/stacked?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+  src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/stacked?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docs/examples/vertical-bar-chart.mdx b/website/docs/examples/vertical-bar-chart.mdx
@@ -11,7 +11,7 @@ import ContextProvider from '../../src/components/ContextProvider';
 <ContextProvider>
   {({ branch, theme }) => (
     <iframe
-      src={`https://codesandbox.io/embed/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/vertical?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=${theme}`}
+      src={`https://stackblitz.com/github/reactchartjs/react-chartjs-2/tree/${branch}/sandboxes/bar/vertical?embed=1&file=App.tsx&theme=${theme}`}
       style={{
         width: '100%',
         height: '500px',
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -13,7 +13,11 @@ const config = {
   url: 'https://react-chartjs-2.js.org',
   baseUrl: '/',
   onBrokenLinks: 'throw',
-  onBrokenMarkdownLinks: 'warn',
+  markdown: {
+    hooks: {
+      onBrokenMarkdownLinks: 'warn',
+    },
+  },
   favicon: 'img/favicon.ico',
   organizationName: 'reactchartjs',
   projectName: 'react-chartjs-2',
diff --git a/website/package.json b/website/package.json
@@ -15,29 +15,31 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@algolia/client-search": "^4.11.0",
-    "@docusaurus/core": "2.0.0-beta.14",
-    "@docusaurus/preset-classic": "2.0.0-beta.14",
-    "@docusaurus/theme-search-algolia": "^2.0.0-beta.9",
-    "@mdx-js/react": "^1.6.21",
-    "@svgr/webpack": "^6.0.0",
-    "clsx": "^1.1.1",
-    "docusaurus-plugin-react-docgen-typescript": "^0.1.0",
+    "@algolia/client-search": "^4.24.0",
+    "@docusaurus/core": "^3.9.1",
+    "@docusaurus/preset-classic": "^3.9.1",
+    "@docusaurus/theme-classic": "^3.9.1",
+    "@docusaurus/theme-common": "^3.9.1",
+    "@docusaurus/theme-search-algolia": "^3.9.1",
+    "@mdx-js/react": "^3.1.1",
+    "@svgr/webpack": "^6.5.1",
+    "clsx": "^1.2.1",
+    "docusaurus-plugin-react-docgen-typescript": "^1.3.0",
     "file-loader": "^6.2.0",
     "git-branch": "^2.0.1",
-    "prism-react-renderer": "^1.2.1",
-    "react": "^18.0.0",
-    "react-docgen-typescript": "^2.1.1",
-    "react-dom": "^18.0.0",
+    "prism-react-renderer": "^1.3.5",
+    "react": "^18.3.1",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.3.1",
     "url-loader": "^4.1.1"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.0-beta.14",
-    "@docusaurus/types": "2.0.0-beta.14",
-    "@tsconfig/docusaurus": "^1.0.4",
-    "@types/react": "^18.0.0",
-    "typescript": "^4.3.5",
-    "webpack": "^5.64.2"
+    "@docusaurus/module-type-aliases": "^3.9.1",
+    "@docusaurus/types": "^3.9.1",
+    "@tsconfig/docusaurus": "^2.0.4",
+    "@types/react": "^18.3.18",
+    "typescript": "^4.9.5",
+    "webpack": "^5.97.1"
   },
   "browserslist": {
     "production": [
diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml
diff --git a/website/src/components/ContextProvider.tsx b/website/src/components/ContextProvider.tsx
diff --git a/website/src/components/PropsTable.tsx b/website/src/components/PropsTable.tsx
