jimmu 1.0.0

data/examples/chatroom/views/room/[name].erb

@@ -0,0 +1,47 @@
+<div class="wrap chat">
+  <h1>#<%= CGI.escapeHTML(params[:name]) %> <span id="online" class="badge"></span></h1>
+  <div id="log" class="log"></div>
+  <form id="send-form">
+    <input type="text" id="msg" placeholder="Message" autocomplete="off" required>
+    <button type="submit">Send</button>
+  </form>
+  <p><a href="/">&larr; leave</a></p>
+</div>
+<script>
+var room = <%= params[:name].to_json %>;
+var params = new URLSearchParams(window.location.search);
+var name = params.get('name') || ('Guest' + Math.floor(Math.random() * 1000));
+var proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+var ws = new WebSocket(proto + '//' + window.location.host + '/ws/' + encodeURIComponent(room) + '?name=' + encodeURIComponent(name));
+var log = document.getElementById('log');
+var online = document.getElementById('online');
+
+function addLine(cls, html) {
+  var div = document.createElement('div');
+  div.className = 'line ' + cls;
+  div.innerHTML = html;
+  log.appendChild(div);
+  log.scrollTop = log.scrollHeight;
+}
+
+ws.onmessage = function (event) {
+  var data = JSON.parse(event.data);
+  if (data.type === 'system') {
+    addLine('system', data.text);
+    if (typeof data.count === 'number') online.textContent = data.count + ' online';
+  } else {
+    var safe = document.createElement('div');
+    safe.textContent = data.text;
+    addLine('message', '<strong>' + data.author + ':</strong> ' + safe.innerHTML);
+  }
+};
+ws.onclose = function () { addLine('system', 'Disconnected.'); };
+
+document.getElementById('send-form').addEventListener('submit', function (e) {
+  e.preventDefault();
+  var input = document.getElementById('msg');
+  if (!input.value.trim()) return;
+  ws.send(input.value);
+  input.value = '';
+});
+</script>

data/examples/counter/app.rb

@@ -0,0 +1,15 @@
+# Click counter.
+# Demonstrates: a tiny JSON API called from client-side JS (fetch),
+# and SQLite used to persist a single value across server restarts.
+
+port 3000
+
+db = sqlite "db/counter.db"
+db.exec "CREATE TABLE IF NOT EXISTS counters (name TEXT PRIMARY KEY, value INTEGER NOT NULL)"
+db.exec "INSERT OR IGNORE INTO counters(name, value) VALUES ('clicks', 0)"
+
+before do
+  log "#{request.method} #{request.path}"
+end
+
+run

data/examples/counter/public/css/style.css

@@ -0,0 +1,8 @@
+:root{color-scheme:light dark}
+body{font-family:-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;margin:0;background:#111;color:#fff}
+.wrap{text-align:center}
+.count{font-size:96px;font-weight:800;font-variant-numeric:tabular-nums;margin:10px 0}
+button{font-size:16px;padding:12px 28px;border-radius:8px;border:0;background:#4a7dff;color:#fff;cursor:pointer;margin:4px;font-weight:600}
+button.reset{background:#333}
+.hint{max-width:420px;color:#888;font-size:13px;margin-top:24px}
+code{background:#222;padding:2px 6px;border-radius:4px}

data/examples/counter/public/js/app.js

@@ -0,0 +1,11 @@
+var countEl = document.getElementById('count');
+document.getElementById('btn').addEventListener('click', function () {
+  fetch('/api/increment', { method: 'POST' })
+    .then(function (r) { return r.json(); })
+    .then(function (data) { countEl.textContent = data.value; });
+});
+document.getElementById('reset').addEventListener('click', function () {
+  fetch('/api/reset', { method: 'POST' })
+    .then(function (r) { return r.json(); })
+    .then(function (data) { countEl.textContent = data.value; });
+});

data/examples/counter/views/404.erb

@@ -0,0 +1 @@
+<h1>404</h1>

data/examples/counter/views/500.erb

@@ -0,0 +1 @@
+<h1>500</h1>

data/examples/counter/views/api/increment.erb

@@ -0,0 +1,5 @@
+<%
+  db.exec("UPDATE counters SET value = value + 1 WHERE name = 'clicks'")
+  value = db.query("SELECT value FROM counters WHERE name = 'clicks'").first[:value]
+  json(value: value)
+%>

data/examples/counter/views/api/reset.erb

@@ -0,0 +1,4 @@
+<%
+  db.exec("UPDATE counters SET value = 0 WHERE name = 'clicks'")
+  json(value: 0)
+%>

data/examples/counter/views/index.erb

@@ -0,0 +1,8 @@
+<% count = db.query("SELECT value FROM counters WHERE name = 'clicks'").first[:value] %>
+<div class="wrap">
+  <h1>Click Counter</h1>
+  <div class="count" id="count"><%= count %></div>
+  <button id="btn">Click me</button>
+  <button id="reset" class="reset">Reset</button>
+  <p class="hint">The count is stored in SQLite, so it survives a server restart. The button calls a small JSON API (<code>POST /api/increment</code>) via <code>fetch()</code>.</p>
+</div>

data/examples/counter/views/layout.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Jimmu Counter</title>
+<link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+<%= yield %>
+<script src="/js/app.js"></script>
+</body>
+</html>

data/examples/hello-world/app.rb

@@ -0,0 +1,6 @@
+# The smallest possible Jimmu app.
+# Run with: jimmu server   (from inside this directory)
+
+port 3000
+
+run

data/examples/hello-world/public/css/style.css

@@ -0,0 +1,3 @@
+body{font-family:-apple-system,sans-serif;max-width:640px;margin:60px auto;padding:0 20px;line-height:1.6;color:#222}
+code{background:#eee;padding:2px 6px;border-radius:4px}
+a{color:#3b6fe0}

data/examples/hello-world/views/404.erb

@@ -0,0 +1,2 @@
+<h1>404 - Not Found</h1>
+<p><a href="/">Go home</a></p>

data/examples/hello-world/views/500.erb

@@ -0,0 +1 @@
+<h1>500 - Server Error</h1>

data/examples/hello-world/views/greet/[name].erb

@@ -0,0 +1,2 @@
+<h1>Hello, <%= params[:name] %>!</h1>
+<p><a href="/">&larr; back</a></p>

data/examples/hello-world/views/index.erb

@@ -0,0 +1,3 @@
+<h1>Hello, Jimmu!</h1>
+<p>This page is <code>views/index.erb</code>. Try editing it -- changes appear on refresh, no restart needed.</p>
+<p>Try a dynamic route: <a href="/greet/world">/greet/world</a> or <a href="/greet/<%= CGI.escape('大和') %>">/greet/大和</a></p>

data/examples/hello-world/views/layout.erb

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Hello, Jimmu</title>
+<link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+<%= yield %>
+</body>
+</html>

data/examples/image-upload/app.rb

@@ -0,0 +1,22 @@
+# Image upload gallery.
+# Demonstrates: multipart/form-data file uploads (params[:image]),
+# saving uploaded files under public/ so they're served as static
+# files, and SQLite for the gallery listing.
+
+port 3000
+
+db = sqlite "db/gallery.db"
+db.exec <<~SQL
+  CREATE TABLE IF NOT EXISTS images (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    filename TEXT NOT NULL,
+    original_name TEXT NOT NULL,
+    uploaded_at TEXT NOT NULL
+  )
+SQL
+
+before do
+  log "#{request.method} #{request.path}"
+end
+
+run

data/examples/image-upload/public/css/style.css

@@ -0,0 +1,11 @@
+:root{color-scheme:light dark}
+*{box-sizing:border-box}
+body{font-family:-apple-system,sans-serif;background:#fafafa;color:#1a1a1a;margin:0}
+.wrap{max-width:760px;margin:0 auto;padding:40px 20px}
+.upload-form{display:flex;gap:10px;align-items:center;margin-bottom:28px;background:#fff;padding:16px;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
+.upload-form button{padding:10px 20px;border-radius:6px;border:0;background:#3b6fe0;color:#fff;font-weight:600;cursor:pointer}
+.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
+.grid figure{margin:0;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.08)}
+.grid img{width:100%;height:140px;object-fit:cover;display:block}
+.grid figcaption{font-size:12px;color:#777;padding:8px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.empty{color:#999;text-align:center;padding:40px 0}

data/examples/image-upload/views/404.erb

@@ -0,0 +1 @@
+<h1>404</h1>

data/examples/image-upload/views/500.erb

@@ -0,0 +1 @@
+<h1>500</h1>

data/examples/image-upload/views/index.erb

@@ -0,0 +1,31 @@
+<%
+  if request.method == "POST"
+    file = params[:image]
+    if file && !file.empty? && file.content_type.to_s.start_with?("image/")
+      ext = File.extname(file.filename)
+      ext = ".bin" if ext.empty?
+      stored_name = "#{Time.now.strftime('%Y%m%d%H%M%S')}-#{SecureRandom.hex(4)}#{ext}"
+      file.save(File.join("public/uploads", stored_name))
+      db.exec("INSERT INTO images(filename, original_name, uploaded_at) VALUES (?, ?, ?)",
+        stored_name, file.filename, Time.now.strftime("%Y-%m-%d %H:%M"))
+    else
+      status 422
+    end
+    redirect "/"
+  end
+  images = db.query("SELECT * FROM images ORDER BY id DESC")
+%>
+<form method="post" action="/" enctype="multipart/form-data" class="upload-form">
+  <input type="file" name="image" accept="image/*" required>
+  <button type="submit">Upload</button>
+</form>
+
+<div class="grid">
+<% images.each do |img| %>
+  <figure>
+    <img src="/uploads/<%= img[:filename] %>" alt="<%= CGI.escapeHTML(img[:original_name]) %>">
+    <figcaption><%= CGI.escapeHTML(img[:original_name]) %></figcaption>
+  </figure>
+<% end %>
+</div>
+<% if images.empty? %><p class="empty">No images yet -- upload one above.</p><% end %>

data/examples/image-upload/views/layout.erb

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Jimmu Gallery</title>
+<link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+<div class="wrap">
+<h1>Image Gallery</h1>
+<%= yield %>
+</div>
+</body>
+</html>

data/examples/json-api/app.rb

@@ -0,0 +1,27 @@
+# Headless JSON API (no HTML views except a tiny docs index).
+# Demonstrates: building a REST-ish API purely with json()/text(),
+# request.method for verb-based branching within one file-routed
+# endpoint, and status codes.
+#
+#   GET    /api/notes        -> list all notes
+#   POST   /api/notes        -> create a note (JSON body: {"text": "..."})
+#   GET    /api/notes/[id]   -> fetch one note
+#   PUT    /api/notes/[id]   -> update a note (JSON body: {"text": "..."})
+#   DELETE /api/notes/[id]   -> delete a note
+
+port 3000
+
+db = sqlite "db/notes.db"
+db.exec <<~SQL
+  CREATE TABLE IF NOT EXISTS notes (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    text TEXT NOT NULL,
+    created_at TEXT NOT NULL
+  )
+SQL
+
+before do
+  log "#{request.method} #{request.path}"
+end
+
+run

data/examples/json-api/views/404.erb

@@ -0,0 +1,2 @@
+<% layout false %>
+<% json(error: "not found") %>

data/examples/json-api/views/500.erb

@@ -0,0 +1,2 @@
+<% layout false %>
+<% json(error: "internal server error") %>

data/examples/json-api/views/api/notes/[id].erb

@@ -0,0 +1,33 @@
+<%
+  note = db.query("SELECT * FROM notes WHERE id = ?", params[:id]).first
+  case request.method
+  when "GET"
+    if note
+      json(note)
+    else
+      status 404
+      json(error: "not found")
+    end
+  when "PUT"
+    if note.nil?
+      status 404
+      json(error: "not found")
+    else
+      text = params[:text].to_s.strip
+      if text.empty?
+        status 422
+        json(error: "text is required")
+      else
+        db.exec("UPDATE notes SET text = ? WHERE id = ?", text, params[:id])
+        json(id: params[:id].to_i, text: text)
+      end
+    end
+  when "DELETE"
+    db.exec("DELETE FROM notes WHERE id = ?", params[:id])
+    status 204
+    text ""
+  else
+    status 405
+    json(error: "method not allowed")
+  end
+%>

data/examples/json-api/views/api/notes.erb

@@ -0,0 +1,20 @@
+<%
+  case request.method
+  when "GET"
+    notes = db.query("SELECT * FROM notes ORDER BY id DESC")
+    json(notes: notes)
+  when "POST"
+    text = params[:text].to_s.strip
+    if text.empty?
+      status 422
+      json(error: "text is required")
+    else
+      db.exec("INSERT INTO notes(text, created_at) VALUES (?, ?)", text, Time.now.to_s)
+      status 201
+      json(id: db.last_insert_rowid, text: text)
+    end
+  else
+    status 405
+    json(error: "method not allowed")
+  end
+%>

data/examples/json-api/views/index.erb

@@ -0,0 +1,13 @@
+<% layout false %>
+<!DOCTYPE html>
+<html><head><meta charset="UTF-8"><title>Jimmu JSON API demo</title>
+<style>body{font-family:-apple-system,sans-serif;max-width:640px;margin:60px auto;padding:0 20px;line-height:1.7}code,pre{background:#f2f2f2;padding:2px 6px;border-radius:4px}pre{padding:14px}</style>
+</head><body>
+<h1>Notes API</h1>
+<p>This example has no real HTML pages -- it's a small JSON REST API. Try it with curl:</p>
+<pre>curl <%= request.header('host') %>/api/notes
+curl -X POST <%= request.header('host') %>/api/notes -d '{"text":"hello"}' -H 'Content-Type: application/json'
+curl <%= request.header('host') %>/api/notes/1
+curl -X PUT <%= request.header('host') %>/api/notes/1 -d '{"text":"updated"}' -H 'Content-Type: application/json'
+curl -X DELETE <%= request.header('host') %>/api/notes/1</pre>
+</body></html>

data/examples/login-demo/app.rb

@@ -0,0 +1,31 @@
+# Session-based login demo.
+# Demonstrates: session used for authentication state, before-hook
+# route protection, and hashing passwords with the Ruby stdlib
+# (no external gem needed).
+
+require "digest/sha2"
+
+port 3000
+
+db = sqlite "db/users.db"
+db.exec <<~SQL
+  CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    username TEXT UNIQUE NOT NULL,
+    password_hash TEXT NOT NULL
+  )
+SQL
+
+def hash_password(password)
+  Digest::SHA256.hexdigest("jimmu-demo-salt:" + password)
+end
+
+before do
+  log "#{request.method} #{request.path}"
+  next unless request.path.start_with?("/mypage")
+  if session[:user_id].nil?
+    redirect "/login"
+  end
+end
+
+run

data/examples/login-demo/public/css/style.css

@@ -0,0 +1,12 @@
+:root{color-scheme:light dark}
+*{box-sizing:border-box}
+body{font-family:-apple-system,sans-serif;background:#fafafa;color:#1a1a1a;margin:0}
+.wrap{max-width:480px;margin:0 auto;padding:40px 20px}
+nav{display:flex;gap:14px;align-items:center;margin-bottom:30px;font-size:14px;padding-bottom:14px;border-bottom:1px solid #ddd}
+nav a{color:#3b6fe0;text-decoration:none}
+.who{color:#888;margin-left:auto}
+.auth-form{display:flex;flex-direction:column;gap:10px;margin-top:16px}
+.auth-form input{padding:10px;border-radius:6px;border:1px solid #ccc;font:inherit}
+.auth-form button{padding:10px;border-radius:6px;border:0;background:#222;color:#fff;font-weight:600;cursor:pointer}
+.error{background:#fde8e8;color:#a33;padding:10px 14px;border-radius:6px;font-size:14px}
+code{background:#eee;padding:2px 6px;border-radius:4px}

data/examples/login-demo/views/404.erb

@@ -0,0 +1 @@
+<h1>404</h1>

data/examples/login-demo/views/500.erb

@@ -0,0 +1 @@
+<h1>500</h1>

data/examples/login-demo/views/index.erb

@@ -0,0 +1,6 @@
+<h1>Jimmu session auth demo</h1>
+<% if session[:user_id] %>
+  <p>You're signed in. Visit your <a href="/mypage">protected page</a>.</p>
+<% else %>
+  <p><a href="/signup">Create an account</a> or <a href="/login">log in</a> to see a protected page.</p>
+<% end %>

data/examples/login-demo/views/layout.erb

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Jimmu Login Demo</title>
+<link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+<div class="wrap">
+<nav>
+  <a href="/">Home</a>
+  <% if session[:user_id] %>
+    <span class="who">signed in as <%= session[:username] %></span>
+    <a href="/logout">Log out</a>
+  <% else %>
+    <a href="/login">Log in</a>
+    <a href="/signup">Sign up</a>
+  <% end %>
+</nav>
+<%= yield %>
+</div>
+</body>
+</html>

data/examples/login-demo/views/login.erb

@@ -0,0 +1,22 @@
+<%
+  error = nil
+  if request.method == "POST"
+    username = params[:username].to_s.strip
+    password = params[:password].to_s
+    user = db.query("SELECT * FROM users WHERE username = ?", username).first
+    if user && user[:password_hash] == hash_password(password)
+      session[:user_id] = user[:id]
+      session[:username] = user[:username]
+      redirect "/mypage"
+    else
+      error = "Invalid username or password."
+    end
+  end
+%>
+<h1>Log in</h1>
+<% if error %><p class="error"><%= CGI.escapeHTML(error) %></p><% end %>
+<form method="post" action="/login" class="auth-form">
+  <input type="text" name="username" placeholder="Username" required value="<%= CGI.escapeHTML(params[:username].to_s) %>">
+  <input type="password" name="password" placeholder="Password" required>
+  <button type="submit">Log in</button>
+</form>

data/examples/login-demo/views/logout.erb

@@ -0,0 +1,4 @@
+<%
+  session.clear
+  redirect "/"
+%>

data/examples/login-demo/views/mypage/index.erb

@@ -0,0 +1,3 @@
+<h1>Welcome, <%= CGI.escapeHTML(session[:username].to_s) %></h1>
+<p>This page is only reachable when signed in -- the <code>before</code> hook in <code>app.rb</code> redirects to <code>/login</code> otherwise.</p>
+<p>Your user id is <code><%= session[:user_id] %></code>.</p>

data/examples/login-demo/views/signup.erb

@@ -0,0 +1,24 @@
+<%
+  error = nil
+  if request.method == "POST"
+    username = params[:username].to_s.strip
+    password = params[:password].to_s
+    if username.empty? || password.length < 4
+      error = "Username required, password must be at least 4 characters."
+    elsif db.query("SELECT 1 AS x FROM users WHERE username = ?", username).any?
+      error = "That username is taken."
+    else
+      db.exec("INSERT INTO users(username, password_hash) VALUES (?, ?)", username, hash_password(password))
+      session[:user_id] = db.last_insert_rowid
+      session[:username] = username
+      redirect "/mypage"
+    end
+  end
+%>
+<h1>Sign up</h1>
+<% if error %><p class="error"><%= CGI.escapeHTML(error) %></p><% end %>
+<form method="post" action="/signup" class="auth-form">
+  <input type="text" name="username" placeholder="Username" required value="<%= CGI.escapeHTML(params[:username].to_s) %>">
+  <input type="password" name="password" placeholder="Password (min 4 chars)" required>
+  <button type="submit">Create account</button>
+</form>

data/examples/poll/app.rb

@@ -0,0 +1,55 @@
+# Live poll.
+# Demonstrates: WebSocket used for live-updating UI (not just chat),
+# SQLite for vote storage, and broadcasting results to every
+# connected client whenever a new vote comes in.
+
+port 3000
+
+db = sqlite "db/poll.db"
+db.exec <<~SQL
+  CREATE TABLE IF NOT EXISTS votes (
+    option_key TEXT PRIMARY KEY,
+    label TEXT NOT NULL,
+    count INTEGER NOT NULL DEFAULT 0
+  )
+SQL
+[["ruby", "Ruby"], ["python", "Python"], ["js", "JavaScript"], ["other", "Something else"]].each do |key, label|
+  db.exec("INSERT OR IGNORE INTO votes(option_key, label, count) VALUES (?, ?, 0)", key, label)
+end
+
+WATCHERS = []
+WATCHERS_LOCK = Mutex.new
+
+def results_json(db)
+  rows = db.query("SELECT option_key, label, count FROM votes ORDER BY rowid")
+  total = rows.sum { |r| r[:count] }
+  { total: total, options: rows.map { |r| { key: r[:option_key], label: r[:label], count: r[:count] } } }.to_json
+end
+
+def broadcast_results(db)
+  payload = results_json(db)
+  WATCHERS_LOCK.synchronize { WATCHERS.dup }.each { |w| w.send(payload) if w.open? }
+end
+
+before do
+  log "#{request.method} #{request.path}"
+end
+
+websocket "/ws/poll" do
+  WATCHERS_LOCK.synchronize { WATCHERS << self }
+  send(results_json(db))
+
+  on_message do |raw|
+    data = JSON.parse(raw) rescue nil
+    key = data && data["vote"]
+    next unless key
+    changed = db.exec("UPDATE votes SET count = count + 1 WHERE option_key = ?", key)
+    broadcast_results(db) if changed > 0
+  end
+
+  on_close do
+    WATCHERS_LOCK.synchronize { WATCHERS.delete(self) }
+  end
+end
+
+run

data/examples/poll/public/css/style.css

@@ -0,0 +1,10 @@
+:root{color-scheme:light dark}
+*{box-sizing:border-box}
+body{font-family:-apple-system,sans-serif;background:#f6f7fb;color:#1a1a1a;margin:0}
+.wrap{max-width:520px;margin:0 auto;padding:48px 20px}
+.sub{color:#777;font-size:14px;margin-bottom:28px}
+.option{margin-bottom:14px}
+.option button{width:100%;text-align:left;padding:14px 16px;border-radius:8px;border:1px solid #ddd;background:#fff;cursor:pointer;font-size:15px;position:relative;overflow:hidden}
+.option button .bar{position:absolute;left:0;top:0;bottom:0;background:#dbe6ff;z-index:0}
+.option button .label{position:relative;z-index:1;display:flex;justify-content:space-between}
+.total{text-align:center;color:#888;font-size:13px;margin-top:20px}

data/examples/poll/public/js/app.js

@@ -0,0 +1,24 @@
+var proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+var ws = new WebSocket(proto + '//' + window.location.host + '/ws/poll');
+var optionsEl = document.getElementById('options');
+var totalEl = document.getElementById('total');
+
+function render(data) {
+  optionsEl.innerHTML = '';
+  data.options.forEach(function (opt) {
+    var pct = data.total > 0 ? Math.round((opt.count / data.total) * 100) : 0;
+    var div = document.createElement('div');
+    div.className = 'option';
+    div.innerHTML = '<button data-key="' + opt.key + '"><span class="bar" style="width:' + pct + '%"></span>' +
+      '<span class="label"><span>' + opt.label + '</span><span>' + opt.count + ' (' + pct + '%)</span></span></button>';
+    optionsEl.appendChild(div);
+  });
+  totalEl.textContent = data.total + ' vote' + (data.total === 1 ? '' : 's') + ' total';
+}
+
+ws.onmessage = function (event) { render(JSON.parse(event.data)); };
+optionsEl.addEventListener('click', function (e) {
+  var btn = e.target.closest('button');
+  if (!btn) return;
+  ws.send(JSON.stringify({ vote: btn.getAttribute('data-key') }));
+});

data/examples/poll/views/404.erb

@@ -0,0 +1 @@
+<div class="wrap"><h1>404</h1></div>

data/examples/poll/views/500.erb

@@ -0,0 +1 @@
+<div class="wrap"><h1>500</h1></div>

data/examples/poll/views/index.erb

@@ -0,0 +1,6 @@
+<div class="wrap">
+  <h1>What's your favorite language?</h1>
+  <p class="sub">Results update live for everyone watching -- open this page in two tabs and vote in one.</p>
+  <div id="options"></div>
+  <p class="total" id="total"></p>
+</div>

data/examples/poll/views/layout.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Jimmu Live Poll</title>
+<link rel="stylesheet" href="/css/style.css">
+</head>
+<body>
+<%= yield %>
+<script src="/js/app.js"></script>
+</body>
+</html>