Merge branch 'feature/add-hello-world' of https://github.com/iExecBlockchainComputing/documentation into feature/add-hello-world

Author: Le-Caignec

README.md

@@ -1,40 +1,151 @@
-# iExec Tools documentation
+# iExec Documentation
 
-This is the source repository of the [iExec documentation](https://docs.iex.ec)
+## 📋 Prerequisites
 
-## Prerequisites
+- **Node.js**: Version 22 or higher
+- **npm**: Comes bundled with Node.js
 
-- Node 22
+## ⚙️ Configuration
 
-## Run app
+### Environment Variables (Optional)
 
+Some features of the application require environment variables. This
+configuration is optional and only needed if you plan to work with Hello World
+pages.
+
+Create a `.env` file at the root of the project using the provided
+`.env.example` as a template:
+
+```bash
+cp .env.example .env
+```
+
+Then fill in the required values:
+
+```env
+VITE_REOWN_PROJECT_ID=your_project_id_here
 ```
+
+#### Getting your VITE_REOWN_PROJECT_ID
+
+To obtain your `VITE_REOWN_PROJECT_ID`, follow these steps:
+
+1. Go to [https://dashboard.reown.com/](https://dashboard.reown.com/)
+2. Create an account if you don't have one already
+3. Once logged in, click on "Create Project" or "New Project"
+4. Fill in your project information:
+   - Project name
+   - Description (optional)
+   - Website URL (optional)
+5. Once the project is created, copy the "Project ID" displayed in the project
+   details
+6. Paste this ID in your `.env` file as the value for `VITE_REOWN_PROJECT_ID`
+
+## 🚀 Getting Started
+
+### Installation
+
+Install the project dependencies:
+
+```bash
 npm install
+```
+
+### Development Server
+
+Start the development server:
+
+```bash
 npm run dev
 ```
 
-## Contributing
+The documentation site will be available at `http://localhost:3000` (or the port
+shown in your terminal).
+
+### Building for Production
+
+To build the project for production:
+
+```bash
+npm run build
+```
+
+## 🤝 Contributing
+
+We welcome contributions to improve the iExec documentation! Please follow these
+steps to contribute:
+
+### 1. Fork the Repository
+
+Fork this repository and ensure you're working on the `main` branch:
+
+[![fork-button](./src/public/fork-button.png)](https://github.com/iExecBlockchainComputing/documentation/fork)
+
+### 2. Set Up Your Development Environment
+
+1. Clone your forked repository:
+
+   ```bash
+   git clone https://github.com/YOUR_USERNAME/documentation.git
+   cd documentation
+   ```
+
+2. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+3. Start the development server:
+   ```bash
+   npm run dev
+   ```
+
+### 3. Make Your Changes
+
+1. Create a new branch for your feature/fix:
+
+   ```bash
+   git checkout -b feature/your-feature-name
+   ```
+
+2. Make your changes to the documentation
+3. Test your changes locally to ensure they work as expected
+
+### 4. Submit Your Changes
+
+1. Stage and commit your changes with a descriptive message:
 
-To keep the contribution process smooth, please read this small guide.
+   ```bash
+   git add .
+   git commit -m "Add: descriptive commit message"
+   ```
 
-### Fork
+2. Push your changes to your forked repository:
 
-Fork the repo and be sure to be on `main` branch
+   ```bash
+   git push origin feature/your-feature-name
+   ```
 
-[![fork-button](./public/fork-button.png)](https://github.com/iExecBlockchainComputing/documentation/fork)
+3. Open a pull request from your feature branch to our `main` branch
 
-### Contribute
+### 5. Review Process
 
-Apply your changes on your forked branch, stage them and commit them with a
-descriptive commit message.
+> **💡 Tips:**
+>
+> - You can open a draft pull request and mark it as "Ready for review" once
+>   you're satisfied with the preview
+> - All pull requests are reviewed by our team before being merged
+> - Feel free to ask questions in the pull request if you need clarification
 
-Push your changes to your forked branch.
+## 📄 License
 
-### PR time
+This project is part of the iExec ecosystem. Please refer to the main iExec
+repositories for licensing information.
 
-Open a pull request from your forked branch to our `main` branch.
+## 🆘 Support
 
-> _**Tips:**_  
-> You can open a draft pull request and set it to "Ready for review" once you
-> are happy with the preview. Opened pull requests will be reviewed by the team
-> and merged once approved.
+- 📖 [Documentation](https://docs.iex.ec)
+- 💬 [Discord Community](https://discord.com/invite/pbt9m98wnU)
+- 🐛
+  [Issue Tracker](https://github.com/iExecBlockchainComputing/documentation/issues)

src/components/AddressChip.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="bg-grey-800 flex shrink-0 items-center gap-2 rounded-[30px] px-3 py-2"
+    class="flex shrink-0 items-center gap-2 rounded-[30px] bg-gray-800 px-3 py-2 text-white"
   >
     <div class="text-primary text-sm font-medium">{{ displayAddress }}</div>
     <div

src/components/ui/Button.vue

@@ -2,7 +2,7 @@
   <component
     :is="as || 'button'"
     :type="as === 'button' || !as ? 'button' : undefined"
-    class="inline-flex h-11 cursor-pointer items-center justify-center rounded-lg border-none bg-[#fcd15a]! px-5 py-2 text-base font-medium text-[#1e1e1e]! no-underline! transition-all! duration-200 hover:-translate-y-0.5 hover:transform hover:bg-[#ffb74d]! hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+    class="inline-flex h-11 cursor-pointer items-center justify-center rounded-lg border-none bg-[#fcd15a]! px-5! py-2 text-base font-medium text-[#1e1e1e]! no-underline! transition-all! duration-200 hover:-translate-y-0.5 hover:transform hover:bg-[#ffb74d]! hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
     v-bind="$attrs"
   >
     <slot />

src/modules/helloWorld/GrantAccess.vue

@@ -27,7 +27,6 @@
       <Button
         :disabled="!isWalletConnected || isLoadingGrant"
         @click="grantAccess"
-        class="w-full"
         data-track="grantAccess"
       >
         {{ isLoadingGrant ? 'Processing...' : 'Grant Access' }}

src/modules/helloWorld/ProtectData.vue

@@ -38,7 +38,6 @@
       <Button
         :disabled="!isWalletConnected || isLoadingProtect"
         @click="protectData"
-        class="w-full"
         data-track="protectData"
       >
         {{ isLoadingProtect ? 'Processing...' : 'Protect Data' }}

src/overview/helloWorld.md

@@ -90,29 +90,29 @@ Before you begin, make sure you have:
       🦊 Ethereum Wallet 
       <InfoIcon tooltip="Required to interact with iExec sidechain Bellecour features, manage your data access permissions, and handle transactions on the iExec platform" />
     </div>
-    <a target="_blank" href="https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn" class="no-underline text-sm ml-auto hover:underline">Metamask Download →</a>
+    <a target="_blank" href="https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn" class="no-underline! text-sm ml-auto hover:underline!">Metamask Download →</a>
   </div>
   <div class="flex items-center gap-4 text-left">
     <div class="flex items-center gap-1 flex-1 text-sm font-medium">
       📦 Node.js v20+ 
       <InfoIcon tooltip="Required runtime environment for running JavaScript code and managing project dependencies" />
     </div>
-    <a target="_blank" href="https://nodejs.org/en/" class="no-underline text-sm ml-auto hover:underline">Download →</a>
+    <a target="_blank" href="https://nodejs.org/en/" class="no-underline! text-sm ml-auto hover:underline!">Download →</a>
   </div>
    <div class="flex items-center gap-4 text-left">
     <div class="flex items-center gap-1 flex-1 text-sm font-medium">
       🐳 Docker installed 
       <InfoIcon tooltip="Docker is essential for creating isolated containers that package your iExec applications with all dependencies. This ensures consistent and secure execution across different environments, especially in TEEs (Trusted Execution Environments)" />
     </div>
-    <a target="_blank" href="https://docker.com/" class="no-underline text-sm ml-auto hover:underline">Download →</a>
+    <a target="_blank" href="https://docker.com/" class="no-underline! text-sm ml-auto hover:underline!">Download →</a>
   </div>
 
   <div class="flex items-center gap-4 text-left">
     <div class="flex items-center gap-1 flex-1 text-sm font-medium">
       🐳 DockerHub Account 
       <InfoIcon tooltip="Needed to publish and manage your iExec applications in containers for secure deployment" />
     </div>
-    <a target="_blank" href="https://hub.docker.com/" class="no-underline text-sm ml-auto hover:underline">Sign Up →</a>
+    <a target="_blank" href="https://hub.docker.com/" class="no-underline! text-sm ml-auto hover:underline!">Sign Up →</a>
   </div>
 </div>
 

src/overview/helloWorld/2-protectData.md

@@ -1,5 +1,5 @@
 <script setup>
-// import ProtectData from '../../modules/helloWorld/ProtectData.vue';
+import ProtectData from '../../modules/helloWorld/ProtectData.vue';
 </script>
 
 # 🛡️ Let's protect data

src/overview/helloWorld/3-buildIApp.md

@@ -25,20 +25,20 @@ Before getting started, make sure you have:
     <div class="flex items-center gap-1 flex-1 text-sm font-medium">
       📦 Node.js v20+
     </div>
-    <a target="_blank" href="https://nodejs.org/en/" class="no-underline text-sm ml-auto hover:underline">Download →</a>
+    <a target="_blank" href="https://nodejs.org/en/" class="no-underline! text-sm ml-auto hover:underline!">Download →</a>
   </div>
    <div class="flex items-center gap-4 text-left">
     <div class="flex items-center gap-1 flex-1 text-sm font-medium">
       🐳 Docker installed
     </div>
-    <a target="_blank" href="https://docker.com/" class="no-underline text-sm ml-auto hover:underline">Download →</a>
+    <a target="_blank" href="https://docker.com/" class="no-underline! text-sm ml-auto hover:underline!">Download →</a>
   </div>
 
   <div class="flex items-center gap-4 text-left">
     <div class="flex items-center gap-1 flex-1 text-sm font-medium">
       🐳 DockerHub Account
     </div>
-    <a target="_blank" href="https://hub.docker.com/" class="no-underline text-sm ml-auto hover:underline">Sign Up →</a>
+    <a target="_blank" href="https://hub.docker.com/" class="no-underline! text-sm ml-auto hover:underline!">Sign Up →</a>
   </div>
 </div>
 

src/overview/helloWorld/4-manageDataAccess.md

@@ -1,9 +1,8 @@
 <script setup>
-//TODO: Fix it
-// import GrantAccess from '../../modules/helloWorld/GrantAccess.vue';
-// import { useWalletConnection } from '../../hooks/useWalletConnection.vue';
+import GrantAccess from '../../modules/helloWorld/GrantAccess.vue';
+import { useWalletConnection } from '../../hooks/useWalletConnection.vue';
 
-// const { protectedDataAddress } = useWalletConnection();
+const { protectedDataAddress } = useWalletConnection();
 </script>
 
 # 🔑 Manage Data Access