Update docusaurus monorepo to v3 (major) (#125)

* Update docusaurus monorepo to v3

| datasource | package                         | from  | to    |
| ---------- | ------------------------------- | ----- | ----- |
| npm        | @docusaurus/core                | 2.4.3 | 3.0.0 |
| npm        | @docusaurus/module-type-aliases | 2.4.3 | 3.0.0 |
| npm        | @docusaurus/preset-classic      | 2.4.3 | 3.0.0 |
| npm        | @docusaurus/theme-mermaid       | 2.4.3 | 3.0.0 |

* deps: update required dependencies to migrate from docusuarus v2 to v3

* config: make necessary changes for prism react renderer

* docs: refactor <summary> blocks to meet new MDX 3 requirements

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Calvin Wilkinson <kinsondigital@gmail.com>

docs/guides/guides/keyboard-input.mdx

@@ -133,7 +133,8 @@ field component to a value that will move the window in the direction described
 This will be called later in our `OnUpdate()` method.
 
 :::info How are time, velocity, and displacement related?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 In our code, we're multiplying the velocity of the window's movement by the elapsed time since the last frame. This ensures
 that the window moves at a consistent speed, regardless of the frame rate. Because the CPU is responsible for executing the
 game logic and rendering each frame, a faster CPU can complete more operations in the same amount of time, resulting in

docs/guides/guides/rendering-atlas-textures.mdx

@@ -60,7 +60,8 @@ Keep your needs into account as you develop your game and do not worry about per
 :::
 
 :::info Atlas Texture Scenario
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's consider a 2D space shooter game with lots of bullets and enemies. In this type of game, there may be a large
 number of sprites for the player, the enemies, and the projectiles.
@@ -200,7 +201,8 @@ it is not required and there is no need to load the _**.png**_ and _**.json**_ f
 
 :::info metadata format
 
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's go over the JSON data that is contained in the metadata file.
 
@@ -292,7 +294,8 @@ public class Game : Window
 ```
 
 :::info WHY?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Think of a [flip book](https://www.youtube.com/watch?v=Un-BdBSOGKY). If you were to flip through the pages of a flip book, you would see the animation.
 The faster you flip through the pages, the faster the animation will appear. The slower you flip
@@ -362,7 +365,8 @@ to make something happen every 16ms to obtain that frame rate.
 :::
 
 :::info What is FPS?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 FPS stands for frames per second, which, as the name implies, is the number of frames that are rendered every second.
 The game loop of a game consists of the two most important methods: `OnUpdate()` and `OnRender()`.

docs/guides/guides/rendering-text.mdx

@@ -76,7 +76,8 @@ Example: The content names _**'my-texture'**_ and _**'My-Texture'**_ are equival
 :::
 
 :::info Built In Fonts
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 Currently, four fonts come _**built-into**_ **Velaptor** and are _**Times New Roman**_.
 The 4 different font types are:
@@ -190,7 +191,8 @@ protected override void OnDraw(FrameTime frameTime)
 ```
 
 :::info What is this `IBatcher` thing?
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 As you might have guessed, this is used for batching.  But that does not mean you know what "batching" is right?
 
@@ -218,7 +220,8 @@ That's it!!
 :::
 
 :::info Texture And Text Origin
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 Some game engines and frameworks use the top left corner of an object when rendering at a particular position.
 **Velaptor** does not work like that. When rendering text, the position of the text is relative to the center of

docs/guides/intro.mdx

@@ -49,7 +49,8 @@ unit test maintenance to make sure that nothing slips through the cracks.
 We have achieved reliability by designing the Velaptor architecture to be loosely coupled as well as making use
 of the observable pattern and dependency injection to make the code as testable as possible.
 
-<details><summary>A quick note about unit testing</summary>
+<details>
+    <summary>A quick note about unit testing</summary>
 
 Unit tests are not the end-all-be-all solution for reliable bug-free software. We do not strive to have
 100% code coverage for the goal of having 100% code coverage. There are areas of Velaptor that _**CANNOT**_ be tested

docusaurus.config.js

@@ -1,7 +1,9 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
-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;
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'Velaptor',

package.json

@@ -16,19 +16,21 @@
     "clean": "@powershell Remove-Item .\\node_modules -Force -Recurse"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.1",
-    "@docusaurus/preset-classic": "^2.4.1",
-    "@docusaurus/theme-mermaid": "^2.4.1",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "^3.0.0",
+    "@docusaurus/preset-classic": "^3.0.0",
+    "@docusaurus/theme-mermaid": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.1",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "typescript": "^5.0.0"
+    "@docusaurus/module-type-aliases": "^3.0.0",
+    "@docusaurus/types": "3.0.0",
+    "@docusaurus/tsconfig": "^3.0.0",
+    "@types/react": "^18.2.29",
+    "typescript": "~5.2.2"
   },
   "browserslist": {
     "production": [
@@ -43,6 +45,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }

versioned_docs/version-1.0.0-preview.25/guides/guides/keyboard-input.mdx

@@ -133,7 +133,8 @@ field component to a value that will move the window in the direction described
 This will be called later in our `OnUpdate()` method.
 
 :::info How are time, velocity, and displacement related?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 In our code, we're multiplying the velocity of the window's movement by the elapsed time since the last frame. This ensures
 that the window moves at a consistent speed, regardless of the frame rate. Because the CPU is responsible for executing the
 game logic and rendering each frame, a faster CPU can complete more operations in the same amount of time, resulting in

versioned_docs/version-1.0.0-preview.25/guides/guides/rendering-atlas-textures.mdx

@@ -60,7 +60,8 @@ Keep your needs into account as you develop your game and do not worry about per
 :::
 
 :::info Atlas Texture Scenario
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's consider a 2D space shooter game with lots of bullets and enemies. In this type of game, there may be a large
 number of sprites for the player, the enemies, and the projectiles.
@@ -194,7 +195,8 @@ it is not required and there is no need to load the _**.png**_ and _**.json**_ f
 
 :::info metadata format
 
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's go over the JSON data that is contained in the metadata file.
 
@@ -256,7 +258,8 @@ public class Game : Window
 ```
 
 :::info WHY?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Think of a [flip book](https://www.youtube.com/watch?v=Un-BdBSOGKY). If you were to flip through the pages of a flip book, you would see the animation.
 The faster you flip through the pages, the faster the animation will appear. The slower you flip
@@ -326,7 +329,8 @@ to make something happen every 16ms to obtain that frame rate.
 :::
 
 :::info What is FPS?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 FPS stands for frames per second, which, as the name implies, is the number of frames that are rendered every second.
 The game loop of a game consists of the two most important methods: `OnUpdate()` and `OnRender()`.

versioned_docs/version-1.0.0-preview.25/guides/guides/rendering-text.mdx

@@ -130,7 +130,8 @@ protected override void OnLoad()
 }
 ```
 :::info Built In Fonts
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 Currently, four fonts come _**built-into**_ **Velaptor** and are _**Times New Roman**_.
 The 4 different font types are:
@@ -164,7 +165,8 @@ protected override void OnDraw(FrameTime frameTime)
 ```
 
 :::info What is this `IBatcher` thing?
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 As you might have guessed, this is used for batching.  But that does not mean you know what "batching" is right?
 
@@ -192,7 +194,8 @@ That's it!!
 :::
 
 :::info Texture And Text Origin
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 Some game engines and frameworks use the top left corner of an object when rendering at a particular position.
 **Velaptor** does not work like that. When rendering text, the position of the text is relative to the center of

versioned_docs/version-1.0.0-preview.25/guides/intro.mdx

@@ -49,7 +49,8 @@ unit test maintenance to make sure that nothing slips through the cracks.
 We have achieved reliability by designing the Velaptor architecture to be loosely coupled as well as making use
 of the observable pattern and dependency injection to make the code as testable as possible.
 
-<details><summary>A quick note about unit testing</summary>
+<details>
+	<summary>A quick note about unit testing</summary>
 
 Unit tests are not the end-all-be-all solution for reliable bug-free software. We do not strive to have
 100% code coverage for the goal of having 100% code coverage. There are areas of Velaptor that _**CANNOT**_ be tested

versioned_docs/version-1.0.0-preview.26/guides/guides/keyboard-input.mdx

@@ -133,7 +133,8 @@ field component to a value that will move the window in the direction described
 This will be called later in our `OnUpdate()` method.
 
 :::info How are time, velocity, and displacement related?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 In our code, we're multiplying the velocity of the window's movement by the elapsed time since the last frame. This ensures
 that the window moves at a consistent speed, regardless of the frame rate. Because the CPU is responsible for executing the
 game logic and rendering each frame, a faster CPU can complete more operations in the same amount of time, resulting in

versioned_docs/version-1.0.0-preview.26/guides/guides/rendering-atlas-textures.mdx

@@ -60,7 +60,8 @@ Keep your needs into account as you develop your game and do not worry about per
 :::
 
 :::info Atlas Texture Scenario
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's consider a 2D space shooter game with lots of bullets and enemies. In this type of game, there may be a large
 number of sprites for the player, the enemies, and the projectiles.
@@ -194,7 +195,8 @@ it is not required and there is no need to load the _**.png**_ and _**.json**_ f
 
 :::info metadata format
 
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's go over the JSON data that is contained in the metadata file.
 
@@ -256,7 +258,8 @@ public class Game : Window
 ```
 
 :::info WHY?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Think of a [flip book](https://www.youtube.com/watch?v=Un-BdBSOGKY). If you were to flip through the pages of a flip book, you would see the animation.
 The faster you flip through the pages, the faster the animation will appear. The slower you flip
@@ -326,7 +329,8 @@ to make something happen every 16ms to obtain that frame rate.
 :::
 
 :::info What is FPS?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 FPS stands for frames per second, which, as the name implies, is the number of frames that are rendered every second.
 The game loop of a game consists of the two most important methods: `OnUpdate()` and `OnRender()`.

versioned_docs/version-1.0.0-preview.26/guides/guides/rendering-text.mdx

@@ -76,7 +76,8 @@ Example: The content names _**'my-texture'**_ and _**'My-Texture'**_ are equival
 :::
 
 :::info Built In Fonts
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 Currently, four fonts come _**built-into**_ **Velaptor** and are _**Times New Roman**_.
 The 4 different font types are:
@@ -186,7 +187,8 @@ protected override void OnDraw(FrameTime frameTime)
 ```
 
 :::info What is this `IBatcher` thing?
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 As you might have guessed, this is used for batching.  But that does not mean you know what "batching" is right?
 
@@ -214,7 +216,8 @@ That's it!!
 :::
 
 :::info Texture And Text Origin
-<details><summary>Expand me to learn more!</summary>
+<details>
+	<summary>Expand me to learn more!</summary>
 
 Some game engines and frameworks use the top left corner of an object when rendering at a particular position.
 **Velaptor** does not work like that. When rendering text, the position of the text is relative to the center of

versioned_docs/version-1.0.0-preview.26/guides/intro.mdx

@@ -49,7 +49,8 @@ unit test maintenance to make sure that nothing slips through the cracks.
 We have achieved reliability by designing the Velaptor architecture to be loosely coupled as well as making use
 of the observable pattern and dependency injection to make the code as testable as possible.
 
-<details><summary>A quick note about unit testing</summary>
+<details>
+	<summary>A quick note about unit testing</summary>
 
 Unit tests are not the end-all-be-all solution for reliable bug-free software. We do not strive to have
 100% code coverage for the goal of having 100% code coverage. There are areas of Velaptor that _**CANNOT**_ be tested

versioned_docs/version-1.0.0-preview.27/guides/guides/keyboard-input.mdx

@@ -133,7 +133,8 @@ field component to a value that will move the window in the direction described
 This will be called later in our `OnUpdate()` method.
 
 :::info How are time, velocity, and displacement related?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 In our code, we're multiplying the velocity of the window's movement by the elapsed time since the last frame. This ensures
 that the window moves at a consistent speed, regardless of the frame rate. Because the CPU is responsible for executing the
 game logic and rendering each frame, a faster CPU can complete more operations in the same amount of time, resulting in

versioned_docs/version-1.0.0-preview.27/guides/guides/rendering-atlas-textures.mdx

@@ -60,7 +60,8 @@ Keep your needs into account as you develop your game and do not worry about per
 :::
 
 :::info Atlas Texture Scenario
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's consider a 2D space shooter game with lots of bullets and enemies. In this type of game, there may be a large
 number of sprites for the player, the enemies, and the projectiles.
@@ -194,7 +195,8 @@ it is not required and there is no need to load the _**.png**_ and _**.json**_ f
 
 :::info metadata format
 
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Let's go over the JSON data that is contained in the metadata file.
 
@@ -256,7 +258,8 @@ public class Game : Window
 ```
 
 :::info WHY?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 Think of a [flip book](https://www.youtube.com/watch?v=Un-BdBSOGKY). If you were to flip through the pages of a flip book, you would see the animation.
 The faster you flip through the pages, the faster the animation will appear. The slower you flip
@@ -326,7 +329,8 @@ to make something happen every 16ms to obtain that frame rate.
 :::
 
 :::info What is FPS?
-<details><summary>Expand me for more info!!</summary>
+<details>
+	<summary>Expand me for more info!!</summary>
 
 FPS stands for frames per second, which, as the name implies, is the number of frames that are rendered every second.
 The game loop of a game consists of the two most important methods: `OnUpdate()` and `OnRender()`.