Skip to content

Commit 9a12b0c

Browse files
Le-CaignecLe-Caignec
committed
feat: update sidebar and enhance documentation for iApp setup
1 parent 9ac4d82 commit 9a12b0c

File tree

4 files changed

+294
-6
lines changed

4 files changed

+294
-6
lines changed

‎.vitepress/sidebar.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -479,7 +479,7 @@ export function getSidebar() {
479479
],
480480
},
481481
{
482-
text: '💬 Web3Telegram <span class="VPBadge warning" style="margin-left: 8px; margin-bottom: -1px; transform: translateY(-1px);">alpha</span>',
482+
text: '💬 Web3Telegram',
483483
link: '/use-iapp/web3telegram',
484484
collapsed: true,
485485
items: [

‎src/build-iapp/guides/build-&-deploy.md‎

Lines changed: 56 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@ description:
66

77
# Create and Deploy an iApp
88

9+
iApps (iExec Applications) are decentralized applications that run on the iExec
10+
network. They leverage confidential computing to ensure data privacy and
11+
security while providing scalable off-chain computation.
12+
13+
## About iApp Generator
14+
915
Bootstrap TEE-compatible applications in minutes without any hardcoding skills,
1016
iApp Generator handles all the low-level complexity for you.
1117

@@ -20,13 +26,59 @@ iApp Generator handles all the low-level complexity for you.
2026
- **Check and deploy iApps quickly** - iApp Generator checks that your iApp
2127
complies with the iExec Framework and streamlines its deployment.
2228

29+
## Prerequisites
30+
31+
Before getting started, make sure you have the following installed:
32+
33+
- **Node.js** (version 18 or higher) - [Download here](https://nodejs.org/)
34+
- **Docker** - [Download here](https://www.docker.com/get-started)
35+
- **Docker Hub account** - [Sign up here](https://hub.docker.com/) (required for
36+
deployment)
37+
38+
## Installation
39+
40+
First, install the iApp Generator CLI tool using your preferred package manager:
41+
42+
::: code-group
43+
44+
```sh [npm]
45+
npm install -g @iexec/iapp
46+
```
47+
48+
```sh [yarn]
49+
yarn global add @iexec/iapp
50+
```
51+
52+
```sh [pnpm]
53+
pnpm add -g @iexec/iapp
54+
```
55+
56+
```sh [bun]
57+
bun add -g @iexec/iapp
58+
```
59+
60+
:::
61+
62+
<script setup>
63+
import CLIDemo from '../../components/CLIDemo.vue';
64+
</script>
65+
66+
## Quick Start
67+
68+
Once installed, you can create and deploy your first iApp. The CLI will guide
69+
you through an interactive setup process:
70+
71+
<CLIDemo />
72+
73+
After the interactive setup, continue with development and deployment:
74+
2375
```bash
24-
# Create your iApp (Python or Node.js supported)
25-
iapp init my-privacy-app
26-
cd my-privacy-app
76+
# Navigate to your project
77+
cd hello-world
2778

2879
# Develop and test locally (simulates TEE environment)
2980
iapp test
81+
3082
# Deploy to the network
3183
iapp deploy
3284
```
@@ -91,7 +143,7 @@ update_oracle_contract(average_price)
91143

92144
:::
93145

94-
**Automated Transactions iApp**
146+
### Automated Transactions iApp
95147

96148
This iApp automates monthly payments using protected payment details, so
97149
financial information remains private.

‎src/components/CLIDemo.vue‎

Lines changed: 236 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,236 @@
1+
<template>
2+
<div class="my-8">
3+
<div class="overflow-hidden rounded-lg bg-gray-900 font-mono shadow-2xl">
4+
<!-- Terminal Header -->
5+
<div class="flex items-center gap-3 bg-gray-800 px-4 py-3">
6+
<div class="flex gap-2">
7+
<div class="h-3 w-3 rounded-full bg-red-500"></div>
8+
<div class="h-3 w-3 rounded-full bg-yellow-500"></div>
9+
<div class="h-3 w-3 rounded-full bg-green-400"></div>
10+
</div>
11+
<div class="text-sm font-medium text-gray-400">Terminal</div>
12+
</div>
13+
14+
<!-- Terminal Content -->
15+
<div
16+
class="max-h-96 overflow-y-auto p-5 text-sm leading-relaxed text-white"
17+
ref="terminalContent"
18+
>
19+
<!-- Initial Command -->
20+
<div class="mb-2">
21+
<span class="font-bold text-green-400">$ </span>
22+
<span class="ml-1 text-white">iapp init</span>
23+
</div>
24+
25+
<!-- ASCII Art -->
26+
<div v-if="showStep >= 1" class="my-4 font-mono text-xs text-blue-400">
27+
<pre>{{ asciiArt }}</pre>
28+
</div>
29+
30+
<!-- Project Name Question -->
31+
<div
32+
v-if="showStep >= 2"
33+
class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
34+
>
35+
<span class="font-bold text-green-400">✔</span>
36+
<span class="text-white"
37+
>What's your project name? (A folder with this name will be
38+
created)</span
39+
>
40+
<span class="text-gray-500">…</span>
41+
<span
42+
v-if="showStep >= 3"
43+
class="font-medium text-yellow-400"
44+
>{{ typedProjectName }}</span
45+
>
46+
<span
47+
v-if="showStep >= 3 && typedProjectName.length < 'hello-world'.length"
48+
class="animate-blink inline-block h-4 w-0.5 bg-yellow-400 ml-0.5"
49+
></span>
50+
</div>
51+
52+
<!-- Language Question -->
53+
<div
54+
v-if="showStep >= 4"
55+
class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
56+
>
57+
<span class="font-bold" :class="showStep >= 6 ? 'text-green-400' : 'text-blue-400'">
58+
{{ showStep >= 6 ? '✔' : '?' }}
59+
</span>
60+
<span class="text-white">Which language do you want to use?</span>
61+
<span v-if="showStep >= 6" class="font-medium text-yellow-400 ml-2">JavaScript</span>
62+
</div>
63+
64+
<div v-if="showStep >= 4 && showStep < 6" class="animate-fade-in mb-2 ml-5">
65+
<div
66+
class="flex items-center gap-1 py-0.5 transition-all duration-200"
67+
:class="{
68+
'-mx-2 animate-pulse rounded bg-blue-400/10 px-2':
69+
showStep >= 5 && selectedLanguage === 'JavaScript',
70+
}"
71+
>
72+
<span class="w-3 font-bold text-blue-400">❯</span>
73+
<span class="text-white">JavaScript</span>
74+
</div>
75+
<div class="flex items-center gap-1 py-0.5">
76+
<span class="w-3 font-bold text-blue-400">&nbsp;</span>
77+
<span class="text-white">Python</span>
78+
</div>
79+
</div>
80+
81+
<!-- Project Type Question -->
82+
<div
83+
v-if="showStep >= 6"
84+
class="animate-fade-in my-4 flex flex-wrap items-center gap-2"
85+
>
86+
<span class="font-bold" :class="showStep >= 8 ? 'text-green-400' : 'text-blue-400'">
87+
{{ showStep >= 8 ? '✔' : '?' }}
88+
</span>
89+
<span class="text-white"
90+
>What kind of project do you want to init?</span
91+
>
92+
<span v-if="showStep >= 8" class="font-medium text-yellow-400 ml-2">Hello World</span>
93+
</div>
94+
95+
<div v-if="showStep >= 6 && showStep < 8" class="animate-fade-in mb-4 ml-5">
96+
<div
97+
class="flex items-center gap-1 py-0.5 transition-all duration-200"
98+
:class="{
99+
'-mx-2 animate-pulse rounded bg-blue-400/10 px-2': showStep >= 7,
100+
}"
101+
>
102+
<span class="w-3 font-bold text-blue-400">❯</span>
103+
<span class="text-white">Hello World - iapp quick start</span>
104+
</div>
105+
<div class="flex items-center gap-1 py-0.5">
106+
<span class="w-3 font-bold text-blue-400">&nbsp;</span>
107+
<span class="text-white">advanced</span>
108+
</div>
109+
</div>
110+
111+
<!-- Completion Message -->
112+
<div
113+
v-if="showStep >= 8"
114+
class="animate-fade-in mt-4 border-t border-gray-700 pt-3"
115+
>
116+
<div class="mb-2 flex items-center gap-2">
117+
<span class="font-bold text-green-400">✨</span>
118+
<span class="font-medium text-green-400"
119+
>Generating your iApp...</span
120+
>
121+
</div>
122+
<div class="ml-5 space-y-1 text-xs text-gray-400">
123+
<div>📁 Created hello-world/</div>
124+
<div>📄 Added package.json</div>
125+
<div>🐳 Added Dockerfile</div>
126+
<div>⚙️ Added iExec configuration</div>
127+
</div>
128+
<div class="mt-2 flex items-center gap-2">
129+
<span class="font-bold text-green-400">✅</span>
130+
<span class="font-medium text-green-400">Your iApp is ready!</span>
131+
</div>
132+
</div>
133+
134+
<!-- Cursor -->
135+
<div
136+
v-if="showStep < TOTAL_STEPS"
137+
class="animate-blink ml-1 inline-block h-4 w-2 bg-green-400"
138+
></div>
139+
</div>
140+
</div>
141+
</div>
142+
</template>
143+
144+
<script setup lang="ts">
145+
import { ref, onMounted, onUnmounted } from 'vue';
146+
147+
// Constants
148+
const STEP_DELAY = 1200;
149+
const TOTAL_STEPS = 9;
150+
const RESTART_DELAY = 3000;
151+
const TYPING_SPEED = 120;
152+
153+
const asciiArt = `
154+
___ _ ____ ____
155+
|_ _| / \ | _ \| _ \\
156+
| | / _ \ | |_) | |_) |
157+
| | / ___ \| __/| __/
158+
|___/_/ \_\\_| |_|`;
159+
160+
// Reactive state
161+
const showStep = ref(0);
162+
const selectedLanguage = ref('JavaScript');
163+
const terminalContent = ref<HTMLElement | null>(null);
164+
const typedProjectName = ref('');
165+
166+
// Timers
167+
let animationTimer: NodeJS.Timeout | null = null;
168+
let typingTimer: NodeJS.Timeout | null = null;
169+
170+
// Typing animation for project name
171+
const typeProjectName = () => {
172+
const fullName = 'hello-world';
173+
let currentIndex = 0;
174+
175+
const typeNextChar = () => {
176+
if (currentIndex < fullName.length) {
177+
typedProjectName.value = fullName.substring(0, currentIndex + 1);
178+
currentIndex++;
179+
typingTimer = setTimeout(typeNextChar, TYPING_SPEED);
180+
}
181+
};
182+
183+
typeNextChar();
184+
};
185+
186+
// Auto-scroll to bottom
187+
const scrollToBottom = () => {
188+
if (terminalContent.value) {
189+
terminalContent.value.scrollTop = terminalContent.value.scrollHeight;
190+
}
191+
};
192+
193+
// Main animation loop
194+
const animate = () => {
195+
let currentStep = 0;
196+
197+
const nextStep = () => {
198+
if (currentStep < TOTAL_STEPS) {
199+
showStep.value = currentStep + 1;
200+
currentStep++;
201+
202+
// Start typing animation at step 3
203+
if (currentStep === 3) {
204+
typeProjectName();
205+
}
206+
207+
scrollToBottom();
208+
209+
if (currentStep < TOTAL_STEPS) {
210+
animationTimer = setTimeout(nextStep, STEP_DELAY);
211+
} else {
212+
// Auto-restart after completion
213+
animationTimer = setTimeout(() => {
214+
showStep.value = 0;
215+
typedProjectName.value = '';
216+
animate();
217+
}, RESTART_DELAY);
218+
}
219+
}
220+
};
221+
222+
animationTimer = setTimeout(nextStep, STEP_DELAY);
223+
};
224+
225+
// Cleanup timers
226+
const cleanup = () => {
227+
if (animationTimer) clearTimeout(animationTimer);
228+
if (typingTimer) clearTimeout(typingTimer);
229+
};
230+
231+
onMounted(() => {
232+
animate();
233+
});
234+
235+
onUnmounted(cleanup);
236+
</script>

‎src/overview/welcome.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ description:
44
Discover how iExec empowers developers to build privacy-first applications
55
---
66

7-
# 💡 The Privacy Toolkit
7+
# 💡 Privacy Made Easy
88

99
<div class="bg-gradient-to-r from-[#fcd15a] to-[#ffad4d] rounded-[6px] px-8 pb-4 text-gray-800 max-w-3xl mx-auto mb-6">
1010
<h2 class="text-2xl font-bold mt-0 !border-none">Welcome to iExec</h2>

0 commit comments

Comments
 (0)