| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>WASM with Leptos</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/styles/atom-one-dark.min.css"> | |
| <script src="https://unpkg.com/@highlightjs/cdn-assets@11.8.0/highlight.min.js"></script> | |
| <script src="https://unpkg.com/wasm-bindgen/wasm_bindgen.js"></script> | |
| </head> | |
| <body class="min-h-screen bg-gray-900 text-gray-100"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold mb-4">WASM with Leptos</h1> | |
| <p class="text-xl text-gray-300">Rust-powered WebAssembly application</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="cpu" class="mr-2"></i> WASM Demo | |
| </h2> | |
| <div id="wasm-output" class="min-h-32 bg-gray-700 rounded-lg p-4 mb-4"></div> | |
| <button id="wasm-btn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition"> | |
| Run WASM | |
| </button> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-semibold mb-4 flex items-center"> | |
| <i data-feather="code" class="mr-2"></i> Example Code | |
| </h2> | |
| <pre class="rounded-lg overflow-hidden"><code class="language-rust hljs"> | |
| // Cargo.toml | |
| [dependencies] | |
| leptos = "0.3" | |
| wasm-bindgen = "0.2" | |
| // lib.rs | |
| use leptos::*; | |
| use wasm_bindgen::prelude::*; | |
| #[wasm_bindgen] | |
| pub fn greet(name: &str) -> String { | |
| format!("Hello, {}!", name) | |
| } | |
| #[component] | |
| pub fn App() -> impl IntoView { | |
| let (name, set_name) = create_signal("World".to_string()); | |
| view! { | |
| <input | |
| type="text" | |
| on:input=move |ev| set_name(event_target_value(&ev)) | |
| placeholder="Your name" | |
| /> | |
| <p>"Hello, " {name}!</p> | |
| } | |
| } | |
| </code></pre> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center text-gray-400"> | |
| <p>Build with Rust + WASM + Leptos</p> | |
| </div> | |
| </div> | |
| <script> | |
| async function loadWasm() { | |
| try { | |
| const wasm = await wasm_bindgen('./pkg/wasm_bg.wasm'); | |
| wasm_bindgen = wasm; | |
| document.getElementById('wasm-btn').addEventListener('click', () => { | |
| const output = document.getElementById('wasm-output'); | |
| output.textContent = wasm_bindgen.greet('WASM Visitor'); | |
| }); | |
| } catch (err) { | |
| console.error('Failed to load WASM:', err); | |
| } | |
| } | |
| document.addEventListener('DOMContentLoaded', () => { | |
| feather.replace(); | |
| hljs.highlightAll(); | |
| loadWasm(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |