css tweaks, updated docs, better landing page, and more (DioxusLabs#224)

* feat: tweaks for 05 release

* tweak css

* fix images

* Clean up more things in the docs, more dark mode

Cargo.toml

@@ -7,7 +7,10 @@ edition = "2018"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = { git = "https://github.com/dioxuslabs/dioxus", features = ["fullstack", "router"] }
+dioxus = { git = "https://github.com/dioxuslabs/dioxus", features = [
+    "fullstack",
+    "router",
+] }
 dioxus-web = { git = "https://github.com/dioxuslabs/dioxus", features = [
     "hydrate",
 ], optional = true }
@@ -63,9 +66,14 @@ js-sys = "0.3.64"
 form_urlencoded = "1.2.0"
 automod = "1.0.13"
 fs_extra = { version = "1.3.0", optional = true }
+stork-lib = { version = "1.6.0", features = [
+    "build-v3",
+], default-features = false }
 
 # Used only in doc tests
-dioxus-std = { git = "https://github.com/ealmloff/dioxus-std", branch = "copy-UseI18", features = ["i18n"], optional = true }
+dioxus-std = { git = "https://github.com/ealmloff/dioxus-std", branch = "copy-UseI18", features = [
+    "i18n",
+], optional = true }
 tower-http = { version = "0.5.0", optional = true, features = ["timeout"] }
 tracing = "0.1.40"
 
@@ -131,6 +139,6 @@ server = [
     "tokio",
     "dioxus-fullstack/axum",
     "axum",
-    "fs_extra"
+    "fs_extra",
 ]
 prebuild = ["server"]

Dioxus.toml

@@ -23,7 +23,15 @@ base_path = "."
 
 [web.watcher]
 
-watch_path = ["docs-src", "src", "posts", "examples", "snippets"]
+watch_path = [
+    "docs-src",
+    "src",
+    "posts",
+    "examples",
+    "snippets",
+    "index.html",
+    "public",
+]
 index_on_404 = true
 
 # include `assets` in web platform

docs-src/0.5/en/CLI/translate.md

@@ -38,19 +38,19 @@ div { class: "relative w-full mx-4 sm:mx-auto text-gray-600",
    div { class: "max-w-screen-2xl mx-auto pt-36",
       h1 { class: "text-md", "Trusted by top companies" }
       div { class: "pt-4 flex flex-row flex-wrap justify-center",
-         div { class: "h-12 w-40 bg-black p-2 m-4 flex justify-center items-center",
+         div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
             img { src: "static/futurewei_bw.png" }
          }
-         div { class: "h-12 w-40 bg-black p-2 m-4 flex justify-center items-center",
+         div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
             img { src: "static/airbuslogo.svg" }
          }
-         div { class: "h-12 w-40 bg-black p-2 m-4 flex justify-center items-center",
+         div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
             img { src: "static/ESA_logo.svg" }
          }
-         div { class: "h-12 w-40 bg-black p-2 m-4 flex justify-center items-center",
+         div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
             img { src: "static/yclogo.svg" }
          }
-         div { class: "h-12 w-40 bg-black p-2 m-4 flex justify-center items-center",
+         div { class: "h-12 w-40 p-2 m-4 flex justify-center items-center",
             img { src: "static/satellite.webp" }
          }
       }

docs-src/0.5/en/getting_started/desktop.md

@@ -17,7 +17,6 @@ Dioxus desktop is built off [Tauri](https://tauri.app/). Right now there are lim
 
 [![File Explorer screenshot](https://raw.githubusercontent.com/DioxusLabs/example-projects/master/file-explorer/image.png)](https://github.com/DioxusLabs/example-projects/tree/master/file-explorer)
 
-# Getting started
 
 ## Platform-specific dependencies
 

docs-src/0.5/en/getting_started/fullstack.md

@@ -2,8 +2,6 @@
 
 > This guide assumes you read the [Web](wasm.md) getting started guide and installed the [Dioxus-cli](https://github.com/DioxusLabs/dioxus/tree/master/packages/cli)
 
-# Getting Started
-
 ## Setup
 
 Before we get started, make sure you have Rust and Cargo installed. Then create a new project:
@@ -19,7 +17,7 @@ Add `dioxus` and `dioxus-fullstack` as dependencies:
 cargo add [email protected] --features fullstack
 ```
 
-Next, set up features for the server (`server`) and the client (`web`). These features are what allow Dioxus to separate the client and backend from each other. 
+Next, set up features for the server (`server`) and the client (`web`). These features are what allow Dioxus to separate the client and backend from each other.
 
 ```toml
 [features]

docs-src/0.5/en/getting_started/mobile.md

@@ -196,7 +196,7 @@ fn app() -> Element {
 }
 ```
 
-## Running 
+## Running
 
 From there, you'll want to get a build of the crate using whichever platform you're targeting (simulator or actual hardware). For now, we'll just stick with the simulator.
 

docs-src/0.5/en/reference/mobile.md

@@ -4,7 +4,7 @@ This guide will cover concepts specific to the Dioxus mobile renderer.
 
 ## Running Javascript
 
-Dioxus provides some ergonomic wrappers over the browser API, but in some cases you may need to access parts of the browser API Dioxus does not expose. 
+Dioxus provides some ergonomic wrappers over the browser API, but in some cases you may need to access parts of the browser API Dioxus does not expose.
 
 
 For these cases, Dioxus desktop exposes the use_eval hook that allows you to run raw Javascript in the webview:

index.html

@@ -11,7 +11,10 @@
     <link rel="icon shortcut" type="image/png" href="/{base_path}/static/favicon.png" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Lexend:wght@100;400;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Arimo:wght@100;400;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Lexend:wght@100;400&family=M+PLUS+1:[email protected]&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
+
+
     <link rel="stylesheet" type="text/css" href="/{base_path}/static/prism/prism.css" />
 
 
@@ -64,70 +67,10 @@
 
     <!-- style stuff -->
     <!-- <link data-trunk rel="css" href="/tailwind.css" /> -->
-    <link rel="stylesheet" href="/{base_path}/tailwind.css" />
-    <!-- <script src="https://cdn.tailwindcss.com"></script> -->
-    <!-- <script>
-      tailwind.config = {
-        theme: {
-          extend: {
-            colors: {
-              ghmetal: "#24292f",
-              ghdarkmetal: "#161b22",
-              ideblack: "#0e1116",
-              // ideblack: "#0a0a0a",
-              // ideblack: "#0E1116",
-            },
-            fontFamily: {
-              sans: ["Lexend", "sans-serif"],
-              // sans: ["Inter var", "sans-serif"],
-            },
-            boxShadow: {
-              "3xl": "0 35px 60px -1ww5px rgba(0, 0, 0, 0.5)",
-              cutesy: "0px 0px 40px -5px rgba(255, 255, 255, 0.2)",
-              // cutesy: "0px 0px 30px -10px white",
-              // cutesy: "0px 0px 30px -10px red",
-              pop: "0px 0px 30px -10px rgba(0, 0, 0, 0.5)",
-            },
-          },
-        },
-
-        // "3xl": "0 35px 60px -1ww5px rgba(0, 0, 0, 0.5)",
-        // theme: {
-        //   extend: {
-        //     colors: {
-        //       clifford: "#da373d",
-        //     },
-        //   },
-        // },
-      };
-    </script> -->
+    <!-- <link rel="stylesheet" href="/{base_path}/tailwind.css" />
+    <link rel="stylesheet" href="/{base_path}/main.css" />
+    <link rel="stylesheet" href="/{base_path}/githubmarkdown.css" /> -->
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-
-    <link
-      rel="stylesheet"
-      type="text/css"
-      href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.1.0/github-markdown.min.css"
-    />
-
-    <style>
-      .markdown-body {
-        box-sizing: border-box;
-        min-width: 200px;
-        max-width: 980px;
-        margin: 0 5%;
-        /* padding: 45px; */
-        list-style: disc;
-      }
-      /* body {
-        font-family: 'Lexend', sans-serif;
-      } */
-
-      @media (max-width: 767px) {
-        .markdown-body {
-          /* padding: 15px; */
-        }
-      }
-    </style>
     <script src="/{base_path}/static/darktheme.js"></script>
     {style_include}
   </head>

posts/release050.html

@@ -1,4 +1,4 @@
-<h1 id="dioxus-0-5-signal-rewrite-remove-lifetimes-unsafe-css-hotreloading-5x-faster-desktop-asset-system-and-more-">Dioxus 0.5: Signal Rewrite, Remove lifetimes/unsafe, CSS Hotreloading, 5x Faster Desktop,  Asset System, and more!</h1>
+<h1 id="dioxus-0-5-signal-rewrite-remove-lifetimes-unsafe-css-hotreloading-5x-faster-desktop-asset-system-and-more-">Dioxus 0.5: Signal Rewrite, Remove lifetimes, CSS Hotreloading, and more!</h1>
 <h3 id="the-story">The story</h3>
 
 <p>Here at Dioxus Labs, we have an unofficial rule: only one rewrite per year.  </p>
@@ -218,6 +218,17 @@ <h3 id="smarter-subscriptions">Smarter subscriptions</h3>
     rsx! { <span class="hljs-string">"{memo}"</span> }
 }
 </code></pre>
+<h2 id="css-hot-reloading">CSS Hot Reloading</h2>
+
+<p>As part of our asset system overhaul, we implemented hotreloading of CSS files in the asset directory. If a CSS file appears in your RSX, the <code>dx</code> CLI will watch that file and immediately stream its updates to the running app. This works for web, desktop, and fullstack, with mobile support coming in a future mobile-centric update. </p>
+<p><video controls autoplay muted src="https://i.imgur.com/oXS8hYW.mp4" alt="CSS Hotreloading"></p>
+<!-- https://i.imgur.com/oXS8hYW.mp4 -->
+<!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/Screen_Recording_2024-03-20_at_6.30.47_AM.mov">Screen Recording 2024-03-20 at 6.30.47 AM.mov</a></p> -->
+<!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/Screen_Recording_2024-03-20_at_6.30.47_AM.mov">Screen Recording 2024-03-20 at 6.30.47 AM.mov</a></p> -->
+<p>What’s even niftier is that you can stream these changes to several devices at once, unlocking simultaneous hotreloading across all devices that you target:</p>
+<!-- https://i.imgur.com/cZ8qZCz.mp4 -->
+<p><video controls autoplay muted src="https://i.imgur.com/cZ8qZCz.mp4" alt="CSS Hotreloading"></p>
+<!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/Hotreload_triple_-_HD_1080p.mov">Hotreload triple - HD 1080p.mov</a></p> -->
 <h2 id="event-system-rewrite">Event System Rewrite</h2>
 
 <p>Since it’s release, dioxus has used a synthetic event system to create a cross platform event API. Synthetic events can be incredibly useful to make events work across platforms and even serialize them across the network, but they do have some drawbacks.</p>
@@ -287,17 +298,6 @@ <h2 id="asset-system-beta">Asset System Beta</h2>
 <p>The new mobile guide takes less than 1 second to load and requires only 1/3 of the resources with the exact same images!</p>
 <p>Dioxus 0.5 introduces a new asset system called <code>[manganis](https://github.com/DioxusLabs/collect-assets)</code>. Manganis integrates with the CLI to check, bundle and optimize assets in your application. The API is currently unstable so the asset system is currently published as a separate crate. In the new asset system, you can just wrap your assets in the <code>mg!</code> macro and they will automatically be picked up by the CLI. You can read more about the new asset system in the <a href="https://docs.rs/crate/manganis/latest">manganis docs</a>.</p>
 <p>As we continue to iterate on the 0.5 release, we plan to add hot reloading to manganis assets, so you can interactively add new the features to your app like CSS, images, tailwind classes, and more without forcing a complete reload.</p>
-<h2 id="css-hot-reloading">CSS Hot Reloading</h2>
-
-<p>As part of our asset system overhaul, we implemented hotreloading of CSS files in the asset directory. If a CSS file appears in your RSX, the <code>dx</code> CLI will watch that file and immediately stream its updates to the running app. This works for web, desktop, and fullstack, with mobile support coming in a future mobile-centric update. </p>
-<p><video controls autoplay muted src="https://i.imgur.com/oXS8hYW.mp4" alt="CSS Hotreloading"></p>
-<!-- https://i.imgur.com/oXS8hYW.mp4 -->
-<!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/Screen_Recording_2024-03-20_at_6.30.47_AM.mov">Screen Recording 2024-03-20 at 6.30.47 AM.mov</a></p> -->
-<!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/Screen_Recording_2024-03-20_at_6.30.47_AM.mov">Screen Recording 2024-03-20 at 6.30.47 AM.mov</a></p> -->
-<p>What’s even niftier is that you can stream these changes to several devices at once, unlocking simultaneous hotreloading across all devices that you target:</p>
-<!-- https://i.imgur.com/cZ8qZCz.mp4 -->
-<p><video controls autoplay muted src="https://i.imgur.com/cZ8qZCz.mp4" alt="CSS Hotreloading"></p>
-<!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/Hotreload_triple_-_HD_1080p.mov">Hotreload triple - HD 1080p.mov</a></p> -->
 <h2 id="5x-faster-desktop-rendering">5x Faster Desktop Rendering</h2>
 
 <p>Dioxus implements several optimizations to make diffing rendering fast. <a href="https://dioxuslabs.com/blog/templates-diffing">Templates</a> let dioxus skip diffing on any static parts of the rsx macro. However, diffing is only one side of the story. After you create a list of changes you need to make to the DOM, you need to apply them.</p>
@@ -400,8 +400,8 @@ <h2 id="native-file-handling">Native File Handling</h2>
 <p><video controls autoplay muted src="https://i.imgur.com/vkkDDid.mp4" alt="Native file drop"></p>
 <!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/native_drop.mov">native_drop.mov</a></p> -->
 <!-- <p><a href="Dioxus%200%205%20Signal%20Rewrite,%20Remove%20lifetimes%20unsafe%209961963b731a4d9f8465e5bcdf8e9ab3/native_drop.mov">native_drop.mov</a></p> -->
-<p>Previously we just gave you the option to intercept filedrops but now it’s natively integrated into the event systme.</p>
-<h2 id="error-handling">Error handling</h2>a
+<p>Previously we just gave you the option to intercept filedrops but now it’s natively integrated into the event system</p>
+<h2 id="error-handling">Error handling</h2>
 
 <p>Error handling: You can use error boundaries and the throw trait to easily handle errors higher up in your app</p>
 <p>Dioxus provides a much easier way to handle errors: throwing them. Throwing errors combines the best parts of an error state and early return: you can easily throw an error with <code>?</code>, but you keep information about the error so that you can handle it in a parent component.</p>