button fixes

Author: Viehzeug

docs/assets/invariant.css

@@ -27,12 +27,6 @@ body {
     position: relative;
 }
 
-.trace-iframe {
-    width: 100%;
-    border: none;
-    height: 500px;
-}
-
 h1 {
     font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

docs/assets/js/highlight.js

@@ -1,27 +1,28 @@
 BASE_URL = 'http://localhost/';
 
-function changeTraceElements(codeElements) {
+function changeElements(codeElements, endpoint) {
     // Add a button to each pre element
     codeElements.forEach(function(codeElement) {
 
         // replace the code element with an iframe
         const textContent = codeElement.textContent || codeElement.innerText;
         const encodedContent = btoa(textContent);
-        const iframe = document.createElement('iframe', { id: 'traceview-' + encodedContent });
-        iframe.src = `${BASE_URL}traceview?trace=${encodedContent}`;
+        // get a UUID   
+        const id = crypto.randomUUID().toString();
+        const iframe = document.createElement('iframe', { id: id });
+        iframe.src = `${BASE_URL}embed/${endpoint}=${encodedContent}&id=${id}`;
         codeElement.replaceWith(iframe);
 
         window.addEventListener('message', function(event) {
-            if (event.data.type === 'resize') {
-              console.log('resize', event.data);
+            //check which element the message is coming from
+            if (event.data.type === 'resize' && event.data.id === id) {
               iframe.style.height = event.data.height + 'px';
             }
           });
 
     });
 }
 
-
 document.addEventListener('DOMContentLoaded', function() {
     // check if BASE_URL is defined and reachable
     fetch(`${BASE_URL}`)
@@ -34,8 +35,8 @@ document.addEventListener('DOMContentLoaded', function() {
     .then(data => {
         // if we can reach it, add buttons to trace and guardrail elements
         // currently disabled as the traceview endpoint is not yet enabled on explorer
-        //changeTraceElements(document.querySelectorAll('div.language-trace'))
-        //changeGuardrailElements(document.querySelectorAll('div.language-guardrail'))
+        changeElements(document.querySelectorAll('div.language-trace'), 'traceview?trace')
+        changeElements(document.querySelectorAll('div.language-guardrail'), 'playground?policy')
     })
     .catch(error => {
         console.error('There was a problem with the fetch operation:', error);