|
@@ -1 +1,915 @@
|
|
|
-hellllllloo
|
|
|
|
|
|
|
+<!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"></style
|
|
|
|
|
+ ><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’d see:
|
|
|
|
|
+ </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’t
|
|
|
|
|
+ a <code>u8</code>, Dioxus doesn’t blindly call <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’t call your function! What if you
|
|
|
|
|
+ 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’s
|
|
|
|
|
+ <code>FromData</code> trait, Dioxus’s approach to deriving types
|
|
|
|
|
+ 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>
|
Jonathan Kelley