Features on the home page

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" . }}

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;