Spaces:

AstraOS
/

url_proxy_blob_local_load

Running

App Files Files Community

AstraOS commited on Apr 30, 2025

Commit

6636e90

verified ·

1 Parent(s): d1b2d13

Update index.html

Browse files

Files changed (1) hide show

index.html +67 -90

index.html CHANGED Viewed

@@ -2,125 +2,102 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Custom Embed for Gamma Site</title>
   <style>
     html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
     #custom-iframe { width: 100%; height: 100%; border: none; }
   </style>
 </head>
 <body>
-  <iframe id="custom-iframe" sandbox="allow-scripts allow-same-origin"></iframe>
   <script>
   (async function() {
     const targetUrl = 'https://akshay-365-9vx6m3k.gamma.site/';
     const proxyUrl = `https://embed-proxy-prod.gamma-app.workers.dev/?alt_url=${targetUrl}`;
     try {
-      console.log('Fetching proxy URL:', proxyUrl);
-      const res = await fetch(proxyUrl, { mode: 'cors' });
-      if (!res.ok) {
-        const errorText = await res.text().catch(() => 'No response text');
-        throw new Error(`Fetch failed with status ${res.status}: ${errorText}`);
-      }
       let html = await res.text();
-      console.log('Fetched HTML length:', html.length);
-      // Injection payload: custom script to hide elements
-const scriptContent = `
-(function() {
-  try {
-    console.log('Custom embed script loaded in iframe');
-    const SELECTORS = [
-      '.css-1c6hcbi',
-      '.chakra-button__group.css-1ayoy1w'
-    ];
-    function hideTargets(root = document) {
-      // Make sure root is an Element or Document before calling querySelectorAll
-      if (root.querySelectorAll) {
-        SELECTORS.forEach(selector => {
-          root.querySelectorAll(selector).forEach(el => {
-            console.log('Hiding element:', el);
-            el.style.display = 'none';
-          });
-        });
       }
-    }
-    function setupObserver() {
-      if (!document.body) {
-        console.warn('Body not ready, retrying in 100ms...');
-        return setTimeout(setupObserver, 100);
-      }
-      hideTargets();
-      const observer = new MutationObserver(mutations => {
-        for (const mutation of mutations) {
-          if (mutation.type === 'childList') {
-            mutation.addedNodes.forEach(node => {
-              if (node.nodeType === Node.ELEMENT_NODE) {
-                hideTargets(node);
-              }
-            });
-          } else if (mutation.type === 'attributes') {
-            if (mutation.target.matches(SELECTORS.join(','))) {
-              console.log('Hiding updated element:', mutation.target);
-              mutation.target.style.display = 'none';
             }
           }
         }
-      });
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-        attributes: true,
-        attributeFilter: ['class']
-      });
-      console.log('MutationObserver set up!');
-    }
-    if (document.readyState === 'complete' || document.readyState === 'interactive') {
-      setupObserver();
-    } else {
-      document.addEventListener('DOMContentLoaded', setupObserver);
-    }
-  } catch (err) {
-    console.error('Error in injected script:', err);
-  }
-})();
-`;
-const injection = `<script>${scriptContent}<\/script>`;
-      // Inject script into <head> to avoid breaking body scripts
-      if (html.includes('</head>')) {
         html = html.replace(/<\/head>/i, injection + '</head>');
       } else {
-        console.warn('No </head> tag found, prepending script');
         html = injection + html;
       }
-      // Create Blob for same-origin iframe
       const blob = new Blob([html], { type: 'text/html' });
-      const blobUrl = URL.createObjectURL(blob);
       const iframe = document.getElementById('custom-iframe');
-      iframe.src = blobUrl;
-      // Clean up Blob URL after load
-      iframe.onload = () => {
-        console.log('Iframe loaded');
-        URL.revokeObjectURL(blobUrl);
-      };
     } catch (err) {
-      console.error('Error in fetch or injection:', err);
-      document.body.innerHTML = `<p style="color:red;">Error loading content: ${err.message}</p>`;
     }
   })();
   </script>

 <html lang="en">
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1"><!-- your own page remains responsive -->
+  <title>Responsive Gamma Embed</title>
   <style>
     html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
     #custom-iframe { width: 100%; height: 100%; border: none; }
   </style>
 </head>
 <body>
+  <iframe id="custom-iframe" sandbox="allow-scripts allow-same-origin allow-top-navigation-by-user-activation allow-popups"></iframe>
   <script>
   (async function() {
     const targetUrl = 'https://akshay-365-9vx6m3k.gamma.site/';
     const proxyUrl = `https://embed-proxy-prod.gamma-app.workers.dev/?alt_url=${targetUrl}`;
     try {
+      // forward your UA so SSR can pick mobile vs desktop
+      const res = await fetch(proxyUrl, {
+        mode: 'cors',
+        headers: {
+          'Accept': 'text/html',
+          'User-Agent': navigator.userAgent
+        }
+      });
+      if (!res.ok) throw new Error(`Status ${res.status}`);
       let html = await res.text();
+      // --- 1) Inject viewport meta if missing ---
+      if (!/<meta\s+name=["']viewport["']/i.test(html)) {
+        html = html.replace(
+          /<head([^>]*)>/i,
+          headTag => headTag +
+            '\n  <meta name="viewport" content="width=device-width, initial-scale=1">\n'
+        );
       }
+      // --- 2) Inject your hide-elements script ---
+      const scriptContent = `
+      (function() {
+        try {
+          const SELECTORS = [
+            '.css-1c6hcbi',
+            '.chakra-button__group.css-1ayoy1w'
+          ];
+          function hideTargets(root = document) {
+            if (root.querySelectorAll) {
+              SELECTORS.forEach(sel => {
+                root.querySelectorAll(sel).forEach(el => el.style.display = 'none');
+              });
             }
           }
+          function setup() {
+            if (!document.body) return setTimeout(setup, 100);
+            hideTargets();
+            new MutationObserver(muts => {
+              muts.forEach(m => {
+                if (m.type === 'childList') {
+                  m.addedNodes.forEach(n => {
+                    if (n.nodeType === Node.ELEMENT_NODE) hideTargets(n);
+                  });
+                } else if (m.type === 'attributes' && m.target.matches(SELECTORS.join(','))) {
+                  m.target.style.display = 'none';
+                }
+              });
+            }).observe(document.body, {
+              childList: true,
+              subtree: true,
+              attributes: true,
+              attributeFilter: ['class']
+            });
+          }
+          if (document.readyState !== 'loading') setup();
+          else document.addEventListener('DOMContentLoaded', setup);
+        } catch (e) {
+          console.error('Injected script error:', e);
         }
+      })();
+      `;
+      const injection = `<script>${scriptContent}<\/script>`;
+      // add before </head> so responsive CSS & your script both load early
+      if (html.match(/<\/head>/i)) {
         html = html.replace(/<\/head>/i, injection + '</head>');
       } else {
         html = injection + html;
       }
+      // serve via blob so same-origin + your script can run
       const blob = new Blob([html], { type: 'text/html' });
+      const url = URL.createObjectURL(blob);
       const iframe = document.getElementById('custom-iframe');
+      iframe.src = url;
+      iframe.onload = () => URL.revokeObjectURL(url);
     } catch (err) {
+      console.error('Embed error:', err);
+      document.body.innerHTML = `<p style="color:red;">Error loading embed: ${err.message}</p>`;
     }
   })();
   </script>