fix bug with how custom-favicon was parsing favicons with weird content-types.

index.js

@@ -135,12 +135,42 @@ app.use((req, res, next) => {
 });
 app.use("/custom-favicon", async (req, res) => {
   try {
-    const { url } = req.query;
+    const { url, contentType } = req.query;
-    const response = await fetch(url).then((apiRes) => apiRes.buffer());
+    const urlExt = url.split('.').pop();
-    res.send(response);
+    const response = await fetch(url);
+    const arrayBuffer = await response.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    console.log(contentType)
+    if (contentType || !contentType == "") {
+      res.setHeader("Content-Type", contentType);
+    } else {
+      switch (urlExt) {
+        case "png":
+          res.setHeader("Content-Type", "image/png");
+          break;
+        case "jpg":
+          res.setHeader("Content-Type", "image/jpeg");
+          break;
+        case "jpeg":
+          res.setHeader("Content-Type", "image/jpeg");
+          break;
+        case "gif":
+          res.setHeader("Content-Type", "image/gif");
+          break;
+        case "svg":
+          res.setHeader("Content-Type", "image/svg+xml");
+          break;
+        case "ico":
+          res.setHeader("Content-Type", "image/x-icon");
+          break;
+        default:
+          res.setHeader("Content-Type", "image/png");
+          break;
+      }
+    }
+    res.send(buffer);
   } catch (err) {
-    console.log(err);
+    res.send(`Error: ${err}`);
-    res.send("Error");
   }
 });
 app.use("/", express.static("dist/client/"));

package-lock.json

@@ -10,11 +10,10 @@
       "dependencies": {
         "@astrojs/node": "^8.2.5",
         "@astrojs/sitemap": "^3.1.2",
-        "@mercuryworkshop/bare-mux": "^1.0.5",
+        "@mercuryworkshop/bare-mux": "^1.0.7",
         "@mercuryworkshop/epoxy-transport": "^1.1.0",
         "@mercuryworkshop/libcurl-transport": "^1.3.1",
         "@titaniumnetwork-dev/ultraviolet": "^3.0.0",
-        "@tomphttp/bare-client": "^2.2.0-alpha",
         "@tomphttp/bare-server-node": "^2.0.3",
         "astro": "^4.4.1",
         "chalk": "^5.3.0",
@@ -23,6 +22,7 @@
         "dotenv": "^16.3.1",
         "express": "^4.18.2",
         "node-fetch": "^3.3.2",
+        "notyf": "^3.10.0",
         "rammerhead": "https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz",
         "wisp-server-node": "^1.0.2"
       },
@@ -1115,9 +1115,9 @@
       "integrity": "sha512-ojkXjR3K0Zz3jnCR80tqPL+0yvbZk/lEodb6RIVjLz7W8RVA2wrw8ym/CzCpXO9SYVUIKHFUpc7jvf8UKfIM3w=="
     },
     "node_modules/@mercuryworkshop/bare-mux": {
-      "version": "1.0.5",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@mercuryworkshop/bare-mux/-/bare-mux-1.0.5.tgz",
+      "resolved": "https://registry.npmjs.org/@mercuryworkshop/bare-mux/-/bare-mux-1.0.7.tgz",
-      "integrity": "sha512-5czcsWISUCrN49diTuF/8WXZUCyoWHn90Ea+gLhVWKGUTyJzPAG5gTVZ77rMcQYewSuSDA1WVPaF0n79ciL5Gg==",
+      "integrity": "sha512-VUJvfLxlzpyCuKoGfaI+sUpHEK4tvmvpYvkalU2z604+O9UahfZoc53arO9pm9F3Fnv7ZNloSWMnvSlPAznkoA==",
       "dependencies": {
         "@types/uuid": "^9.0.8",
         "uuid": "^9.0.1"
@@ -1555,11 +1555,6 @@
         "uuid": "dist/bin/uuid"
       }
     },
-    "node_modules/@tomphttp/bare-client": {
-      "version": "2.2.0-alpha",
-      "resolved": "https://registry.npmjs.org/@tomphttp/bare-client/-/bare-client-2.2.0-alpha.tgz",
-      "integrity": "sha512-xhcflOpwr92tkpp8SoDhB3nK3LHMBIjx+vgow37XobQew2k0/mXSxmaU7BsDFpOIa1CcLCEsR8gWn0v7Cy9+7Q=="
-    },
     "node_modules/@tomphttp/bare-server-node": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@tomphttp/bare-server-node/-/bare-server-node-2.0.3.tgz",
@@ -6799,6 +6794,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/notyf": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/notyf/-/notyf-3.10.0.tgz",
+      "integrity": "sha512-Mtnp+0qiZxgrH+TzVlzhWyZceHdAZ/UWK0/ju9U0HQeDpap1mZ8cC7H5wSI5mwgni6yeAjaxsTw0sbMK+aSuHw=="
+    },
     "node_modules/npm-run-path": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.2.0.tgz",

package.json

@@ -25,6 +25,7 @@
     "dotenv": "^16.3.1",
     "express": "^4.18.2",
     "node-fetch": "^3.3.2",
+    "notyf": "^3.10.0",
     "rammerhead": "https://github.com/NebulaServices/rammerhead/releases/download/rammerhead-1.2.41-nebula.8/rammerhead-1.2.41-nebula.7.tgz",
     "wisp-server-node": "^1.0.2"
   },

src/components/ProxyRegistrar.astro

@@ -1,5 +1,8 @@
 <script>
   import { TransportMgr, initTransport, loadSelectedTransportScript } from "./ts/TransportManager";
+  import "notyf/notyf.min.css";
+  import { Notyf } from "notyf";
+
   let form = document.querySelector("form");
   let input = document.querySelector("input");
   document.addEventListener("astro:after-swap", initForm);
@@ -114,6 +117,10 @@
         iframeLoad(iframe, loadingContent, topbar, closeButton, shareButton, forwardsButton, backwardsButton);
       }, 500);
 
+      function setActive() {
+        iframe.classList.add("active");
+      }
+
       function iframeLoad(
         iframe: HTMLIFrameElement,
         loadingContent: HTMLElement,
@@ -128,12 +135,15 @@
         topbar.style.opacity = "1";
         topbar.style.pointerEvents = "auto";
         document.body.style.overflow = "hidden";
+        iframe.addEventListener("load", setActive);
         closeButton.onclick = () => {
           iframe.style.opacity = "0";
           topbar.style.opacity = "0";
           iframe.style.pointerEvents = "none";
           topbar.style.pointerEvents = "none";
           document.body.style.overflow = "auto";
+          iframe.classList.remove("active");
+          iframe.removeEventListener("load", setActive);
 
           setTimeout(() => {
             iframe.src = "about:blank";
@@ -156,6 +166,12 @@
           } else {
             navigator.clipboard.writeText(window.__uv$config.decodeUrl(iframe.src.split("/service/")[1]));
           }
+          new Notyf({
+            duration: 2000,
+            position: { x: "right", y: "bottom" },
+            dismissible: true,
+            ripple: true,
+          }).success("Copied to clipboard!");
         };
       }
     }, 100);
@@ -226,17 +242,12 @@
     if (!localStorageItem) return "uv";
 
     switch (JSON.parse(localStorageItem).value.toLowerCase()) {
-      case "ultraviolet": {
+      case "ultraviolet": 
         return "ultraviolet";
-      }
       case "rammerhead":
         return "rammerhead";
-      case "dynamic":
+      default: 
-        // temporary because dynamic is not implemented yet :)
-        return "ultraviolet";
-      default: {
         return "uv";
-      }
     }
   }
 
@@ -254,7 +265,7 @@
             proxiedFavicon.src = favicon.href;
             return;
           }
-          if (proxiedFavicon.src == `${window.location.origin}/custom-favicon?url=${encodedHREF}`)
+          if (proxiedFavicon.src == `${window.location.origin}/custom-favicon?url=${encodedHREF}&contentType=${favicon.type ? encodeURIComponent(favicon.type) : ""}`)
             return;
         }
         if (favicon) {
@@ -263,7 +274,7 @@
             proxiedFavicon.src = favicon.href;
             return;
           }
-          proxiedFavicon.src = `/custom-favicon?url=${encodedHREF}`;
+          proxiedFavicon.src = `/custom-favicon?url=${encodedHREF}&contentType=${favicon.type ? encodeURIComponent(favicon.type) : ""}`;
           proxiedFavicon.addEventListener("error", () => {
             proxiedFavicon.src = "/favicon.ico";
           });

src/layouts/Layout.astro

@@ -157,6 +157,9 @@ const { title, optionalPreloads } = Astro.props;
         transition: opacity 250ms ease-in-out;
         pointer-events: none;
       }
+      #proxy-frame.active {
+        background-color: #fff;
+      }
       #proxy-frame {
         opacity: 0;
       }
@@ -203,10 +206,19 @@ const { title, optionalPreloads } = Astro.props;
       .nav-container {
         margin-top: 5px;
       }
+      @media (max-width: 484px) {
+        .nav-container {
+          display: none;
+        }
+      }
 
       .nav-container > img {
         height: 32px;
         cursor: pointer;
+        transition: 250ms ease-in-out;
+      }
+      .nav-container > img:hover {
+        filter: brightness(0.8);
       }
       #nav-share {
         height: 30px;