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

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 = ['preview', 'result'];

src/lambda/oembed/oembed.js

@@ -52,7 +52,7 @@ function handler(event, context, callback) {
 
   // map /gist urls to /embed
   const url = pathname.startsWith('/gist/')
-    ? params.url.replace('/gist/', '/embed/')
+    ? `${params.url.replace('/gist/', '/embed/')}?panes=preview,result`
     : params.url;
 
   callback(null, {