Skip to content

Commit

Permalink
Refactor solution-note styles in documentation: unify class names and…
Browse files Browse the repository at this point in the history 
… update CSS for improved consistency and readability.
  • Loading branch information
@ErwanDecoster
ErwanDecoster committed Jan 23, 2025
1 parent 96e4cb3 commit 8d5f14a
Show file tree
Hide file tree
Showing 7 changed files with 46 additions and 89 deletions.
87 changes: 22 additions & 65 deletions .vitepress/theme/hello-world-style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
2 changes: 1 addition & 1 deletion overview/helloWorld/0-hello.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
10 changes: 5 additions & 5 deletions overview/helloWorld/1-overview.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -70,7 +70,7 @@ 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>
</div>
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -248,7 +248,7 @@ 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>

Expand Down
10 changes: 5 additions & 5 deletions overview/helloWorld/2-protectData.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>

Expand All @@ -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>

Expand Down Expand Up @@ -139,7 +139,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>

Expand All @@ -164,6 +164,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>
14 changes: 7 additions & 7 deletions overview/helloWorld/3-buildIApp.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
</div>
</div>

<div class="solution-note-purple">
<p>An iApp runs in a Trusted Execution Environment (TEE), it can process data in a secure environment.</p>
<div class="solution-note purple">
<p>An iApp runs in a Trusted Execution Environment (TEE), it can process data in a secure environment.</p>
</div>

This guide will help you set up, test, deploy and run your iApp using the
Expand Down Expand Up @@ -48,7 +48,7 @@ Before getting started, ensure you have the following:
</div> -->
</div>

<div class="solution-note-purple">
<div class="solution-note purple">
<p>Don't worry! All passwords and private keys used in this tutorial stay on your machine and aren’t shared with anyone. You’ll only need them to run the <code>iApp run</code> command.</p>
</div>

Expand Down Expand Up @@ -180,7 +180,7 @@ default protectedData mock.
iapp test --protectedData default
```

<div class="solution-note-purple">
<div class="solution-note purple">
<p>You can check how args and protectedData are processed in <code> src/app.js</code></p>
</div>

Expand Down Expand Up @@ -218,7 +218,7 @@ Once you have your token, you can deploy your iApp using the following command:
iapp deploy
```

<div class="solution-note-purple">
<div class="solution-note purple">
<p>📝 Make sure to save your <span class="highlight">iApp address</span> after deployment - you'll need it later!</p>
<p>You can find your iApp address in the <code>iexec-app.json</code> file in your project folder.</p>
<br>
Expand All @@ -244,7 +244,7 @@ allowing it to run securely in a **Trusted Execution Environment (TEE)** for
**confidential computing**. If you want to explore further, you can check the
protocol documentation [here](https://protocol.docs.iex.ec/).

<div class="solution-note-green">
<div class="solution-note green">
<p>🎉 Congratulations! You've successfully deployed and run your first iApp on iExec. This is a significant milestone - your application is now ready to securely process confidential data in a trusted environment.</p>
</div>

Expand Down Expand Up @@ -277,6 +277,6 @@ protocol documentation [here](https://protocol.docs.iex.ec/).
</div>
</div>

<div class="solution-note-green">
<div class="solution-note green">
<p>Next up: Alice will learn how to authorize the iApp and Bob to access and use her protected data! 🚀</p>
</div>
8 changes: 4 additions & 4 deletions overview/helloWorld/4-manageDataAccess.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import GrantAccess from '../../components/GrantAccess.vue';
</div>
</div>

<div class="solution-note-purple">
<div class="solution-note purple">
<p>When you protect your data, you can authorize specific <span class="highlight">users</span> and <span class="highlight">applications</span> to access it. This means an authorized user will be able to use an authorized iApp to compute your protected data.</p>
</div>

Expand Down Expand Up @@ -77,7 +77,7 @@ const grantedAccess = await dataProtectorCore.grantAccess({
</div>
</div>

<div class="solution-note-purple">
<div class="solution-note purple">
<p>As we don't have the Bobs wallet address, we'll use the Zero address to grant access to all users.</p>
</div>

Expand All @@ -89,7 +89,7 @@ You're now ready to process your protected data in a trusted environment:
iapp run <my-iapp-address> --protectedData <protectedData-address>
```

<div class="solution-note-green">
<div class="solution-note green">
<p>🎉 Congratulations! You've successfully completed the core workflow of protecting and processing data with iExec!</p>
</div>

Expand Down Expand Up @@ -117,6 +117,6 @@ For more technical details, see the
[DataProtector Sharing](https://beta.tools.docs.iex.ec/tools/dataProtector/dataProtectorSharing.html)
documentation.

<div class="solution-note-green">
<div class="solution-note green">
<p>You have one more step to complete the journey! and it's the easy one, let's go to the bonus chapter</p>
</div>
4 changes: 2 additions & 2 deletions overview/helloWorld/5-bonusChapter.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,8 @@
</a>
</div>

<div class="solution-note-green">
<p>Thank you for being part of the iExec journey! We can't wait to see what you'll build next! 🚀</p>
<div class="solution-note green">
<p>Thank you for being part of the iExec journey! We can't wait to see what you'll build next! 🚀</p>
</div>

<style>
Expand Down

0 comments on commit 8d5f14a

Please sign in to comment.