Merge branch 'v3-hello-world' of github.com:iExecBlockchainComputing/documentation-tools into v3-hello-world

Author: akugone

.vitepress/theme/hello-world-style.css

@@ -281,96 +281,53 @@
 
 /* Solution note */
 
-.solution-note-purple {
-  background: linear-gradient(
-    135deg,
-    rgba(156, 39, 176, 0.1),
-    rgba(156, 39, 176, 0.05)
-  );
+.solution-note {
+  background: linear-gradient(135deg, #ce2c681a, #ce2c680d);
   border-radius: var(--border-radius);
   padding: 1.5rem;
   margin: 1.5rem 0;
-  border-left: 4px solid #9c27b0;
+  border-left: 4px solid #ce2c68;
 }
 
-.solution-note-purple p {
+.solution-note p {
   margin: 0;
   color: var(--vp-c-text-1);
   font-weight: 500;
 }
+.solution-note .highlight {
+  color: #ce2c68;
+  font-weight: 600;
+}
 
-.solution-note-purple .highlight {
+.solution-note.purple .highlight {
   color: #9c27b0;
   font-weight: 600;
 }
 
-.solution-note-blue {
-  background: linear-gradient(
-    135deg,
-    rgba(66, 165, 245, 0.1),
-    rgba(66, 165, 245, 0.05)
-  );
-  border-radius: var(--border-radius);
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  border-left: 4px solid #42a5f5;
+.solution-note.purple {
+  background: linear-gradient(135deg, #9c27b01a, #9c27b00d);
+  border-left: 4px solid #9c27b0;
 }
 
-.solution-note-blue p {
-  margin: 0;
-  color: var(--vp-c-text-1);
-  font-weight: 500;
+.solution-note.purple .highlight {
+  color: #9c27b0;
+}
+
+/* .solution-note-blue {
+  background: linear-gradient(135deg, #42a5f51a, #42a5f50d);
 }
 
 .solution-note-blue .highlight {
   color: #42a5f5;
-  font-weight: 600;
-}
+} */
 
-.solution-note-green {
-  background: linear-gradient(
-    135deg,
-    rgba(76, 175, 80, 0.1),
-    rgba(76, 175, 80, 0.05)
-  );
-  border-radius: var(--border-radius);
-  padding: 1.5rem;
-  margin: 1.5rem 0;
+.solution-note.green {
+  background: linear-gradient(135deg, #4caf501a, #4caf500d);
   border-left: 4px solid #4caf50;
 }
 
-.solution-note-green p {
-  margin: 0;
-  color: var(--vp-c-text-1);
-  font-weight: 500;
-}
-
-.solution-note-green .highlight {
+.solution-note.green .highlight {
   color: #4caf50;
-  font-weight: 600;
-}
-
-.solution-note {
-  background: linear-gradient(
-    135deg,
-    rgba(206, 44, 104, 0.1),
-    rgba(206, 44, 104, 0.05)
-  );
-  border-radius: var(--border-radius);
-  padding: 1.5rem;
-  margin: 1.5rem 0;
-  border-left: 4px solid #ce2c68;
-}
-
-.solution-note p {
-  margin: 0;
-  color: var(--vp-c-text-1);
-  font-weight: 500;
-}
-
-.solution-note .highlight {
-  color: #ce2c68;
-  font-weight: 600;
 }
 
 /* Features grid */

components/CouponCode.vue

@@ -3,10 +3,10 @@
     <div v-if="!walletAddress" class="connect-section">
       <div class="connect-message">
         <p>
-          <b
-            >🔑 Get your unique coupon code (it will be asked during the voucher
-            claim process)</b
-          >
+          <b>
+            🔑 Get your unique coupon code (it will be asked during the voucher
+            claim process)
+          </b>
         </p>
       </div>
       <MetamaskButton />

components/GrantAccess.vue

@@ -50,21 +50,23 @@
 
       <p class="address-label">
         Authorized user
-        <span class="note-text"
-          >(As we don't have Bob wallet we use the Zero address to grant access
-          to all users for the demo)</span
-        >:
+        <span class="note-text">
+          (As we don't have Bob wallet we use the Zero address to grant access
+          to all users for the demo)
+        </span>
+        :
       </p>
       <div class="address-container">
         {{ '0x0000000000000000000000000000000000000000' }}
       </div>
 
       <p class="address-label">
         Dataset Price
-        <span class="note-text"
-          >(oohh interesting it means that we could set a price to the protected
-          data)</span
-        >:
+        <span class="note-text">
+          (oohh interesting it means that we could set a price to the protected
+          data)
+        </span>
+        :
       </p>
       <div class="address-container">{{ grantedAccess.datasetprice }}</div>
     </div>

components/ProtectData.vue

@@ -2,9 +2,10 @@
   <div class="protect-data-container">
     <div class="wallet-section">
       Connect Your Wallet
-      <a href="https://chainlist.org/?search=bellecour" target="_blank"
-        >(iExec network)</a
-      >:
+      <a href="https://chainlist.org/?search=bellecour" target="_blank">
+        (iExec network)
+      </a>
+      :
       <div class="ml-2 inline-block">
         <MetamaskButton @connected="onWalletConnected" />
       </div>
@@ -46,9 +47,7 @@
       <p class="explorer-link">
         You can check it on
         <a
-          :href="
-            'https://explorer.iex.ec/bellecour/dataset/' + protectedDataAddress
-          "
+          :href="`https://explorer.iex.ec/bellecour/dataset/${protectedDataAddress}`"
           target="_blank"
           rel="noopener noreferrer"
         >

overview/helloWorld/0-hello.md

@@ -3,11 +3,11 @@
 > Reading time 🕒 2 mins
 
 <div class="hero">
-  <div >
+  <div>
     <h2>Start Your Web3 Privacy Journey</h2>
     <p>And learn how to build Privacy-preserving decentralized applications (dApps) with iExec in this interactive guide.</p>
     <div class="hero-time">
-      <span class="hero-time-badge ">☕ 30 minutes journey</span>
+      <span class="hero-time-badge">☕ 30 minutes journey</span>
       <p>Perfect for hackathon 😊</p>
     </div>
   </div>
@@ -84,7 +84,7 @@ Before you begin, make sure you have:
 
   <div class="requirement-item">
     <div class="req-title">💻 Code Editor <div class="tooltip-container"><svg class="info-icon" viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M13 7.5a1 1 0 11-2 0 1 1 0 012 0zm-3 3.75a.75.75 0 01.75-.75h1.5a.75.75 0 01.75.75v4.25h.75a.75.75 0 010 1.5h-3a.75.75 0 010-1.5h.75V12h-.75a.75.75 0 01-.75-.75z"/><path fill="currentColor" fill-rule="evenodd" d="M12 1C5.925 1 1 5.925 1 12s4.925 11 11 11 11-4.925 11-11S18.075 1 12 1zM2.5 12a9.5 9.5 0 1119 0 9.5 9.5 0 01-19 0z"/></svg><span class="tooltip-text">If you want to have a more detailed look at the iAppcode, you can use this editor</span></div></div>
-    <a target="_blank" href="https://code.visualstudio.com/"> Download →</a>
+    <a target="_blank" href="https://code.visualstudio.com/">Download →</a>
   </div>
 
   <div class="requirement-item">
@@ -103,7 +103,7 @@ Before you begin, make sure you have:
 
 </div>
 
-<div class="solution-note-green">
+<div class="solution-note green">
   <p>Need help setting up or got some questions? Join our <a target="_blank" href="https://discord.gg/tJH8YfSB">Discord Community</a> for support!</p>
 </div>
 

overview/helloWorld/1-overview.md

@@ -5,7 +5,7 @@
 <div class="hero">
   <div class="hero-content">
     <h2>Let's start with the basics</h2>
-     <p>and explore how iExec can help you build Privacy-preserving applications and securely manage sensitive data.</p>
+    <p>and explore how iExec can help you build Privacy-preserving applications and securely manage sensitive data.</p>
   </div>
 
 </div>
@@ -54,7 +54,7 @@
   </div>
 </div>
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p>This is where <span class="highlight">iExec</span> comes in! We provide tools to easily add <span class="highlight">privacy</span> and <span class="highlight">monetization</span> features into your dApp.</p>
 </div>
 
@@ -70,9 +70,9 @@ Execution Environment (TEE)</a></span> and
 <span class="highlight"><a target="_blank" href="https://www.iex.ec/academy/iexec-decentralized-confidential-computing">Confidential
 Computing</a></span> technologies.
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p>Our technology allows users to control the <span class="highlight">ownership</span>,
-<span class="highlight">confidentiality</span>, and <span class="highlight">monetization</span> of their data and digital assets within the <span class="highlight">Web3</span> ecosystem.</p>
+  <span class="highlight">confidentiality</span>, and <span class="highlight">monetization</span> of their data and digital assets within the <span class="highlight">Web3</span> ecosystem.</p>
 </div>
 
 ## 🔒 What are the three key elements?
@@ -98,7 +98,7 @@ iExec combines three fundamental elements that work together seamlessly:
 - Regain ownership of your data
 - Provides transparent governance rules for data access
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p>By merging <span class="highlight">blockchain technology</span> with <span class="highlight">confidential computing</span>, we've pioneered <span class="highlight"><a target="_blank" href="https://www.iex.ec/academy/iexec-decentralized-confidential-computing">DeCC</a></span> (Decentralized Confidential Computing) to take <span class="highlight">privacy</span> and <span class="highlight">security</span> to the next level in <span class="highlight">Web3</span> ecosystems.</p>
 </div>
 
@@ -217,7 +217,7 @@ And many other use cases...
   </div>
 </div>
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p>In the next chapters, we'll follow Alice and Bob's journey step by step, starting with how Alice can <span class="highlight">protect her sensitive data</span> and then how Bob can <span class="highlight">build and deploy a confidential app</span> to process it.</p>
 </div>
 
@@ -248,11 +248,6 @@ And many other use cases...
 
 </div>
 
-<div class="solution-note-green">
+<div class="solution-note green">
   <p>Now that you understand the fundamentals, let's dive into protecting your first piece of data! with Alice!</p>
 </div>
-
-<style>
-
-
-</style>

overview/helloWorld/2-protectData.md

@@ -13,7 +13,7 @@ import ProtectData from '../../components/ProtectData.vue';
   </div>
 </div>
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p><strong>Protected Data</strong> is encrypted data that remains confidential throughout its entire lifecycle - during storage, transfer and processing.</p>
 </div>
 
@@ -23,7 +23,7 @@ DataProtector is a developer tool built on top of our technology. It helps
 developers easily add data protection, management, and monetization features to
 their dApps with these key features:
 
-<div >
+<div>
   <p>🔐 <strong>Data Privacy and Security</strong></p>
   <p>Utilizes end-to-end encryption and decentralized storage (<a href="https://ipfs.tech/" target="_blank">IPFS</a>) to ensure protection and confidentiality, leveraging advanced confidential computing technology.</p>
 </div>
@@ -38,7 +38,7 @@ their dApps with these key features:
     <p>Features an SDK for easy integration into your DApp, enhancing functionality and user experience.</p>
 </div>
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p> DataProtector interacts with iExec's <a href="https://chainlist.org/?search=bellecour" target="_blank">Bellecour sidechain</a>, which is gasless, meaning you can use it completely free without needing any tokens!</p>
 </div>
 
@@ -50,7 +50,7 @@ their dApps with these key features:
 
 ## 🧩 What happened under the hood
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p>You won't believe how easy it is to protect your data with DataProtector. Just a few lines of code, and you're done!</p>
 </div>
 
@@ -110,7 +110,7 @@ Decentralized confidential computing might sound complex, but we've made it
 simple through our developer tools.
 
 <div>
-  <div >
+  <div>
     <p><strong>1. Install the Developer Tool</strong></p>
     <p>Run the install command:</p>
 
@@ -119,14 +119,16 @@ npm install @iexec/dataprotector
 ```
 
   </div>
-  <div >
+  <div>
     <p><strong>2. Import and Initialize it in your project</strong></p>
-Import the tool
+    Import the tool
 
 ```typescript
 import { Address, IExecDataProtector } from '@iexec/dataprotector';
 ```
-create a new instance and call the methods you need
+
+Create a new instance and call the methods you need
+
   </div>
 </div>
 
@@ -139,7 +141,7 @@ const { address: protectedDataAddress } = await dataProtector.protectData({
 });
 ```
 
-<div class="solution-note-purple">
+<div class="solution-note purple">
   <p>Check out our <a target="_blank" href="https://codesandbox.io/p/github/iExecBlockchainComputing/dataprotector-sandbox/main?file=%2Fsrc%2Fmain.tsx%3A18%2C7">code sandbox</a> for ready-to-use examples!</p>
 </div>
 
@@ -164,6 +166,6 @@ const { address: protectedDataAddress } = await dataProtector.protectData({
   </div>
 </div>
 
-<div class="solution-note-green">
+<div class="solution-note green">
   <p>In the next chapter, we'll show you how to build, deploy, and run an iApp to process your protected data. Let's go! 🚀</p>
 </div>