From bc73f5d3f3a1236ad322594704b4127a722a2bc1 Mon Sep 17 00:00:00 2001
From: rift <117926989+Riftriot@users.noreply.github.com>
Date: Wed, 27 Dec 2023 18:44:35 -0600
Subject: [PATCH] about blank mode

---
 src/AboutBlank.tsx                     | 18 +++++++++
 src/components/iframe/IframeHeader.tsx | 53 ++++++++++++++++----------
 src/pages/ProxyFrame.tsx               | 27 ++-----------
 src/routes.tsx                         |  3 +-
 4 files changed, 56 insertions(+), 45 deletions(-)
 create mode 100644 src/AboutBlank.tsx

diff --git a/src/AboutBlank.tsx b/src/AboutBlank.tsx
new file mode 100644
index 0000000..35e8461
--- /dev/null
+++ b/src/AboutBlank.tsx
@@ -0,0 +1,18 @@
+import { LoadSuspense } from "./LoadSuspense";
+
+export function AboutBlank(props: { url: string }) {
+  var newWindow = window.open("about:blank");
+  var iframe = document.createElement("iframe");
+  iframe.src = window.location.origin + props.url;
+  iframe.style.width = "100%";
+  iframe.style.height = "100%";
+  iframe.style.border = "none";
+  iframe.style.overflow = "hidden";
+  newWindow.document.body.appendChild(iframe);
+  window.location.replace("https://google.com");
+  return (
+    <div>
+      <LoadSuspense />
+    </div>
+  );
+}
diff --git a/src/components/iframe/IframeHeader.tsx b/src/components/iframe/IframeHeader.tsx
index 787b845..8940c16 100644
--- a/src/components/iframe/IframeHeader.tsx
+++ b/src/components/iframe/IframeHeader.tsx
@@ -2,7 +2,12 @@ import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
 import { Link } from "preact-router";
 import { RiPictureInPictureExitFill, RiFullscreenFill } from "react-icons/ri";
-import { IoCodeSlashSharp,IoChevronBackSharp,IoChevronForwardSharp, IoReloadSharp } from "react-icons/io5";
+import {
+  IoCodeSlashSharp,
+  IoChevronBackSharp,
+  IoChevronForwardSharp,
+  IoReloadSharp
+} from "react-icons/io5";
 import { FaXmark } from "react-icons/fa6";
 
 interface ProxyFrame extends HTMLElement {
@@ -25,7 +30,7 @@ export function IframeHeader(props: { url: string }) {
   return (
     <div
       id="iframeNav"
-      className="flex h-16 flex-row items-center justify-between bg-navbar-color px-4 gap-3"
+      className="flex h-16 flex-row items-center justify-between gap-3 bg-navbar-color px-4"
     >
       <Link href="/" class="w-1/8">
         <div className="flex flex-row items-center">
@@ -40,29 +45,35 @@ export function IframeHeader(props: { url: string }) {
           </h1>
         </div>
       </Link>
-        <div className="gap-3 mr-4 flex flex-row items-center justify-end">
-      <IoChevronBackSharp
-        className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"
-        onClick={() => {
-          const proxyFrame: ProxyFrame | null = document.getElementById("iframe") as ProxyFrame;
-          proxyFrame.contentWindow.history.back();
-        }}
-      />
-    <IoReloadSharp
-        className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:rotate-[360deg] hover:scale-110 hover:brightness-125"
-        onClick={() => {
-          const proxyFrame: ProxyFrame | null = document.getElementById("iframe") as ProxyFrame;
-          proxyFrame.contentWindow.location.reload();
-        }}
-    />
-      <IoChevronForwardSharp
+      <div className="mr-4 flex flex-row items-center justify-end gap-3">
+        <IoChevronBackSharp
           className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"
           onClick={() => {
-            const proxyFrame: ProxyFrame | null = document.getElementById("iframe") as ProxyFrame;
+            const proxyFrame: ProxyFrame | null = document.getElementById(
+              "iframe"
+            ) as ProxyFrame;
+            proxyFrame.contentWindow.history.back();
+          }}
+        />
+        <IoReloadSharp
+          className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:rotate-[360deg] hover:scale-110 hover:brightness-125"
+          onClick={() => {
+            const proxyFrame: ProxyFrame | null = document.getElementById(
+              "iframe"
+            ) as ProxyFrame;
+            proxyFrame.contentWindow.location.reload();
+          }}
+        />
+        <IoChevronForwardSharp
+          className="duration-0500 h-6 w-6 cursor-pointer text-navbar-text-color transition-all hover:scale-110 hover:brightness-125"
+          onClick={() => {
+            const proxyFrame: ProxyFrame | null = document.getElementById(
+              "iframe"
+            ) as ProxyFrame;
             proxyFrame.contentWindow.history.forward();
           }}
-      />
-        </div>
+        />
+      </div>
       <div id="navItems" class="w-1/8">
         <div className="mr-4 flex flex-row items-center justify-end gap-3">
           <IoCodeSlashSharp
diff --git a/src/pages/ProxyFrame.tsx b/src/pages/ProxyFrame.tsx
index 6dd0a8c..98f3f02 100644
--- a/src/pages/ProxyFrame.tsx
+++ b/src/pages/ProxyFrame.tsx
@@ -81,33 +81,14 @@ export function ProxyFrame(props: { url: string }) {
       window.location.href = ProxiedUrl; // This is the hackiest workaround in the history of hacky workarounds
     }
   } else if (proxyMode == "aboutblank") {
-    const newWindow = window.open("about:blank", "_blank");
-    const newDocument = newWindow.document.open();
-    newDocument.write(`
-      <!DOCTYPE html>
-      <html>
-        <head>
-          <style type="text/css">
-            body, html
-            {
-              margin: 0; padding: 0; height: 100%; overflow: hidden;
-            }
-          </style>
-        </head>
-        <body>
-          <iframe style="border: none; width: 100%; height: 100vh;" src="${
-            window.location.origin + ProxiedUrl
-          }"></iframe>
-        </body>
-      </html>
-    `);
-    newDocument.close();
-    window.location.replace("/");
+    if (!(ProxiedUrl == undefined)) {
+      window.location.href = "/ab/" + encodeURIComponent(ProxiedUrl);
+    }
   }
   if (!ProxiedUrl == undefined) {
     window.location.href = ProxiedUrl;
   }
-    
+
   return (
     <div class="h-screen w-screen bg-primary">
       <CloakedHead
diff --git a/src/routes.tsx b/src/routes.tsx
index 11d5180..aa436da 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -4,7 +4,7 @@ import { NotFound } from "./pages/_404.jsx";
 import { DiscordPage } from "./pages/discord.jsx";
 import { ProxyFrame } from "./pages/ProxyFrame.js";
 import { Settings } from "./pages/Settings/index.js";
-
+import { AboutBlank } from "./AboutBlank";
 import "./style.css";
 import "./themes/main.css";
 import "./i18n";
@@ -17,6 +17,7 @@ export default function Routes() {
         <Route path="/discord" component={DiscordPage} />
         <Route path="/go/:url" component={ProxyFrame} />
         <Route path="/settings" component={Settings} />
+        <Route path="/ab/:url" component={AboutBlank} />
         <Route default component={NotFound} />
       </Router>
     </LocationProvider>