From b8474bc2ce529f2cb483dc7858a1174c24b15553 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Sat, 10 Aug 2024 22:14:45 +0300
Subject: [PATCH] fix splash screen, milkdown on safaai, link preview/opengraph

---
 ng-app/index-native.html               |  17 +++-
 ng-app/index-web.html                  |  63 ++++++++-----
 ng-app/public/favicon.ico              | Bin 0 -> 36098 bytes
 ng-app/src-tauri/Cargo.toml            |   1 +
 ng-app/src-tauri/src/lib.rs            |  33 ++++++-
 ng-app/src/App.svelte                  |   7 ++
 ng-app/src/api.ts                      |   6 ++
 ng-app/src/apps/AutomergeEditor.svelte |   1 -
 ng-app/src/apps/MilkDownEditor.svelte  |  66 +++++++++-----
 ng-app/src/apps/PostMdViewer.svelte    | 120 ++++++++++++++++---------
 ng-app/src/apps/automerge/ADate.svelte |   2 +-
 ng-app/src/styles.css                  |   4 -
 ng-app/vite.config.ts                  |  17 ++++
 ng-broker/src/server_ws.rs             |  13 +++
 14 files changed, 255 insertions(+), 95 deletions(-)
 create mode 100644 ng-app/public/favicon.ico
diff --git a/ng-app/index-native.html b/ng-app/index-native.html
index 223b3c4..eb5a880 100644
--- a/ng-app/index-native.html
+++ b/ng-app/index-native.html
@@ -58,14 +58,21 @@
     <title>NextGraph</title>
     <style>
       .splashing {
-        height: 95vh;display: grid;
+        height: 95vh;
+        width:100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .noshow {
+        display: none !important;
       }
     </style>
   </head>
 
   <body>
     <div id="splash" class="splashing">
-      <div style="margin: auto; display: grid;">
+      <div style="flex-direction: column;justify-content: center;color:#4972a5;width:100%;text-align:center;font-family: Inter, Avenir, Helvetica, Arial, sans-serif;">
         <svg
           style="width:100px;height:100px;margin: 0 auto 20px ;"
           xmlns="http://www.w3.org/2000/svg"
@@ -82,9 +89,13 @@
               style="fill:#4972a5;fill-opacity:1;stroke:#4972a5;stroke-width:0.377976;stroke-opacity:1" />
           </g>
         </svg>
+        <div>&nbsp;&nbsp;&nbsp;Loading ...</div>
       </div>
     </div>
-    <div id="app"></div>
+    <div id="app" class="noshow"></div>
     <script type="module" src="/src/main.ts"></script>
+    <script>
+      window.supported = true;
+    </script>
   </body>
 </html>
diff --git a/ng-app/index-web.html b/ng-app/index-web.html
index 0e12db6..0239b72 100644
--- a/ng-app/index-web.html
+++ b/ng-app/index-web.html
@@ -56,10 +56,23 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>NextGraph</title>
+    <meta property="og:title" content="NextGraph App - The New Internet Platform" />
+    <meta property="og:image" content="https://nextgraph.org/card.png"/>
+    <meta name="twitter:image" content="https://nextgraph.org/card-twitter.png"/>
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="og:description" content="Decentralized, encrypted and local-first platform and framework, towards the better internet we all deserve! Features a social network, shared documents, productivity tools, an app store, and more! You can use NextGraph for free, and it works online and offline. With NextGraph you own your data and software, having your privacy respected, while enjoying high-quality apps for your daily use. Try it now! Developers can build new web3.0 local-first apps with our open source framework, based on open standards, with CRDTs, E2EE, Semantic Web, RDF, SPARQL, JSON, Markdown, Svelte, React, JavaScript, Rust, etc... ActivityPub and Solid compatible." />
+    <meta name="description" content="Decentralized, encrypted and local-first platform and framework, towards the better internet we all deserve! Features a social network, shared documents, productivity tools, an app store, and more! You can use NextGraph for free, and it works online and offline. With NextGraph you own your data and software, having your privacy respected, while enjoying high-quality apps for your daily use. Try it now! Developers can build new web3.0 local-first apps with our open source framework, based on open standards, with CRDTs, E2EE, Semantic Web, RDF, SPARQL, JSON, Markdown, Svelte, React, JavaScript, Rust, etc... ActivityPub and Solid compatible.">
   </head>
   <style>
     .splashing {
-      height: 95vh;display: grid;
+      height: 95vh;
+      width:100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .noshow {
+      display: none !important;
     }
     .error-no-wasm-hidden {
       display:none;
@@ -68,9 +81,9 @@
   
   <body>
     <div id="splash" class="splashing">
-      <div style="margin: auto; display: grid;">
+      <div style="flex-direction: column;justify-content: center;color:#4972a5;width:100%;text-align:center;font-family: Inter, Avenir, Helvetica, Arial, sans-serif;">
         <svg
-          style="width:100px;height:100px;margin: 0 auto 20px ;"
+          style="width:100px;height:100px;margin: 0 auto 20px ;display:flex;"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 225 225"
         >
@@ -85,34 +98,44 @@
               style="fill:#4972a5;fill-opacity:1;stroke:#4972a5;stroke-width:0.377976;stroke-opacity:1" />
           </g>
         </svg>
-        <br/>
-        <div id="error-no-wasm" class="error-no-wasm-hidden" style="text-align: center;">
-          Your browser is too old and does not support NextGraph. <br/>Please upgrade to a newer version of this browser,<br/> try with another browser, <br/>or <a href="https://nextgraph.org/download">install our native app</a>.
+        <div class="noshow" id="app-loading">&nbsp;&nbsp;&nbsp;Loading ...</div>
+
+        <div id="error-no-wasm" class="error-no-wasm-hidden">
+          Your browser is too old and does not support NextGraph. <br/>Please upgrade to a newer version of this browser,<br/> try with another browser,<br/> <br/>or <a href="https://nextgraph.org/download">install our native apps on <br/>
+            Linux, macOS, Windows desktops and laptops,<br/> and iOS, Android mobiles.</a>
         </div>
-        <noscript style="text-align: center;">
-          NextGraph cannot load as Javascript is deactivated
+        <noscript style="display:grid;">
+          NextGraph cannot load as Javascript is deactivated.<br/>
+          You can use the CLI ngcli to access the Documents in the terminal<br/>
+          Or use the native apps for Linux, macOS, Windows, Android, iOS<br/>
+          Or setup an SSR static generator like Astro for read-only access.
         </noscript>
       </div>
     </div>
-    <div id="app">
+    <div id="app" class="noshow">
     </div>
     <script>
       const supported = (() => {
-      try {
-          if (typeof WebAssembly === "object"
-              && typeof WebAssembly.instantiate === "function") {
-              const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
-              if (module instanceof WebAssembly.Module)
-                  return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
-          }
-      } catch (e) {
-      }
-      return false;
+        if (RegExp().hasIndices === undefined) return false;
+        try {
+            if (typeof WebAssembly === "object"
+                && typeof WebAssembly.instantiate === "function") {
+                const module = new WebAssembly.Module(Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
+                if (module instanceof WebAssembly.Module)
+                    return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
+            }
+        } catch (e) {
+        }
+        return false;
       })();
-      if (!supported || RegExp().hasIndices === undefined) {
+      if (!supported ) {
         window.document.getElementById("error-no-wasm").className="";
       }
+      window.supported = supported;
+      if (supported) window.document.getElementById("app-loading").className="";
     </script>
+    <!-- # INSERT SCRIPT HERE -->
     <script type="module" src="/src/main-web.ts"></script>
+
   </body>
 </html>
diff --git a/ng-app/public/favicon.ico b/ng-app/public/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..dc45c904c8f3dd00635f868a6c80e02b648f8dc4
GIT binary patch
literal 36098
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
V&Q2E35TO_x7ujN}#W)T5`7a874fp^6

literal 0
HcmV?d00001

diff --git a/ng-app/src-tauri/Cargo.toml b/ng-app/src-tauri/Cargo.toml
index 2a694fc..5b5a0ab 100644
--- a/ng-app/src-tauri/Cargo.toml
+++ b/ng-app/src-tauri/Cargo.toml
@@ -32,6 +32,7 @@ async-std = { version = "1.12.0", features = ["attributes", "unstable"] }
 sys-locale = { version = "0.3.1" }
 ng-async-tungstenite = {  git = "https://git.nextgraph.org/NextGraph/async-tungstenite.git", branch = "nextgraph",  features = ["async-std-runtime", "async-native-tls"] }
 tauri = { version = "2.0.0-alpha.14", features = [] }
+# add the "devtools" feature if devtools in the production build should be activated
 tauri-plugin-window = "2.0.0-alpha.1"
 tauri-plugin-barcode-scanner = "=2.0.0-alpha.0"
 # tauri-plugin-window = { git = "https://git.nextgraph.org/NextGraph/plugins-workspace.git", branch="window-alpha.1-nextgraph" }
diff --git a/ng-app/src-tauri/src/lib.rs b/ng-app/src-tauri/src/lib.rs
index 13eb825..5476350 100644
--- a/ng-app/src-tauri/src/lib.rs
+++ b/ng-app/src-tauri/src/lib.rs
@@ -401,6 +401,36 @@ async fn app_request_stream(
     Ok(())
 }
 
+#[tauri::command(rename_all = "snake_case")]
+async fn discrete_update(
+    session_id: u64,
+    update: serde_bytes::ByteBuf,
+    heads: Vec<String>,
+    crdt: String,
+    nuri: String,
+) -> Result<(), String> {
+    let nuri = NuriV0::new_from(&nuri).map_err(|e| e.to_string())?;
+
+    let request = AppRequest::V0(AppRequestV0 {
+        command: AppRequestCommandV0::new_update(),
+        nuri,
+        payload: Some(
+            AppRequestPayload::new_discrete_update(heads, crdt, update.into_vec())
+                .map_err(|e| format!("Deserialization error of heads: {e}"))?,
+        ),
+        session_id,
+    });
+
+    let res = nextgraph::local_broker::app_request(request)
+        .await
+        .map_err(|e: NgError| e.to_string())?;
+    if let AppResponse::V0(AppResponseV0::Error(e)) = res {
+        Err(e)
+    } else {
+        Ok(())
+    }
+}
+
 #[tauri::command(rename_all = "snake_case")]
 async fn file_save_to_downloads(
     session_id: u64,
@@ -417,7 +447,7 @@ async fn file_save_to_downloads(
     let mut request = AppRequest::new(AppRequestCommandV0::FileGet, nuri, None);
     request.set_session_id(session_id);
 
-    let (mut reader, cancel) = nextgraph::local_broker::app_request_stream(request)
+    let (mut reader, _cancel) = nextgraph::local_broker::app_request_stream(request)
         .await
         .map_err(|e| e.to_string())?;
 
@@ -864,6 +894,7 @@ impl AppBuilder {
                 doc_fetch_repo_subscribe,
                 doc_create,
                 cancel_stream,
+                discrete_update,
                 app_request_stream,
                 file_get,
                 file_save_to_downloads,
diff --git a/ng-app/src/App.svelte b/ng-app/src/App.svelte
index d7a1f7f..bc5da3b 100644
--- a/ng-app/src/App.svelte
+++ b/ng-app/src/App.svelte
@@ -74,6 +74,12 @@
   // };
 
   onMount(async () => {
+    console.log("hide splash", window.supported);
+    if (window.supported) {
+      window.document.getElementById("splash").className="noshow";
+      window.document.getElementById("app").className="";
+    }
+    
     //window.document.getElementById("splash").className="splash-loaded";
     try {
       await disconnections_subscribe();
@@ -273,6 +279,7 @@
         }
       });
     }
+    
   });
 
   onDestroy(() => {
diff --git a/ng-app/src/api.ts b/ng-app/src/api.ts
index 36350cd..fd9fe99 100644
--- a/ng-app/src/api.ts
+++ b/ng-app/src/api.ts
@@ -38,6 +38,7 @@ const mapping = {
     "decode_invitation": ["invite"],
     "user_connect": ["info","user_id","location"],
     "user_disconnect": ["user_id"],
+    "discrete_update": ["session_id", "update", "heads", "crdt", "nuri"],
     "app_request": ["request"],
     "app_request_with_nuri_command": ["nuri", "command", "session_id", "payload"],
     "sparql_query": ["session_id","sparql","nuri"],
@@ -200,6 +201,11 @@ const handler = {
                     tauri.invoke("cancel_stream", {stream_id});
                 }
                 
+            } else if (path[0] === "discrete_update") {
+                let arg = {};
+                args.map((el,ix) => arg[mapping[path[0]][ix]]=el)
+                arg.update = Array.from(new Uint8Array(arg.update));
+                return await tauri.invoke(path[0],arg)
             } else if (path[0] === "app_request_stream") {
                 let stream_id = (lastStreamId += 1).toString();
                 //console.log("stream_id",stream_id);
diff --git a/ng-app/src/apps/AutomergeEditor.svelte b/ng-app/src/apps/AutomergeEditor.svelte
index 14d3769..b3a3790 100644
--- a/ng-app/src/apps/AutomergeEditor.svelte
+++ b/ng-app/src/apps/AutomergeEditor.svelte
@@ -64,7 +64,6 @@
         try {
             await A.initializeWasm(wasmUrl);
         } catch (e) {
-            toast_error($t("errors.no_wasm_on_old_safari"));
             safari_error = true;
             return;
         }
diff --git a/ng-app/src/apps/MilkDownEditor.svelte b/ng-app/src/apps/MilkDownEditor.svelte
index 1edba40..51abb81 100644
--- a/ng-app/src/apps/MilkDownEditor.svelte
+++ b/ng-app/src/apps/MilkDownEditor.svelte
@@ -44,13 +44,12 @@
     import { collab, collabServiceCtx } from '@milkdown/plugin-collab';
     import { placeholder, placeholderCtx } from './milkdown-placeholder'
     import { splitEditing, toggleSplitEditing } from '@milkdown-lab/plugin-split-editing'
-    import { SlashProvider, slashFactory } from '@milkdown/plugin-slash'
+    //import { SlashProvider, slashFactory } from '@milkdown/plugin-slash'
     import { callCommand } from '@milkdown/utils';
     import { emoji } from '@milkdown/plugin-emoji';
     import { math } from '@milkdown/plugin-math';
     import 'katex/dist/katex.min.css';
     import { indent } from '@milkdown/plugin-indent';
-    import { prism } from '@milkdown/plugin-prism';
     import 'prism-themes/themes/prism-nord.css'
 
     export let commits = {};
@@ -74,38 +73,59 @@
 
     $: width, width_changed();
 
-    function slashPluginView(view) {
-        const content = document.createElement('div');
+    // function slashPluginView(view) {
+    //     const content = document.createElement('div');
 
-        const provider = new SlashProvider({
-            content,
-        });
+    //     const provider = new SlashProvider({
+    //         content,
+    //     });
 
-        return {
-            update: (updatedView, prevState) => {
-                provider.update(updatedView, prevState);
-            },
-            destroy: () => {
-                provider.destroy();
-                content.remove();
-            }
-        }
-    }
+    //     return {
+    //         update: (updatedView, prevState) => {
+    //             provider.update(updatedView, prevState);
+    //         },
+    //         destroy: () => {
+    //             provider.destroy();
+    //             content.remove();
+    //         }
+    //     }
+    // }
 
-    const slash = slashFactory('my-slash');
+    // const slash = slashFactory('my-slash');
 
     async function setup() {
+        if (!Array.prototype.at) {
+            Array.prototype.at = function at(n) {
+                let i = Math.trunc(n) || 0
+                i = i < 0 ? this.length + i : i
+
+                if (i < 0 || i >= this.length) return undefined
+
+                return this[i]
+            }
+        }
+        if (!Element.prototype.replaceChildren) {
+            Element.prototype.replaceChildren = function replaceChildren(...new_children) {
+                const { childNodes } = this;
+                while (childNodes.length) {
+                    childNodes[0].remove();
+                }
+                this.append(...new_children);
+            }
+        }
+        let prism = await import("@milkdown/plugin-prism");       
+
         editor = await Editor.make().config((ctx) => {
             ctx.set(rootCtx, '#mdeditor')
             ctx.set(placeholderCtx, $t("doc.type_your_text_here"))
-            ctx.set(slash.key, {
-                view: slashPluginView
-            })
-        }).use(slash)
+            // ctx.set(slash.key, {
+            //     view: slashPluginView
+            // })
+        })//.use(slash)
         .config(nord)
         .use(commonmark)
         .use(gfm)
-        .use(prism)
+        .use(prism.prism)
         .use(indent)
         .use(math)
         .use(emoji)
diff --git a/ng-app/src/apps/PostMdViewer.svelte b/ng-app/src/apps/PostMdViewer.svelte
index 19a9879..5811b5d 100644
--- a/ng-app/src/apps/PostMdViewer.svelte
+++ b/ng-app/src/apps/PostMdViewer.svelte
@@ -45,54 +45,85 @@
     import { math } from '@milkdown/plugin-math';
     import 'katex/dist/katex.min.css';
     import { indent } from '@milkdown/plugin-indent';
-    import { prism } from '@milkdown/plugin-prism';
-    import 'prism-themes/themes/prism-nord.css'
+    import "prism-themes/themes/prism-nord.css";
 
     export let commits = {};
 
     const ydoc = new Y.Doc()
 
     let editor;
-    let has_content = false;
+    let has_content = true;
 
     async function setup() {
-        editor = await Editor.make().config((ctx) => {
-            ctx.set(rootCtx, '#mdeditor')
-            ctx.update(editorViewOptionsCtx, (prev) => ({
-                ...prev,
-                editable:() => false,
-            }))
-        }).config(nord)
-        .use(commonmark)
-        .use(gfm)
-        .use(prism)
-        .use(indent)
-        .use(math)
-        .use(emoji)
-        .use(collab)
-        .create();
-   
-        ydoc.on('destroy', async () => {
-            commits.discrete?.deregisterOnUpdate();
-        })
-
-        editor.action((ctx) => {
-            const collabService = ctx.get(collabServiceCtx);
-
-            collabService
-            // bind doc and awareness
-            .bindDoc(ydoc)
-            // connect yjs with milkdown
-            .connect();
-        });
-
-        let history = commits.discrete?.registerOnUpdate((update) => {
-            Y.applyUpdate(ydoc, update.YXml, {local:true})
-            has_content = true;
-        });
-        for (const h of history) {
-            Y.applyUpdate(ydoc, h.YXml, {local:true})
-            has_content = true;
+        try {
+            editor = Editor.make().config((ctx) => {
+                ctx.set(rootCtx, '#mdeditor')
+                ctx.update(editorViewOptionsCtx, (prev) => ({
+                    ...prev,
+                    editable:() => false,
+                }))
+            }).config(nord)
+            .use(commonmark)
+            .use(gfm);
+            // do not load prism if Safari < 15.4
+            if (!Array.prototype.at) {
+                Array.prototype.at = function at(n) {
+                    let i = Math.trunc(n) || 0
+                    i = i < 0 ? this.length + i : i
+
+                    if (i < 0 || i >= this.length) return undefined
+
+                    return this[i]
+                }
+            }
+            if (!Element.prototype.replaceChildren) {
+                Element.prototype.replaceChildren = function replaceChildren(...new_children) {
+                    const { childNodes } = this;
+                    while (childNodes.length) {
+                        childNodes[0].remove();
+                    }
+                    this.append(...new_children);
+                }
+            }
+            if ([].at) {
+                let prism = await import("@milkdown/plugin-prism");
+                editor = editor.use(prism.prism);
+            }
+            
+            editor = await editor
+            .use(indent)
+            .use(math)
+            .use(emoji)
+            .use(collab)
+            .create();
+    
+            ydoc.on('destroy', async () => {
+                commits.discrete?.deregisterOnUpdate();
+            })
+
+            editor.action((ctx) => {
+                const collabService = ctx.get(collabServiceCtx);
+
+                collabService
+                // bind doc and awareness
+                .bindDoc(ydoc)
+                // connect yjs with milkdown
+                .connect();
+            });
+
+            has_content = false;
+            let history = commits.discrete?.registerOnUpdate((update) => {
+                Y.applyUpdate(ydoc, update.YXml, {local:true})
+                has_content = true;
+            });
+            for (const h of history) {
+                Y.applyUpdate(ydoc, h.YXml, {local:true})
+                has_content = true;
+            }
+        }
+        catch (e){
+            console.log("in setup ")
+            console.log(e)
         }
     }
 
@@ -103,7 +134,12 @@
 
     onDestroy(async ()=>{
         ydoc.destroy();
-        await editor.destroy();
+        try {
+            if (editor) await editor.destroy();
+        } catch(e) {
+            console.log(e);
+        }
+
     });
 
     const edit = () => {
@@ -116,7 +152,7 @@
         <button
             on:click={edit}
             on:keypress={edit}
-            class="select-none mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            class="select-none ml-5 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
         >
             <PencilSquare tabindex="-1" class="mr-2 focus:outline-none" />
             {$t("doc.start_editing")}            
diff --git a/ng-app/src/apps/automerge/ADate.svelte b/ng-app/src/apps/automerge/ADate.svelte
index f1658d9..63b351c 100644
--- a/ng-app/src/apps/automerge/ADate.svelte
+++ b/ng-app/src/apps/automerge/ADate.svelte
@@ -60,7 +60,7 @@
    
     </div>
      
-    <div class="relative" style="max-width: 129px;">
+    <div class="relative" style="width: 129px;">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
             <svg class="w-4 h-4 text-primary-700 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                 <path fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm11-4a1 1 0 1 0-2 0v4a1 1 0 0 0 .293.707l3 3a1 1 0 0 0 1.414-1.414L13 11.586V8Z" clip-rule="evenodd"/>
diff --git a/ng-app/src/styles.css b/ng-app/src/styles.css
index 67019e5..e16aa77 100644
--- a/ng-app/src/styles.css
+++ b/ng-app/src/styles.css
@@ -23,10 +23,6 @@ td.hljs {
     display: none;
 } */
 
-.splashing {
-    display: none !important;
-}
-
 .split-editor {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
diff --git a/ng-app/vite.config.ts b/ng-app/vite.config.ts
index e81e595..08d558c 100644
--- a/ng-app/vite.config.ts
+++ b/ng-app/vite.config.ts
@@ -7,6 +7,20 @@ import svelteSVG from "vite-plugin-svelte-svg";
 import wasm from "vite-plugin-wasm";
 import topLevelAwait from "vite-plugin-top-level-await";
 
+const jsToBottom = () => {
+  return {
+    name: "script-at-end-of-body",
+    transformIndexHtml(html) {
+      let scriptTag = html.match(/<script type[^>]*>(.*?)<\/script[^>]*>/)[0]
+      //console.log("\n SCRIPT TAG", scriptTag, "\n")
+      html = html.replace(scriptTag, "")
+      html = html.replace("<!-- # INSERT SCRIPT HERE -->", scriptTag)
+      return html;
+    }
+  }
+}
+
+
 // https://vitejs.dev/config/
 export default defineConfig(async () => {
   const host = await internalIpV4()
@@ -105,5 +119,8 @@ if (process.env.NG_APP_FILE) {
   config.plugins.push(viteSingleFile());
   config.worker.plugins.push(viteSingleFile());
 }
+if (process.env.NG_APP_WEB) {
+  config.plugins.push(jsToBottom());
+}
 return config
 })
diff --git a/ng-broker/src/server_ws.rs b/ng-broker/src/server_ws.rs
index 302e29e..41af34f 100644
--- a/ng-broker/src/server_ws.rs
+++ b/ng-broker/src/server_ws.rs
@@ -196,6 +196,10 @@ fn prepare_urls_from_private_addrs(addrs: &Vec<BindAddress>, port: u16) -> Vec<S
 #[include = "*.gzip"]
 struct App;
 
+#[derive(RustEmbed)]
+#[folder = "../ng-app/public/"]
+struct AppPublic;
+
 static ROBOTS: &str = "User-agent: *\r\nDisallow: /";
 
 fn upgrade_ws_or_serve_app(
@@ -258,6 +262,15 @@ fn upgrade_ws_or_serve_app(
                 .body(Some(BOOTSTRAP_STRING.get().unwrap().as_bytes().to_vec()))
                 .unwrap();
             return Err(res);
+        } else if uri == "/favicon.ico" {
+            let file = AppPublic::get("favicon.ico").unwrap();
+            let res = Response::builder()
+                .status(StatusCode::OK)
+                .header("Content-Type", "image/x-icon")
+                .header("Cache-Control", "max-age=432000, must-revalidate")
+                .body(Some(file.data.to_vec()))
+                .unwrap();
+            return Err(res);
         } else if uri == "/robots.txt" {
             let res = Response::builder()
                 .status(StatusCode::OK)
