Upgrade Docusaurus to v3 (#14)

* ⭐ Requested changes

* ⭐ Requested changes

Author: revomhere

CHANGELOG.md

@@ -44,6 +44,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated the "Overview" doc;
 - Transferred the project to GitHub;
 - Navigation system to product-based;
+- Docusaurus version to 3.1.0 (and all packages);
+- Color of highlighted line in <code> block;
 
 ### Fixed
 

docs/products/bridging-protocol/api-reference.mdx

@@ -5,21 +5,21 @@
 
 The Rarimo SDK checkout packages provide tools to send transactions to blockchains.
 
-For information about creating transactions, see [Creating NFT checkout transactions](/bridging-protocol/creating-nft-checkout-transactions).
+For information about creating transactions, see [Creating NFT checkout transactions](/products/bridging-protocol/creating-nft-checkout-transactions).
 
 For example applications, see [rarimo/js-sdk-examples](https://github.com/rarimo/js-sdk-examples/) on GitHub.
 
 ## @rarimo/nft-checkout
 
 The [@rarimo/nft-checkout](https://www.npmjs.com/package/@rarimo/nft-checkout) package provides tools that swap tokens and create cross-chain transactions based on the Rarimo protocol.
 
-For information about swapping tokens, see [Swapping tokens](/bridging-protocol/swapping-tokens).
+For information about swapping tokens, see [Swapping tokens](/products/bridging-protocol/swapping-tokens).
 
 ## @rarimo/react-nft-checkout
 
 The [@rarimo/react-nft-checkout](https://www.npmjs.com/package/@rarimo/react-nft-checkout) package provides React components that you can use in your UI to create cross-chain transactions with the Rarimo protocol.
 
-For information about creating transactions with this package, see [Creating NFT checkout transactions](/bridging-protocol/creating-nft-checkout-transactions).
+For information about creating transactions with this package, see [Creating NFT checkout transactions](/products/bridging-protocol/creating-nft-checkout-transactions).
 
 For example applications, see [rarimo/js-sdk-examples](https://github.com/rarimo/js-sdk-examples/) on GitHub.
 
@@ -51,7 +51,7 @@ If the wallet has enough of the selected token, the dialog shows the transaction
 
 The Rarimo SDK provider packages provide tools to interact with in-browser wallets.
 
-For information about connecting to wallets, see [Connecting to wallets](/bridging-protocol/connecting-to-wallets).
+For information about connecting to wallets, see [Connecting to wallets](/products/bridging-protocol/connecting-to-wallets).
 
 For example applications, see [rarimo/js-sdk-examples](https://github.com/rarimo/js-sdk-examples/) on GitHub.
 

docs/products/bridging-protocol/bridge-protocol-contracts.mdx

@@ -31,9 +31,9 @@ At the high level, cross-chain token bridging consists of the following steps:
 
 Currently, there are three implementations of a Rarimo bridge contract:
 
-- [EVM bridge](bridging-protocol/smart-contracts-reference/evm);
-- [Solana bridge](bridging-protocol/smart-contracts-reference/solana);
-- [Near bridge](bridging-protocol/smart-contracts-reference/near);
+- [EVM bridge](/products/bridging-protocol/smart-contracts-reference/evm);
+- [Solana bridge](/products/bridging-protocol/smart-contracts-reference/solana);
+- [Near bridge](/products/bridging-protocol/smart-contracts-reference/near);
 
 ## Deployments
 

docs/products/bridging-protocol/creating-nft-checkout-transactions.mdx

@@ -247,7 +247,7 @@ To create a transaction with the React components, follow these general steps:
    }).current
    ```
 
-   For more information about bundling transactions, see [Bundling](/bridging-protocol/guide-how-to-bundle-transactions).
+   For more information about bundling transactions, see [Bundling](/products/bridging-protocol/guide-how-to-bundle-transactions).
 
 1. Add the `DappContextProvider` and `RarimoPayButton` components to the page and pass the parameters and the transaction bundle function:
 
@@ -335,4 +335,4 @@ const App = () => {
 export default App
 ```
 
-For information about the flow of the components that appear through the checkout process, see [Checkout packages](/bridging-protocol/api-reference).
+For information about the flow of the components that appear through the checkout process, see [Checkout packages](/products/bridging-protocol/api-reference).

docs/products/bridging-protocol/guide-how-to-bundle-transactions.mdx

@@ -44,7 +44,7 @@ Our bundled transactions handle these steps efficiently with a single request, i
 ## Creating bundled transactions
 
 To bundle transactions together with the SDK, follow these general steps.
-For a complete example, see [SDK](/bridging-protocol/js-sdk-reference).
+For a complete example, see [SDK](/products/bridging-protocol/js-sdk-reference).
 
 1. Connect to a wallet and create a transaction operation with the [`createCheckoutOperation()`](https://rarimo.github.io/js-sdk/functions/_rarimo_nft_checkout.createCheckoutOperation.html) function:
 
@@ -65,7 +65,7 @@ For a complete example, see [SDK](/bridging-protocol/js-sdk-reference).
    ```
 
 1. Initialize the operation as usual with the operation object's [`init()`](https://rarimo.github.io/js-sdk/interfaces/_rarimo_nft_checkout.CheckoutOperation.html#init) method.
-   This step assumes that you have set the target transaction and chain for the operation as described in [SDK](/bridging-protocol/js-sdk-reference):
+   This step assumes that you have set the target transaction and chain for the operation as described in [SDK](/products/bridging-protocol/js-sdk-reference):
 
    ```ts
    const params: CheckoutOperationParams = {

docs/products/bridging-protocol/js-sdk-reference.mdx

@@ -13,8 +13,8 @@ For complete reference information about the SDK packages, see the [SDK referenc
 The SDK provides these groups of packages:
 
 - [Packages that provide access to wallets](/products/rarimo-protocol/api-reference)
-- [Packages that send transactions to blockchains](/bridging-protocol/api-reference)
-- [Packages that provide resources for other packages](/bridging-protocol/packages-base)
+- [Packages that send transactions to blockchains](/products/bridging-protocol/api-reference)
+- [Packages that provide resources for other packages](/products/bridging-protocol/packages-base)
 
 ## Prerequisites
 

docs/products/bridging-protocol/overview.mdx

@@ -61,4 +61,4 @@ Fundamentally, the product provides four capabilities:
 
 By combining these features, developers can implement cross-chain use cases such as fungible token payments, NFT minting, staking, token swaps, and more.
 
-The solution is available as a ready-to-use [React widget](/bridging-protocol/api-reference#@rarimo/react-nft-checkout) that requires little effort for integration. Alternatively, a custom integration can be built using the [JS SDK](/bridging-protocol/api-reference#@rarimo/nft-checkout).
+The solution is available as a ready-to-use [React widget](/products/bridging-protocol/api-reference#@rarimo/react-nft-checkout) that requires little effort for integration. Alternatively, a custom integration can be built using the [JS SDK](/products/bridging-protocol/api-reference#@rarimo/nft-checkout).

docs/products/bridging-protocol/swapping-tokens.mdx

@@ -9,7 +9,7 @@ Rarimo can make these basic token swaps:
 - ERC-20 tokens to other ERC-20 tokens
 - Native tokens to ERC-20 tokens
 
-For more details and limitations about swaps, see [Bridging Protocol](/bridging-protocol/overview).
+For more details and limitations about swaps, see [Bridging Protocol](/products/bridging-protocol/overview).
 
 To set up a token swap, create a Rarimo transaction and specify the token and amount that you want to receive, as in this example:
 

docs/products/polygon-id-state-replication/api-reference.mdx

@@ -3,7 +3,7 @@
 
 # API Reference
 
-This page contains technical resources related to the [Polygon ID State Replication](/polygon-id-state-replication/overview).
+This page contains technical resources related to the [Polygon ID State Replication](/products/polygon-id-state-replication/overview).
 
 ## Demo DApp
 

docs/products/polygon-id-state-replication/overview.mdx

@@ -42,6 +42,6 @@ To complete the demo and claim a soulbound token on Ethereum's Sepolia Testnet,
 Polygon ID x Rarimo integration is experimental and hasn't been audited yet. Please refrain from using it in production applications for now!
 :::
 
-If you run an identity issuer for Polygon ID and want to enable the usage of ZKPs on Ethereum or another EVM-compatible network, follow this [guide](/polygon-id-state-replication/guide-how-to-set-up-polygon-id-state-replication).
+If you run an identity issuer for Polygon ID and want to enable the usage of ZKPs on Ethereum or another EVM-compatible network, follow this [guide](/products/polygon-id-state-replication/guide-how-to-set-up-polygon-id-state-replication).
 
 Once the state replication is ready, the DApps can use the ZKPs by following the [Polygon's on-chain verification guide](https://0xpolygonid.github.io/tutorials/verifier/on-chain-verification/overview/#on-chain-verification-flow).

docs/products/rarimo-protocol/threshold-signature.mdx

@@ -58,7 +58,7 @@ If party has not received a minimum amount of acceptances, it will catch up with
 Every party should have the following public endpoints:
 
 - Get current session information (pool, proposer, steps with time bounds, accepted parties list, signed parties list, status) - for example /session/current
-- Get session by id information. (pool, proposer, steps with time bounds, accepted parties list, signed parties list, status) - for example /session/{id}
+- Get session by id information. (pool, proposer, steps with time bounds, accepted parties list, signed parties list, status) - for example /session/\{id\}
 
 Every party should have the following protected endpoints (reachable by other parties with their ECDSA signature)
 

docs/products/token-agnostic-payments/overview.mdx

@@ -56,11 +56,11 @@ Let's walk through a [demo](https://nft-checkout.rarimo.com/) and buy an NFT pri
 
 Token-agnostic payments can be added to your DApp using one of these options:
 
-- [Customizable react component](/bridging-protocol/creating-nft-checkout-transactions#react-applications)
+- [Customizable react component](/products/bridging-protocol/creating-nft-checkout-transactions#react-applications)
 
   ![Token-agnostic button for buying](/img/token-agnostic-button.png)
 
-- [TypeScript SDK](/bridging-protocol/creating-nft-checkout-transactions#javascript)
+- [TypeScript SDK](/products/bridging-protocol/creating-nft-checkout-transactions#javascript)
 
 ## Fees
 

docs/resources/glossary.mdx

@@ -7,12 +7,12 @@
 
 Bridge contracts are a group of smart contracts that are deployed to different chains that enable you to transfer value from one chain to another.
 The user submits a deposit transaction to the bridge contract on the source chain, and the bridge contract on the target chain withdraws tokens on the target chain.
-See [Bridge overview](/bridging-protocol/bridge-protocol-contracts).
+See [Bridge overview](/products/bridging-protocol/bridge-protocol-contracts).
 
 ## Bundling
 
 Bundling is the process of combining multiple transactions into a single transaction.
-See [Bundling](/bridging-protocol/guide-how-to-bundle-transactions).
+See [Bundling](/products/bridging-protocol/guide-how-to-bundle-transactions).
 
 ## Decentralized application (DApp)
 
@@ -83,7 +83,7 @@ See [Oracles](/products/rarimo-protocol/oracles).
 ## Provider
 
 A provider is an object that represents a user's wallet, so you can interact with it in your code.
-See [Connecting to wallets](/bridging-protocol/connecting-to-wallets).
+See [Connecting to wallets](/products/bridging-protocol/connecting-to-wallets).
 
 ## Rarimo
 

docs/use-cases/cross-chain-proofs.mdx

@@ -14,12 +14,12 @@ You should contact the team to register your specific tokens in Rarimo Protocol.
 For transferrable tokens, you have to lock them in the Rarimo bridge smart contract.
 
 1. Approve bridge smart contract to transfer NFT using `setApprovalForAll` method from [ERC721](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC721/ERC721.sol#L136) or [ERC1155](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC1155/ERC1155.sol#L100) standard. It should be done only the first time for each NFT contract;
-1. Call the deposit method on the bridge contract. For ERC721 [`depositERC721`](/bridging-protocol/smart-contracts-reference/evm#depositerc721), for ERC1155 [`depositERC1155`](/bridging-protocol/smart-contracts-reference/evm#depositerc1155). Note that you could specify some code that should be called on destination chain using [bundling feature](/bridging-protocol/guide-how-to-bundle-transactions);
+1. Call the deposit method on the bridge contract. For ERC721 [`depositERC721`](/products/bridging-protocol/smart-contracts-reference/evm#depositerc721), for ERC1155 [`depositERC1155`](/products/bridging-protocol/smart-contracts-reference/evm#depositerc1155). Note that you could specify some code that should be called on destination chain using [bundling feature](/products/bridging-protocol/guide-how-to-bundle-transactions);
 1. Once the transaction is processed, Rarimo relayers will automatically mint a wrapped NFT on the destination network;
 
 ## Soulbound Tokens
 
 SBTs are non-transferable, so they can't be locked. Thus the bridge needs to verify the sender's ownership of the token. The tokens must follow the [ERC-5192 standard](https://eips.ethereum.org/EIPS/eip-5192).
 
-1. Call the [`depositSBT`](/bridging-protocol/smart-contracts-reference/evm#depositsbt) method on the bridge contract. It checks the SBT ownership and triggers the corresponding event in the Rarimo Core;
+1. Call the [`depositSBT`](/products/bridging-protocol/smart-contracts-reference/evm#depositsbt) method on the bridge contract. It checks the SBT ownership and triggers the corresponding event in the Rarimo Core;
 1. Once the transaction is processed, Rarimo relayers will automatically mint an SBT ownership token on the destination network;

docs/use-cases/overview-of-use-cases.mdx

@@ -10,14 +10,14 @@ Learn about the use cases of Rarimo and check out the case studies of existing i
 
 - [Proof of Humanity](/products/proof-of-humanity/overview)
 - [Self-Sovereign Identity(SSI)](/use-cases/self-sovereign-identities)
-- [Polygon ID Cross-Chain State Replication](/polygon-id-state-replication/overview)
+- [Polygon ID Cross-Chain State Replication](/products/polygon-id-state-replication/overview)
 - [Social Graphs](/use-cases/social-graphs)
 - [Gaming Profiles](/use-cases/gaming-profiles)
 - [SBT Ownership Proofs](/use-cases/cross-chain-proofs)
 - [Rarimo x Identity State Replication](/use-cases/identity-protocol-state-replication)
 
 ## Bridging Use Cases
 
-- [Token Agnostic Payments Widget](/token-agnostic-payments/overview)
+- [Token Agnostic Payments Widget](/products/token-agnostic-payments/overview)
 - [Multi-Chain Token Mints](/use-cases/multi-chain-mints)
-- [Circle CCTP Integration for Managing USDC Liquidity](/bridging-protocol/circle-cctp-integration)
+- [Circle CCTP Integration for Managing USDC Liquidity](/products/bridging-protocol/circle-cctp-integration)

docs/whitepaper/problem_statement.mdx

@@ -3,7 +3,7 @@
 
 # Problem Statement
 
-As mentioned, the most current multi-chain solutions focus on cases where token transfers (bridging) suffice. Only a
+As mentioned, the most current multi-chain solutions focus on cases where token transfers (products/bridging) suffice. Only a
 few solutions are suitable for transferring different data types, including cross-chain calls. Still, even then, they
 can only act as postmen for this data and cannot provide an additional layer of optimization and aggregation.
 

docusaurus.config.js

@@ -2,8 +2,8 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 // @TODO - make our own themes, i guess
-const darkCodeTheme = require('prism-react-renderer/themes/dracula')
-const lightCodeTheme = require('prism-react-renderer/themes/github')
+const darkCodeTheme = require('prism-react-renderer').themes.dracula
+const lightCodeTheme = require('prism-react-renderer').themes.github
 
 function getUrl() {
   return process.env.URL || 'http://localhost:3000'
@@ -55,8 +55,6 @@ module.exports = {
           breadcrumbs: false,
           showLastUpdateTime: true,
           editUrl: 'https://github.com/rarimo/docs/blob/main',
-          docLayoutComponent: '@theme/DocPage',
-          docItemComponent: '@theme/ApiItem',
           remarkPlugins: [
             [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
           ],
@@ -258,6 +256,4 @@ module.exports = {
 
   /** Plugins https://docusaurus.io/docs/using-plugins */
   plugins: [],
-
-  themes: ['docusaurus-theme-openapi-docs'], // Allows use of @theme/ApiItem and other components
 }

package.json

@@ -17,24 +17,25 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.2.0",
-    "@docusaurus/preset-classic": "^2.2.0",
-    "@docusaurus/remark-plugin-npm2yarn": "^3.0.1",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "^3.1.0",
+    "@docusaurus/preset-classic": "^3.1.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.1.0",
+    "@mdx-js/react": "^3.0.0",
     "aos": "^3.0.0-beta.6",
     "clsx": "^1.2.1",
-    "docusaurus-plugin-openapi-docs": "^1.4.1",
-    "docusaurus-theme-openapi-docs": "^1.4.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "redocusaurus": "^1.4.0",
+    "mermaid": "^10.7.0",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-live": "^4.1.5",
+    "redocusaurus": "^2.0.0",
+    "remark-emoji": "^4.0.1",
     "swiper": "^11.0.5"
   },
   "devDependencies": {
-    "@docusaurus/eslint-plugin": "^2.2.0",
-    "@docusaurus/module-type-aliases": "^2.2.0",
-    "@tsconfig/docusaurus": "^1.0.5",
+    "@docusaurus/eslint-plugin": "^3.1.0",
+    "@docusaurus/module-type-aliases": "^3.1.0",
+    "@docusaurus/tsconfig": "^3.1.0",
     "@typescript-eslint/eslint-plugin": "^5.40.1",
     "@typescript-eslint/parser": "^5.40.1",
     "eslint": "^8.25.0",
@@ -44,7 +45,7 @@
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "prettier": "^2.7.1",
-    "typescript": "^4.8.4"
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [

src/css/custom.css

@@ -40,7 +40,7 @@
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
-[data-theme='dark'] {
+html[data-theme='dark'] {
   --primary-main: #8ab5a4;
   --ifm-color-primary: var(--primary-main);
   --ifm-color-primary-dark: #28c3b7;
@@ -80,7 +80,7 @@
   color: var(--secondary-text-color-dark);
 }
 
-[data-theme='light'] {
+html[data-theme='light'] {
   --primary-text-color-dark: #fff;
   --primary-text-color: #8f8f8f;
   --primary-text-color-light: #0d0d0d;
@@ -163,6 +163,10 @@
   color: var(--primary-text-color);
 }
 
+[data-theme='light'] pre code {
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+}
+
 [data-theme='light'] .menu__splitter {
   background: rgba(0, 0, 0, 0.1);
 }
@@ -179,6 +183,7 @@
 }
 
 pre code {
+  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
   background-color: var(--ifm-code-background);
   padding: 0.5rem;
 }