Merge branch 'feature/features'

layouts/index.html

@@ -59,6 +59,75 @@ fn main() {
       </div>
     </div>
   </div>
+  <div class="actix-showcase">
+    <div class="col-md-9">
+      <div class="actix-feature" id="responders">
+        <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>
+      <div class="actix-feature" id="extractors">
+        <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>
+      <div class="actix-feature" id="forms">
+        <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-3 actix-feature-selectors">
+      <ul>
+        <li class="actix-feature-selector"><a href="#responders">flexible responders</label>
+        <li class="actix-feature-selector"><a href="#extractors">powerful extractors</label>
+        <li class="actix-feature-selector"><a href="#forms">easy form handling</label>
+      </ul>
+    </div>
+  </div>
 </div>
 
 {{ partial "footer" . }}

layouts/partials/footer.html

@@ -13,6 +13,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
     <script src="/js/bootstrap.min.js"></script>
+    <script src="/js/actix.js"></script>
     {{ template "_internal/google_analytics.html" . }}
   </body>
 </html>

static/css/actix.css

@@ -282,6 +282,44 @@ img {
   max-width: 1000px;
 }
 
+.actix-showcase {
+  overflow: hidden;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding: 2rem 1rem 0 1rem;
+  background: #dceaea;
+}
+
+.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;
@@ -297,6 +335,25 @@ img {
   font-size: 1rem;
 }
 
+.actix-feature-selectors {
+  padding-bottom: 2rem;
+}
+
+.actix-feature-selector {
+  text-align: center;
+  padding: 0.5rem 1rem;
+  font-weight: bold;
+}
+
+.actix-feature-selector.active {
+  background: white;
+}
+
+.actix-feature-selector.active a {
+  color: #333!important;
+  text-decoration: none;
+}
+
 .final-pitch {
   text-align: center;
 }

static/js/actix.js

@@ -0,0 +1,32 @@
+(function() {
+  function activateFeature(sel) {
+    $('div.actix-feature').hide();
+    $(sel).show();
+    $('li.actix-feature-selector').removeClass('active');
+    $('li.actix-feature-selector > a').each(function() {
+      if (this.getAttribute('href') === sel) {
+        $(this).parent().addClass('active');
+      }
+    });
+  }
+
+  function initFeatureSelector() {
+    $('div.actix-feature').hide();
+    var active = $(window.location.hash);
+    if (active.is('div.actix-feature')) {
+      activateFeature(window.location.hash);
+    } else {
+      activateFeature('#' + $('div.actix-feature')[0].id);
+    }
+
+    $('ul li.actix-feature-selector a').on('click', function(evt) {
+      evt.preventDefault();
+      history.replaceState({}, '', evt.target.href);
+      activateFeature(this.getAttribute('href'));
+    });
+  }
+
+  $(function() {
+    initFeatureSelector();
+  });
+})();