Added plugin-ideal-image (#32)

* Changed all pages to use plugin-ideal-image * Added style for idealImage * Enable autoDownload for slow connections * Update CHANGELOG.md * Added IdealImage component * Changed CHANGELOG.md and formatting * Updated IdealImage component * Updated plugin-ideal-image settings
rarimo · Mar 9, 2024 · ae8f89d · ae8f89d
1 parent 26de1f2
commit ae8f89d
Show file tree

Hide file tree

Showing 38 changed files with 524 additions and 133 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Products/WorldCoin State Replication:
   - Updated the relayer version in the replication guide;
+- Used `@docusaurus/plugin-ideal-image` for image optimization
 
 ## [2.0.5] - 23-02-2024
 

diff --git a/docs/ecosystem/polygon-id-state-replication/overview.mdx b/docs/ecosystem/polygon-id-state-replication/overview.mdx
@@ -3,6 +3,7 @@ slug: /ecosystem/polygon-id-state-replication
 description: Polygon ID State Replication allows Polygon ID users to use their identities on other EVM-compatible chains.
 ---
 import OutLink from "@site/src/components/OutLink";
+import IdealImage from '@site/src/components/IdealImage';
 
 # Polygon ID State Replication
 
@@ -16,19 +17,19 @@ The goals of this demo are:
 
 The Iden3 Identity State(pictured below) is proposed to make the ZK Proofs feasible on other chains. However, replicating each state change to each supported chain is unreliable and costly.
 
-![Iden3 State](/img/iden3-state.png)
+<IdealImage img={require('/img/iden3-state.png')} alt="Iden3 State" />
 
 On-demand state replication using Rarimo's cross-chain infrastructure is proposed to mitigate these issues. Rarimo oracles will replicate the complete identity state history to a State Contract on the Rarimo Protocol chain. State Contracts on the other chains will be modified to accept lazy state updates. The updates will be secured by Rarimo's TSS instead of the state transition proofs used by Iden3.
 
-![Polygon ID Integration Architecture](/img/polygon-id-integration.png)
+<IdealImage img={require('/img/polygon-id-integration.png')} alt="Polygon ID Integration Architecture" />
 
 In order to prove a statement on the Ethereum chain, the relayer will fetch a state update transaction from the Rarimo API and submit it just before the user submits the ZKP. This way, the state will be used only when it's needed.
 
-![Polygon ID State Replication Flow](/img/polygon-id-state-replication.png)
+<IdealImage img={require('/img/polygon-id-state-replication.png')} alt="Polygon ID State Replication Flow" />
 
 The user then generates a ZKP using the Polygon ID Wallet app and submits it to the verifier contract using Metamask.
 
-![Polygon ID ZKP Generation Flow](/img/polygon-id-zkp-flow.png)
+<IdealImage img={require('/img/polygon-id-zkp-flow.png')} alt="Polygon ID ZKP Generation Flow" />
 
 ## Demo walkthrough
 

diff --git a/...tate-replication/tutorial-verifying-polygon-id-credentials-in-ethereum-dapp.mdx b/...tate-replication/tutorial-verifying-polygon-id-credentials-in-ethereum-dapp.mdx
@@ -3,6 +3,7 @@ title: "Using Polygon ID State Replication in a DApp"
 description: "In this tutorial, we will build a simple DApp that uses the Polygon ID State Replication."
 ---
 import OutLink from "@site/src/components/OutLink";
+import IdealImage from '@site/src/components/IdealImage';
 
 # Tutorial: Using Polygon ID State Replication in a DApp
 
@@ -11,16 +12,16 @@ In this tutorial, we will build the DApp that mints an NFT if the user was born
 ## User flow
 
 1. The front end creates the QR code that contains the proof request and shows it on the page for the user.
-  ![Proof request QR-code](/img/polygon-id-integration-qr-code.png)
+  <IdealImage img={require('/img/polygon-id-integration-qr-code.png')} alt="Proof request QR-code" />
 
 1. The user can scan this QR code with his Polygon ID Wallet and generate proof that he possesses valid credentials.
-  ![Proof generated, connect wallet to proceed](/img/polygon-id-integration-generated.png)
+  <IdealImage img={require('/img/polygon-id-integration-generated.png')} alt="Proof generated, connect wallet to proceed" />
 
 1. After that, the relayer will be called to replicate the state from Polygon to Ethereum.
-  ![Performing state transition](/img/polygon-id-integration-relay.png)
+  <IdealImage img={require('/img/polygon-id-integration-relay.png')} alt="Performing state transition" />
 
 1. The user can submit the proof with his MetaMask and mint the SBT.
-  ![Verified and received an SBT](/img/polygon-id-integration-sbt.jpg)
+  <IdealImage img={require('/img/polygon-id-integration-sbt.jpg')} alt="Verified and received an SBT" />
 
 ## DApp creation
 

diff --git a/docs/ecosystem/proof-of-humanity/guides/collab-land-setup.mdx b/docs/ecosystem/proof-of-humanity/guides/collab-land-setup.mdx
@@ -3,13 +3,13 @@ slug: /ecosystem/proof-of-humanity/guides/protecting-your-discord-server-from-bo
 description: Learn how to set up a Proof of Humanity miniapp for your Discord server and channels for verified humans only.
 ---
 import OutLink from "@site/src/components/OutLink";
-
+import IdealImage from '@site/src/components/IdealImage';
 
 # Protecting your discord server from bots
 
 A typical crypto discord server is constantly attacked by bots shilling scams. Banning them manually wastes your mods' and users' time. Basic protection measures, like captcha verification, do little good, either.
 
-![Sample Scam](/img/collabland-guide/sample-scam.png)
+<IdealImage img={require('/img/collabland-guide/sample-scam.png')} alt="Sample Scam" />
 
 Rarimo has developed a free plugin for the popular token-gating bot <OutLink href="https://www.collab.land/">Collab.Land</OutLink> to fight this menace. It allows the server admin to set up channels for verified humans only.
 
@@ -19,56 +19,56 @@ Rarimo has developed a free plugin for the popular token-gating bot <OutLink hre
 
 In case you didn't use Collab.Land yet, follow the <OutLink href="https://collabland.freshdesk.com/support/solutions/articles/70000036689-discord-bot-walkthrough">Discord Bot Walkthrough</OutLink> to invite the bot to your server.
 
-![Invite Collab.Land Bot](/img/collabland-guide/invite-bot.png)
+<IdealImage img={require('/img/collabland-guide/invite-bot.png')} alt="Invite Collab.Land Bot" />
 
 ### Step #2: Create a Discord role for humans
 
 Collab.Land's token gating rules are based on discord roles, so we need to create a role for the verified users by following the <OutLink href="https://support.discord.com/hc/en-us/articles/206029707-Setting-Up-Permissions-FAQ#h_01FFTVYQ38W9TVCTM6YZHZXFFA">Setting Up Permissions FAG</OutLink> guide.
 
 Let's call our role `Certified Human✅`:
 
-![Create a Role](/img/collabland-guide/role.png)
+<IdealImage img={require('/img/collabland-guide/role.png')} alt="Create a Role" />
 
 ### Step #3: Add the Proof of Humanity action
 
 1. Open the <OutLink href="https://cc.collab.land/login">Collab.Land Command Center</OutLink>:
-   ![Open Command Center](/img/collabland-guide/dashboard-login.png)
+   <IdealImage img={require('/img/collabland-guide/dashboard-login.png')} alt="Open Command Center" />
 1. Log in via Discord:
-   ![Login via Discord](/img/collabland-guide/dashboard-login-discord.png)
+   <IdealImage img={require('/img/collabland-guide/dashboard-login-discord.png')} alt="Login via Discord" />
 1. Click on the **Marketplace** tab:
-   ![Marketplace](/img/collabland-guide/marketplace.png)
+   <IdealImage img={require('/img/collabland-guide/marketplace.png')} alt="Marketplace" />
 1. Install the **Rarimo Proof of Humanity Verify Action** by clicking on the **Free Install** button:
-   ![Install Action](/img/collabland-guide/install-action.png)
+   <IdealImage img={require('/img/collabland-guide/install-action.png')} alt="Install Action" />
 
 ### Step #4: Set up a token-gating rule
 
 1. Click on the **TGRs** tab in the Collab.Land console:
-   ![TGRs Tab](/img/collabland-guide/tgr-tab.png)
+   <IdealImage img={require('/img/collabland-guide/tgr-tab.png')} alt="TGRs Tab" />
 1. Click on the **Select Role** button:
-   ![TGRs Select Role](/img/collabland-guide/tgr-select-role.png)
+   <IdealImage img={require('/img/collabland-guide/tgr-select-role.png')} alt="TGRs Select Role" />
 1. Select the role you created in Step #1 and click **Apply**:
-   ![TGRs Select Role](/img/collabland-guide/select-role.png)
+   <IdealImage img={require('/img/collabland-guide/select-role.png')} alt="TGRs Select Role" />
 1. Fill in the following fields and verify that the screenshot below matches your form:
    - Chain: `Polygon`;
    - Token Type: `ERC721`;
    - Addresses: `0xaD7De01cb7eaAFf3a419A0a0a3133a964cD90373`([reference](/ecosystem/proof-of-humanity/smart-contracts-reference#deployments));
-     ![TGRs Config](/img/collabland-guide/tgr-config.png)
+     <IdealImage img={require('/img/collabland-guide/tgr-config.png')} alt="TGRs Config" />
 1. Click **Save** and verify that you see the following screen:
-   ![TGRs Config Saved](/img/collabland-guide/tgr-saved.png)
+   <IdealImage img={require('/img/collabland-guide/tgr-saved.png')} alt="TGRs Config Saved" />
 
 ### Step #5: Configure the channels
 
 Now that we have the token-gating rule in place, we can configure the channels that require the `Certified Human✅` role.
 
-![Create Human-Only Channel](/img/collabland-guide/create-human-channel.png)
+<IdealImage img={require('/img/collabland-guide/create-human-channel.png')} alt="Create Human-Only Channel" />
 
 Follow the <OutLink href="https://support.discord.com/hc/en-us/articles/206143877-How-do-I-set-up-a-Role-Exclusive-channel-#:~:text=Click%20on%20the%20%22%2B%22%20icon,have%20access%20to%20this%20channel!">How do I set up a Role-Exclusive channel?</OutLink> guide to configure the human-only channels.
 
 ### Step #6: Guide your users
 
 Add a greeting message to your `#collabland-join` or other appropriate channel that prompts users to get verified.
 
-![Example of a message with verification isntructions](/img/collabland-guide/join-instructions.png)
+<IdealImage img={require('/img/collabland-guide/join-instructions.png')} alt="Example of a message with verification isntructions" />
 
 ## Verification guide for users
 
@@ -78,7 +78,7 @@ Now that the server is configured, let's see how the users can obtain the `Certi
 
 Call the `/rarimo-verify` command to start the verification process:
 
-![Call /rarimo-verify](/img/collabland-guide/call-verify.png)
+<IdealImage img={require('/img/collabland-guide/call-verify.png')} alt="Call /rarimo-verify" />
 
 ### Step #2: Complete the Proof of Humanity verification
 
@@ -88,13 +88,13 @@ Users who completed the Proof of Humanity verification earlier can skip this ste
 
 After clicking the **Verify Your Humanity** button, you will be redirected to the <OutLink href="https://robotornot.rarimo.com">Prove Your Humanity</OutLink> page. Follow the instructions to complete the verification.
 
-![Complete the Proof of Humanity Verification](/img/collabland-guide/proof-of-humanity-dapp.png)
+<IdealImage img={require('/img/collabland-guide/proof-of-humanity-dapp.png')} alt="Complete the Proof of Humanity Verification" />
 
 ### Step #3: Claim the verified role
 
 Once you've completed the verification, go to the `#collabland-join` channel and click on the **Let's go** button to obtain your verified role:
 
-![Collab.Land Verify Assets](/img/collabland-guide/collabland-verify-asstes.png)
+<IdealImage img={require('/img/collabland-guide/collabland-verify-asstes.png')} alt="Collab.Land Verify Assets" />
 
 ### Step #4: Enjoy the quality discussions
 

diff --git a/...m/proof-of-humanity/guides/using-rarimos-proof-of-humanity-plugin-for-galxe.mdx b/...m/proof-of-humanity/guides/using-rarimos-proof-of-humanity-plugin-for-galxe.mdx
@@ -3,6 +3,7 @@ image: /img/galxe-guide/opengraph.png
 description: Learn how to use Rarimo’s Proof of Humanity plugin for Galxe to prevent bots from participating in your campaigns.
 ---
 import OutLink from "@site/src/components/OutLink";
+import IdealImage from '@site/src/components/IdealImage';
 
 # Using Rarimo’s Proof of Humanity plugin for Galxe
 
@@ -18,19 +19,19 @@ To add Proof of Human check, set up your campaign using the instructions below.
 
 1. Set up a new **Credentials Group**:
 
-    ![New Credentials Group](/img/galxe-guide/step-1.png)
+    <IdealImage img={require('/img/galxe-guide/step-1.png')} alt="New Credentials Group" />
 
 2. Select the **On-Chain** type:
 
-    ![Select type](/img/galxe-guide/step-2.png)
+    <IdealImage img={require('/img/galxe-guide/step-2.png')} alt="Select type" />
 
 3. Select the **Subgraph Credential**
 
-    ![Subgraph Credential](/img/galxe-guide/step-3.png)
+    <IdealImage img={require('/img/galxe-guide/step-3.png')} alt="Subgraph Credential" />
 
 4. Verify that you see this form:
 
-    ![Verify the form](/img/galxe-guide/step-4.png)
+    <IdealImage img={require('/img/galxe-guide/step-4.png')} alt="Verify the form" />
 
 5. Fill it using these values:
 
@@ -67,16 +68,16 @@ To add Proof of Human check, set up your campaign using the instructions below.
 
    Reach out to us at <OutLink href="https://discord.com/channels/1034798419614629908/1034798420713553966/1063164663216484473">discord</OutLink> and provide the name of your company name and logo to get a link with a customized greeting like this:
 
-   ![Customized greeting](/img/poh-greeting.png)
+   <IdealImage img={require('/img/poh-greeting.png')} alt="Customized greeting" />
 
 6. Verify that the filled form looks like this and hit **Save**:
 
-   ![Verify and Save](/img/galxe-guide/step-6.png)
+   <IdealImage img={require('/img/galxe-guide/step-6.png')} alt="Verify and Save" />
 
 7. Save the **Credential Group**:
 
-   ![Save the Group](/img/galxe-guide/step-7.png)
+   <IdealImage img={require('/img/galxe-guide/step-7.png')} alt="Save the Group" />
 
 8. After you are done with the rest of the details for your campaign, you should see the Proof of Human step on the campaign page:
 
-   ![Proof of Human step should be visible now](/img/galxe-guide/step-8.png)
+   <IdealImage img={require('/img/galxe-guide/step-8.png')} alt="Proof of Human step should be visible now" />
diff --git a/.../proof-of-humanity/guides/using-rarimos-proof-of-humanity-plugin-for-questn.mdx b/.../proof-of-humanity/guides/using-rarimos-proof-of-humanity-plugin-for-questn.mdx
@@ -2,6 +2,7 @@
 image: /img/questn-guide/opengraph.png
 description: Learn how to use Proof of Humanity to prevent bots from participating in your QuestN quests.
 ---
+import IdealImage from '@site/src/components/IdealImage';
 
 # Using Rarimo's Proof of Humanity Plugin for QuestN
 
@@ -18,24 +19,24 @@ No coding or prerequisites are required.
 
 1. Create a new quest:
 
-    ![New quest creation](/img/questn-guide/step-1.png)
+    <IdealImage img={require('/img/questn-guide/step-1.png')} alt="New quest creation" />
 
 1. Click on **Entries** tab:
 
-    ![Entries tab](/img/questn-guide/step-2.png)
+    <IdealImage img={require('/img/questn-guide/step-2.png')} alt="Entries tab" />
 
 1. Select the **Personhood** template:
 
-    ![Choosing  Rarimo template](/img/questn-guide/step-3.png)
+    <IdealImage img={require('/img/questn-guide/step-3.png')} alt="Choosing  Rarimo template" />
 
 1. Check the **Proof of Humanity(PoH)** checkbox:
 
-    ![Proof of Humanity Checkbox](/img/questn-guide/step-4.png)
+    <IdealImage img={require('/img/questn-guide/step-4.png')} alt="Proof of Humanity Checkbox" />
 
 1. Verify that the filled form looks like this and hit **Save Settings**:
 
-    ![Verify and save settings](/img/questn-guide/step-5.png)
+    <IdealImage img={require('/img/questn-guide/step-5.png')} alt="Verify and save settings" />
 
 1. After publishing the quest, you should see the **Proof of Humanity** step on the quest page:
 
-    ![Proof of Humanity step is visible now](/img/questn-guide/step-6.png)
+    <IdealImage img={require('/img/questn-guide/step-6.png')} alt="Proof of Humanity step is visible now" />
diff --git a/...m/proof-of-humanity/guides/using-rarimos-proof-of-humanity-plugin-for-zealy.mdx b/...m/proof-of-humanity/guides/using-rarimos-proof-of-humanity-plugin-for-zealy.mdx
@@ -3,6 +3,7 @@ image: /img/zealy-guide/opengraph.png
 description: Learn how to use Rarimo’s Proof of Humanity plugin for Zealy to prevent bots from participating in your quests.
 ---
 import OutLink from "@site/src/components/OutLink";
+import IdealImage from '@site/src/components/IdealImage';
 
 # Using Rarimo’s Proof of Humanity Plugin for Zealy
 
@@ -21,60 +22,60 @@ To add Proof of Human check, set up your quest using the instructions below. No
 
 1. Create a helper quest that leads users to the Proof of Humanity DApp:
 
-    ![Extra quest](/img/zealy-guide/step-1.png)
+    <IdealImage img={require('/img/zealy-guide/step-1.png')} alt="Extra quest" />
 
 1. Click on the **Mission** field:
 
-    ![Mission field](/img/zealy-guide/step-2.png)
+    <IdealImage img={require('/img/zealy-guide/step-2.png')} alt="Mission field" />
 
 1. Set the **Quest Type** field to **Empty**:
 
-    ![Quest type](/img/zealy-guide/step-3.png)
+    <IdealImage img={require('/img/zealy-guide/step-3.png')} alt="Quest type" />
 
 1. Turn on the **Auto-validate** toggle:
 
-    ![Auto-validate](/img/zealy-guide/step-4.png)
+    <IdealImage img={require('/img/zealy-guide/step-4.png')} alt="Auto-validate" />
 
 1. Put an instruction and the call-to-action link into the **Description** textbox:
 
     ```plain
     Prove your humanity at https://robotornot.rarimo.com to complete this quest!
     ```
 
-    ![Instruction to visit the DApp](/img/zealy-guide/step-5.png)
+    <IdealImage img={require('/img/zealy-guide/step-5.png')} alt="Instruction to visit the DApp" />
 
     Reach out to us at <OutLink href="https://discord.com/channels/1034798419614629908/1034798420713553966/1063164663216484473">Discord</OutLink> and provide the name of your company name and logo to get a link with a customized greeting like this:
 
-    ![Customized greeting](/img/poh-greeting.png)
+    <IdealImage img={require('/img/poh-greeting.png')} alt="Customized greeting" />
 
 1. Publish the helper quest:
 
-    ![Publishing the helper quest](/img/zealy-guide/step-6.png)
+    <IdealImage img={require('/img/zealy-guide/step-6.png')} alt="Publishing the helper quest" />
 
 1. Verify that the helper quest looks like this:
 
-    ![Helper quest](/img/zealy-guide/step-7.png)
+    <IdealImage img={require('/img/zealy-guide/step-7.png')} alt="Helper quest" />
 
 1. Create your main quest:
 
-    ![New quest creation](/img/zealy-guide/step-8.png)
+    <IdealImage img={require('/img/zealy-guide/step-8.png')} alt="New quest creation" />
 
 1. Select **NFT** in the  **Add Access** dropdown:
 
-    ![NFT access condition](/img/zealy-guide/step-9.png)
+    <IdealImage img={require('/img/zealy-guide/step-9.png')} alt="NFT access condition" />
 
 1. Click **Configure NFT**:
 
-    ![Configure NFT](/img/zealy-guide/step-10.png)
+    <IdealImage img={require('/img/zealy-guide/step-10.png')} alt="Configure NFT" />
 
 1. Put this address into the **Contract Address** field:
 
     ```
     0xaD7De01cb7eaAFf3a419A0a0a3133a964cD90373
     ```
 
-    ![Contract Address insertion](/img/zealy-guide/step-11.png)
+    <IdealImage img={require('/img/zealy-guide/step-11.png')} alt="Contract Address insertion" />
 
 1. After you are done with the rest of the details for your quest, it should look like this:
 
-    ![The final view](/img/zealy-guide/step-12.png)
+    <IdealImage img={require('/img/zealy-guide/step-12.png')} alt="The final view" />
diff --git a/docs/ecosystem/token-agnostic-payments/creating-nft-checkout-transactions.mdx b/docs/ecosystem/token-agnostic-payments/creating-nft-checkout-transactions.mdx
@@ -3,6 +3,7 @@ title: Creating NFT checkout transactions
 slug: /ecosystem/token-agnostic-payments/guide-creating-nft-checkout-transactions
 ---
 import OutLink from "@site/src/components/OutLink";
+import IdealImage from '@site/src/components/IdealImage';
 
 # Guide: Creating NFT checkout transactions
 
@@ -271,7 +272,7 @@ import {
 
 Now when the application loads, the pay button appears on the page, as in this screenshot:
 
-![The pay button](/img/sdk/RarimoPayButton.png)
+<IdealImage img={require('/img/sdk/RarimoPayButton.png')} alt="The pay button" />
 
 Here is a complete example: