fix: make default oembed panes equal to embed modal (#292)

* fix: Bring embed panes in line with the embed in the GUI

* chore: change default panes to something more useful

* chore: change default panes to something more useful

* revert: appending `?...` can corrupt the url

* feat: provide default panes to oembed frame

Co-authored-by: Stephan Meijer <[email protected]>

Author: MichaelDeBoey

src/components/Embed.js

@@ -4,6 +4,8 @@ import CopyButton from './CopyButton';
 import Embedded from './Embedded';
 import { SyncIcon, XIcon } from '@primer/octicons-react';
 
+import { defaultPanes } from '../constants';
+
 function TabButton({ children, active, onClick, disabled }) {
   return (
     <button
@@ -40,7 +42,7 @@ function Embed({ dispatch, dirty, gistId, gistVersion }) {
     dispatch({ type: 'SAVE' });
   }, [dirty, gistId, dispatch]);
 
-  const [panes, setPanes] = useState(['preview', 'result']);
+  const [panes, setPanes] = useState(defaultPanes);
 
   const embedUrl =
     [location.origin, 'embed', gistId, gistVersion].filter(Boolean).join('/') +

src/components/Embedded.js

@@ -9,6 +9,8 @@ import useParentMessaging from '../hooks/useParentMessaging';
 import usePlayground from '../hooks/usePlayground';
 import Loader from './Loader';
 
+import { defaultPanes } from '../constants';
+
 const SUPPORTED_PANES = {
   markup: true,
   preview: true,
@@ -46,7 +48,7 @@ function Embedded(props) {
         .split(',')
         .map((x) => x.trim())
         .filter((x) => SUPPORTED_PANES[x])
-    : ['query', 'preview'];
+    : defaultPanes;
 
   // TODO: we should add tabs to handle > 2 panes
   const areaCount = panes.length;

src/constants.js

@@ -113,3 +113,5 @@ export const links = {
     url: 'https://testing-library.com/docs/guide-which-query',
   },
 };
+
+export const defaultPanes = ['query', 'preview'];

src/lambda/oembed/oembed.js

@@ -16,6 +16,7 @@ function getHostname(event, context) {
   return JSON.parse(Buffer.from(netlify, 'base64').toString('utf-8')).site_url;
 }
 
+const PROVIDER = 'testing-playground.com';
 const allowedPathsRegexp = new RegExp(/^\/(gist|embed)\/.*/);
 
 function handler(event, context, callback) {
@@ -38,22 +39,28 @@ function handler(event, context, callback) {
     );
   }
 
-  const { hostname, pathname } = new URL(params.url);
+  const url = new URL(params.url);
 
   // verify if the url is supported, basically we only allow localhost if we're
   // running at localhost, and testing-playground.com as host. And either no
   // path or /gist and /embed paths.
   if (
-    (!host.includes(hostname) && hostname !== 'testing-playground.com') ||
-    (pathname && !allowedPathsRegexp.test(pathname))
+    (!host.includes(url.hostname) && url.hostname !== PROVIDER) ||
+    (url.pathname !== '/' && !allowedPathsRegexp.test(url.pathname))
   ) {
     return callback(null, incorrectParams('unsupported url provided :/'));
   }
 
-  // map /gist urls to /embed
-  const url = pathname.startsWith('/gist/')
-    ? params.url.replace('/gist/', '/embed/')
-    : params.url;
+  // map / and /gist to /embed
+  url.pathname =
+    url.pathname === '/'
+      ? '/embed'
+      : url.pathname.replace(/^\/gist\//, '/embed/');
+
+  // set default panes if no panes are provided, KEEP IN SYNC WITH /constants#defaultPanes !
+  if (!url.searchParams.has('panes')) {
+    url.searchParams.set('panes', 'query,preview');
+  }
 
   callback(null, {
     statusCode: 200,
@@ -63,7 +70,7 @@ function handler(event, context, callback) {
         type: 'rich',
         success: true,
 
-        provider_name: 'testing-playground.com',
+        provider_name: PROVIDER,
         provider_url: host,
 
         html: `<iframe src="${url}" height="${maxheight}" width="${maxwidth}" scrolling="no" frameBorder="0" allowTransparency="true" title="Testing Playground" style="overflow: hidden; display: block; width: 100%"></iframe>`,