iotaledger · Dr-Electron · May 31, 2024 · May 4, 2024 · May 28, 2024 · May 28, 2024
diff --git a/tutorials/pages/create-nft-with-iota-sdk.md → docs/tutorials/create-nft-with-iota-sdk.md b/tutorials/pages/create-nft-with-iota-sdk.md → docs/tutorials/create-nft-with-iota-sdk.md
@@ -58,7 +58,7 @@ Add your desired `*.jpg` file to the `wallet-setup` folder you created and renam
 
 For this tutorial we'll use the following image:
 
-![NFT Image](/nft-image.jpg)
+![NFT Image](/img/tutorials/nft-image.jpg)
 
 ---
 

diff --git a/tutorials/pages/hornet-inx-interaction.md → docs/tutorials/hornet-inx-interaction.md b/tutorials/pages/hornet-inx-interaction.md → docs/tutorials/hornet-inx-interaction.md
diff --git a/...rials/pages/proof-inclusion-of-a-block.md → docs/tutorials/proof-inclusion-of-a-block.md b/...rials/pages/proof-inclusion-of-a-block.md → docs/tutorials/proof-inclusion-of-a-block.md
@@ -16,7 +16,7 @@ Since the pattern assumes trusted access to the network, we recommend that both
 
 Please note that this pattern does not rely on a Permanode storing the entire Tangle history, as it was the case in almost all data-related use cases in the past. In comparison to a Permanode, storing selected blocks with their proof of inclusion to the Tangle, drastically reduces the node operator's storage requirements.
 
-![PoI-Architecture](/proof-inclusion-of-a-block-architecture.png)
+![PoI-Architecture](/img/tutorials/proof-inclusion-of-a-block-architecture.png)
 
 ---
 

diff --git a/...ages/send-shimmer-tokens-with-iota-sdk.md → ...ials/send-shimmer-tokens-with-iota-sdk.md b/...ages/send-shimmer-tokens-with-iota-sdk.md → ...ials/send-shimmer-tokens-with-iota-sdk.md
diff --git a/...ls/pages/setup_iota-js_for_development.md → ...utorials/setup_iota-js_for_development.md b/...ls/pages/setup_iota-js_for_development.md → ...utorials/setup_iota-js_for_development.md
@@ -180,7 +180,7 @@ Now, you can go to the [Shimmer Testnet Faucet Website](https://faucet.testnet.s
 The 'Request' button will become clickable as soon as a valid Shimmer address is recognized.
 
 :::
-![Shimmer Testnet Faucet](/shimmer-testnet-faucet.png)
+![Shimmer Testnet Faucet](/img/tutorials/shimmer-testnet-faucet.png)
 
 ---
 

diff --git a/tutorials/pages/shimmerevm-dapp-voting.md → docs/tutorials/shimmerevm-dapp-voting.md b/tutorials/pages/shimmerevm-dapp-voting.md → docs/tutorials/shimmerevm-dapp-voting.md
@@ -337,4 +337,4 @@ let tx = contractSigner.vote(i);
 ## Result
 
 If you followed everything above, it should look something like this:
-![Voting Demo](/voting-dapp.jpg 'Voting dApp UI')
+![Voting Demo](/img/tutorials/voting-dapp.jpg 'Voting dApp UI')
diff --git a/tutorials/pages/shimmerevm-hardhat.md → docs/tutorials/shimmerevm-hardhat.md b/tutorials/pages/shimmerevm-hardhat.md → docs/tutorials/shimmerevm-hardhat.md
@@ -48,7 +48,7 @@ The sample project used here comes from the [Hardhat Quickstart guide](https://h
 
 You should see the following prompt:
 
-![Hardhat Setup](/shimmer-hardhat-setup.png 'Hardhat Setup')
+![Hardhat Setup](/img/tutorials/shimmer-hardhat-setup.png 'Hardhat Setup')
 
 Choose the JavaScript project and go through these steps to compile, test and deploy the sample contract.
 

diff --git a/tutorials/pages/shimmerevm-setup.mdx → docs/tutorials/shimmerevm-setup.mdx b/tutorials/pages/shimmerevm-setup.mdx → docs/tutorials/shimmerevm-setup.mdx
@@ -30,7 +30,7 @@ To add the ShimmerEVM network manually to your Metamask use following info:
 - Currency Symbol: `SMR`
 - Explorer URL: https://explorer.evm.shimmer.network
 
-![Metamask Adding New Network](/metamask-shimmerevm-mainnet.png 'Metamask Adding New Network')
+![Metamask Adding New Network](/img/tutorials/metamask-shimmerevm-mainnet.png 'Metamask Adding New Network')
 
 Hit `Save` and wait for Metamask to connect to the network.
 

diff --git a/...rials/pages/shimmerevm-testnet-hardhat.md → docs/tutorials/shimmerevm-testnet-hardhat.md b/...rials/pages/shimmerevm-testnet-hardhat.md → docs/tutorials/shimmerevm-testnet-hardhat.md
@@ -48,7 +48,7 @@ The sample project used here comes from the [Hardhat Quickstart guide](https://h
 
 You should see the following prompt:
 
-![Hardhat Setup](/shimmer-hardhat-setup.png 'Hardhat Setup')
+![Hardhat Setup](/img/tutorials/shimmer-hardhat-setup.png 'Hardhat Setup')
 
 Choose the JavaScript project and go through these steps to compile, test and deploy the sample contract.
 

diff --git a/tutorials/pages/shimmerevm-testnet-setup.mdx → docs/tutorials/shimmerevm-testnet-setup.mdx b/tutorials/pages/shimmerevm-testnet-setup.mdx → docs/tutorials/shimmerevm-testnet-setup.mdx
@@ -27,7 +27,7 @@ To add the ShimmerEVM Testnet network manually to your Metamask use following in
 - Currency Symbol: `SMR`
 - Explorer URL: https://explorer.evm.testnet.shimmer.network
 
-![Metamask Adding New Network](/metamask-shimmerevm.png 'Metamask Adding New Network')
+![Metamask Adding New Network](/img/tutorials/metamask-shimmerevm.png 'Metamask Adding New Network')
 
 Alternatively, you can setup your own EVM Smart Contract Chain on top of the Shimmer network and provide a custom URL, which might look something like: `https://api.sc.testnet.shimmer.network/chain/rms1prr4r7az8e46qhagz5atugjm6x0xrg27d84677e3lurg0s6s76jr59dw4ls/evm/jsonrpc` as well as your own custom Chain ID.
 
@@ -38,10 +38,10 @@ At this point, our Metamask wallet is connected to the Shimmer EVM Testnet, but
 ## Get EVM Account Funded
 
 Open [EVM Toolkit](https://evm-toolkit.evm.testnet.shimmer.network/) and enter your EVM address as shown below:
-![EVM Toolkit](/evm-toolkit.png 'EVM Toolkit')
+![EVM Toolkit](/img/tutorials/evm-toolkit.png 'EVM Toolkit')
 
 In case, you've setup a custom EVM chain, you'd need to add your custom network first. Please add your own chain address and select the relevant network as shown below:
-![EVM Toolkit Custom Network](/evm-toolkit-custom-network.png 'EVM Toolkit Custom Network')
+![EVM Toolkit Custom Network](/img/tutorials/evm-toolkit-custom-network.png 'EVM Toolkit Custom Network')
 
 Once you're done, click on `Send funds` and wait for a few minutes for the faucet to process. You should start seeing some funds on your Metamask wallet soon.
 

diff --git a/tutorials/pages/wallet-setup.md → docs/tutorials/wallet-setup.md b/tutorials/pages/wallet-setup.md → docs/tutorials/wallet-setup.md
@@ -395,7 +395,7 @@ The 'Request' button will become clickable as soon as a valid Shimmer address is
 
 :::
 
-![Shimmer Testnet Faucet](/shimmer-testnet-faucet.png)
+![Shimmer Testnet Faucet](/img/tutorials/shimmer-testnet-faucet.png)
 
 ---
 

diff --git a/docusaurus.config.js b/docusaurus.config.js
@@ -4,6 +4,7 @@ const { create_doc_plugin } = require('./src/utils/config');
 const contentConfigs = require('./contentPlugins');
 const articleRedirectsFile = require('./articleRedirects');
 const switcherConfig = require('./switcherConfig');
+const tutorials = require('./tutorials');
 const {
   buildPluginsConfig,
   maintainPluginsConfig,
@@ -210,6 +211,7 @@ module.exports = async () => {
         ],
       ],
       plugins: [
+        ...tutorials,
         ...contentPlugins,
         [
           '@docusaurus/plugin-content-docs',
@@ -433,15 +435,6 @@ module.exports = async () => {
         ],
         'plugin-image-zoom',
       ],
-      stylesheets: [
-        {
-          href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css',
-          type: 'text/css',
-          integrity:
-            'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
-          crossorigin: 'anonymous',
-        },
-      ],
       themes: [
         'docusaurus-theme-openapi-docs',
         '@saucelabs/theme-github-codeblock',

diff --git a/src/utils/tags.ts b/src/utils/tags.ts
@@ -1,5 +1,5 @@
 //TODO tutorial.json should propably be a key-value dictionary
-import config from '../../tutorials/tags.json';
+import config from '../../tags.json';
 
 export interface Tag {
   label: string;

diff --git a/...tatic/IOTA-Smart-Contract-Tutorials-A.jpg → ...rials/IOTA-Smart-Contract-Tutorials-A.jpg b/...tatic/IOTA-Smart-Contract-Tutorials-A.jpg → ...rials/IOTA-Smart-Contract-Tutorials-A.jpg
diff --git a/...tatic/IOTA-Smart-Contract-Tutorials-B.jpg → ...rials/IOTA-Smart-Contract-Tutorials-B.jpg b/...tatic/IOTA-Smart-Contract-Tutorials-B.jpg → ...rials/IOTA-Smart-Contract-Tutorials-B.jpg
diff --git a/...tatic/IOTA-Smart-Contract-Tutorials-C.jpg → ...rials/IOTA-Smart-Contract-Tutorials-C.jpg b/...tatic/IOTA-Smart-Contract-Tutorials-C.jpg → ...rials/IOTA-Smart-Contract-Tutorials-C.jpg
diff --git a/...tatic/IOTA-Smart-Contract-Tutorials-D.jpg → ...rials/IOTA-Smart-Contract-Tutorials-D.jpg b/...tatic/IOTA-Smart-Contract-Tutorials-D.jpg → ...rials/IOTA-Smart-Contract-Tutorials-D.jpg
diff --git a/...tatic/IOTA-Smart-Contract-Tutorials-E.jpg → ...rials/IOTA-Smart-Contract-Tutorials-E.jpg b/...tatic/IOTA-Smart-Contract-Tutorials-E.jpg → ...rials/IOTA-Smart-Contract-Tutorials-E.jpg
diff --git a/...tatic/IOTA-Smart-Contract-Tutorials-F.jpg → ...rials/IOTA-Smart-Contract-Tutorials-F.jpg b/...tatic/IOTA-Smart-Contract-Tutorials-F.jpg → ...rials/IOTA-Smart-Contract-Tutorials-F.jpg
diff --git a/...tatic/IOTA-Smart-Contract-Tutorials-G.png → ...rials/IOTA-Smart-Contract-Tutorials-G.png b/...tatic/IOTA-Smart-Contract-Tutorials-G.png → ...rials/IOTA-Smart-Contract-Tutorials-G.png
diff --git a/.../static/connect-shimmerevm-and-deploy.png → ...torials/connect-shimmerevm-and-deploy.png b/.../static/connect-shimmerevm-and-deploy.png → ...torials/connect-shimmerevm-and-deploy.png
diff --git a/...connect-shimmerevm-testnet-and-deploy.png → ...connect-shimmerevm-testnet-and-deploy.png b/...connect-shimmerevm-testnet-and-deploy.png → ...connect-shimmerevm-testnet-and-deploy.png
diff --git a/...als/static/create-nft-with-wallet-lib.png → .../tutorials/create-nft-with-wallet-lib.png b/...als/static/create-nft-with-wallet-lib.png → .../tutorials/create-nft-with-wallet-lib.png
diff --git a/...als/static/evm-toolkit-custom-network.png → .../tutorials/evm-toolkit-custom-network.png b/...als/static/evm-toolkit-custom-network.png → .../tutorials/evm-toolkit-custom-network.png
diff --git a/tutorials/static/evm-toolkit.png → static/img/tutorials/evm-toolkit.png b/tutorials/static/evm-toolkit.png → static/img/tutorials/evm-toolkit.png
diff --git a/tutorials/static/hornet-inx-interaction.png → .../img/tutorials/hornet-inx-interaction.png b/tutorials/static/hornet-inx-interaction.png → .../img/tutorials/hornet-inx-interaction.png
diff --git a/...ls/static/metamask-shimmerevm-mainnet.png → ...tutorials/metamask-shimmerevm-mainnet.png b/...ls/static/metamask-shimmerevm-mainnet.png → ...tutorials/metamask-shimmerevm-mainnet.png
diff --git a/tutorials/static/metamask-shimmerevm.png → static/img/tutorials/metamask-shimmerevm.png b/tutorials/static/metamask-shimmerevm.png → static/img/tutorials/metamask-shimmerevm.png
diff --git a/tutorials/static/nft-image.jpg → static/img/tutorials/nft-image.jpg b/tutorials/static/nft-image.jpg → static/img/tutorials/nft-image.jpg
diff --git a/...oof-inclusion-of-a-block-architecture.png → ...oof-inclusion-of-a-block-architecture.png b/...oof-inclusion-of-a-block-architecture.png → ...oof-inclusion-of-a-block-architecture.png
diff --git a/...als/static/proof-inclusion-of-a-block.png → .../tutorials/proof-inclusion-of-a-block.png b/...als/static/proof-inclusion-of-a-block.png → .../tutorials/proof-inclusion-of-a-block.png
diff --git a/...atic/send-iota-tokens-with-javascript.svg → ...ials/send-iota-tokens-with-javascript.svg b/...atic/send-iota-tokens-with-javascript.svg → ...ials/send-iota-tokens-with-javascript.svg
diff --git a/...tic/send-shimmer-tokens-with-iota-sdk.png → ...als/send-shimmer-tokens-with-iota-sdk.png b/...tic/send-shimmer-tokens-with-iota-sdk.png → ...als/send-shimmer-tokens-with-iota-sdk.png
diff --git a/...c/send-shimmer-tokens-with-javascript.png → ...s/send-shimmer-tokens-with-javascript.png b/...c/send-shimmer-tokens-with-javascript.png → ...s/send-shimmer-tokens-with-javascript.png
diff --git a/.../static/setup_iota-js_for_development.png → ...torials/setup_iota-js_for_development.png b/.../static/setup_iota-js_for_development.png → ...torials/setup_iota-js_for_development.png
diff --git a/tutorials/static/shimmer-hardhat-setup.png → ...c/img/tutorials/shimmer-hardhat-setup.png b/tutorials/static/shimmer-hardhat-setup.png → ...c/img/tutorials/shimmer-hardhat-setup.png
diff --git a/tutorials/static/shimmer-testnet-faucet.png → .../img/tutorials/shimmer-testnet-faucet.png b/tutorials/static/shimmer-testnet-faucet.png → .../img/tutorials/shimmer-testnet-faucet.png
diff --git a/tutorials/static/shimmerevm-dapp-voting.jpg → .../img/tutorials/shimmerevm-dapp-voting.jpg b/tutorials/static/shimmerevm-dapp-voting.jpg → .../img/tutorials/shimmerevm-dapp-voting.jpg
diff --git a/tutorials/static/shimmerevm-hardhat.jpg → static/img/tutorials/shimmerevm-hardhat.jpg b/tutorials/static/shimmerevm-hardhat.jpg → static/img/tutorials/shimmerevm-hardhat.jpg
diff --git a/tutorials/static/voting-dapp.jpg → static/img/tutorials/voting-dapp.jpg b/tutorials/static/voting-dapp.jpg → static/img/tutorials/voting-dapp.jpg
diff --git a/tutorials/static/wallet-setup.png → static/img/tutorials/wallet-setup.png b/tutorials/static/wallet-setup.png → static/img/tutorials/wallet-setup.png
diff --git a/tutorials/static/wasp-setup-shimmer.png → static/img/tutorials/wasp-setup-shimmer.png b/tutorials/static/wasp-setup-shimmer.png → static/img/tutorials/wasp-setup-shimmer.png
diff --git a/tutorials/tags.json → tags.json b/tutorials/tags.json → tags.json
diff --git a/tutorials.js b/tutorials.js
@@ -0,0 +1,252 @@
+const pluginTutorial = require('./src/plugins/tutorial');
+
+module.exports = [
+  [
+    '@docusaurus/plugin-content-pages',
+    {
+      id: 'single-page-tutorials',
+      path: './docs/tutorials',
+      routeBasePath: '/tutorials',
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Run a Wasp Node',
+      description: 'In this tutorial you will learn how to run a wasp node.',
+      preview: '/img/tutorials/IOTA-Smart-Contract-Tutorials-A.jpg',
+      route: '/wasp/how-tos/running-a-node',
+      tags: ['text', 'video'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Run a Wasp Chain',
+      description: 'In this tutorial you will learn how to run a wasp chain.',
+      preview: '/img/tutorials/IOTA-Smart-Contract-Tutorials-B.jpg',
+      route: '/wasp/how-tos/setting-up-a-chain',
+      tags: ['text', 'video'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Deploy a WASM Smart Contract',
+      description:
+        'In this tutorial you will learn how to deploy a wasm smart contract.',
+      preview: '/img/tutorials/IOTA-Smart-Contract-Tutorials-C.jpg',
+      route: '/wasp/how-tos/setting-up-a-chain#deploying-a-wasm-contract',
+      tags: ['text', 'video'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Deploy a Solidity Smart Contract Using Remix + Metamask',
+      description:
+        'In this tutorial you will learn how to deploy a solidity smart contract on EVM using remix and metamask.',
+      preview: '/img/tutorials/IOTA-Smart-Contract-Tutorials-E.jpg',
+      route: '/isc/getting-started/tools#remix',
+      tags: ['text', 'video'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Generate a WASM Smart Contract Using the Schema Tool',
+      description:
+        'In this tutorial you will learn how to use schema tool to generate smart contract template code on rust and golang',
+      preview: '/img/tutorials/IOTA-Smart-Contract-Tutorials-G.png',
+      route: '/isc/schema/how-tos/usage',
+      tags: ['text', 'video'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title:
+        'Generate a WASM Smart Contract Using the Schema Tool in Typescript',
+      description:
+        'In this tutorial you will learn how to use schema tool to generate smart contract template code on typescript',
+      preview: '/img/tutorials/IOTA-Smart-Contract-Tutorials-G.png',
+      route: 'https://www.youtube.com/watch?v=P5HMgmY3DMM',
+      tags: ['video'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Interact with IOTA Node Extension (INX)',
+      description:
+        'In this tutorial you will learn how to interact with the IOTA Node Extension (INX) interface based on gRPC.',
+      preview: '/img/tutorials/hornet-inx-interaction.png',
+      route: 'tutorials/hornet-inx-interaction',
+      tags: ['text', 'getting-started', 'shimmer', 'js'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Tokenless Data Notarization',
+      description:
+        'Proove that a block was part of the past Tangle, even if this part of the Tangle was already pruned from network nodes.',
+      preview: '/img/tutorials/proof-inclusion-of-a-block.png',
+      route: 'tutorials/proof-inclusion-of-a-block',
+      tags: ['text', 'getting-started', 'js', 'client', 'shimmer'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Set Up a Testnet Address and Receive Funds From the Faucet',
+      description:
+        'In this tutorial you will learn how to create a seed and address with wallet.rs and receive testnet tokens from the faucet.',
+      preview: '/img/tutorials/wallet-setup.png',
+      route: 'tutorials/wallet-setup',
+      tags: ['text', 'getting-started', 'node_js', 'wallet', 'shimmer'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'How to Set Up iota.js for Development',
+      description:
+        'In this tutorial you will learn how to create a new project, generate a new address and receive x funds from the faucet.',
+      preview: '/img/tutorials/setup_iota-js_for_development.png',
+      route: 'tutorials/setup_iota-js_for_development',
+      tags: ['text', 'getting-started', 'client', 'shimmer', 'js'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title:
+        'Connect to Shimmer EVM Testnet and Deploy a Solidity Smart Contract',
+      description:
+        'In this tutorial, we will connect to Shimmer EVM Testnet, connect Metamask to it, get funded and deploy a smart contract in Solidity.',
+      preview: '/img/tutorials/connect-shimmerevm-testnet-and-deploy.png',
+      route: 'tutorials/shimmerevm-testnet-setup',
+      tags: [
+        'text',
+        'shimmer',
+        'solidity',
+        'getting-started',
+        'wasp',
+        'iscp',
+        'video',
+      ],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title:
+        'Tutorial - Deploy a Solidity Smart Contract on ShimmerEVM Testnet Using Hardhat',
+      description:
+        'In this tutorial, you will learn how to set up Hardhat and use it to build, test and deploy a simple smart contract on ShimmerEVM.',
+      preview: '/img/tutorials/shimmerevm-hardhat.jpg',
+      route: 'tutorials/shimmerevm-testnet-hardhat',
+      tags: [
+        'text',
+        'shimmer',
+        'solidity',
+        'shimmerevm',
+        'hardhat',
+        'iscp',
+        'video',
+      ],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Create a Simple Voting dApp on ShimmerEVM',
+      description:
+        'This tutorial will guide you as you write and deploy a voting dApp on ShimmerEVM. You can vote on a few options and view the results; all data will be stored on-chain.',
+      preview: '/img/tutorials/shimmerevm-dapp-voting.jpg',
+      route: 'tutorials/shimmerevm-dapp-voting',
+      tags: ['text', 'shimmer', 'solidity', 'iscp'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Set Up WASP locally Using Docker',
+      description:
+        'In this tutorial you will learn how to set up WASP and Hornet locally for Development setup.',
+      preview: '/img/tutorials/wasp-setup-shimmer.png',
+      route: 'https://youtu.be/ltem9Bh_4hA',
+      tags: ['text', 'shimmer', 'video', 'wasp', 'iscp'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Create an NFT with the IOTA SDK and IPFS in NodeJs',
+      description:
+        'In this tutorial you will learn how to create a NFT on the Shimmer network with iota-sdk and IPFS.',
+      preview: '/img/tutorials/create-nft-with-wallet-lib.png',
+      route: 'tutorials/create-nft-with-iota-sdk',
+      tags: [
+        'text',
+        'getting-started',
+        'node_js',
+        'iota-sdk',
+        'ipfs',
+        'shimmer',
+        'sdk',
+      ],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Send Shimmer Tokens with IOTA SDK in NodeJs',
+      description:
+        'In this tutorial you will learn how to send Shimmer Tokens with IOTA SDK in NodeJs.',
+      preview: '/img/tutorials/send-shimmer-tokens-with-iota-sdk.png',
+      route: 'tutorials/send-shimmer-tokens-with-iota-sdk',
+      tags: ['text', 'iota-sdk', 'sdk', 'getting-started', 'rust', 'shimmer'],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title: 'Connect to Shimmer EVM and Deploy a Solidity Smart Contract',
+      description:
+        'In this tutorial, we will connect to Shimmer EVM, connect Metamask to it, get funded and deploy a smart contract in Solidity.',
+      preview: '/img/tutorials/connect-shimmerevm-and-deploy.png',
+      route: 'tutorials/shimmerevm-setup',
+      tags: [
+        'text',
+        'shimmer',
+        'solidity',
+        'getting-started',
+        'wasp',
+        'iscp',
+        'video',
+      ],
+    },
+  ],
+  [
+    pluginTutorial,
+    {
+      title:
+        'Tutorial - Deploy a Solidity Smart Contract on ShimmerEVM Using Hardhat',
+      description:
+        'In this tutorial, you will learn how to set up Hardhat and use it to build, test and deploy a simple smart contract on ShimmerEVM.',
+      preview: '/img/tutorials/shimmerevm-hardhat.jpg',
+      route: 'tutorials/shimmerevm-hardhat',
+      tags: [
+        'text',
+        'shimmer',
+        'solidity',
+        'shimmerevm',
+        'hardhat',
+        'iscp',
+        'video',
+      ],
+    },
+  ],
+];
-Original file line number
+Diff line change
@@ Expand Up @@
     For this tutorial we'll use the following image:
-    ![NFT Image](/nft-image.jpg)
+    ![NFT Image](/img/tutorials/nft-image.jpg)
     ---
@@ Expand Down @@