Issue #1274: Upgrade to Docusaurus v3

* Upgrade MDX to be compliant with v3
* Checked with npx docusaurus-mdx-checker as in migration guide https://docusaurus.io/blog/preparing-your-site-for-docusaurus-v3
* Add .nvmrc and README notes to ensure we have a good node version for Docusaurus 3
* Upgrade to React 18.2.0
* Update ChatGPT feature to be #ask
* Fix bulleted list in MDX

Author: ALRubinger

.nvmrc

@@ -0,0 +1 @@
+v18.16.0

README.md

@@ -51,6 +51,9 @@ $> npm --version
 9.5.1
 ```
 
+Note: if you already have `node` `v18.16.0` installed, you can switch to use it using `nvm use`; this will automatically 
+set your `node` version to the one defined in `.nvmrc` in the root of this repo.
+
 ### PNPM Installation
 
 To install `pnpm` globally on your local machine, follow these steps:

pnpm-lock.yaml

@@ -4,7 +4,7 @@
 
 An agent is software that acts on behalf of a user to manage identity, public or private data, and interactions with other apps in a decentralized network. Agents hold a user's [DIDs](#decentralized-identifier-did), private keys, and a [DWN](#decentralized-web-node-dwn), and are permissioned to use the private keys of DIDs to act on a user's behalf to sign and store messages within a DWN.
 
-[<< More on Agents >>](/docs/web5/learn/agents)
+[\<\< More on Agents \>\>](/docs/web5/learn/agents)
 
 ## Centralized Authority
 
@@ -14,19 +14,19 @@ A single entity or organization that has control over the network and its operat
 
 A Decentralized Identifier (DID) is a globally unique identifier that enables verifiable, decentralized digital identity, without the need for centralized intermediaries. DIDs are typically implemented using decentralized and distributed ledger technologies, such as blockchain, and provide a way to verify and authenticate digital identities, while ensuring privacy and control over personal data.
 
-[<< More on DIDs >>](/docs/web5/learn/decentralized-identifiers/)
+[\<\< More on DIDs \>\>](/docs/web5/learn/decentralized-identifiers/)
 
 ## Decentralized Web Node (DWN)
 
 A Decentralized Web Node is a personal data store in a decentralized network that stores and shares information, serves as a communication channel, and executes transactions in a distributed manner, without relying on a centralized server, thereby enhancing security, privacy, and resilience of the network.
 
-[<< More on DWNs >>](/docs/web5/learn/decentralized-web-nodes)
+[\<\< More on DWNs \>\>](/docs/web5/learn/decentralized-web-nodes)
 
 ## DID Document
 
 A JSON document containing details about a DID, including the DID itself, represented by an `id` field, as well as other data related to the verification and authentication methods of the DID.
 
-[<< More on DID Documents >>](/docs/web5/learn/did_document)
+[\<\< More on DID Documents \>\>](/docs/web5/learn/did_document)
 
 ## DID Method
 
@@ -67,4 +67,4 @@ SSI refers to a concept where individuals have full control and ownership over t
 
 A Verifiable Presentation is a standard data container that serves as an authenticated wrapper around a set of credentials to be verified. They impose no constraints on who can construct them or what may be presented, allowing you to present multiple VCs issued to different DIDs.
 
-[<< More on Verifiable Presentation >>](/docs/web5/build/verifiable-credentials/presentation-exchange/#verifiable-presentation)
+[\<\< More on Verifiable Presentation \>\>](/docs/web5/build/verifiable-credentials/presentation-exchange/#verifiable-presentation)

site/docs/glossary.md

@@ -5,6 +5,6 @@ title: API Reference
 
 import {Redirect} from '@docusaurus/router';
 
-const Home = () => {
+const Home = () => \{
   return <Redirect to="/docs/apis/ssi-service" />;
 };

site/docs/ssi/api_guide.mdx

@@ -23,21 +23,15 @@ If you need to create a Credential Issuance app from scratch, continue on with t
 
 <LanguageSwitchBlock>
   <div language="Kotlin">
-    <p>
-- Create a web server using <a href="https://www.jetbrains.com/help/idea/ktor.html#run_ktor_app">Ktor</a> that will serve as an API endpoint.
-    </p>
+    * Create a web server using <a href="https://www.jetbrains.com/help/idea/ktor.html#run_ktor_app">Ktor</a> that will serve as an API endpoint.
   </div>
-
   <div language="JavaScript">
-    <p>
-- Create a web server using <a href="https://expressjs.com/">Express</a> that will serve as an API endpoint.
-    </p>
+    * Create a web server using <a href="https://expressjs.com/">Express</a> that will serve as an API endpoint.
   </div>
 </LanguageSwitchBlock>
-
-- Design the credential you'd like to offer.
-- Implement an issuance path where you'll accept a request for issuance, perform any necessary checks, and issue the credential.
-- Return the credential to the requester.
+* Design the credential you'd like to offer.
+* Implement an issuance path where you'll accept a request for issuance, perform any necessary checks, and issue the credential.
+* Return the credential to the requester.
 
 ## Environment Setup
 
@@ -259,13 +253,13 @@ Refer to the [Create A DID](/docs/web5/build/decentralized-identifiers/how-to-cr
 <LanguageSwitchBlock>
   <div language="Kotlin">
     <p>
-In order to run this code, create a <code>checkSanctionsLists()</code> function and a <code>sanctionsListResult</code> class in your <code>Application.kt</code> file:   
+In order to run this code, create a <code>checkSanctionsLists()</code> function and a <code>sanctionsListResult</code> class in your <code>Application.kt</code> file:
    </p>
   </div>
 
   <div language="JavaScript">
     <p>
-In order to run this code, create a <code>checkSanctionsLists()</code> function in your <code>api.js</code> file:    
+In order to run this code, create a <code>checkSanctionsLists()</code> function in your <code>api.js</code> file:
     </p>
   </div>
 </LanguageSwitchBlock>

site/docs/tbdex/issuer/vc-issuance.mdx

@@ -4,7 +4,7 @@ sidebar_position: 6
 
 # Offerings
 
-Offerings describe a currency pair that can be exchanged and specify the requirements, conditions, and constraints needed to fulfill the described transaction. 
+Offerings describe a currency pair that can be exchanged and specify the requirements, conditions, and constraints needed to fulfill the described transaction.
 In other words, an Offering is a way of describing a financial product you’re offering as a PFI on a tbDEX network. Any Wallet that has your PFI's DID will be able to query your PFI for all available Offerings, as well as fetch specific Offerings. Wallets will then use that data to make an Request for Quote (RFQ) to your PFI to begin a potential transaction process.
 
 ## Offering Data Schema
@@ -22,52 +22,40 @@ To define these parameters, you’ll create a JSON object per the [Offering sche
 
 <table>
   <tr>
-   <td><strong>Offering Trait</strong>
+   <td>
+     <strong>Offering Trait</strong>
    </td>
-   <td><strong>tbDEX Field</strong>
+   <td>
+     <strong>tbDEX Field</strong>
    </td>
-   <td><strong>Data Type</strong>
+   <td>
+     <strong>Data Type</strong>
    </td>
   </tr>
   <tr>
-   <td>Currency Pairing for swap
-   </td>
-   <td>payinCurrency and payoutCurrency
-   </td>
-   <td>CurrencyDetails
-   </td>
+   <td>Currency Pairing for swap</td>
+   <td>payinCurrency and payoutCurrency</td>
+   <td>CurrencyDetails</td>
   </tr>
   <tr>
-   <td>Pay-in Method
-   </td>
-   <td>payinMethods
-   </td>
-   <td>PaymentMethod[]
-   </td>
+   <td>Pay-in Method</td>
+   <td>payinMethods</td>
+   <td>PaymentMethod[]</td>
   </tr>
   <tr>
-   <td>Pay-out Method
-   </td>
-   <td>payoutMethods
-   </td>
-   <td>PaymentMethods[]
-   </td>
+   <td>Pay-out Method</td>
+   <td>payoutMethods</td>
+   <td>PaymentMethods[]</td>
   </tr>
   <tr>
-   <td>Pay-out Conversion
-   </td>
-   <td>payoutUnitsPerPayinUnit
-   </td>
-   <td>string
-   </td>
+   <td>Pay-out Conversion</td>
+   <td>payoutUnitsPerPayinUnit</td>
+   <td>string</td>
   </tr>
   <tr>
-   <td>Required Credentials
-   </td>
-   <td>requiredClaims
-   </td>
-   <td>PresentationDefinitionV2
-   </td>
+   <td>Required Credentials</td>
+   <td>requiredClaims</td>
+   <td>PresentationDefinitionV2</td>
   </tr>
 </table>
 
@@ -118,13 +106,13 @@ Note that while `type` and `description` fields are more intuitive and standard
 
 ### Required Claims
 
-In order to comply with certain financial regulations, you may require information about the customer you are transacting with. 
-You can obtain this information via [Verifiable Credentials](/docs/web5/learn/verifiable-credentials). 
+In order to comply with certain financial regulations, you may require information about the customer you are transacting with.
+You can obtain this information via [Verifiable Credentials](/docs/web5/learn/verifiable-credentials).
 
-To specify the exact credentials you need, you can do so in the `requiredClaims` section of your Offering by following [creating a Presentation Definition](/docs/web5/build/verifiable-credentials/presentation-definition/). 
+To specify the exact credentials you need, you can do so in the `requiredClaims` section of your Offering by following [creating a Presentation Definition](/docs/web5/build/verifiable-credentials/presentation-definition/).
 You'll specify all required forms and details of proof, optional selection rules, and define flexibility where possible when different types of input may satisfy the requirements.
 
-For a full breakdown of all the available fields and combinations, [see the DIF website](https://identity.foundation/presentation-exchange/#presentation-definition) for details. 
+For a full breakdown of all the available fields and combinations, [see the DIF website](https://identity.foundation/presentation-exchange/#presentation-definition) for details.
 Below is a example of how you could request a Wallet provide a VC of type **SanctionsCredential**:
 
 ```json
@@ -250,4 +238,4 @@ When combining all the data above, you can end up with a full Offering object th
 }
 ```
 
-Once the Offering has been generated, you can store it in your database using code as shown in the [Exchange API Provider section](/docs/tbdex/pfi/anatomy-of-a-pfi#exchange-api-provider).
+Once the Offering has been generated, you can store it in your database using code as shown in the [Exchange API Provider section](/docs/tbdex/pfi/anatomy-of-a-pfi#exchange-api-provider).

site/docs/tbdex/pfi/creating-offerings.mdx

@@ -48,7 +48,8 @@ pnpm start:tutorial-dinger-starter
 
 [![Play in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/TBD54566975/developer.tbd.website/tree/main/examples/tutorials/dinger-starter)
 
-<details><summary>Finished Dinger App</summary>
+<details>
+<summary>Finished Dinger App</summary>
 <p>
 
 If you’d like to skip ahead and see the finished version of this tutorial, you can check out the running app on CodeSandbox.
@@ -151,7 +152,7 @@ And replace it with the following code snippet:
     });
 ```
 ### 🧩 Breaking it down
-- **web5.dwn.protocols.configure():** This function installs the protocol. The protocol needs to be installed because it ensures that both the sender's and recipient's applications (or Decentralized Web Nodes - DWNs) are aligned in terms of communication standards and data formats. 
+- **web5.dwn.protocols.configure():** This function installs the protocol. The protocol needs to be installed because it ensures that both the sender's and recipient's applications (or Decentralized Web Nodes - DWNs) are aligned in terms of communication standards and data formats.
 
 ## Level 5: Query the protocol
 ### 📝 Task
@@ -189,17 +190,17 @@ const { protocols: localProtocol, status: localProtocolStatus } = await queryFor
 console.log({ localProtocol, localProtocolStatus });
 
 if (localProtocolStatus.code !== 200 || localProtocol.length === 0) {
-    
+
   const { protocol, status } = await installProtocolLocally(web5, protocolDefinition);
   console.log("Protocol installed locally", protocol, status);
   const { status: configureRemoteStatus } = await protocol.send(did);
   console.log("Did the protocol install on the remote DWN?", configureRemoteStatus);
-    
+
 } else {
   console.log("Protocol already installed");
 }
 ```
-- **configureProtocol()**: This function is responsible for configuring the protocol in both the local and remote DWNs. It first checks if the protocol is already installed locally. If not, it installs the protocol locally and then attempts to install it on the remote DWN associated with the user's DID. 
+- **configureProtocol()**: This function is responsible for configuring the protocol in both the local and remote DWNs. It first checks if the protocol is already installed locally. If not, it installs the protocol locally and then attempts to install it on the remote DWN associated with the user's DID.
 
 ### 📘 Learn more
 - Learn more about [protocols](https://developer.tbd.website/docs/web5/learn/protocols/).
@@ -391,7 +392,8 @@ Time to test the Dinger app by simulating a conversation between two users by us
 
 After following these steps, you should see a conversation taking place between the two browser sessions!
 
-<details><summary>Not receiving any messages?</summary>
+<details>
+<summary>Not receiving any messages?</summary>
 <a href="https://developer.tbd.website/docs/web5/learn/sync/">Sync</a> intervals occur every two minutes. If you're eager to see immediate updates for testing purposes, you can adjust the sync settings. Update the line:
 
 ```javascript title="src/pages/index.js"

site/docs/web5/build/apps/dinger-tutorial.mdx

@@ -50,7 +50,8 @@ pnpm start:tutorial-shared-todo-starter
 
 [![Play in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/TBD54566975/developer.tbd.website/tree/main/examples/tutorials/shared-todo-starter)
 
-<details><summary>Finished Shared Todo App</summary>
+<details>
+<summary>Finished Shared Todo App</summary>
 <p>
 
 If you’d like to skip ahead and see the finished version of this tutorial, you can check out the running app on CodeSandbox.
@@ -571,7 +572,7 @@ async function toggleTodoComplete(todoItem) {
     const { record } = await web5.dwn.records.read({
         message: {
             filter: {
-                recordId: toggledTodo.id                
+                recordId: toggledTodo.id
             }
         }
     });
@@ -593,4 +594,4 @@ async function toggleTodoComplete(todoItem) {
 
 Congratulations! We've just built a multi-paged, collaborative and decentralized web app that can be used by multiple users. You can check out the finished version of the app running on CodeSandbox.
 
-[![Play in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/TBD54566975/developer.tbd.website/tree/main/examples/tutorials/shared-todo-completed)
+[![Play in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/TBD54566975/developer.tbd.website/tree/main/examples/tutorials/shared-todo-completed)

site/docs/web5/build/apps/shared-todo-app.mdx

@@ -31,7 +31,8 @@ pnpm start:tutorial-todo-starter
 
 In this tutorial, you’ll work through completing the `src/App.vue` file under `/examples/tutorials/todo-starter` to use `web5.js`.
 
-<details><summary>Finished ToDo App</summary>
+<details>
+<summary>Finished ToDo App</summary>
 <p>
 
 If you’d like to skip ahead and see the finished version of this tutorial, you can check out the running app on CodeSandbox.