♻️ Use of the assets management introduced by Dioxus 0.6.0

Cf. https://dioxuslabs.com/blog/release-060#stabilizing-manganis-asset-system

Dioxus.toml

@@ -7,14 +7,7 @@ title = "BG92"
 
 [web.watcher]
 reload_html = true
-watch_path = ["public/index.html", "public/assets/index.css", "src"]
+watch_path = ["Dioxus.toml", "public/index.html", "src"]
-
-[web.resource]
-style = ["assets/index.css"]
-
-[web.resource.dev]
-style = []
-script = []
 
 [[web.proxy]]
 backend = "http://localhost:8000/api/"

public/assets/index.css

@@ -1,207 +0,0 @@
-
-@font-face {
-    src: url("../fonts/Geist/Geist-Medium.woff2") format("woff2");
-    font-family: "Geist";
-    font-weight: normal;
-}
-
-@font-face {
-    src: url("../fonts/Geist/Geist-Bold.woff2") format("woff2");
-    font-family: "Geist";
-    font-weight: bold;
-}
-
-html, body {
-    height: 100%;
-    width: 100%;
-
-    margin: 0;
-
-    font-family: "Geist";
-    font-weight: normal;
-}
-
-#main {
-    height: 100%;
-    width: 100%;
-}
-
-@keyframes multicolor {
-    0%  { fill: #1DB2CF; /* color-primary-100 */ }
-    33% { fill: #7E6BB6; /* color-secondary-100 */ }
-    66% { fill: #D53583; /* color-ternary-100 */ }
-}
-
-:root {
-    --wallpaper-pattern-height: 128px;
-    --spinner-height: 5%;
-    --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
-}
-
-/* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
-@media (min-height: 0px) and (max-height: 640px) {
-    :root {
-        --spinner-top: var(--window-center-pos);
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
-@media (min-height: 641px) and (max-height: 768px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
-@media (min-height: 769px) and (max-height: 1024px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
-@media (min-height: 1025px) and (max-height: 1280px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
-@media (min-height: 1281px) and (max-height: 1536px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
-@media (min-height: 1537px) and (max-height: 1792px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
-@media (min-height: 1793px) and (max-height: 2048px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
-@media (min-height: 2049px) and (max-height: 2304px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
-@media (min-height: 2305px) and (max-height: 2560px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
-@media (min-height: 2561px) and (max-height: 2816px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
-@media (min-height: 2817px) and (max-height: 3072px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
-@media (min-height: 3073px) and (max-height: 3328px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
-@media (min-height: 3329px) and (max-height: 3584px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
-@media (min-height: 3585px) and (max-height: 3840px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
-@media (min-height: 3841px) and (max-height: 4096px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
-@media (min-height: 4097px) and (max-height: 4352px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
-@media (min-height: 4353px) and (max-height: 4608px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
-@media (min-height: 4609px) and (max-height: 4864px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
-    }
-}
-/* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
-@media (min-height: 4865px) and (max-height: 5120px) {
-    :root {
-        --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
-    }
-}
-
-.loader {
-    height: 100%;
-    width: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .wallpaper {
-        height: 100%;
-        width: 100%;
-        z-index: -1;
-
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        overflow: hidden;
-
-        .content {
-            background-image: url("../images/wallpaper-pattern.svg");
-            background-position: center;
-
-            width: 150%;
-            height: 150%;
-        }
-    }
-
-    .spinner {
-        height: var(--spinner-height);
-        aspect-ratio: 2;
-
-        position: absolute;
-
-        top: var(--spinner-top);
-
-        svg {
-            --fps: 4;
-            --duration_sec: 3;
-            --steps: calc(var(--duration_sec) * var(--fps));
-
-            height: 100%;
-            width: 100%;
-
-            fill: #1DB2CF; /* color-primary-100 */
-            stroke: #1B1B1B; /* greyscale-90 */
-
-            animation: 3s multicolor linear infinite;
-            animation-timing-function: steps(var(--steps), end);
-        }
-    }
-}

public/index.html

@@ -1,15 +1,207 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <!-- Hack to avoid the addition of the script part by dioxus-cli -->
+        <title>{app_name}</title>
-        <!-- <title>{base_path}</title> -->
-        <!-- <title>{app_name}</title> -->
-
-        <title></title>
         <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta charset="UTF-8" />
-        {style_include}
+        <style>
+         html, body {
+            height: 100%;
+            width: 100%;
+
+            margin: 0;
+
+            font-family: "Geist";
+            font-weight: normal;
+         }
+
+         #main {
+            height: 100%;
+            width: 100%;
+         }
+
+         @keyframes multicolor {
+            0%  { fill: #1DB2CF; /* color-primary-100 */ }
+            33% { fill: #7E6BB6; /* color-secondary-100 */ }
+            66% { fill: #D53583; /* color-ternary-100 */ }
+         }
+
+         :root {
+            --wallpaper-pattern-height: 128px;
+            --spinner-height: 5%;
+            --window-center-pos: calc(50% + (var(--wallpaper-pattern-height) / 2) - (var(--spinner-height) / 2));
+         }
+
+         /* @media (0px < height <= calc(var(--wallpaper-pattern-height) * 5)) { */
+         @media (min-height: 0px) and (max-height: 640px) {
+             :root {
+                 --spinner-top: var(--window-center-pos);
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 5) < height <= calc($wallpaper-pattern-height * 6)) { */
+         @media (min-height: 641px) and (max-height: 768px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 6) < height <= calc($wallpaper-pattern-height * 8)) { */
+         @media (min-height: 769px) and (max-height: 1024px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 2));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 8) < height <= calc($wallpaper-pattern-height * 10)) { */
+         @media (min-height: 1025px) and (max-height: 1280px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 3));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 10) < height <= calc($wallpaper-pattern-height * 12)) { */
+         @media (min-height: 1281px) and (max-height: 1536px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 4));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 12) < height <= calc($wallpaper-pattern-height * 14)) { */
+         @media (min-height: 1537px) and (max-height: 1792px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 5));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 14) < height <= calc($wallpaper-pattern-height * 16)) { */
+         @media (min-height: 1793px) and (max-height: 2048px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 6));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 16) < height <= calc($wallpaper-pattern-height * 18)) { */
+         @media (min-height: 2049px) and (max-height: 2304px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 7));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 18) < height <= calc($wallpaper-pattern-height * 20)) { */
+         @media (min-height: 2305px) and (max-height: 2560px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 8));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 20) < height <= calc($wallpaper-pattern-height * 22)) { */
+         @media (min-height: 2561px) and (max-height: 2816px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 9));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 22) < height <= calc($wallpaper-pattern-height * 24)) { */
+         @media (min-height: 2817px) and (max-height: 3072px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 10));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 24) < height <= calc($wallpaper-pattern-height * 26)) { */
+         @media (min-height: 3073px) and (max-height: 3328px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 11));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 26) < height <= calc($wallpaper-pattern-height * 28)) { */
+         @media (min-height: 3329px) and (max-height: 3584px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 12));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 28) < height <= calc($wallpaper-pattern-height * 30)) { */
+         @media (min-height: 3585px) and (max-height: 3840px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 13));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 30) < height <= calc($wallpaper-pattern-height * 32)) { */
+         @media (min-height: 3841px) and (max-height: 4096px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 14));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 32) < height <= calc($wallpaper-pattern-height * 34)) { */
+         @media (min-height: 4097px) and (max-height: 4352px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 15));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 34) < height <= calc($wallpaper-pattern-height * 36)) { */
+         @media (min-height: 4353px) and (max-height: 4608px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 16));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 36) < height <= calc($wallpaper-pattern-height * 38)) { */
+         @media (min-height: 4609px) and (max-height: 4864px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 17));
+             }
+         }
+         /* @media (calc($wallpaper-pattern-height * 38) < height <= calc($wallpaper-pattern-height * 40)) { */
+         @media (min-height: 4865px) and (max-height: 5120px) {
+             :root {
+                 --spinner-top: calc(var(--window-center-pos) + (var(--wallpaper-pattern-height) * 18));
+             }
+         }
+
+         .loader {
+            height: 100%;
+            width: 100%;
+
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+             .wallpaper {
+                 height: 100%;
+                 width: 100%;
+                 z-index: -1;
+
+                 display: flex;
+                 align-items: center;
+                 justify-content: center;
+
+                 overflow: hidden;
+
+                 .content {
+                     background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' height='128' width='384' viewBox='0 0 384 128'><pattern id='p' width='384' height='128' patternUnits='userSpaceOnUse' stroke='%231B1B1B' stroke-linejoin='round' stroke-width='4'><path fill='%231DB2CF' d='M 9.736 -15 L -30 3.337 l 23.642 -0.088 L -10.212 15 L 30 -3.425 H 6.834 L 9.736 -15 Z'/><path fill='%23D53583' d='M 201.736 -15 L 162 3.337 l 23.642 -0.088 L 181.788 15 L 222 -3.425 H 198.834 L 201.736 -15 Z'/><path fill='%231DB2CF' d='M 393.736 -15 L 354 3.337 l 23.642 -0.088 L 373.788 15 L 414 -3.425 H 390.834 L 393.736 -15 Z'/><path fill='%237E6BB6' d='M 105.736 50 L 66 68.337 l 23.642 -0.088 L 85.788 80 L 126 61.575 H 102.834 L 105.736 50 Z'/><path fill='%237E6BB6' d='M 297.736 50 L 258 68.337 l 23.642 -0.088 L 277.788 80 L 318 61.575 H 294.834 L 297.736 50 Z'/><path fill='%231DB2CF' d='M 9.736 113 L -30 131.337 l 23.642 -0.088 L -10.212 143 L 30 124.575 H 6.834 L 9.736 113 Z'/><path fill='%23D53583' d='M 201.736 113 L 162 131.337 l 23.642 -0.088 L 181.788 143 L 222 124.575 H 198.834 L 201.736 113 Z'/><path fill='%231DB2CF' d='M 393.736 113 L 354 131.337 l 23.642 -0.088 L 373.788 143 L 414 124.575 H 390.834 L 393.736 113 Z'/></pattern><rect fill='url(%23p)' width='100%' height='100%'/></svg>");
+                     background-position: center;
+                     backgrond-size: var(--wallpaper-pattern-height);
+
+                     width: 150%;
+                     height: 150%;
+                 }
+             }
+
+             .spinner {
+                 height: var(--spinner-height);
+                 aspect-ratio: 2;
+
+                 position: absolute;
+
+                 top: var(--spinner-top);
+
+                 svg {
+                     --fps: 4;
+                     --duration_sec: 3;
+                     --steps: calc(var(--duration_sec) * var(--fps));
+
+                     height: 100%;
+                     width: 100%;
+
+                     fill: #1DB2CF; /* color-primary-100 */
+                     stroke: #1B1B1B; /* greyscale-90 */
+
+                     animation: 3s multicolor linear infinite;
+                     animation-timing-function: steps(var(--steps), end);
+                 }
+             }
+         }
+        </style>
     </head>
     <body>
         <div id="main">
@@ -18,7 +210,7 @@
                     <div class="content"></div>
                 </div>
                 <div class="spinner">
-                    <svg viewBox="0 0 184 94" xmlns="http://www.w3.org/2000/svg">
+                    <svg xmlns="http://www.w3.org/2000/svg" width='184' height='94' viewBox="0 0 184 94">
                         <path
                             stroke-linejoin="round"
                             stroke-width="6"
@@ -29,12 +221,12 @@
             </div>
         </div>
         <script type="module" async>
-         import init from "{base_path}/assets/dioxus/beau-gosse-du-92.js";
+         import init from "{base_path}/wasm/beau-gosse-du-92.js";
 
          // Ensure that everything needed to render preloader has been downloaded
          // before fetching the wasm bundle.
          window.onload=function() {
-             init("{base_path}/assets/dioxus/beau-gosse-du-92_bg.wasm").then(
+             init("{base_path}/wasm/beau-gosse-du-92_bg.wasm").then(
                  wasm => {
                      const preloader = document.getElementById("preloader");
                      if (preloader !== undefined) {

src/main.rs

@@ -10,6 +10,7 @@ mod utils;
 
 use std::rc::Rc;
 
+use dioxus::document::{Link, Style};
 use dioxus::prelude::*;
 use futures_util::stream::StreamExt;
 use tracing::{debug, error, warn};
@@ -89,13 +90,24 @@ async fn login(mut rx: UnboundedReceiver<bool>, session: &GlobalSignal<Session>)
 fn app() -> Element {
     let login_coro = use_coroutine(|rx| login(rx, &SESSION));
 
-    if !SESSION.read().is_logged {
+    let is_logged = SESSION.read().is_logged;
+
+    if !is_logged {
         login_coro.send(false);
-        rsx! {
+    }
+
+    rsx! {
+        Link {
+            href: asset!("public/fonts/Geist/Geist-Medium.woff2"), as: "font", type: "font/woff2"
+        }
+        Style {
+            id: "style-head", "body {{ font-family: 'Geist'; font-weight: normal; }}"
+        }
+
+        if !is_logged {
             Login {}
         }
-    } else {
+        else {
-        rsx! {
             Conversations {}
         }
     }

src/ui/_base.scss

@@ -181,18 +181,14 @@ $border-thin: solid $border-thin-width $border-default-color;
 // TODO: Radius should be a percentage(eg: 1024/16px).
 $border-radius: 16px;
 
-$geist-font-path: "../fonts/Geist";
-
 $transition-duration: 300ms;
 
 @font-face {
-    src: url("#{$geist-font-path}/Geist-Medium.woff2") format("woff2");
     font-family: "Geist";
     font-weight: normal;
 }
 
 @font-face {
-    src: url("#{$geist-font-path}/Geist-Bold.woff2") format("woff2");
     font-family: "Geist";
     font-weight: bold;
 }

src/ui/components/wallpaper.rs

@@ -7,10 +7,8 @@ turf::style_sheet!("src/ui/components/wallpaper.scss");
 
 #[component]
 pub fn Wallpaper(display_version: Option<bool>) -> Element {
-    let background_image = format!(
+    let background_image_asset = asset!("/public/images/wallpaper-pattern.svg");
-        "url({})",
+    let background_image = format!("url({})", background_image_asset.to_string());
-        manganis::asset!("public/images/wallpaper-pattern.svg")
-    );
 
     let version = display_version.map(|flag| if flag { Some(GIT_VERSION) } else { None });