Header is now reactive

src/components/Header.astro

@@ -7,10 +7,14 @@ const path = Astro.url.pathname;
         <button id="menu" class="cursor-pointer inline-flex items-center justify-center whitespcae-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10 hover:bg-(--accent)">
             <Icon name="lucide:menu" class="text-(--foreground) h-7 w-7" />
         </button>
-        <a class="flex items-center gap-2" href="/">
+        <a id="bhl" class="flex items-center gap-2" href="/">
             <Icon name="lucide:radius" class="w-8 h-8 rotate-180 text-(--foreground)" />
             <h1 class="text-xl font-bold text-(--foreground)"> Radius </h1>
         </a>
+        <div id="phl" class="flex items-center gap-2 hidden">
+            <img id="phlImage" src="https://google.com/favicon.ico" class="w-8 h-8 text-(--foreground) rounded-2xl" />
+            <h1 id="phlTitle" class="hidden md:block text-xl font-bold text-(--foreground) whitespace-nowrap"> Radius </h1>
+        </div>
     </div>
     <div>
     </div>

src/global.d.ts

@@ -0,0 +1,7 @@
+declare global {
+    interface Window {
+         __uv: any;
+         $scramjet: any;
+    }
+}
+export {};

src/pages/index.astro

@@ -25,31 +25,64 @@ const randomSplash = genSplash();
             </div>
             <p class="text-sm text-center sm:text-base whitespace-nowrap"> { randomSplash } </p>
         </div>
-        <iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden" src="https://example.com" />
+        <iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden" />
     </div>
 </Layout>
 <script>
     import { SW } from "@utils/proxy.ts";
     import { Settings } from "@utils/settings.ts";
+    import { BareClient } from "@mercuryworkshop/bare-mux";
 
     const init = async () => {
         const input = document.getElementById("input") as HTMLInputElement;
         const iframe = document.getElementById("iframe") as HTMLIFrameElement;
+        const iframeWin = iframe.contentWindow;
+        const bhl = document.getElementById("bhl") as HTMLDivElement;
+        const phl = document.getElementById("phl") as HTMLDivElement;
+        const phlImage = document.getElementById("phlImage") as HTMLImageElement;
+        const phlTitle = document.getElementById("phlTitle") as HTMLDivElement;
+        const client = new BareClient();
         input.addEventListener("keypress", async (event: any) => {
             if (event.key === "Enter") {
                 const sw = SW.getInstance().next().value!;
                 const settings = await Settings.getInstance();
                 await sw.setTransport();
                 iframe.classList.remove("hidden");
-                iframe.src = sw.encodeURL(input.value, 'uv');
+                iframe.src = sw.encodeURL(input.value, 'scram'); 
             }
         });
+
+        const getURL = async (): Promise<string> => {
+            if (iframeWin!.__uv) {
+                return iframeWin!.__uv.location.href
+            }
+            else {
+                return iframeWin!.location.href
+                    .replace(iframeWin!.location.origin, '')
+                    .replace(iframeWin!.$scramjet.config.prefix, '')
+            }
+        }
+
+        iframe.addEventListener("load", async () => {
+            //const url = new URL();
+            phlTitle.innerHTML = iframeWin!.document.title;
+            const pageURL = await getURL();
+            const data = await client.fetch(`https://www.google.com/s2/favicons?domain=${pageURL}&sz=64`);
+            const dataRes = await data.blob();
+            const object = URL.createObjectURL(dataRes);
+            phlImage.src = object;
+            bhl.classList.add("hidden");
+            phl.classList.remove("hidden");
+            //URL.revokeObjectURL(object);
+        }); 
     }
 
     document.addEventListener("astro:page-load", async () => {
         try {
             await init();
         }
-        catch (_) {}
+        catch (err) {
+            console.log(err);
+        }
     })
 </script>