2021-02-09 17:44:37 +00:00
<!DOCTYPE html>
<!-- saved from url=(0018)https://rocket.rs/ -->
< html >
< link type = "text/css" rel = "stylesheet" id = "dark-mode-general-link" / > < link
type="text/css"
rel="stylesheet"
id="dark-mode-custom-link"
/>< style lang = "en" type = "text/css" id = "dark-mode-custom-style" > < / s t y l e
>< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" / >
< meta name = "viewport" content = "width=device-width" / >
< title > Dioxus - Simple, Fast, Type-Safe Web Framework for Rust< / title >
< meta
name="description"
content="Dioxus is a web framework for the Rust
programming language that makes it simple to write fast web applications
without sacrificing flexibility or type safety."
/>
< meta name = "author" content = "Sergio Benitez" / >
< link href = "./rocketsrchrome_files/css" rel = "stylesheet" / >
< link
rel="stylesheet"
href="./rocketsrchrome_files/style.css"
media="all"
/>
< link
rel="icon"
type="image/png"
href="https://rocket.rs/v0.4/images/favicon-32x32.png"
sizes="32x32"
/>
< link
rel="icon"
type="image/png"
href="https://rocket.rs/v0.4/images/favicon-16x16.png"
sizes="16x16"
/>
< style media = "screen" >
#logo {
background-image: url(/v0.4/images/logo.svg);
}
@media (max-width: 870px) {
#logo {
background-image: url(/v0.4/images/logo-small.svg);
}
}
input#search-input {
background-image: url(/v0.4/images/search-icon.svg);
}
.cancel-search {
background: url(/v0.4/images/cancel-icon.svg) no-repeat center;
}
.admonition.note .title {
background-image: url(/v0.4/images/pencil-icon.svg);
}
.admonition.tip .title {
background-image: url(/v0.4/images/star-icon.svg);
}
.admonition.warning .title {
background-image: url(/v0.4/images/warning-icon.svg);
}
< / style >
< / head >
< body >
< header >
< div id = "clouds" >
< img
src="./rocketsrchrome_files/cloud-0.png"
class="cloud back"
style="
width: 254px;
height: 159px;
transform: scaleX(-1);
left: 327.999px;
top: 620.94px;
"
/>< img
src="./rocketsrchrome_files/cloud-1.png"
class="cloud front"
style="width: 231px; height: 117px; left: -122.168px; top: 339.537px"
/>< img
src="./rocketsrchrome_files/cloud-2.png"
class="cloud front"
style="width: 66px; height: 37px; left: 505.832px; top: 166.641px"
/>< img
src="./rocketsrchrome_files/cloud-0.png"
class="cloud front"
style="width: 114px; height: 71px; left: 740.832px; top: 379.316px"
/>< img
src="./rocketsrchrome_files/cloud-0.png"
class="cloud back"
style="
width: 96px;
height: 60px;
transform: scaleX(-1);
left: 452.999px;
top: 606.645px;
"
/>< img
src="./rocketsrchrome_files/cloud-0.png"
class="cloud front"
style="
width: 72px;
height: 45px;
transform: scaleX(-1);
left: 149.832px;
top: 26.552px;
"
/>< img
src="./rocketsrchrome_files/cloud-0.png"
class="cloud back"
style="width: 84px; height: 53px; left: 939.999px; top: 156.89px"
/>< img
src="./rocketsrchrome_files/cloud-1.png"
class="cloud front"
style="
width: 157px;
height: 79px;
transform: scaleX(-1);
left: 607.832px;
top: 45.7999px;
"
/>< img
src="./rocketsrchrome_files/cloud-1.png"
class="cloud front"
style="width: 129px; height: 66px; left: 259.832px; top: 328.975px"
/>< img
src="./rocketsrchrome_files/cloud-2.png"
class="cloud front"
style="
width: 191px;
height: 107px;
transform: scaleX(-1);
left: 232.832px;
top: 158.592px;
"
/>< img
src="./rocketsrchrome_files/cloud-1.png"
class="cloud front"
style="
width: 257px;
height: 130px;
transform: scaleX(-1);
left: 464.832px;
top: 722.23px;
"
/>< img
src="./rocketsrchrome_files/cloud-0.png"
class="cloud front"
style="
width: 160px;
height: 100px;
transform: scaleX(-1);
left: 653.832px;
top: 697.267px;
"
/>< img
src="./rocketsrchrome_files/cloud-0.png"
class="cloud front"
style="width: 189px; height: 118px; left: -103.168px; top: 158.261px"
/>< img
src="./rocketsrchrome_files/cloud-2.png"
class="cloud back"
style="
width: 167px;
height: 93px;
transform: scaleX(-1);
left: 506.999px;
top: 296.27px;
"
/>< img
src="./rocketsrchrome_files/cloud-2.png"
class="cloud back"
style="
width: 211px;
height: 118px;
transform: scaleX(-1);
left: 580.999px;
top: 625.646px;
"
/>< img
src="./rocketsrchrome_files/cloud-2.png"
class="cloud back"
style="
width: 228px;
height: 128px;
transform: scaleX(-1);
left: 1034px;
top: 248.156px;
"
/>
< / div >
< div class = "container" >
< a id = "logo" href = "https://rocket.rs/" > < span > Dioxus Homepage< / span > < / a >
< nav class = "version-select" >
< span onclick = "toggleOptions()" > v0.4 < i > < / i > < /span
>< options
>< a href = "https://rocket.rs/v0.3/" > v0.3< / a >
< a href = "https://rocket.rs/master/" > master< / a > < /options
>
< / nav >
< input type = "checkbox" id = "toggle" / >
< label for = "toggle" class = "hamburger"
>< span > < / span > < span > < / span > < span > < /span
>< / label >
< nav class = "main" >
< a href = "https://rocket.rs/v0.4/overview" > overview< / a >
< a href = "https://rocket.rs/v0.4/guide" > guide< / a >
< a href = "https://api.rocket.rs/v0.4/rocket" > api< / a >
< a href = "https://rocket.rs/v0.4/news" > news< / a >
< a href = "https://github.com/SergioBenitez/Dioxus/tree/v0.4" > code< / a >
< / nav >
< div class = "centered banner" >
< h1 > Meet Dioxus.< / h1 >
< h2 >
Dioxus is a web framework for Rust that makes it simple to write
< i > fast< / i > , < b > secure< / b > web applications without sacrificing
flexibility, usability, or type safety.
< / h2 >
< a href = "https://rocket.rs/v0.4/guide" class = "button" > Get Started< / a >
< a href = "https://rocket.rs/v0.4/overview" class = "button inverted"
>Learn More< /a
>
< / div >
< div class = "grid" >
< div class = "col" > < hr / > < / div >
< h4 class = "col" style = "text-align: center; margin: 0; padding: 0" >
Latest Release:
< a href = "https://crates.io/crates/rocket/0.4.6"
>0.4.6 (Nov 09, 2020)< /a
>
< / h4 >
< div class = "col" > < hr / > < / div >
< / div >
< br / >
< div class = "grid features" >
< div class = "col centered" >
< img
src="./rocketsrchrome_files/helmet.svg"
alt="Type Safe Icon (helmet)"
/>
< h3 > Type Safe< / h3 >
< figcaption >
From request to response Dioxus ensures that your types mean
something.
< / figcaption >
< a
class="button inverted small"
href="https://rocket.rs/v0.4/overview/#how-rocket-works"
>Learn More< /a
>
< / div >
< div class = "col centered" >
< img
src="./rocketsrchrome_files/robot-free.svg"
alt="Boilerplate Free Icon (robot-free)"
/>
< h3 > Boilerplate Free< / h3 >
< figcaption >
Spend your time writing code that really matters, and let Dioxus
generate the rest.
< / figcaption >
< a
class="button inverted small"
href="https://rocket.rs/v0.4/overview/#anatomy-of-a-rocket-application"
>See Examples< /a
>
< / div >
< div class = "col centered" >
< img
src="./rocketsrchrome_files/sun.svg"
alt="Easy To Use Icon (sun)"
style="margin-top: 2px"
/>
< h3 > Easy To Use< / h3 >
< figcaption >
Simple, intuitive APIs make Dioxus approachable, no matter your
background.
< / figcaption >
< a class = "button inverted small" href = "https://rocket.rs/v0.4/guide"
>Get Started< /a
>
< / div >
< div class = "col centered" >
< img
src="./rocketsrchrome_files/telescope.svg"
alt="Extensible Icon (telescope)"
style="margin-top: 9px"
/>
< h3 > Extensible< / h3 >
< figcaption >
Create your own first-class primitives that any Dioxus application
can use.
< / figcaption >
< a
class="button inverted small"
href="https://rocket.rs/v0.4/overview/#anatomy-of-a-rocket-application"
>See How< /a
>
< / div >
< / div >
< / div >
< / header >
< a
href="https://github.com/SergioBenitez/Dioxus/tree/v0.4"
class="github-corner"
aria-label="View source on Github"
>< svg
width="75"
height="75"
viewBox="0 0 250 250"
style="
fill: #fff;
z-index: 10;
color: #151513;
mix-blend-mode: screen;
position: absolute;
top: 0;
border: 0;
right: 0;
"
aria-hidden="true"
>
< path d = "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" > < / path >
< path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7
120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9
125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px"
class="octo-arm"
>< / path >
< path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6
C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0
C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1
C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4
C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9
C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5
C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9
L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
>< / path >
< / svg > < /a
>< span > < / span >
< section class = "grid mobile-reverse" >
< div class = "container" >
< div class = "col left-main" >
< h3 > Hello, Dioxus!< / h3 >
< hr / >
< p >
This is a < strong > complete Dioxus application< / strong > . It does
exactly what you would expect. If you were to visit
< strong > http://localhost:8000/hello/John/58< / strong > , you’
< / p >
< p > < span class = "callout" > Hello, 58 year old named John!< / span > < / p >
< p >
If someone visits a path with an < code > < age> < / code > that isn’
a < code > u8< / code > , Dioxus doesn’ < code > hello< / code > .
Instead, it tries other matching routes or returns a
< strong > 404< / strong > .
< / p >
< / div >
< div class = "col right-main hl-dark" >
< table class = "code hltable" >
< tbody >
< tr >
< td class = "linenos" >
< div class = "linenodiv" >
< pre >
1
2
3
4
5
6
7
8
9
10
11
12< /pre
>
< / div >
< / td >
< td class = "code" >
< div class = "code hl" >
< pre > < span > < / span > < span class = "cp" > #![feature(proc_macro_hygiene, decl_macro)]< / span > < span class = "w" > < / span >
< span class = "cp" > #[macro_use]< / span > < span class = "w" > < / span > < span class = "k" > extern< / span > < span class = "w" > < / span > < span class = "k" > crate< / span > < span class = "w" > < / span > < span class = "n" > rocket< / span > < span class = "p" > ;< / span > < span class = "w" > < / span >
< span class = "cp" > #[get(< / span > < span class = "s" > "/hello/< name> /< age> "< / span > < span class = "cp" > )]< / span > < span class = "w" > < / span >
< span class = "k" > fn< / span > < span class = "nf" > hello< / span > < span class = "p" > (< / span > < span class = "n" > name< / span > : < span class = "nb" > String< / span > < span class = "p" > ,< / span > < span class = "w" > < / span > < span class = "n" > age< / span > : < span class = "kt" > u8< / span > < span class = "p" > )< / span > < span class = "w" > < / span > -> < span class = "nb" > String< / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > format< / span > < span class = "o" > !< / span > < span class = "p" > (< / span > < span class = "s" > "Hello, {} year old named {}!"< / span > < span class = "p" > ,< / span > < span class = "w" > < / span > < span class = "n" > age< / span > < span class = "p" > ,< / span > < span class = "w" > < / span > < span class = "n" > name< / span > < span class = "p" > )< / span > < span class = "w" > < / span >
< span class = "p" > }< / span > < span class = "w" > < / span >
< span class = "k" > fn< / span > < span class = "nf" > main< / span > < span class = "p" > ()< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > rocket< / span > ::< span class = "n" > ignite< / span > < span class = "p" > ().< / span > < span class = "n" > mount< / span > < span class = "p" > (< / span > < span class = "s" > "/"< / span > < span class = "p" > ,< / span > < span class = "w" > < / span > < span class = "n" > routes< / span > < span class = "o" > !< / span > < span class = "p" > [< / span > < span class = "n" > hello< / span > < span class = "p" > ]).< / span > < span class = "n" > launch< / span > < span class = "p" > ();< / span > < span class = "w" > < / span >
< span class = "p" > }< / span > < span class = "w" > < / span >
< / pre >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / section >
< section class = "grid mobile-reverse" >
< div class = "container" >
< div class = "col left-main" >
< h3 > Forms? Check!< / h3 >
< hr / >
< p >
Handling forms < strong > is simple and easy< / strong > . Simply derive
< code > FromForm< / code > for your structure and let Dioxus know which
parameter to use. Dioxus < strong > parses and validates< / strong > the
form request, creates the structure, and calls your function.
< / p >
< p >
Bad form request? Dioxus doesn’
want to know if the form was bad? Simple! Change the type of
< code > task< / code > to < code > Option< / code > or < code > Result< / code > !
< / p >
< / div >
< div class = "col right-main hl-light" >
< table class = "code hltable" >
< tbody >
< tr >
< td class = "linenos" >
< div class = "linenodiv" >
< pre >
1
2
3
4
5
6
7
8
9
10
11
12
13
14< /pre
>
< / div >
< / td >
< td class = "code" >
< div class = "code hl" >
< pre > < span > < / span > < span class = "cp" > #[derive(FromForm)]< / span > < span class = "w" > < / span >
< span class = "k" > struct< / span > < span class = "nc" > Task< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > description< / span > : < span class = "nb" > String< / span > < span class = "p" > ,< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > completed< / span > : < span class = "kt" > bool< / span >
< span class = "p" > }< / span > < span class = "w" > < / span >
< span class = "cp" > #[post(< / span > < span class = "s" > "/"< / span > < span class = "cp" > , data = < / span > < span class = "s" > "< task> "< / span > < span class = "cp" > )]< / span > < span class = "w" > < / span >
< span class = "k" > fn< / span > < span class = "nf" > new< / span > < span class = "p" > (< / span > < span class = "n" > task< / span > : < span class = "nc" > Form< / span > < span class = "o" > < < / span > < span class = "n" > Task< / span > < span class = "o" > > < / span > < span class = "p" > )< / span > < span class = "w" > < / span > -> < span class = "nc" > Flash< / span > < span class = "o" > < < / span > < span class = "n" > Redirect< / span > < span class = "o" > > < / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "k" > if< / span > < span class = "w" > < / span > < span class = "n" > task< / span > < span class = "p" > .< / span > < span class = "n" > description< / span > < span class = "p" > .< / span > < span class = "n" > is_empty< / span > < span class = "p" > ()< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > Flash< / span > ::< span class = "n" > error< / span > < span class = "p" > (< / span > < span class = "n" > Redirect< / span > ::< span class = "n" > to< / span > < span class = "p" > (< / span > < span class = "s" > "/"< / span > < span class = "p" > ),< / span > < span class = "w" > < / span > < span class = "s" > "Cannot be empty."< / span > < span class = "p" > )< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "p" > }< / span > < span class = "w" > < / span > < span class = "k" > else< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > Flash< / span > ::< span class = "n" > success< / span > < span class = "p" > (< / span > < span class = "n" > Redirect< / span > ::< span class = "n" > to< / span > < span class = "p" > (< / span > < span class = "s" > "/"< / span > < span class = "p" > ),< / span > < span class = "w" > < / span > < span class = "s" > "Task added."< / span > < span class = "p" > )< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "p" > }< / span > < span class = "w" > < / span >
< span class = "p" > }< / span > < span class = "w" > < / span >
< / pre >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / section >
< section class = "grid mobile-reverse" >
< div class = "container" >
< div class = "col left-main" >
< h3 > JSON, out of the box.< / h3 >
< hr / >
< p >
Dioxus has first-class support for JSON, right out of the box.
Simply derive < code > Deserialize< / code > or < code > Serialize< / code > to
receive or return JSON, respectively.
< / p >
< p >
Like other important features, JSON works through Dioxus’
< code > FromData< / code > trait, Dioxus’
from body data. It works like this: specify a
< code > data< / code > route parameter of any type that implements
< code > FromData< / code > . A value of that type will then be created
automatically from the incoming request body. Best of all, you can
implement < code > FromData< / code > for your types!
< / p >
< / div >
< div class = "col right-main hl-dark" >
< table class = "code hltable" >
< tbody >
< tr >
< td class = "linenos" >
< div class = "linenodiv" >
< pre >
1
2
3
4
5
6
7
8
9
10
11
12
13
14< /pre
>
< / div >
< / td >
< td class = "code" >
< div class = "code hl" >
< pre > < span > < / span > < span class = "cp" > #[derive(Serialize, Deserialize)]< / span > < span class = "w" > < / span >
< span class = "k" > struct< / span > < span class = "nc" > Message< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > contents< / span > : < span class = "nb" > String< / span > < span class = "p" > ,< / span > < span class = "w" > < / span >
< span class = "p" > }< / span > < span class = "w" > < / span >
< span class = "cp" > #[put(< / span > < span class = "s" > "/< id> "< / span > < span class = "cp" > , data = < / span > < span class = "s" > "< msg> "< / span > < span class = "cp" > )]< / span > < span class = "w" > < / span >
< span class = "k" > fn< / span > < span class = "nf" > update< / span > < span class = "p" > (< / span > < span class = "n" > db< / span > : < span class = "kp" > & < / span > < span class = "nc" > Db< / span > < span class = "p" > ,< / span > < span class = "w" > < / span > < span class = "n" > id< / span > : < span class = "nc" > Id< / span > < span class = "p" > ,< / span > < span class = "w" > < / span > < span class = "n" > msg< / span > : < span class = "nc" > Json< / span > < span class = "o" > < < / span > < span class = "n" > Message< / span > < span class = "o" > > < / span > < span class = "p" > )< / span > < span class = "w" > < / span > -> < span class = "nc" > JsonValue< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "k" > if< / span > < span class = "w" > < / span > < span class = "n" > db< / span > < span class = "p" > .< / span > < span class = "n" > contains_key< / span > < span class = "p" > (< / span > < span class = "o" > & < / span > < span class = "n" > id< / span > < span class = "p" > )< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > db< / span > < span class = "p" > .< / span > < span class = "n" > insert< / span > < span class = "p" > (< / span > < span class = "n" > id< / span > < span class = "p" > ,< / span > < span class = "w" > < / span > < span class = "o" > & < / span > < span class = "n" > msg< / span > < span class = "p" > .< / span > < span class = "n" > contents< / span > < span class = "p" > );< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > json< / span > < span class = "o" > !< / span > < span class = "p" > ({< / span > < span class = "w" > < / span > < span class = "s" > "status"< / span > : < span class = "s" > "ok"< / span > < span class = "w" > < / span > < span class = "p" > })< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "p" > }< / span > < span class = "w" > < / span > < span class = "k" > else< / span > < span class = "w" > < / span > < span class = "p" > {< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "n" > json< / span > < span class = "o" > !< / span > < span class = "p" > ({< / span > < span class = "w" > < / span > < span class = "s" > "status"< / span > : < span class = "s" > "error"< / span > < span class = "w" > < / span > < span class = "p" > })< / span > < span class = "w" > < / span >
< span class = "w" > < / span > < span class = "p" > }< / span > < span class = "w" > < / span >
< span class = "p" > }< / span > < span class = "w" > < / span >
< / pre >
< / div >
< / td >
< / tr >
< / tbody >
< / table >
< / div >
< / div >
< / section >
< section class = "centered" >
< h1 > Dioxus is ready to launch.< / h1 >
< a href = "https://rocket.rs/v0.4/guide" class = "button" > Get Started< / a >
< a href = "https://rocket.rs/v0.4/overview" class = "button inverted"
>Learn More< /a
>
< / section >
< section class = "features" >
< div class = "container" >
< div class = "centered" >
< h2 > And so much more.< / h2 >
< h4 > Essential features, built in.< / h4 >
< / div >
< div class = "grid" >
< div class = "col centered tight" >
< img
src="./rocketsrchrome_files/templating-icon.svg"
alt="Templating Icon (templating-icon)"
/>
< h3 class = "blue" > Templating< / h3 >
< figcaption class = "wide" >
Dioxus makes templating a breeze with built-in templating support.
< / figcaption >
< a
class="button inverted small blue"
href="https://rocket.rs/v0.4/guide/responses/#templates"
>Learn More< /a
>
< / div >
< div class = "col centered tight" >
< img
src="./rocketsrchrome_files/cookies-icon.svg"
alt="Cookies Icon (cookies-icon)"
style="margin-top: -6px"
/>
< h3 class = "purple" > Cookies< / h3 >
< figcaption class = "wide" >
View, add, or remove cookies, with or without encryption, without
hassle.
< / figcaption >
< a
class="button inverted small purple"
href="https://rocket.rs/v0.4/guide/requests/#cookies"
>Learn More< /a
>
< / div >
< div class = "col centered tight" >
< img
src="./rocketsrchrome_files/streams-icon.svg"
alt="Streams Icon (streams-icon)"
style="margin-top: -29px"
/>
< h3 class = "red" > Streams< / h3 >
< figcaption class = "wide" >
Dioxus streams all incoming and outgoing data, so size isn't a
concern.
< / figcaption >
< a
class="button inverted small red"
href="https://rocket.rs/v0.4/guide/requests/#streaming"
>Learn More< /a
>
< / div >
< / div >
< hr / >
< div class = "grid" >
< div class = "col centered tight" >
< img
src="./rocketsrchrome_files/config-icon.svg"
alt="Config Environments Icon (config-icon)"
style="margin-top: -3px"
/>
< h3 class = "yellow" > Config Environments< / h3 >
< figcaption class = "wide" >
Configure your application your way for development, staging, and
production.
< / figcaption >
< a
class="button inverted small yellow"
href="https://rocket.rs/v0.4/guide/configuration/#environment"
>Learn More< /a
>
< / div >
< div class = "col centered tight" >
< img
src="./rocketsrchrome_files/testing-icon.svg"
alt="Testing Library Icon (testing-icon)"
/>
< h3 class = "orange" > Testing Library< / h3 >
< figcaption class = "wide" >
Unit test your applications with ease using the built-in testing
library.
< / figcaption >
< a
class="button inverted small orange"
href="https://rocket.rs/v0.4/guide/testing#testing"
>Learn More< /a
>
< / div >
< div class = "col centered tight" >
< img
src="./rocketsrchrome_files/ship-icon.svg"
alt="Typed URIs Icon (ship-icon)"
style="margin-top: -20px"
/>
< h3 class = "green" > Typed URIs< / h3 >
< figcaption class = "wide" >
Dioxus typechecks route URIs for you so you never mistype a URI
again.
< / figcaption >
< a
class="button inverted small green"
href="https://rocket.rs/v0.4/guide/responses/#typed-uris"
>Learn More< /a
>
< / div >
< / div >
< / div >
< / section >
< footer class = "grid" >
< div class = "container" >
< div class = "col mobile-hide" >
< a href = "https://sergio.bz/" > © 2016-2020 Sergio Benitez< / a >
< / div >
< div class = "col centered" >
< img
src="./rocketsrchrome_files/logo-small.svg"
alt="Small Dioxus Logo"
/>
< / div >
< div class = "col text-right mobile-hide" >
< a href = "https://rocket.rs/#" > BACK TO TOP Δ< / a >
< / div >
< / div >
< / footer >
< script >
function toggleOptions() {
if (!(870 < = screen.width)) {
var e = document.querySelector("nav.version-select options");
e.style.display = "none" === e.style.display ? "block" : "none";
}
}
< / script >
< script >
function make_clouds() {
for (
var t = [
{
src: "/v0.4/images/cloud-0.png",
className: "cloud back",
style: {
width: "254px",
height: "159px",
left: 0.4150208376753395,
top: 0.8482790827243787,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-1.png",
className: "cloud front",
style: {
width: "231px",
height: "117px",
left: 0.08151647217334701,
top: 0.46384778619445943,
transform: "",
},
},
{
src: "/v0.4/images/cloud-2.png",
className: "cloud front",
style: {
width: "66px",
height: "37px",
left: 0.748033557779848,
top: 0.22765147586875178,
transform: "",
},
},
{
src: "/v0.4/images/cloud-0.png",
className: "cloud front",
style: {
width: "114px",
height: "71px",
left: 0.9580076354609097,
top: 0.5181917598421091,
transform: "",
},
},
{
src: "/v0.4/images/cloud-0.png",
className: "cloud back",
style: {
width: "96px",
height: "60px",
left: 0.526598813402908,
top: 0.828749451839631,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-0.png",
className: "cloud front",
style: {
width: "72px",
height: "45px",
left: 0.43174032452284195,
top: 0.03627323642266411,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-0.png",
className: "cloud back",
style: {
width: "84px",
height: "53px",
left: 0.9296373513977365,
top: 0.2143312531352375,
transform: "",
},
},
{
src: "/v0.4/images/cloud-1.png",
className: "cloud front",
style: {
width: "157px",
height: "79px",
left: 0.8394192676334562,
top: 0.06256812600484052,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-1.png",
className: "cloud front",
style: {
width: "129px",
height: "66px",
left: 0.5289903611035771,
top: 0.44941927870774023,
transform: "",
},
},
{
src: "/v0.4/images/cloud-2.png",
className: "cloud front",
style: {
width: "191px",
height: "107px",
left: 0.5054580108916613,
top: 0.21665631039514555,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-1.png",
className: "cloud front",
style: {
width: "257px",
height: "130px",
left: 0.711964549651326,
top: 0.9866528842991085,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-0.png",
className: "cloud front",
style: {
width: "160px",
height: "100px",
left: 0.8804341424789892,
top: 0.9525512115988461,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-0.png",
className: "cloud front",
style: {
width: "189px",
height: "118px",
left: 0.11523417887783305,
top: 0.21620306890331475,
transform: "",
},
},
{
src: "/v0.4/images/cloud-2.png",
className: "cloud back",
style: {
width: "167px",
height: "93px",
left: 0.5745663098156899,
top: 0.40474044003106946,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-2.png",
className: "cloud back",
style: {
width: "211px",
height: "118px",
left: 0.640291368531211,
top: 0.854708255363859,
transform: "scaleX(-1)",
},
},
{
src: "/v0.4/images/cloud-2.png",
className: "cloud back",
style: {
width: "228px",
height: "128px",
left: 0.9868028690238078,
top: 0.3390108865793462,
transform: "scaleX(-1)",
},
},
],
p = document.getElementsByTagName("header")[0],
e = document.getElementById("clouds"),
s = Math.min((p.offsetHeight / 750) * t.length, t.length),
l = 0;
l < s ;
l++
) {
var a = t[l],
c = document.createElement("img");
Object.assign(c, a), Object.assign(c.style, a.style);
var o = p.offsetWidth;
c.style.left = o * a.style.left + "px";
var r = p.offsetHeight;
(c.style.top = r * a.style.top + "px"), e.appendChild(c);
}
var n = 0,
i = 0,
d = 14,
m = 5,
f = e.children;
function h(t, e, s, l) {
var a = ((e - s) / 1e3) * l;
if (a < 1 ) return ! 1 ;
for (var c = 0; c < f.length ; c + + ) {
var o = f[c];
if (o.className.includes(t)) {
var r = parseInt(o.style.left) - a,
n = parseInt(o.style.width);
if (r < -n ) {
var i = p.offsetWidth;
r = i - (-(r + n) % i);
}
o.style.left = r + "px";
}
}
return !0;
}
window.requestAnimationFrame(function t(e) {
e - Math.min(i, n) < 50 | |
(h("front", e, n, d) & & (n = e), h("back", e, i, m) & & (i = e)),
window.requestAnimationFrame(t);
});
}
make_clouds();
< / script >
< / body >
< / html >
