From a61503f6cc832c015c0e65f015d1b4bc96a04841 Mon Sep 17 00:00:00 2001 From: Jonathan Kelley Date: Tue, 9 Feb 2021 12:33:54 -0500 Subject: [PATCH] Feat: homepage update from rocket --- .vscode/spellright.dict | 2 + README.md | 9 +- docs/guides/00-index.md | 0 docs/guides/01-ssr.md | 0 docs/guides/02-wasm.md | 0 docs/guides/03-desktop.md | 0 docs/index.html | 90 +- docs/posts/08-custom-renderer.md | 29 + docs/rocketsrchrome.htm | 91 + docs/rocketsrchrome_files/cloud-0.png | Bin 0 -> 883 bytes docs/rocketsrchrome_files/cloud-1.png | Bin 0 -> 938 bytes docs/rocketsrchrome_files/cloud-2.png | Bin 0 -> 856 bytes docs/rocketsrchrome_files/config-icon.svg | 1 + docs/rocketsrchrome_files/cookies-icon.svg | 1 + docs/rocketsrchrome_files/css | 32 + docs/rocketsrchrome_files/helmet.svg | 1 + docs/rocketsrchrome_files/logo-small.svg | 1 + docs/rocketsrchrome_files/robot-free.svg | 1 + docs/rocketsrchrome_files/ship-icon.svg | 1 + docs/rocketsrchrome_files/streams-icon.svg | 1 + docs/rocketsrchrome_files/style.css | 2033 +++++++++++++++++ docs/rocketsrchrome_files/sun.svg | 1 + docs/rocketsrchrome_files/telescope.svg | 1 + docs/rocketsrchrome_files/templating-icon.svg | 1 + docs/rocketsrchrome_files/testing-icon.svg | 1 + examples/Cargo.toml | 4 + examples/example_app.rs | 48 + 27 files changed, 2344 insertions(+), 5 deletions(-) create mode 100644 docs/guides/00-index.md create mode 100644 docs/guides/01-ssr.md create mode 100644 docs/guides/02-wasm.md create mode 100644 docs/guides/03-desktop.md create mode 100644 docs/rocketsrchrome.htm create mode 100644 docs/rocketsrchrome_files/cloud-0.png create mode 100644 docs/rocketsrchrome_files/cloud-1.png create mode 100644 docs/rocketsrchrome_files/cloud-2.png create mode 100644 docs/rocketsrchrome_files/config-icon.svg create mode 100644 docs/rocketsrchrome_files/cookies-icon.svg create mode 100644 docs/rocketsrchrome_files/css create mode 100644 docs/rocketsrchrome_files/helmet.svg create mode 100644 docs/rocketsrchrome_files/logo-small.svg create mode 100644 docs/rocketsrchrome_files/robot-free.svg create mode 100644 docs/rocketsrchrome_files/ship-icon.svg create mode 100644 docs/rocketsrchrome_files/streams-icon.svg create mode 100644 docs/rocketsrchrome_files/style.css create mode 100644 docs/rocketsrchrome_files/sun.svg create mode 100644 docs/rocketsrchrome_files/telescope.svg create mode 100644 docs/rocketsrchrome_files/templating-icon.svg create mode 100644 docs/rocketsrchrome_files/testing-icon.svg create mode 100644 examples/example_app.rs diff --git a/.vscode/spellright.dict b/.vscode/spellright.dict index ef16ea2d..493ea460 100644 --- a/.vscode/spellright.dict +++ b/.vscode/spellright.dict @@ -16,3 +16,5 @@ Dodrio fc Jemalloc Cloudfare +webapps +downcasting diff --git a/README.md b/README.md index 21f545c0..20670fb8 100644 --- a/README.md +++ b/README.md @@ -11,12 +11,12 @@ Dioxus is a portable, performant, and ergonomic framework for building cross-pla ```rust static Example: FC<()> = |ctx| { - let (val1, set_val1) = use_state(&ctx, || "___?"); + let (value, set_value) = use_state(&ctx, || "...?"); ctx.view(html! {
- - + +

"Hello, {val1}"

@@ -24,7 +24,8 @@ static Example: FC<()> = |ctx| { }) }; ``` -The primary Dioxus crate is agnostic to platform and is meant to be configured with external renderers for getting content to the screen. We have built renderers for Dioxus to serve WebApps, Desktop Apps, static pages, liveview, Android, and iOS. +Dioxus can be used to serve webapps, desktop apps, static pages, LiveView apps, Android apps, iOS Apps, and more. At its core, +Dioxus is entirely renderer agnostic and has great documentation for creating new renderers for any platform. Dioxus is supported by Dioxus Labs, a company providing end-to-end services for building, testing, deploying, and managing Dioxus apps on all supported platforms, designed especially for your next startup. diff --git a/docs/guides/00-index.md b/docs/guides/00-index.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/01-ssr.md b/docs/guides/01-ssr.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/02-wasm.md b/docs/guides/02-wasm.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/guides/03-desktop.md b/docs/guides/03-desktop.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/index.html b/docs/index.html index a0423896..0db079f0 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1,89 @@ -hello world! +Dioxus - Simple, Fast, Type-Safe Web Framework for Rust

Latest Release: 0.4.6 (Nov 09, 2020)


Type Safe Icon (helmet)

Type Safe

From request to response Dioxus ensures that your types mean something.
Learn More
Boilerplate Free Icon (robot-free)

Boilerplate Free

Spend your time writing code that really matters, and let Dioxus generate the rest.
See Examples
Easy To Use Icon (sun)

Easy To Use

Simple, intuitive APIs make Dioxus approachable, no matter your background.
Get Started
Extensible Icon (telescope)

Extensible

Create your own first-class primitives that any Dioxus application can use.
See How

Hello, Dioxus!

This is a complete Dioxus application. It does exactly what you would expect. If you were to visit http://localhost:8000/hello/John/58, you’d see:

Hello, 58 year old named John!

If someone visits a path with an <age> that isn’t a u8, Dioxus doesn’t blindly call hello. Instead, it tries other matching routes or returns a 404.

 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+10
+11
+12

+
+#[macro_use] extern crate dioxus;
+
+#[get("/hello/<name>/<age>")]
+fn hello(name: String, age: u8) -> String {
+    format!("Hello, {} year old named {}!", age, name)
+}
+
+fn main() {
+    Dioxus::ignite().mount("/", routes![hello]).launch();
+}
+

Forms? Check!

Handling forms is simple and easy. Simply derive FromForm for your structure and let Dioxus know which parameter to use. Dioxus parses and validates the form request, creates the structure, and calls your function.

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 task to Option or Result!

 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+10
+11
+12
+13
+14
#[derive(FromForm)]
+struct Task {
+   description: String,
+   completed: bool
+}
+
+#[post("/", data = "<task>")]
+fn new(task: Form<Task>) -> Flash<Redirect> {
+    if task.description.is_empty() {
+        Flash::error(Redirect::to("/"), "Cannot be empty.")
+    } else {
+        Flash::success(Redirect::to("/"), "Task added.")
+    }
+}
+

JSON, out of the box.

Dioxus has first-class support for JSON, right out of the box. Simply derive Deserialize or Serialize to receive or return JSON, respectively.

Like other important features, JSON works through Dioxus’s FromData trait, Dioxus’s approach to deriving types from body data. It works like this: specify a data route parameter of any type that implements FromData. A value of that type will then be created automatically from the incoming request body. Best of all, you can implement FromData for your types!

 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+10
+11
+12
+13
+14
#[derive(Serialize, Deserialize)]
+struct Message {
+   contents: String,
+}
+
+#[put("/<id>", data = "<msg>")]
+fn update(db: &Db, id: Id, msg: Json<Message>) -> JsonValue {
+    if db.contains_key(&id) {
+        db.insert(id, &msg.contents);
+        json!({ "status": "ok" })
+    } else {
+        json!({ "status": "error" })
+    }
+}
+

Dioxus is ready to launch.

Get Started Learn More

And so much more.

Essential features, built in.

Templating Icon (templating-icon)

Templating

Dioxus makes templating a breeze with built-in templating support.
Learn More
Cookies Icon (cookies-icon)

Cookies

View, add, or remove cookies, with or without encryption, without hassle.
Learn More
Streams Icon (streams-icon)

Streams

Dioxus streams all incoming and outgoing data, so size isn't a concern.
Learn More
Config Environments Icon (config-icon)

Config Environments

Configure your application your way for development, staging, and production.
Learn More
Testing Library Icon (testing-icon)

Testing Library

Unit test your applications with ease using the built-in testing library.
Learn More
Typed URIs Icon (ship-icon)

Typed URIs

Dioxus typechecks route URIs for you so you never mistype a URI again.
Learn More
diff --git a/docs/posts/08-custom-renderer.md b/docs/posts/08-custom-renderer.md index 577b4f5d..346c26f7 100644 --- a/docs/posts/08-custom-renderer.md +++ b/docs/posts/08-custom-renderer.md @@ -1 +1,30 @@ # Custom Renderer + +Dioxus is an incredibly portable framework for UI development. The lessons, knowledge, hooks, and components you acquire over time can always be used for future projects. However, sometimes those projects cannot leverage a supported renderer or you need to implement your own better renderer. + +Great news: the design of the renderer is entirely up to you! We provide suggestions and inspiration with the 1st party renderers, but provide no trait or explicit interface to follow. + +Implementing the renderer is fairly straightforward. The renderer needs to: +1. Handle the stream of edit events generated by updates to the virtual DOM +2. Register listeners and pass events into the virtual DOM's event system +3. Progress the virtual DOM with an async executor (or disable the suspense API and use `progress_sync`) + +Essentially, your renderer needs to understand the EditEvent type and provide a callback for injecting events. From there, you'll have everything needed to render the VirtualDOM to the screen. + +Internally, Dioxus handles the tree relationship, diffing, memory management, and the event system, leaving as little as possible required for renderers to implement themselves. + +For inspiration, check out the source code for the various renderers we support: +- WebSys +- Morph + +## Compatibility + +Forewarning: not every hook and service will work on your platform. Dioxus wraps things that need to be cross-platform in "synthetic" types. However, downcasting to a native type might fail if the types don't match. + +There are three opportunities for platform incompatibilities to break your program: +1. When downcasting elements via `Ref.to_native()` +2. When downcasting events via `Event.to_native()` +3. Calling platform-specific APIs that don't exist + +The best hooks will properly detect the target platform and still provide functionality, failing gracefully when a platform is not supported. We encourage - and provide - an indication to the user on what platforms a hook supports. For issues 1 and 2, these return a result as to not cause panics on unsupported platforms. When designing your hooks, we recommend propagating this error upwards into user facing code, making it obvious that this particular service is not supported. + diff --git a/docs/rocketsrchrome.htm b/docs/rocketsrchrome.htm new file mode 100644 index 00000000..8cf2ace9 --- /dev/null +++ b/docs/rocketsrchrome.htm @@ -0,0 +1,91 @@ + + +Dioxus - Simple, Fast, Type-Safe Web Framework for Rust

Latest Release: 0.4.6 (Nov 09, 2020)


Type Safe Icon (helmet)

Type Safe

From request to response Dioxus ensures that your types mean something.
Learn More
Boilerplate Free Icon (robot-free)

Boilerplate Free

Spend your time writing code that really matters, and let Dioxus generate the rest.
See Examples
Easy To Use Icon (sun)

Easy To Use

Simple, intuitive APIs make Dioxus approachable, no matter your background.
Get Started
Extensible Icon (telescope)

Extensible

Create your own first-class primitives that any Dioxus application can use.
See How

Hello, Dioxus!

This is a complete Dioxus application. It does exactly what you would expect. If you were to visit http://localhost:8000/hello/John/58, you’d see:

Hello, 58 year old named John!

If someone visits a path with an <age> that isn’t a u8, Dioxus doesn’t blindly call hello. Instead, it tries other matching routes or returns a 404.

 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+10
+11
+12
#![feature(proc_macro_hygiene, decl_macro)]
+
+#[macro_use] extern crate rocket;
+
+#[get("/hello/<name>/<age>")]
+fn hello(name: String, age: u8) -> String {
+    format!("Hello, {} year old named {}!", age, name)
+}
+
+fn main() {
+    rocket::ignite().mount("/", routes![hello]).launch();
+}
+

Forms? Check!

Handling forms is simple and easy. Simply derive FromForm for your structure and let Dioxus know which parameter to use. Dioxus parses and validates the form request, creates the structure, and calls your function.

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 task to Option or Result!

 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+10
+11
+12
+13
+14
#[derive(FromForm)]
+struct Task {
+   description: String,
+   completed: bool
+}
+
+#[post("/", data = "<task>")]
+fn new(task: Form<Task>) -> Flash<Redirect> {
+    if task.description.is_empty() {
+        Flash::error(Redirect::to("/"), "Cannot be empty.")
+    } else {
+        Flash::success(Redirect::to("/"), "Task added.")
+    }
+}
+

JSON, out of the box.

Dioxus has first-class support for JSON, right out of the box. Simply derive Deserialize or Serialize to receive or return JSON, respectively.

Like other important features, JSON works through Dioxus’s FromData trait, Dioxus’s approach to deriving types from body data. It works like this: specify a data route parameter of any type that implements FromData. A value of that type will then be created automatically from the incoming request body. Best of all, you can implement FromData for your types!

 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+10
+11
+12
+13
+14
#[derive(Serialize, Deserialize)]
+struct Message {
+   contents: String,
+}
+
+#[put("/<id>", data = "<msg>")]
+fn update(db: &Db, id: Id, msg: Json<Message>) -> JsonValue {
+    if db.contains_key(&id) {
+        db.insert(id, &msg.contents);
+        json!({ "status": "ok" })
+    } else {
+        json!({ "status": "error" })
+    }
+}
+

Dioxus is ready to launch.

Get Started Learn More

And so much more.

Essential features, built in.

Templating Icon (templating-icon)

Templating

Dioxus makes templating a breeze with built-in templating support.
Learn More
Cookies Icon (cookies-icon)

Cookies

View, add, or remove cookies, with or without encryption, without hassle.
Learn More
Streams Icon (streams-icon)

Streams

Dioxus streams all incoming and outgoing data, so size isn't a concern.
Learn More
Config Environments Icon (config-icon)

Config Environments

Configure your application your way for development, staging, and production.
Learn More
Testing Library Icon (testing-icon)

Testing Library

Unit test your applications with ease using the built-in testing library.
Learn More
Typed URIs Icon (ship-icon)

Typed URIs

Dioxus typechecks route URIs for you so you never mistype a URI again.
Learn More
diff --git a/docs/rocketsrchrome_files/cloud-0.png b/docs/rocketsrchrome_files/cloud-0.png new file mode 100644 index 0000000000000000000000000000000000000000..9a3377af2946c4425cf7c86273de0300805f2a52 GIT binary patch literal 883 zcmV-(1C0EMP)Px#32;bRa{vGf6951U69E94oEQKA02@$DR7FQ{O#lD? z|NsC0|NsC0|NsC0|NsC0|NsC0{}%ln4gdfE2y{|TQvl`}!8({@fat{;eEB+C!od+O6kiGB-YZ&F+!v%p7qqTdi4^WI zrA->0$>3UwHY@)ufqP4pk^r`dkibJlwLs=QjOuYjC96xrjC6X+$vY>#KJwun8Q>`A zi)d=Xz=v)t(zW|mpy=CI7QIgew37RzH<;JFQt+TN8+S@B9#?s4T{ zX2~o3aE~o~2O z28JmwPj~1(W5#I=6Dn?AfnA=aWT))B9B9s|>I`}#z^i$#hy-wT2Hlh3HTU1`GhJxS zO>=VP+x}RegndjnmmVu&;oSUa5fVXx4RIbdmw7Mbc`K(=2H-6<^&ug&i^;wX<#Y?f zyLE40{T7&kc>iWR1>((~(<4HuiL~duXWEAG?i{m4*noBj8_;VUZ`y?30C{a-y5IK{ zDPcDd$(wATLh`ynfW*-bm{)*#C773kdE+J&>d$dPV0lAqzK;_ygYw#7-VXHqoA5eN z-XG-sWy;$I^BQ1Y1ojL6%cthXl!AHC1ni2xF0Hi?P=lTYSc4|m8|Vn!A(h~cv%q%n zllv}o1Bb8&!i7B@1~RL{0@=Zb)7b{&&R*K}9;5SGo^(WyL0`r1b1!k5Sm%r8H0!16cGaA_ z5b$O7T*?I$H`ai=(BwZfb6P)HiLdpOXwkP%Jo}i(mk)pU`VUlhfw$9C$m#$9002ov JPDHLkV1nUatT_Mx literal 0 HcmV?d00001 diff --git a/docs/rocketsrchrome_files/cloud-1.png b/docs/rocketsrchrome_files/cloud-1.png new file mode 100644 index 0000000000000000000000000000000000000000..efe778e381e562822853da1a4b28b727cba6d8d9 GIT binary patch literal 938 zcmV;b16BNqP)Px#32;bRa{vGf6951U69E94oEQKA03J|GR7FQ{O#lD? z|NsC0|NsC0|NsC0|NsC0|NsC0|NsC0$pJ8-00009bW%=J0AS@Mz<8NN5SfTyod5s> z07*naRA}D4o6Bz6P!NVqY+{z7Nfoi9ibC-Yk)~00D2h^NGwe*F65Y5&ukjw7tvj}uzxbXyelGbJTz zUC9}BPFZ~sLiz7$Rr?~x<_{=OaR-KyfYruSqIb$;9~62Fs; zntWG%scv;z=)jH@iR4m&wv<^zTNL&9x{6ZGVIEY^ur4tugqfvU5?Rbr3l1K$=#L7^ zV?n7^jv)_ArJJhopeQ;xItU?=@sHQvwidSa~AUgwt>Yc)Eia;&z{ zovd_EkL6g@G2CF7Xar=nL1iPaCJLffGE9<{4GvM(8IaY(#YT1yAv4M|oEY1wjF8$gx^WL1H&;R0Erg=3CuZYbXEpc=$P{Rt`%lfM2HV0c*S1E~6D zuIH&ZD;Klz=_MhtTq9xHZGmhYx4$R*dm{60Kk95WLPxfMxPFRGeSL;e#)Hc z&hS%@=LYe<V z)2;Rhn1*WKU|?Wc=jq}Yl5ubEEc<+6M}ec~3m@%Z`RMK?p5wUb?n4gOcT64)*1}vR zcO6AsOY}B$SaY=9lU9FL8~skErFPr;Idoq^1Kew-$bFJ{pwxb1YG~x?Str#W zsZC+OrY!QZ)8?abSE&;3ojB$e-j$ZVUwx)kw0;#jn|;+n;P|8?Vh4CHX}Vlgxa%as zvnfxeQ(5zoUW{t#p0YWezLE(?B{@#7ogES@xagz8y}Vujm$hyA_%`)TQCs?@T@#zv z+8Y_$OR?q3KXS`FE9LV0R)wIs$LpQ)3v0HJQu+axY*jfgIC zIbMA3gy7wn)d@k96@>e*)SvNQ^*A<6#lPimz?Q!Y7co8Q;}d*e)S0WA^e;ASiOU(= z`c(nJo4@RNHurkK&ioy0KUv=>SSPSsUQqE1+cL>2WUEQgKbxv`-ZHvp4)bPcUtZYG zEMPMI+QLMJ=W3-w1!-HeR34o9Q4-_m3I9d^U9OFv f`}2S2Z|*~vUVOTF \ No newline at end of file diff --git a/docs/rocketsrchrome_files/cookies-icon.svg b/docs/rocketsrchrome_files/cookies-icon.svg new file mode 100644 index 00000000..0ba4c359 --- /dev/null +++ b/docs/rocketsrchrome_files/cookies-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/css b/docs/rocketsrchrome_files/css new file mode 100644 index 00000000..a0fdfcc2 --- /dev/null +++ b/docs/rocketsrchrome_files/css @@ -0,0 +1,32 @@ +/* latin-ext */ +@font-face { + font-family: 'Proza Libre'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjGdGHgj0k1DIQRyUEyyEomdNr1Wpyyzzc.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Proza Libre'; + font-style: normal; + font-weight: 400; + src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjGdGHgj0k1DIQRyUEyyEoodNr1Wpyy.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} +/* latin-ext */ +@font-face { + font-family: 'Proza Libre'; + font-style: normal; + font-weight: 500; + src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjbdGHgj0k1DIQRyUEyyELbV8_WeJGY9T6Mh1k.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'Proza Libre'; + font-style: normal; + font-weight: 500; + src: url(https://fonts.gstatic.com/s/prozalibre/v5/LYjbdGHgj0k1DIQRyUEyyELbV8_YeJGY9T6M.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/docs/rocketsrchrome_files/helmet.svg b/docs/rocketsrchrome_files/helmet.svg new file mode 100644 index 00000000..48045832 --- /dev/null +++ b/docs/rocketsrchrome_files/helmet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/logo-small.svg b/docs/rocketsrchrome_files/logo-small.svg new file mode 100644 index 00000000..b2e13482 --- /dev/null +++ b/docs/rocketsrchrome_files/logo-small.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/robot-free.svg b/docs/rocketsrchrome_files/robot-free.svg new file mode 100644 index 00000000..275e2e5d --- /dev/null +++ b/docs/rocketsrchrome_files/robot-free.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/ship-icon.svg b/docs/rocketsrchrome_files/ship-icon.svg new file mode 100644 index 00000000..581322d8 --- /dev/null +++ b/docs/rocketsrchrome_files/ship-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/streams-icon.svg b/docs/rocketsrchrome_files/streams-icon.svg new file mode 100644 index 00000000..c6545452 --- /dev/null +++ b/docs/rocketsrchrome_files/streams-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/style.css b/docs/rocketsrchrome_files/style.css new file mode 100644 index 00000000..4415ba38 --- /dev/null +++ b/docs/rocketsrchrome_files/style.css @@ -0,0 +1,2033 @@ +@keyframes octocat-wave { + 0%, + to { + transform: rotate(0); + } + 20%, + 60% { + transform: rotate(-25deg); + } + 40%, + 80% { + transform: rotate(10deg); + } +} +html { + line-height: 1.15; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +.features .col.tight .button, +.features .col.tight button, +body { + margin: 0; +} +article, +aside, +details, +figcaption, +figure, +footer, +header, +header nav.version-select:hover options, +main, +menu, +nav, +section { + display: block; +} +h1 { + margin: 0.67em 0; + font-size: 3em; +} +figure { + margin: 1em 40px; +} +hr { + box-sizing: content-box; + overflow: visible; + border: 0; + height: 1px; + background-color: rgba(255, 255, 255, 0.25); +} +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +a { + background-color: transparent; + -webkit-text-decoration-skip: objects; + color: #fff; + text-decoration: none; +} +a:active, +a:hover { + outline-width: 0; +} +abbr[title] { + border-bottom: none; + text-decoration: underline dotted; +} +b, +strong { + font-weight: bolder; +} +dfn { + font-style: italic; +} +mark { + background-color: #ff0; + color: #000; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +audio, +canvas, +video { + display: inline-block; +} +audio:not([controls]) { + display: none; + height: 0; +} +img { + border-style: none; +} +svg:not(:root) { + overflow: hidden; +} +button { + line-height: 1.15; +} +input, +optgroup, +select, +textarea { + font-family: sans-serif; + line-height: 1.15; + margin: 0; +} +optgroup { + font-size: 100%; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +[type="reset"], +[type="submit"], +button, +html [type="button"] { + -webkit-appearance: button; +} +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + border: 1px solid silver; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} +legend { + color: inherit; + display: table; + max-width: 100%; + white-space: normal; +} +progress { + display: inline-block; + vertical-align: baseline; +} +textarea { + overflow: auto; +} +[type="checkbox"], +[type="radio"], +legend { + box-sizing: border-box; + padding: 0; +} +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +summary { + display: list-item; +} +[hidden], +template { + display: none; +} +body, +html { + -webkit-font-smoothing: antialiased; + background-color: black; + /* background-color: #d33847; */ +} +html { + color: #fff; +} +a.button, +body, +button, +html { + font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; +} +body { + font-size: 16px; +} +body, +input, +select, +textarea { + color: #fff; +} +.code { + font-family: Consolas, "Liberation Mono", Menlo, Monaco, Lucida Console, + Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, + monospace, serif; +} +.container { + margin: 0 20px; + display: inherit; + position: relative; + width: calc(100% - 40px); +} +@media (min-width: 1310px) { + .container { + margin: auto; + width: 1270px; + } +} +h2 { + font-size: 2.5em; +} +h3 { + font-size: 1.6em; +} +h4 { + font-size: 1.2em; +} +.addon, +input, +select, +textarea { + outline: 0; + font-size: 14px; +} +ul.columns { + list-style-position: inside; + columns: 1; +} +@media (min-width: 650px) { + ul.columns { + columns: 2; + } +} +@media (min-width: 800px) { + ul.columns { + columns: 3; + } +} +a.button, +button { + font-size: 1.125em; + background: #999; + border-radius: 5px; + border: 0; + cursor: pointer; + display: inline-block; + padding: 8px 34px; + background: #fff; + color: #f03b4d; + font-weight: 500; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15); + margin: 15px; + text-shadow: none; +} +a.button.small, +button.small { + font-size: 0.875em; + padding: 8px 26px; +} +a.button:hover, +button:hover { + background: #ffd1d6; + background: linear-gradient(#fff, #ffd1d6); + border: 0; + outline: 0; +} +a.button:active, +a.button:focus, +button:active, +button:focus { + background: #ffd1d6; + background: linear-gradient(#ffd1d6, #fff); + border: 0; + outline: 0; +} +a.button.inverted, +button.inverted { + background: 0 0; + color: #fff; + padding: 6px 30px; + border: 2px solid #fff; + font-weight: 500; +} +a.button.inverted.small, +button.inverted.small { + padding: 6px 24px; +} +a.button.inverted:hover, +button.inverted:hover { + background-color: rgba(255, 255, 255, 0.15); +} +a.button.inverted:active, +a.button.inverted:focus, +button.inverted:active, +button.inverted:focus { + background-color: rgba(0, 0, 0, 0.25); +} +a.button.inverted.blue, +button.inverted.blue { + border-color: #5daced; +} +a.button.inverted.purple, +button.inverted.purple { + border-color: #df76ff; +} +a.button.inverted.red, +button.inverted.red { + border-color: #ff6170; +} +a.button.inverted.yellow, +button.inverted.yellow { + border-color: #fff776; +} +a.button.inverted.orange, +button.inverted.orange { + border-color: #ff853e; +} +a.button.inverted.green, +button.inverted.green { + border-color: #15dc98; +} +.table-container { + overflow-x: auto; +} +table:not(.code) { + border-collapse: collapse; + border-spacing: 0; + font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + text-shadow: none; + box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); + border-bottom: 1px solid #111; + border-top: 1px solid #111; +} +table:not(.code) thead { + background-color: #131313; + text-align: left; + border-bottom: 1px solid #111; +} +table:not(.code) td, +table:not(.code) th { + border-left: 1px solid #111; + padding: 0.5em 1.25em; +} +table:not(.code) td:last-child, +table:not(.code) th:last-child { + border-right: 1px solid #111; +} +table:not(.code) tbody > tr { + background: #303133; +} +table:not(.code) tbody > tr:nth-child(2n) { + background: #202020; +} +.grid { + display: flex; +} +@media (max-width: 870px) { + .grid { + display: block; + } +} +.col { + box-sizing: border-box; + flex: 1; +} +.col.center { + align-self: center; +} +.hl, +.hl-dark { + color: #abb2bf; +} +.hl .c, +.hl-dark .c { + color: #5c6370; + font-style: italic; +} +.hl .err, +.hl-dark .err { + color: #960050; + background-color: #1e0010; +} +.hl .k, +.hl-dark .k { + color: #c678dd; +} +.hl .l, +.hl-dark .l { + color: #98c379; +} +.hl .n, +.hl .o, +.hl .p, +.hl-dark .n, +.hl-dark .o, +.hl-dark .p { + color: #abb2bf; +} +.hl .cm, +.hl-dark .cm { + color: #5c6370; + font-style: italic; +} +.hl .cp, +.hl-dark .cp { + color: #61afef; +} +.hl .c1, +.hl .cs, +.hl-dark .c1, +.hl-dark .cs { + color: #5c6370; + font-style: italic; +} +.hl .ge, +.hl-dark .ge { + font-style: italic; +} +.hl .gs, +.hl-dark .gs { + font-weight: 700; +} +.hl .kc, +.hl .kd, +.hl .kn, +.hl-dark .kc, +.hl-dark .kd, +.hl-dark .kn { + color: #c678dd; +} +.hl .kp, +.hl-dark .kp { + color: #d19a66; +} +.hl .kr, +.hl-dark .kr { + color: #c678dd; +} +.hl .kt, +.hl-dark .kt { + color: #e06c75; +} +.hl .ld, +.hl-dark .ld { + color: #98c379; +} +.hl .m, +.hl-dark .m { + color: #d19a66; +} +.hl .s, +.hl-dark .s { + color: #98c379; +} +.hl .na, +.hl-dark .na { + color: #d19a66; +} +.hl .nb, +.hl .nc, +.hl .nd, +.hl .ne, +.hl .ni, +.hl .no, +.hl-dark .nb, +.hl-dark .nc, +.hl-dark .nd, +.hl-dark .ne, +.hl-dark .ni, +.hl-dark .no { + color: #e5c07b; +} +.hl .nf, +.hl-dark .nf { + color: #61afef; +} +.hl .nl, +.hl-dark .nl { + color: #e5c07b; +} +.hl .nn, +.hl .nx, +.hl-dark .nn, +.hl-dark .nx { + color: #abb2bf; +} +.hl .py, +.hl-dark .py { + color: #e5c07b; +} +.hl .nt, +.hl-dark .nt { + color: #e06c75; +} +.hl .nv, +.hl-dark .nv { + color: #e5c07b; +} +.hl .ow, +.hl-dark .ow { + font-weight: 700; +} +.hl .w, +.hl-dark .w { + color: #f8f8f2; +} +.hl .mf, +.hl .mh, +.hl .mi, +.hl .mo, +.hl-dark .mf, +.hl-dark .mh, +.hl-dark .mi, +.hl-dark .mo { + color: #d19a66; +} +.hl .s2, +.hl .sb, +.hl .sc, +.hl .sd, +.hl .se, +.hl .sh, +.hl .si, +.hl .sx, +.hl-dark .s2, +.hl-dark .sb, +.hl-dark .sc, +.hl-dark .sd, +.hl-dark .se, +.hl-dark .sh, +.hl-dark .si, +.hl-dark .sx { + color: #98c379; +} +.hl .sr, +.hl-dark .sr { + color: #56b6c2; +} +.hl .s1, +.hl-dark .s1 { + color: #98c379; +} +.hl .ss, +.hl-dark .ss { + color: #56b6c2; +} +.hl .bp, +.hl .vc, +.hl .vg, +.hl-dark .bp, +.hl-dark .vc, +.hl-dark .vg { + color: #e5c07b; +} +.hl .vi, +.hl-dark .vi { + color: #e06c75; +} +.hl .il, +.hl-dark .il { + color: #d19a66; +} +.hl .gu, +.hl-dark .gu { + color: #75715e; +} +.hl .gd, +.hl-dark .gd { + color: #f92672; +} +.hl .gi, +.hl-dark .gi { + color: #a6e22e; +} +.hl-light { + color: #383a42; +} +.hl-light .c { + color: #a0a1a7; + font-style: italic; +} +.hl-light .err { + color: #960050; + background-color: #1e0010; +} +.hl-light .k { + color: #a626a4; +} +.hl-light .l { + color: #50a14f; +} +.hl-light .n, +.hl-light .o, +.hl-light .p { + color: #383a42; +} +.hl-light .cm { + color: #a0a1a7; + font-style: italic; +} +.hl-light .cp { + color: #4078f2; +} +.hl-light .c1, +.hl-light .cs { + color: #a0a1a7; + font-style: italic; +} +.hl-light .ge { + font-style: italic; +} +.hl-light .gs { + font-weight: 700; +} +.hl-light .kc, +.hl-light .kd, +.hl-light .kn { + color: #a626a4; +} +.hl-light .kp { + color: #986801; +} +.hl-light .kr { + color: #a626a4; +} +.hl-light .kt { + color: #e45649; +} +.hl-light .ld { + color: #50a14f; +} +.hl-light .m { + color: #986801; +} +.hl-light .s { + color: #50a14f; +} +.hl-light .na { + color: #986801; +} +.hl-light .nb, +.hl-light .nc, +.hl-light .nd, +.hl-light .ne, +.hl-light .ni, +.hl-light .no { + color: #c18401; +} +.hl-light .nf { + color: #4078f2; +} +.hl-light .nl { + color: #c18401; +} +.hl-light .nn, +.hl-light .nx { + color: #383a42; +} +.hl-light .py { + color: #c18401; +} +.hl-light .nt { + color: #e45649; +} +.hl-light .nv { + color: #c18401; +} +.hl-light .ow { + font-weight: 700; +} +.hl-light .w { + color: #f8f8f2; +} +.hl-light .mf, +.hl-light .mh, +.hl-light .mi, +.hl-light .mo { + color: #986801; +} +.hl-light .s2, +.hl-light .sb, +.hl-light .sc, +.hl-light .sd, +.hl-light .se, +.hl-light .sh, +.hl-light .si, +.hl-light .sx { + color: #50a14f; +} +.hl-light .sr { + color: #0184bc; +} +.hl-light .s1 { + color: #50a14f; +} +.hl-light .ss { + color: #0184bc; +} +.hl-light .bp, +.hl-light .vc, +.hl-light .vg { + color: #c18401; +} +.hl-light .vi { + color: #e45649; +} +.hl-light .il { + color: #986801; +} +.hl-light .gu { + color: #75715e; +} +.hl-light .gd { + color: #f92672; +} +.hl-light .gi { + color: #a6e22e; +} +header { + background-color: #d33847; + position: relative; + overflow: hidden; +} +header :not(.cloud) { + position: relative; + z-index: 10; +} +header h1, +header h2, +header h3, +header h4 { + font-family: "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); +} +header h1 { + font-size: 42px; + margin: 30px 0 0; + font-weight: 600; +} +header h1 a:active, +header h1 a:focus, +header h1 a:hover { + color: #ffbec4; + border: 0; +} +header h4 { + font-size: 16px; + line-height: 18px; + font-weight: 500; + margin: 0; + padding: 10px 0 70px; + color: #ffdada; +} +header .banner { + margin: 30px 0 50px; +} +header .banner h1, +header .banner h2, +header .banner h3, +header .banner h4 { + font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; +} +header .banner h1 { + font-size: 36px; + font-weight: 500; + margin: 17px 0; +} +header .banner h2 { + font-size: 25px; + font-weight: 300; + line-height: 36px; + margin: 10px auto 15px; + max-width: 580px; +} +.cloud { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: block; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; + perspective: 1000; + transform: translateZ(0); +} +.cloud.back { + z-index: 1; + opacity: 0.03; +} +.cloud.front { + z-index: 2; + opacity: 0.06; +} +.features img { + margin-bottom: 15px; +} +.features h2 { + font-size: 36px; + color: #fff; + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); + font-weight: 500; + line-height: 36px; + margin-top: 0; + margin-bottom: 10px; +} +.features figcaption, +.features h2, +.features h3, +.features h4 { + font-family: "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; +} +.features h3 { + font-size: 20px; + line-height: 20px; + text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); + margin: 0 auto; + font-weight: 500; +} +.features h3.blue { + color: #5daced; +} +.features h3.purple { + color: #df76ff; +} +.features h3.red { + color: #ff6170; +} +.features h3.yellow { + color: #fff776; +} +.features h3.orange { + color: #ff853e; +} +.features h3.green { + color: #15dc98; +} +.features figcaption, +.features h4 { + font-weight: 400; +} +.features h4 { + margin-top: 0; + margin-bottom: 35px; + font-size: 18px; + color: #a2a2a2; + line-height: 24px; +} +.features figcaption { + color: #ffd5d8; + font-size: 15px; + line-height: 25px; + max-width: 220px; + margin: 10px auto 0; +} +.features figcaption.wide { + margin-bottom: 15px; + max-width: 300px; + font-weight: 300; + color: #fff; + padding: 0 10px; +} +.features .col { + border-right: 1px solid rgba(255, 255, 255, 0.25); + margin: 40px 0; +} +@media (max-width: 870px) { + .features .col { + border-right: none; + } +} +.features .col.tight:last-child, +.features .col:last-child { + border-right: none; +} +@media (max-width: 870px) { + .features .col:last-child { + margin-bottom: 40px; + } +} +.features .col.tight { + padding: 35px 0; + margin: 10px 0; + border-right: 1px solid rgba(255, 255, 255, 0.1); +} +@media (max-width: 870px) { + .features .col.tight { + border-right: none; + } +} +@media (max-width: 870px) { + .features .col.tight:last-child { + margin-bottom: 0; + } +} +.features hr { + background-color: rgba(255, 255, 255, 0.1); + margin: 30px 0; +} +a:hover { + border-bottom: 1px dashed #fff; +} +a:active, +a:focus { + border-bottom: 1px solid #fff; + outline: 0; +} +#pagination ul, +.centered, +.circle-container h4 { + text-align: center; +} +.pull-right { + float: right; +} +.text-right { + text-align: right; +} +table { + width: 100%; +} +table.code { + display: inline-block; + color: #a5abb8; + font-size: 14px; + text-shadow: none; + padding: 0; + border-spacing: 0; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5); + border-radius: 5px; + width: 100%; + overflow-x: auto; +} +table.code * { + font-family: Consolas, "Liberation Mono", Menlo, Monaco, Lucida Console, + Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, + monospace, serif; + line-height: 18px; + margin: 0; + -webkit-font-smoothing: subpixel-antialiased; +} +table.code td.linenos { + background-color: #3a3a3a; + padding: 15px 10px 15px 18px; + color: #666; + text-align: right; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border: 1px solid #4b4b4b; + border-right: 1px solid #1b1d22; +} +table.code td.code { + padding-left: 15px; + background: #323232; + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + border: 1px solid #4b4b4b; + border-left: none; + width: 100%; +} +footer, +section { + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); + background-color: #272727; +} +section { + padding: 70px 0; +} +footer.tight, +section.tight { + padding: 0; +} +footer.dark, +section.dark { + background-color: #1d1d1d; +} +footer h3, +section h3 { + font-size: 36px; + font-weight: 500; + margin: 20px 0 0; + line-height: 48px; +} +footer .col.left-main, +section .col.left-main { + line-height: 22px; + align-self: center; +} +footer .col.left-main h3, +footer .col.left-main p, +section .col.left-main h3, +section .col.left-main p { + padding: 0 20px; +} +footer .col.right-main, +section .col.right-main { + overflow-x: auto; + align-self: center; +} +@media (max-width: 870px) { + footer h3, + section h3 { + margin: -10px 0 0; + text-align: center; + } + footer span.callout, + section span.callout { + display: block; + text-align: center; + } + footer .col.left-main, + section .col.left-main { + padding-bottom: 10px; + } +} +@media (min-width: 870px) { + footer:nth-child(even) .col.left-main, + section:nth-child(even) .col.left-main { + padding-left: 20px; + } + footer:nth-child(even) .col.right-main, + section:nth-child(even) .col.right-main { + padding-right: 20px; + order: -1; + } + footer:nth-child(odd) .col.left-main, + section:nth-child(odd) .col.left-main { + padding-right: 20px; + } + footer:nth-child(odd) .col.right-main, + section:nth-child(odd) .col.right-main { + padding-left: 20px; + } +} +footer:nth-child(odd), +section:nth-child(odd) { + background-color: #d33847; +} +footer:nth-child(odd) table.code, +section:nth-child(odd) table.code { + border-color: #a0a0a0; + color: #222; +} +footer:nth-child(odd) table.code td.linenos, +section:nth-child(odd) table.code td.linenos { + background-color: #efefef; + border: 1px solid #a0a0a0; + border-right: 1px solid #d5d5d5; + color: #a9a9a9; +} +footer:nth-child(odd) table.code td.code, +section:nth-child(odd) table.code td.code { + background: #fff; + border: 1px solid #a0a0a0; + border-left: none; +} +footer #sidebar, +section #sidebar { + background-color: #1d1d1d; + width: calc(280px + (100% - 1310px) / 2); + min-width: 280px; +} +@media (max-width: 870px) { + footer #sidebar, + section #sidebar { + display: none; + } +} +footer #search-results, +footer article, +section #search-results, +section article { + width: calc(100% - 280px); + max-width: 1060px; + padding: 40px; +} +@media (max-width: 870px) { + footer #search-results, + footer article, + section #search-results, + section article { + width: 100%; + padding: 35px 30px; + } +} +footer nav, +section nav { + padding: 40px 35px; + box-sizing: border-box; + font-family: "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; + font-weight: 500; + position: relative; + min-width: 250px; + float: right; + display: inline-block; + overflow: auto; +} +footer nav .affix, +section nav .affix { + position: fixed; + top: 40px; + overflow: auto; + height: 100%; +} +footer nav .affix-bottom, +section nav .affix-bottom { + position: relative; + bottom: 40px; + overflow: auto; + height: 100%; +} +footer nav li, +section nav li { + list-style: none; +} +footer nav .toc ul, +section nav .toc ul { + padding: 10px 0 0; +} +footer nav .toc ul:first-child, +section nav .toc ul:first-child { + padding: 0; + margin: 0; +} +footer nav .toc ul.small, +section nav .toc ul.small { + padding: 0; +} +footer nav .toc ul.small a, +section nav .toc ul.small a { + font-size: 14px; +} +footer nav .toc > ul > li, +section nav .toc > ul > li { + font-size: 20px; + line-height: 20px; + margin: 20px 0; +} +footer nav .toc > ul > li:first-child, +section nav .toc > ul > li:first-child { + margin: 0; +} +footer nav .toc > ul > li ul li, +section nav .toc > ul > li ul li { + border-left: 1px solid #424242; + padding: 10px 0 10px 17px; + font-size: 14px; + line-height: 14px; +} +footer nav .toc > ul > li ul li a, +section nav .toc > ul > li ul li a { + color: #c5c5c5; +} +article.news a > h2, +footer nav .toc > ul > li ul li a.active, +footer nav .toc > ul > li ul li a:hover, +section nav .toc > ul > li ul li a.active, +section nav .toc > ul > li ul li a:hover { + color: #fff; +} +footer nav .toc > ul > li ul li a:active, +footer nav .toc > ul > li ul li a:focus, +section nav .toc > ul > li ul li a:active, +section nav .toc > ul > li ul li a:focus { + color: #444; +} +footer nav a:hover, +section nav a:hover { + border: 0; + text-decoration: underline; + color: #fff; +} +footer nav a:active, +footer nav a:focus, +section nav a:active, +section nav a:focus { + border: 0; + color: #444; +} +footer nav a.active, +section nav a.active { + font-weight: 700; +} +#search-results, +article, +main { + box-sizing: border-box; + padding: 40px 10px; + font-size: 16px; + font-family: Helvetica, Arial, "Lucida Grande", sans-serif; + line-height: 24px; +} +#search-results p, +article p, +main p { + margin: 15px 0; +} +#search-results h2, +#search-results h3, +#search-results h4, +#search-results h5, +article h2, +article h3, +article h4, +article h5, +main h2, +main h3, +main h4, +main h5 { + font-family: "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; + font-weight: 600; + text-align: left; +} +#search-results h2 + p, +#search-results h3 + p, +#search-results h4 + p, +#search-results h5 + p, +article h2 + p, +article h3 + p, +article h4 + p, +article h5 + p, +main h2 + p, +main h3 + p, +main h4 + p, +main h5 + p { + margin-top: 0; +} +#search-results h2:first-child, +#search-results h3:first-child, +#search-results h4:first-child, +#search-results h5:first-child, +article h2:first-child, +article h3:first-child, +article h4:first-child, +article h5:first-child, +main h2:first-child, +main h3:first-child, +main h4:first-child, +main h5:first-child { + padding-top: 0; + margin-top: 0; +} +#pagination li, +#search-results h2:hover > a, +#search-results h3:hover > a, +#search-results h4:hover > a, +#search-results h5:hover > a, +article h2:hover > a, +article h3:hover > a, +article h4:hover > a, +article h5:hover > a, +main h2:hover > a, +main h3:hover > a, +main h4:hover > a, +main h5:hover > a { + display: inline; +} +#search-results h2, +article h2, +main h2 { + padding: 20px 0 10px; + margin: 15px 0; + font-size: 30px; + line-height: 32px; +} +#search-results h3, +article h3, +main h3 { + padding: 10px 0; + margin: 20px 0 10px; + font-size: 22px; + line-height: 24px; +} +#search-results h4, +#search-results h5, +article h4, +article h5, +main h4, +main h5 { + padding: 10px 0; + margin: 10px 0 5px; +} +#search-results h4, +article h4, +main h4 { + font-size: 18px; + line-height: 20px; +} +#search-results h5, +article h5, +article.news h5, +main h5 { + font-size: 16px; + line-height: 20px; +} +#search-results a.headerlink, +article a.headerlink, +main a.headerlink { + color: #5e5e5e; + font-size: 0.8em; + line-height: 1em; + margin-left: 5px; + border-bottom: none; +} +@media (min-width: 870px) { + #search-results a.headerlink, + article a.headerlink, + main a.headerlink { + display: none; + } +} +#search-results a.headerlink:active, +#search-results a.headerlink:focus, +#search-results a.headerlink:hover, +article a.headerlink:active, +article a.headerlink:focus, +article a.headerlink:hover, +main a.headerlink:active, +main a.headerlink:focus, +main a.headerlink:hover { + border: 0; +} +#search-results a.headerlink:hover, +article a.headerlink:hover, +main a.headerlink:hover { + color: #ccc; +} +#search-results a.headerlink:active, +#search-results a.headerlink:focus, +article a.headerlink:active, +article a.headerlink:focus, +main a.headerlink:active, +main a.headerlink:focus { + color: #fff; +} +#search-results blockquote, +article blockquote, +main blockquote { + background-color: rgba(255, 255, 255, 0.05); + margin: 0; + padding: 5px 20px 5px 30px; + border-left: 10px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5); + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); +} +article.news { + font-size: 18px; + font-family: Helvetica, Arial, "Lucida Grande", sans-serif; + line-height: 30px; + max-width: 900px; + margin: 0 auto; + overflow-x: auto; +} +@media (max-width: 870px) { + article.news { + padding: 10px 5px; + } +} +article.news p:not(:nth-child(2)) { + margin-left: auto; + margin-right: auto; +} +article.news p.metadata { + margin: -10px 0 20px; + font-size: 16px; + color: #bbb; +} +article.news blockquote p:not(:last-child) { + color: #bbb; +} +article.news a > h2:hover { + text-decoration: none; +} +#tabs-panel .panel, +#tabs-panel input, +article.news h2 a, +article.news h2:hover > a { + display: none; +} +article.news h2 { + margin-top: 20px; + font-size: 30px; + line-height: 42px; + padding: 0; +} +article.news h3 { + font-size: 22px; + line-height: 26px; +} +article.news h4 { + font-size: 18px; + line-height: 22px; +} +#search-results a, +article a { + font-weight: 700; + color: #8ab4ff; +} +#search-results a:hover, +article a:hover { + color: inherit; + border-bottom: none; + text-decoration: underline; +} +#search-results a:hover code, +article a:hover code { + text-decoration: underline; +} +#search-results a:active, +#search-results a:focus, +article a:active, +article a:focus { + border-bottom: none; + text-decoration: underline; +} +#search-results h2, +article h2 { + border-bottom: 1px solid rgba(255, 255, 255, 0.15); +} +#search-results h3, +article h3 { + border-bottom: 1px solid rgba(255, 255, 255, 0.07); +} +main h2, +main h3 { + margin-bottom: 0; +} +main h2:not(:first-child) { + margin-top: 30px; +} +code, +footer { + text-shadow: none; +} +code { + display: inline-block; + background: rgba(0, 0, 0, 0.4); + font-size: 0.87em; + border-radius: 5px; + font-family: Consolas, "Liberation Mono", Menlo, Monaco, Lucida Console, + Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, + monospace, serif; + -webkit-font-smoothing: subpixel-antialiased; + padding: 1px 4px; + line-height: 1.4em; +} +span.orange, +span.purple { + color: #f68500; + font-weight: 400; + font-size: 0.95em; +} +span.purple { + color: #9a64c0; +} +span.callout { + display: inline-block; + background: #fff; + color: #000; + padding: 2px 15px; + font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 14px; + font-weight: 700; + border-radius: 5px; + border: 1px solid #000; + box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5); + margin: 0; + text-shadow: none; +} +footer { + padding: 40px 0 30px; + line-height: 32px; +} +footer, +footer a { + font-size: 14px; + color: #ffb9b9; +} +footer h2 { + font-size: 36px; + font-family: "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; +} +footer h4 { + font-size: 18px; +} +#tabs-panel { + border: 1px solid #3d3d3d; + text-shadow: none; + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5); +} +#tabs-panel p:first-child { + margin-top: 0; +} +#tabs-panel p:last-child { + margin-bottom: 0; +} +#tabs-panel .tab { + display: block; + padding: 17px 20px 17px 45px; + font: 500 18px "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; + cursor: pointer; + color: #464646; + background-color: #212121; + border-right: 1px solid #3d3d3d; + position: relative; + margin-right: -1px; + box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.25); +} +#tabs-panel .tab img { + margin: auto 0; + position: absolute; + left: 17px; + bottom: 0; + right: 0; + top: 0; + opacity: 0.15; + pointer-events: none; +} +#tabs-panel .tab:not(:first-child) { + border-top: 1px solid #2f2f2f; +} +#tabs-panel .tab:hover { + background-color: #272727; + color: #aaa; +} +#tabs-panel .tab:hover img { + opacity: 0.5; +} +#tabs-panel .tab:focus { + background-color: #111; +} +#tabs-panel .tab:active { + background-color: #2c2c2c; +} +#tabs-panel .tabs { + flex: 1 1 300px; + background-color: #212121; + min-width: 220px; +} +#tabs-panel .panels { + background-color: #323232; + width: 100%; +} +#tabs-panel .panel { + padding: 15px 25px; + font: 16px Helvetica, Arial, "Lucida Grande", sans-serif; + color: #e0e0e0; + line-height: 26px; +} +#tabs-panel #dynamic-params-tab img { + top: -1px; +} +#tabs-panel #handling-data-tab img { + left: 18px; + top: -1px; +} +#tabs-panel #request-guards-tab img { + left: 19px; + top: -3px; +} +#tabs-panel #responders-tab img { + top: -3px; +} +#tabs-panel #launching-tab img { + left: 21px; + top: -3px; +} +#tabs-panel #dynamic-params:checked ~ .tabs #dynamic-params-tab, +#tabs-panel #handling-data:checked ~ .tabs #handling-data-tab, +#tabs-panel #launching:checked ~ .tabs #launching-tab, +#tabs-panel #request-guards:checked ~ .tabs #request-guards-tab, +#tabs-panel #responders:checked ~ .tabs #responders-tab, +#tabs-panel #routing:checked ~ .tabs #routing-tab { + text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); + background-color: #323232; + cursor: default; + color: #fff; + border-right: none; + box-shadow: none; +} +#tabs-panel #dynamic-params:checked ~ .tabs #dynamic-params-tab img, +#tabs-panel #handling-data:checked ~ .tabs #handling-data-tab img, +#tabs-panel #launching:checked ~ .tabs #launching-tab img, +#tabs-panel #request-guards:checked ~ .tabs #request-guards-tab img, +#tabs-panel #responders:checked ~ .tabs #responders-tab img, +#tabs-panel #routing:checked ~ .tabs #routing-tab img { + opacity: 1; +} +#tabs-panel #dynamic-params:checked ~ .panels #dynamic-params-panel, +#tabs-panel #handling-data:checked ~ .panels #handling-data-panel, +#tabs-panel #launching:checked ~ .panels #launching-panel, +#tabs-panel #request-guards:checked ~ .panels #request-guards-panel, +#tabs-panel #responders:checked ~ .panels #responders-panel, +#tabs-panel #routing:checked ~ .panels #routing-panel { + display: block; +} +#logo span, +#toggle { + display: none; +} +header .container { + padding-top: 35px; + z-index: 10; +} +header nav.version-select { + position: relative; + display: inline-block; + width: 70px; + height: 35px; + line-height: 35px; + text-align: center; + font-size: 15px; + font-family: "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; + font-weight: 700; + z-index: 20; +} +header nav.version-select i { + border: solid #fff; + border-width: 0 3px 3px 0; + display: inline-block; + padding: 3px; + transform: rotate(45deg); + margin-left: 3px; + top: -2px; +} +header nav.version-select options { + display: none; + position: absolute; + box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25); + left: -1px; + top: 35px; + z-index: 30; +} +header nav.version-select options a, +header nav.version-select options a:hover { + border: 1px solid rgba(255, 255, 255, 0.8); +} +header nav.version-select options a:hover:not(:first-child), +header nav.version-select options a:not(:first-child) { + border-top: none; +} +header nav.version-select options a { + color: #fff; + font-size: 15px; + font-weight: 700; + display: block; + background-color: rgba(255, 255, 255, 0.1); + width: 70px; + height: 35px; +} +header nav.version-select options a:hover { + background-color: rgba(255, 255, 255, 0.8); + color: #d33847; +} +@media (max-width: 870px) { + header nav.version-select options a { + background-color: #d44756; + } + header nav.version-select options a:hover { + background-color: #dcdcdc; + } +} +header .hamburger, +header nav.main { + float: right; +} +.circle-container .circle + h4, +header nav a { + font-family: "Proza Libre", "Helvetica Neue", Helvetica, Arial, + "Lucida Grande", sans-serif; +} +header nav a { + font-size: 18px; + font-weight: 500; +} +a#logo:active, +a#logo:hover { + border: 0; + text-decoration: none; +} +@media (min-width: 870px) { + header nav.main { + margin-top: 20px; + } + header nav.main a { + margin-left: 35px; + } + #logo { + height: 60px; + width: 180px; + background-repeat: no-repeat; + display: inline-block; + vertical-align: middle; + } +} +@media (max-width: 870px) { + @-webkit-keyframes bugfix { + 0%, + to { + padding: 0; + } + } + body { + -webkit-animation: bugfix infinite 1s; + } + #logo { + height: 30px; + width: 140px; + background-repeat: no-repeat; + display: inline-block; + vertical-align: middle; + } + header .banner { + margin-top: 20px; + } + header .banner h1 { + margin-top: 0; + } + header nav.main { + display: block; + color: #000; + width: 100%; + background-color: rgba(0, 0, 0, 0.2); + max-height: 0; + transition: max-height 0.25s ease-in-out; + margin: 20px 0 0; + overflow: hidden; + float: none; + } + header nav.main a { + display: block; + margin: 0; + padding: 15px 35px; + } + header nav.main a:first-child { + padding-top: 30px; + } + header nav.main a:last-child { + padding-bottom: 30px; + } + header nav.main a:hover { + border: 0; + background-color: rgba(0, 0, 0, 0.2); + } + header nav.main a:active, + header nav.main a:focus { + border: 0; + background-color: rgba(0, 0, 0, 0.4); + } + .hamburger, + .hamburger span { + display: block; + transform: rotate(0deg); + } + .hamburger { + float: right; + cursor: pointer; + user-select: none; + background: rgba(0, 0, 0, 0.2); + width: 38px; + height: 30px; + position: relative; + } + .hamburger span { + position: absolute; + height: 14%; + width: 60%; + background: #fff; + border-radius: 9px; + opacity: 1; + left: 20%; + transition: 0.25s ease-in-out; + } + .hamburger span:nth-child(1) { + top: 20%; + } + #toggle:checked ~ .hamburger span:nth-child(1) { + top: 43%; + transform: rotate(135deg); + } + .hamburger span:nth-child(2) { + top: 43%; + } + #toggle:checked ~ .hamburger span:nth-child(2) { + opacity: 0; + left: -60px; + } + .hamburger span:nth-child(3) { + top: 66%; + } + #toggle:checked ~ .hamburger span:nth-child(3) { + top: 43%; + transform: rotate(-135deg); + } + #toggle:checked ~ nav { + max-height: 300px; + } + .mobile-hide { + display: none; + } +} +.circle-container { + flex: 0 0 180px; +} +.circle-container .circle { + border-radius: 50%; + text-shadow: none; + width: 60px; + height: 60px; + font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; + font-size: 42px; + font-weight: 700; + color: #1e1e1e; + text-align: center; + line-height: 60px; + margin: 0 auto; +} +.circle-container .circle.blue { + background: #5daced; +} +.circle-container .circle.purple { + background: #da74f9; +} +.circle-container .circle.red { + background: #ff6170; +} +.circle-container .circle + h4 { + margin: 12px 0 0; +} +.work-step { + border-top: 1px solid #464646; + padding: 25px 0; +} +.blocky-code table.code td.linenos { + border-radius: 0; + border: 1px solid #414141; + border-right: none; + background-color: #323232; + padding-left: 20px; +} +.blocky-code table.code td.code { + border-radius: 0; + border: 1px solid #414141; + border-left: none; + background-color: #323232; + padding-left: 10px; +} +.lighter-code table.code { + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.25); +} +.lighter-code table.code td.linenos { + background-color: #434343; + border: 1px solid #494949; + border-right: none; + color: #8e8e8e; + padding: 12px; +} +.lighter-code table.code td.code { + border: 1px solid #494949; + border-left: none; + background-color: #393939; +} +@media (max-width: 870px) { + .github-corner { + display: none; + } +} +.github-corner:hover .octo-arm { + animation: octocat-wave 560ms ease-in-out; +} +input#search-input { + max-width: 180px; + color: #fff; + font-weight: 600; + border: 0; + margin-bottom: 25px; + box-sizing: border-box; + padding: 10px 15px 10px 35px; + background-color: #000; + background-size: 15px 15px; + background-repeat: no-repeat; + background-position: 10px 11px; +} +#hits { + color: inherit; +} +#hits a { + font-size: 22px; +} +#hits span { + color: #ccc; + font-weight: 400; + font-size: 14px; +} +#hits .hit { + margin-bottom: 30px; +} +#hits hr { + margin: 5px 0; +} +#hits p { + font-weight: 400; + margin: 5px 0 0; +} +#hits em { + background-color: rgba(117, 97, 0, 0.24); + color: #ffc900; + font-style: normal; + font-weight: 700; +} +#pagination .ais-pagination--item__disabled { + display: none; +} +#hits p, +#pagination .ais-pagination--item__active a { + color: #fff; +} +#pagination li a { + padding: 6px; + background: rgba(0, 0, 0, 0.5); + border: 1px solid #000; + margin: 0 5px; +} +#pagination li a:hover { + background: rgba(0, 0, 0, 0.2); + border-bottom: 1px solid #000; +} +.cancel-search { + display: inline-block; + width: 20px; + height: 20px; + cursor: pointer; + margin-bottom: -4px; + opacity: 0.6; + margin-right: 4px; +} +.cancel-search:hover { + opacity: 1; +} +.admonition { + box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5); + margin: 15px 0; + padding: 0 20px; + border-radius: 5px; + overflow: auto; + position: relative; +} +.admonition .title { + display: block; + margin: 0 -20px; + padding: 10px 20px 6px 43px; + background-repeat: no-repeat; + background-position: 20px 55%; + background-size: 17px; +} +@media (max-width: 870px) { + .admonition .title { + padding-left: 55px; + background-position: 20px 50%; + } +} +.admonition.note { + border-left: 8px solid #448aff; + background-color: rgba(68, 138, 255, 0.05); +} +.admonition.note .title { + background-color: rgba(68, 138, 255, 0.25); + border-bottom: 0.1rem solid rgba(68, 138, 255, 0.1); + background-position: 20px 50%; +} +.admonition.tip { + border-left: 8px solid #00bfa5; + background-color: rgba(0, 191, 165, 0.05); +} +.admonition.tip .title { + background-color: rgba(0, 191, 165, 0.25); + border-bottom: 0.1rem solid rgba(0, 191, 165, 0.1); +} +.admonition.warning { + border-left: 8px solid #ff9100; + background-color: rgba(255, 145, 0, 0.05); +} +.admonition.warning .title { + background-color: rgba(255, 145, 0, 0.25); + border-bottom: 0.1rem solid rgba(255, 145, 0, 0.1); +} diff --git a/docs/rocketsrchrome_files/sun.svg b/docs/rocketsrchrome_files/sun.svg new file mode 100644 index 00000000..435993c5 --- /dev/null +++ b/docs/rocketsrchrome_files/sun.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/telescope.svg b/docs/rocketsrchrome_files/telescope.svg new file mode 100644 index 00000000..62e24291 --- /dev/null +++ b/docs/rocketsrchrome_files/telescope.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/templating-icon.svg b/docs/rocketsrchrome_files/templating-icon.svg new file mode 100644 index 00000000..29049bc2 --- /dev/null +++ b/docs/rocketsrchrome_files/templating-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/rocketsrchrome_files/testing-icon.svg b/docs/rocketsrchrome_files/testing-icon.svg new file mode 100644 index 00000000..0a4e9ace --- /dev/null +++ b/docs/rocketsrchrome_files/testing-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/Cargo.toml b/examples/Cargo.toml index 5fcbf981..78179d82 100644 --- a/examples/Cargo.toml +++ b/examples/Cargo.toml @@ -41,6 +41,10 @@ path = "common.rs" # Examples are manually keyed in # ================================ +[[example]] +path = "example_app.rs" +name = "example_app" + # [[example]] # path = "hello_web.rs" # name = "hello_web" diff --git a/examples/example_app.rs b/examples/example_app.rs new file mode 100644 index 00000000..51c4957b --- /dev/null +++ b/examples/example_app.rs @@ -0,0 +1,48 @@ +//! Example App +//! -------------- +//! +//! This example shows how to use the cross-platform abilities of dioxus to generate everything a dioxus app might need. +//! All of your apps will look like this. +//! +//! cargo run --features dioxus/static + +fn main() { + // DioxusApp::new(launch) +} + +mod launches { + #[cfg(feature = "wasm")] + fn launch() { + // launch the wasm_rednerer + } + + #[cfg(feature = "static")] + fn launch() { + // render the tree to text + } + + // #[cfg(features = "server")] + // fn launch() { + // // launch the app + // } + + // #[cfg(features = "liveview")] + // fn launch() { + // // launch the app + // } + + // #[cfg(features = "desktop")] + // fn launch() { + // // launch the app + // } + + // #[cfg(features = "android")] + // fn launch() { + // // launch a simulator in dev mode + // } + + // #[cfg(features = "ios")] + // fn launch() { + // // launch a simulator in dev mode + // } +}