Skip to content

Commit ef4b610

Browse files
udzuraudzura
authored
Merge pull request #1 from mrubyedge/copilot/create-teaser-site
Create teaser site for mruby/edge
2 parents 40311ba + 42cc9b9 commit ef4b610

File tree

1 file changed

+373
-0
lines changed

1 file changed

+373
-0
lines changed

‎index.html‎

Lines changed: 373 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,373 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="mruby/edge - A pure-Rust reimplementation of the mruby VM for WebAssembly and embedded systems">
7+
<meta name="keywords" content="mruby, ruby, rust, webassembly, wasm, embedded, edge computing">
8+
<title>mruby/edge - Ruby for WebAssembly & Embedded Systems</title>
9+
<style>
10+
* {
11+
margin: 0;
12+
padding: 0;
13+
box-sizing: border-box;
14+
}
15+
16+
body {
17+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
18+
line-height: 1.6;
19+
color: #333;
20+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
21+
min-height: 100vh;
22+
}
23+
24+
.container {
25+
max-width: 1200px;
26+
margin: 0 auto;
27+
padding: 20px;
28+
}
29+
30+
header {
31+
text-align: center;
32+
padding: 60px 20px 40px;
33+
color: white;
34+
}
35+
36+
h1 {
37+
font-size: 3.5em;
38+
font-weight: 700;
39+
margin-bottom: 20px;
40+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
41+
}
42+
43+
.tagline {
44+
font-size: 1.5em;
45+
margin-bottom: 30px;
46+
opacity: 0.95;
47+
}
48+
49+
.badges {
50+
display: flex;
51+
justify-content: center;
52+
gap: 10px;
53+
flex-wrap: wrap;
54+
margin-bottom: 30px;
55+
}
56+
57+
.badge {
58+
background: rgba(255, 255, 255, 0.2);
59+
backdrop-filter: blur(10px);
60+
padding: 8px 16px;
61+
border-radius: 20px;
62+
font-size: 0.9em;
63+
border: 1px solid rgba(255, 255, 255, 0.3);
64+
}
65+
66+
.cta-buttons {
67+
display: flex;
68+
justify-content: center;
69+
gap: 20px;
70+
flex-wrap: wrap;
71+
margin-top: 30px;
72+
}
73+
74+
.btn {
75+
display: inline-block;
76+
padding: 15px 35px;
77+
text-decoration: none;
78+
border-radius: 30px;
79+
font-weight: 600;
80+
font-size: 1.1em;
81+
transition: all 0.3s ease;
82+
border: 2px solid white;
83+
}
84+
85+
.btn-primary {
86+
background: white;
87+
color: #667eea;
88+
}
89+
90+
.btn-primary:hover {
91+
transform: translateY(-2px);
92+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
93+
}
94+
95+
.btn-secondary {
96+
background: transparent;
97+
color: white;
98+
}
99+
100+
.btn-secondary:hover {
101+
background: rgba(255, 255, 255, 0.1);
102+
transform: translateY(-2px);
103+
}
104+
105+
main {
106+
background: white;
107+
border-radius: 20px;
108+
padding: 60px 40px;
109+
margin-top: 40px;
110+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
111+
}
112+
113+
h2 {
114+
font-size: 2.2em;
115+
margin-bottom: 30px;
116+
color: #667eea;
117+
text-align: center;
118+
}
119+
120+
.features {
121+
display: grid;
122+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
123+
gap: 30px;
124+
margin: 50px 0;
125+
}
126+
127+
.feature {
128+
padding: 30px;
129+
background: #f8f9fa;
130+
border-radius: 15px;
131+
transition: transform 0.3s ease, box-shadow 0.3s ease;
132+
}
133+
134+
.feature:hover {
135+
transform: translateY(-5px);
136+
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.2);
137+
}
138+
139+
.feature-icon {
140+
font-size: 2.5em;
141+
margin-bottom: 15px;
142+
}
143+
144+
.feature h3 {
145+
font-size: 1.4em;
146+
margin-bottom: 15px;
147+
color: #333;
148+
}
149+
150+
.feature p {
151+
color: #666;
152+
line-height: 1.8;
153+
}
154+
155+
.code-section {
156+
margin: 50px 0;
157+
}
158+
159+
.code-section h3 {
160+
font-size: 1.6em;
161+
margin-bottom: 20px;
162+
color: #333;
163+
}
164+
165+
pre {
166+
background: #2d2d2d;
167+
color: #f8f8f2;
168+
padding: 25px;
169+
border-radius: 10px;
170+
overflow-x: auto;
171+
font-size: 0.95em;
172+
line-height: 1.6;
173+
margin: 20px 0;
174+
}
175+
176+
code {
177+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
178+
}
179+
180+
.use-cases {
181+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
182+
color: white;
183+
padding: 40px;
184+
border-radius: 15px;
185+
margin: 50px 0;
186+
}
187+
188+
.use-cases h3 {
189+
font-size: 1.8em;
190+
margin-bottom: 25px;
191+
text-align: center;
192+
}
193+
194+
.use-cases ul {
195+
list-style: none;
196+
display: grid;
197+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
198+
gap: 20px;
199+
}
200+
201+
.use-cases li {
202+
padding: 15px;
203+
background: rgba(255, 255, 255, 0.1);
204+
backdrop-filter: blur(10px);
205+
border-radius: 10px;
206+
border: 1px solid rgba(255, 255, 255, 0.2);
207+
}
208+
209+
.use-cases li::before {
210+
content: "✓ ";
211+
font-weight: bold;
212+
margin-right: 8px;
213+
}
214+
215+
footer {
216+
text-align: center;
217+
padding: 40px 20px;
218+
color: white;
219+
margin-top: 50px;
220+
}
221+
222+
footer a {
223+
color: white;
224+
text-decoration: none;
225+
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
226+
transition: border-color 0.3s ease;
227+
}
228+
229+
footer a:hover {
230+
border-bottom-color: white;
231+
}
232+
233+
@media (max-width: 768px) {
234+
h1 {
235+
font-size: 2.5em;
236+
}
237+
238+
.tagline {
239+
font-size: 1.2em;
240+
}
241+
242+
main {
243+
padding: 40px 20px;
244+
}
245+
246+
.features {
247+
grid-template-columns: 1fr;
248+
}
249+
250+
.cta-buttons {
251+
flex-direction: column;
252+
align-items: center;
253+
}
254+
255+
.btn {
256+
width: 100%;
257+
max-width: 300px;
258+
text-align: center;
259+
}
260+
}
261+
</style>
262+
</head>
263+
<body>
264+
<div class="container">
265+
<header>
266+
<h1>mruby/edge</h1>
267+
<p class="tagline">A pure-Rust reimplementation of the mruby VM<br>for WebAssembly and embedded systems</p>
268+
269+
<div class="badges">
270+
<span class="badge">🦀 Written in Rust</span>
271+
<span class="badge">🌐 WebAssembly-first</span>
272+
<span class="badge">⚡ Lightweight</span>
273+
<span class="badge">🔒 Memory Safe</span>
274+
</div>
275+
276+
<div class="cta-buttons">
277+
<a href="https://github.com/mrubyedge/mrubyedge" class="btn btn-primary" target="_blank">View on GitHub</a>
278+
<a href="https://docs.rs/mrubyedge" class="btn btn-secondary" target="_blank">Documentation</a>
279+
</div>
280+
</header>
281+
282+
<main>
283+
<section>
284+
<h2>Overview</h2>
285+
<p style="text-align: center; font-size: 1.1em; color: #555; max-width: 800px; margin: 0 auto 40px;">
286+
mruby/edge is an mruby-compatible virtual machine implementation written in Rust,
287+
specifically designed for WebAssembly environments and embedded systems.
288+
Execute mruby bytecode and Ruby source code with minimal footprint and maximum safety.
289+
</p>
290+
</section>
291+
292+
<section class="features">
293+
<div class="feature">
294+
<div class="feature-icon">🌐</div>
295+
<h3>WebAssembly-first Design</h3>
296+
<p>Optimized for running Ruby code in browsers and edge computing environments. Deploy Ruby applications anywhere WebAssembly runs.</p>
297+
</div>
298+
<div class="feature">
299+
<div class="feature-icon">⚡</div>
300+
<h3>Lightweight Runtime</h3>
301+
<p>Minimal footprint and binary size suitable for constrained environments. Perfect for resource-limited devices and applications.</p>
302+
</div>
303+
<div class="feature">
304+
<div class="feature-icon">🔧</div>
305+
<h3>no_std Core</h3>
306+
<p>Can run in environments without standard library support. Ideal for bare-metal and embedded systems programming.</p>
307+
</div>
308+
<div class="feature">
309+
<div class="feature-icon">🔄</div>
310+
<h3>mruby Compatible</h3>
311+
<p>Executes mruby bytecode (.mrb files) and Ruby source code. Leverage existing mruby tools and libraries.</p>
312+
</div>
313+
<div class="feature">
314+
<div class="feature-icon">🦀</div>
315+
<h3>Rust Safety</h3>
316+
<p>Built with Rust for memory safety and reliability. Eliminate entire classes of bugs and security vulnerabilities.</p>
317+
</div>
318+
</section>
319+
320+
<section class="code-section">
321+
<h2>Quick Start</h2>
322+
323+
<h3>Installation</h3>
324+
<p>Add this to your <code>Cargo.toml</code>:</p>
325+
<pre><code>[dependencies]
326+
mrubyedge = "1.0"</code></pre>
327+
328+
<h3>Running Precompiled Bytecode</h3>
329+
<p>Load and execute a precompiled <code>*.mrb</code> file:</p>
330+
<pre><code>use mrubyedge::rite;
331+
use mrubyedge::yamrb::vm;
332+
333+
// Bundle the compiled script at build time
334+
const SCRIPT: &[u8] = include_bytes!("./examples/simple.mrb");
335+
336+
fn main() -> Result<(), Box<dyn std::error::Error>> {
337+
let mut rite = rite::load(SCRIPT)?;
338+
let mut vm = vm::VM::open(&mut rite);
339+
let value = vm.run()?;
340+
println!("{:?}", value);
341+
Ok(())
342+
}</code></pre>
343+
</section>
344+
345+
<section class="use-cases">
346+
<h3>Use Cases</h3>
347+
<ul>
348+
<li><strong>Embedded Systems</strong> - Run Ruby in resource-constrained devices</li>
349+
<li><strong>WebAssembly Applications</strong> - Deploy Ruby code in browsers and serverless environments</li>
350+
<li><strong>Edge Computing</strong> - Lightweight Ruby runtime for edge nodes</li>
351+
<li><strong>Rust Integration</strong> - Embed Ruby scripting in Rust applications</li>
352+
</ul>
353+
</section>
354+
355+
<section style="text-align: center; margin-top: 60px;">
356+
<h2>Get Started Today</h2>
357+
<p style="font-size: 1.1em; color: #666; margin: 20px 0 30px;">
358+
Check out the documentation and start building with mruby/edge
359+
</p>
360+
<div class="cta-buttons">
361+
<a href="https://github.com/mrubyedge/mrubyedge" class="btn btn-primary" target="_blank">GitHub Repository</a>
362+
<a href="https://docs.rs/mrubyedge" class="btn btn-secondary" target="_blank" style="color: #667eea; border-color: #667eea;">API Docs</a>
363+
<a href="https://crates.io/crates/mrubyedge" class="btn btn-secondary" target="_blank" style="color: #667eea; border-color: #667eea;">Crates.io</a>
364+
</div>
365+
</section>
366+
</main>
367+
368+
<footer>
369+
<p>&copy; 2026 mruby/edge Project. Licensed under the terms found in the <a href="https://github.com/mrubyedge/mrubyedge/blob/master/LICENSE" target="_blank">LICENSE</a> file.</p>
370+
</footer>
371+
</div>
372+
</body>
373+
</html>

0 commit comments

Comments
 (0)