From 8246cf132b5dd7afd95f47869f51c56ced75b5bd Mon Sep 17 00:00:00 2001 From: Armin Ronacher Date: Wed, 23 May 2018 20:15:15 +0200 Subject: [PATCH 1/2] 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() { +
+
+ +
+

Flexible Responders

+

+ Handler functions in actix can return a wide range of objects that + implement the Responder trait. This makes it a breeze + to return consistent responses from your APIs. +

+ {{ 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" "" }} +
+ +
+

Powerful Extractors

+

+ 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. +

+ {{ highlight `#[derive(Deserialize)] +struct Event { + timestamp: f64, + kind: String, + tags: Vec, +} + +fn capture_event(evt: Json) -> impl Responder { + let id = store_event_in_db(evt.timestamp, evt.kind, evt.tags); + format!("got event {}", id) +}` "rust" "" }} +
+ +
+

Easy Form Handling

+

+ Handling multipart/urlencoded form data is easy. Just define + a structure that can be deserialized and actix will handle + the rest. +

+ {{ highlight `#[derive(Deserialize)] +struct Register { + username: String, + country: String, +} + +fn register(data: Form) -> impl Responder { + format!("Hello {} from {}!", data.username, data.country) +}` "rust" "" }} +
+
+
+ + + +
+
{{ 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 From 2f9245e580802ae6befe1ca0885b7df9919cc1a7 Mon Sep 17 00:00:00 2001 From: Armin Ronacher Date: Wed, 23 May 2018 23:47:00 +0200 Subject: [PATCH 2/2] Added feature box --- layouts/index.html | 23 +++++++++++------------ layouts/partials/footer.html | 1 + static/css/actix.css | 22 ++++++++++++++++++++++ static/js/actix.js | 32 ++++++++++++++++++++++++++++++++ 4 files changed, 66 insertions(+), 12 deletions(-) diff --git a/layouts/index.html b/layouts/index.html index b47a215..4a1d6c6 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -59,10 +59,9 @@ fn main() { -
-
- -
+
+
+

Flexible Responders

Handler functions in actix can return a wide range of objects that @@ -82,8 +81,7 @@ fn current_temperature(_req: HttpRequest) -> impl Responder { Json(Measurement { temperature: 42.3 }) }` "rust" "" }}

- -
+

Powerful Extractors

Actix comes with a powerful extractor system that extracts data @@ -104,8 +102,7 @@ fn capture_event(evt: Json) -> impl Responder { format!("got event {}", id) }` "rust" "" }}

- -
+

Easy Form Handling

Handling multipart/urlencoded form data is easy. Just define @@ -123,10 +120,12 @@ fn register(data: Form) -> impl Responder { }` "rust" "" }}

-
- - - +
+
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index dd7011b..6593ca4 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -13,6 +13,7 @@ + {{ template "_internal/google_analytics.html" . }} diff --git a/static/css/actix.css b/static/css/actix.css index f642cd3..cb6989e 100644 --- a/static/css/actix.css +++ b/static/css/actix.css @@ -283,8 +283,11 @@ img { } .actix-showcase { + overflow: hidden; margin-top: 2rem; margin-bottom: 2rem; + padding: 2rem 1rem 0 1rem; + background: #dceaea; } .actix-showcase ul { @@ -332,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; } diff --git a/static/js/actix.js b/static/js/actix.js index e69de29..15a6990 100644 --- a/static/js/actix.js +++ b/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(); + }); +})();