Initial commit: Basic Yew frontend template

- Set up Cargo.toml with Yew dependencies - Created main.rs entry point - Added basic App component with counter functionality - Included HTML template with styling - Added Trunk.toml for build configuration - Added .gitignore to exclude build artifacts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-28 14:36:34 -04:00
commit a507ab07be
6 changed files with 106 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,14 @@
+# Rust
+target/
+Cargo.lock
+
+# Build outputs
+dist/
+
+# OS
+.DS_Store
+.vscode/
+.idea/
+
+# Logs
+*.log
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -0,0 +1,9 @@
+[package]
+name = "yew-app"
+version = "0.1.0"
+edition = "2021"
+
+[dependencies]
+yew = { version = "0.21", features = ["csr"] }
+web-sys = "0.3"
+wasm-bindgen = "0.2"
--- a/Trunk.toml
+++ b/Trunk.toml
@@ -0,0 +1,11 @@
+[build]
+target = "index.html"
+dist = "dist"
+
+[watch]
+watch = ["src", "Cargo.toml"]
+
+[serve]
+address = "127.0.0.1"
+port = 8080
+open = false
--- a/index.html
+++ b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Yew App</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        div {
+            max-width: 600px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+        }
+        button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body></body>
+</html>
--- a/src/app.rs
+++ b/src/app.rs
@@ -0,0 +1,24 @@
+use yew::prelude::*;
+
+#[function_component]
+pub fn App() -> Html {
+    let counter = use_state(|| 0);
+    let onclick = {
+        let counter = counter.clone();
+        move |_| {
+            let value = *counter + 1;
+            counter.set(value);
+        }
+    };
+
+    html! {
+        <div>
+            <h1>{ "Hello Yew!" }</h1>
+            <p>{ "This is a basic Yew application template." }</p>
+            <div>
+                <button {onclick}>{ "Click me!" }</button>
+                <p>{ format!("Counter: {}", *counter) }</p>
+            </div>
+        </div>
+    }
+}
--- a/src/main.rs
+++ b/src/main.rs
@@ -0,0 +1,8 @@
+use yew::prelude::*;
+
+mod app;
+use app::App;
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}