From 8246cf132b5dd7afd95f47869f51c56ced75b5bd Mon Sep 17 00:00:00 2001
From: Armin Ronacher <armin.ronacher@active-4.com>
Date: Wed, 23 May 2018 20:15:15 +0200
Subject: [PATCH] Features on the home page

---
 layouts/index.html   | 70 ++++++++++++++++++++++++++++++++++++++++++++
 static/css/actix.css | 35 ++++++++++++++++++++++
 static/js/actix.js   |  0
 3 files changed, 105 insertions(+)
 create mode 100644 static/js/actix.js

diff --git a/layouts/index.html b/layouts/index.html
index faf9ca9..b47a215 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -59,6 +59,76 @@ fn main() {
       </div>
     </div>
   </div>
+  <div class="row actix-showcase">
+    <div class="col-md-8">
+      <input type="radio" name="feature" id="responders" checked>
+      <div class="feature">
+        <h2>Flexible Responders</h2>
+        <p>
+          Handler functions in actix can return a wide range of objects that
+          implement the <code>Responder</code> trait.  This makes it a breeze
+          to return consistent responses from your APIs.
+        </p>
+        {{ highlight `#[derive(Serialize)]
+struct Measurement {
+    temperature: f32,
+}
+
+fn hello_world() -> impl Responder {
+    "Hello World!"
+}
+
+fn current_temperature(_req: HttpRequest) -> impl Responder {
+    Json(Measurement { temperature: 42.3 })
+}` "rust" "" }}
+      </div>
+      <input type="radio" name="feature" id="extractors">
+      <div class="feature">
+        <h2>Powerful Extractors</h2>
+        <p>
+          Actix comes with a powerful extractor system that extracts data
+          from the incoming HTTP request and passes it to your view functions.
+          Not only does this make for a convenient API but it also means that
+          your view functions can be synchronous code and still benefit
+          from asynchronous IO handling.
+        </p>
+        {{ highlight `#[derive(Deserialize)]
+struct Event {
+    timestamp: f64,
+    kind: String,
+    tags: Vec<String>,
+}
+
+fn capture_event(evt: Json<Event>) -> impl Responder {
+    let id = store_event_in_db(evt.timestamp, evt.kind, evt.tags);
+    format!("got event {}", id)
+}` "rust" "" }}
+      </div>
+      <input type="radio" name="feature" id="forms">
+      <div class="feature">
+        <h2>Easy Form Handling</h2>
+        <p>
+          Handling multipart/urlencoded form data is easy.  Just define
+          a structure that can be deserialized and actix will handle
+          the rest.
+        </p>
+        {{ highlight `#[derive(Deserialize)]
+struct Register {
+    username: String,
+    country: String,
+}
+
+fn register(data: Form<Register>) -> impl Responder {
+    format!("Hello {} from {}!", data.username, data.country)
+}` "rust" "" }}
+      </div>
+    </div>
+    <div class="col-md-4">
+      <label for="responders">flexible responders</label>
+      <label for="extractors">powerful extractors</label>
+      <label for="forms">easy form handling</label>
+    </div>
+  </div>
 </div>
 
 {{ partial "footer" . }}
diff --git a/static/css/actix.css b/static/css/actix.css
index 5bdc426..f642cd3 100644
--- a/static/css/actix.css
+++ b/static/css/actix.css
@@ -282,6 +282,41 @@ img {
   max-width: 1000px;
 }
 
+.actix-showcase {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+.actix-showcase ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  line-height: 2;
+}
+
+.actix-showcase input[type="radio"] {
+  display: none;
+}
+
+.actix-showcase div.feature {
+  display: none;
+}
+
+.actix-showcase input[type="radio"]:checked + div.feature {
+  display: block;
+}
+
+.actix-showcase label {
+  display: block;
+  font-weight: bold;
+  color: #156060;
+  cursor: pointer;
+}
+
+.actix-showcase label:hover {
+  color: #003B3B;
+}
+
 .actix-features h2 {
   font-size: 1.5rem;
   margin-top: 2.25rem;
diff --git a/static/js/actix.js b/static/js/actix.js
new file mode 100644
index 0000000..e69de29