From f498c4352e887a599dea1862070b3298d5d8f988 Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Mon, 29 Jun 2026 10:01:43 +0200 Subject: [PATCH 1/2] Add styles even if running inside a remix preview, so the Open Sandbox button for CodeSandbox is correctly repositioned --- examples/js/remix-dropdown.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/js/remix-dropdown.js b/examples/js/remix-dropdown.js index 34e583c0884..a342694b177 100644 --- a/examples/js/remix-dropdown.js +++ b/examples/js/remix-dropdown.js @@ -63,6 +63,8 @@ } function init () { + addStyles(); + // Don't show the button when the example is already running inside a remix // service preview (CodeSandbox *.csb.app, Krabbel *.krabbel.fun). if (/\.(csb\.app|krabbel\.fun)$/.test(window.location.hostname)) { return; } @@ -78,8 +80,6 @@ var codesandboxUrl = 'https://codesandbox.io/p/sandbox/github/aframevr/aframe/' + treePath; var krabbelUrl = 'https://krabbel.dev/github/aframevr/aframe/' + treePath; - addStyles(); - var menu = document.createElement('div'); menu.classList.add('a-remix-menu'); menu.style.display = 'none'; From 3fd0321661eff60d373cd9c2c8b241d98dcbee3f Mon Sep 17 00:00:00 2001 From: Vincent Fretin Date: Mon, 29 Jun 2026 14:12:51 +0200 Subject: [PATCH 2/2] Use preview param for Krabbel to specify which file to open in editor and preview --- examples/js/remix-dropdown.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/examples/js/remix-dropdown.js b/examples/js/remix-dropdown.js index a342694b177..48558de06f8 100644 --- a/examples/js/remix-dropdown.js +++ b/examples/js/remix-dropdown.js @@ -72,13 +72,17 @@ var loc = getExampleLocation(); if (!loc) { return; } - // Point at the directory, adding a file parameter for non-index.html pages - // so the specific example file is opened. The leading slash is URL-encoded - // (CodeSandbox expects %2F). - var fileParam = (loc.file && loc.file !== 'index.html') ? '?file=' + encodeURIComponent('/' + loc.file) : ''; - var treePath = 'tree/gh-pages/examples/' + loc.dir + fileParam; - var codesandboxUrl = 'https://codesandbox.io/p/sandbox/github/aframevr/aframe/' + treePath; - var krabbelUrl = 'https://krabbel.dev/github/aframevr/aframe/' + treePath; + // Point at the directory, adding a parameter for non-index.html pages so the + // specific example file is opened. CodeSandbox uses a file parameter (with a + // leading slash, URL-encoded as %2F); Krabbel supports file and preview parameters + // (leading slash optional, if preview parameter specified and file parameter not + // specified, it will open the same file in both editor and preview). + var treePath = 'tree/gh-pages/examples/' + loc.dir; + var isFile = loc.file && loc.file !== 'index.html'; + var fileParam = isFile ? '?file=' + encodeURIComponent('/' + loc.file) : ''; + var previewParam = isFile ? '?preview=' + encodeURIComponent(loc.file) : ''; + var codesandboxUrl = 'https://codesandbox.io/p/sandbox/github/aframevr/aframe/' + treePath + fileParam; + var krabbelUrl = 'https://krabbel.dev/github/aframevr/aframe/' + treePath + previewParam; var menu = document.createElement('div'); menu.classList.add('a-remix-menu');