try

docs/docs/features/display-modes.md

@@ -2,7 +2,7 @@
 
 import LiveCodes from '../../src/components/LiveCodes.tsx';
 
-The configuration option `mode` can be used to select different display modes.
+The [configuration](../configuration/configuration-object.md) option [`mode`](../configuration/configuration-object.md#mode), also available as [query param](../configuration/query-params.md), can be used to select different display modes.
 The following display modes are supported:
 
 ## `full`
@@ -51,7 +51,7 @@ Example: https://livecodes.io/?mode=result&template=react
 
 Demo:
 
-<LiveCodes config={{mode:'result'}} template="react"></LiveCodes>
+<LiveCodes params={{mode: 'result', template: 'react'}}></LiveCodes>
 
 The tools pane (e.g. console/compiled code viewer) is hidden by default in `result` mode. It can be shown if set to `open` or `full`. Refer to [Tools pane](./tools-pane.md) documentation for details.
 

docs/docs/gh-action.md

@@ -0,0 +1 @@
+# GitHub Action ⚡

docs/docs/sdk/headless.md

@@ -49,7 +49,7 @@ You may want to view the following playgrounds in full screen (using the full sc
 In this demo, code changes are watched using the SDK method [`watch('code', callback)`](./js-ts.md#watch). The callback function accepts an argument which is an object with the properties `code` and `config` (see [`getCode`](./js-ts.md#getcode) and [`getConfig`](./js-ts.md#getconfig)). The compiled code is obtained as `code.markup.compiled`.
 
 <!-- prettier-ignore -->
-export const mdDemo = { markup: { language: 'html', content: `<textarea id="editor" style="display: none;"></textarea>\n<div id="output">Loading...</div>\n\n\x3Cscript type="module">\n  import { createPlayground } from "https://unpkg.com/[email protected]";\n  import debounce from "https://jspm.dev/debounce";\n\n  const initialCode = "# Hello, LiveCodes!\\n\\n";\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n    lineNumbers: true,\n    mode: "markdown",\n  });\n  editor.setSize("100%", 200);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: "headless",\n  };\n\n  const livecodes = await createPlayground(options);\n\n  const compile = async () => {\n    await livecodes.setConfig({\n      autoupdate: false,\n      markup: {\n        language: "markdown",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on("change", debounce(compile, 1000));\n  livecodes.watch("code", ({ code, config }) => {\n    createSandbox(document.querySelector("#output"), code.markup.compiled);\n  });\n\n  await compile();\n\n  // create a sandbox for safe execution of compiled code\n  function createSandbox (container, html) {\n    const iframe = document.createElement("iframe");\n    iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n    iframe.sandbox =\n      "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n    iframe.onload = () => {\n      iframe.contentWindow.postMessage({ html }, "*");\n    };\n    container.innerHTML = "";\n    container.appendChild(iframe);\n    return iframe;\n  };\n\x3C/script>\n\n<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/codemirror.css" />\n\x3Cscript src="https://unpkg.com/[email protected]/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/[email protected]/mode/markdown/markdown.js">\x3C/script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n` }}
+export const mdDemo = { markup: { language: 'html', content: `<textarea id="editor" style="display: none;"></textarea>\n<div id="output">Loading...</div>\n\n\x3Cscript type="module">\n  import { createPlayground } from "https://unpkg.com/[email protected]";\n  import debounce from "https://jspm.dev/debounce";\n\n  const initialCode = "# Hello, LiveCodes!\\n\\n";\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n    lineNumbers: true,\n    mode: "markdown",\n  });\n  editor.setSize("100%", 200);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: "headless",\n  };\n\n  const livecodes = await createPlayground(options);\n  await livecodes.load();\n\n  const compile = async () => {\n    await livecodes.setConfig({\n      autoupdate: false,\n      markup: {\n        language: "markdown",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on("change", debounce(compile, 1000));\n  livecodes.watch("code", ({ code, config }) => {\n    createSandbox(document.querySelector("#output"), code.markup.compiled);\n  });\n\n  await compile();\n\n  // create a sandbox for safe execution of compiled code\n  function createSandbox (container, html) {\n    const iframe = document.createElement("iframe");\n    iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n    iframe.sandbox =\n      "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n    iframe.onload = () => {\n      iframe.contentWindow.postMessage({ html }, "*");\n    };\n    container.innerHTML = "";\n    container.appendChild(iframe);\n    return iframe;\n  };\n\x3C/script>\n\n<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/codemirror.css" />\n\x3Cscript src="https://unpkg.com/[email protected]/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/[email protected]/mode/markdown/markdown.js">\x3C/script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n` }}
 
 <LiveCodes config={mdDemo} height='80vh'></LiveCodes>
 
@@ -64,7 +64,7 @@ If you do not want to run the result page in the headless playground and only wa
 :::
 
 <!-- prettier-ignore -->
-export const mdxDemo = { markup: { language: 'html', content: `<textarea id="editor" style="display: none;"></textarea>\n<div id="output">Loading...</div>\n\n\x3Cscript type="module">\n  import { createPlayground } from "https://unpkg.com/[email protected]";\n  import debounce from "https://jspm.dev/debounce";\n\n  const initialCode = \`import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n  const [count, setCount] = useState(0);\n  return (\n    <>\n      <h1>Hello, {name}!</h1>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </>\n  );\n};\n\n<Hello name="LiveCodes"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n\`;\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n    lineNumbers: true,\n    mode: "markdown",\n  });\n  editor.setSize("100%", 200);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: "headless",\n    config: { autoupdate: false },\n  };\n\n  const livecodes = await createPlayground(options);\n\n  const compile = async () => {\n    await livecodes.setConfig({\n      autoupdate: false,\n      markup: {\n        language: "mdx",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on("change", debounce(compile, 1000));\n  livecodes.watch("code", ({ code, config }) => {\n    createSandbox(document.querySelector("#output"), code.result);\n  });\n\n  await compile();\n\n  // create a sandbox for safe execution of compiled code\n  function createSandbox (container, html) {\n    const iframe = document.createElement("iframe");\n    iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n    iframe.sandbox =\n      "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n    iframe.onload = () => {\n      iframe.contentWindow.postMessage({ html }, "*");\n    };\n    container.innerHTML = "";\n    container.appendChild(iframe);\n    return iframe;\n  };\n\x3C/script>\n\n<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/codemirror.css" />\n\x3Cscript src="https://unpkg.com/[email protected]/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/[email protected]/mode/markdown/markdown.js">\x3C/script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n` }}
+export const mdxDemo = { markup: { language: 'html', content: `<textarea id="editor" style="display: none;"></textarea>\n<div id="output">Loading...</div>\n\n\x3Cscript type="module">\n  import { createPlayground } from "https://unpkg.com/[email protected]";\n  import debounce from "https://jspm.dev/debounce";\n\n  const initialCode = \`import { useState, useEffect } from 'react';\n\nexport const Hello = ({name}) => {\n  const [count, setCount] = useState(0);\n  return (\n    <>\n      <h1>Hello, {name}!</h1>\n      <p>You clicked {count} times.</p>\n      <button onClick={() => setCount(count + 1)}>Click me</button>\n    </>\n  );\n};\n\n<Hello name="LiveCodes"></Hello>\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n\`;\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n    lineNumbers: true,\n    mode: "markdown",\n  });\n  editor.setSize("100%", 200);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: "headless",\n    config: { autoupdate: false },\n  };\n\n  const livecodes = await createPlayground(options);\n  await livecodes.load();\n\n  const compile = async () => {\n    await livecodes.setConfig({\n      autoupdate: false,\n      markup: {\n        language: "mdx",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on("change", debounce(compile, 1000));\n  livecodes.watch("code", ({ code, config }) => {\n    createSandbox(document.querySelector("#output"), code.result);\n  });\n\n  await compile();\n\n  // create a sandbox for safe execution of compiled code\n  function createSandbox (container, html) {\n    const iframe = document.createElement("iframe");\n    iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n    iframe.sandbox =\n      "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n    iframe.onload = () => {\n      iframe.contentWindow.postMessage({ html }, "*");\n    };\n    container.innerHTML = "";\n    container.appendChild(iframe);\n    return iframe;\n  };\n\x3C/script>\n\n<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/codemirror.css" />\n\x3Cscript src="https://unpkg.com/[email protected]/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/[email protected]/mode/markdown/markdown.js">\x3C/script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n` }}
 
 <LiveCodes config={mdxDemo} height='80vh'></LiveCodes>
 
@@ -73,6 +73,6 @@ export const mdxDemo = { markup: { language: 'html', content: `<textarea id="edi
 In this demo, console output is obtained using the SDK method [`watch('code', callback)`](./js-ts.md#watch). The callback function accepts an argument which is an object with the properties `method` and `args` indicating the console method and the arguments that were passed (as an array).
 
 <!-- prettier-ignore -->
-export const pyDemo = { markup: { language: 'html', content: `<textarea id="editor" style="display: none"></textarea>\n<div id="output">Loading...</div>\n\n\x3Cscript type="module">\n  import { createPlayground } from "https://unpkg.com/[email protected]";\n  import debounce from "https://jspm.dev/debounce";\n\n  const initialCode = \`def say_hello(name):\n  return f"Hello, {name}!"\n\nprint(say_hello("LiveCodes"))\n\`;\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n    lineNumbers: true,\n    mode: "python",\n  });\n  editor.setSize("100%", 250);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: "headless",\n  };\n\n  const livecodes = await createPlayground(options);\n\n  const run = async () => {\n    await livecodes.setConfig({\n      autoupdate: true,\n      script: {\n        language: "python",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on("change", debounce(run, 1000));\n  livecodes.watch("console", ({ method, args }) => {\n    const output = document.querySelector("#output");\n    output.innerHTML = args.join("\\n");\n    if (method === "error") {\n      output.style.color = "red";\n    } else {\n      output.style.color = "unset";\n    }\n  });\n\n  await run();\n\x3C/script>\n\n<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/codemirror.css" />\n\x3Cscript src="https://unpkg.com/[email protected]/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/[email protected]/mode/python/python.js">\x3C/script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n    margin: 1em;\n    white-space: pre;\n    font-family: monospace;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n` }}
+export const pyDemo = { markup: { language: 'html', content: `<textarea id="editor" style="display: none"></textarea>\n<div id="output">Loading...</div>\n\n\x3Cscript type="module">\n  import { createPlayground } from "https://unpkg.com/[email protected]";\n  import debounce from "https://jspm.dev/debounce";\n\n  const initialCode = \`def say_hello(name):\n  return f"Hello, {name}!"\n\nprint(say_hello("LiveCodes"))\n\`;\n\n  // the code editor\n  const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n    lineNumbers: true,\n    mode: "python",\n  });\n  editor.setSize("100%", 250);\n  editor.setValue(initialCode);\n\n  // the playground\n  const options = {\n    view: "headless",\n  };\n\n  const livecodes = await createPlayground(options);\n  await livecodes.load();\n\n  const run = async () => {\n    await livecodes.setConfig({\n      autoupdate: true,\n      script: {\n        language: "python",\n        content: editor.doc.getValue(),\n      },\n    });\n  };\n\n  // watch for changes\n  editor.on("change", debounce(run, 1000));\n  livecodes.watch("console", ({ method, args }) => {\n    const output = document.querySelector("#output");\n    output.innerHTML = args.join("\\n");\n    if (method === "error") {\n      output.style.color = "red";\n    } else {\n      output.style.color = "unset";\n    }\n  });\n\n  await run();\n\x3C/script>\n\n<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/codemirror.css" />\n\x3Cscript src="https://unpkg.com/[email protected]/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/[email protected]/mode/python/python.js">\x3C/script>\n\n<style>\n  * {\n    margin: 0;\n    padding: 0;\n  }\n  body {\n    display: flex;\n    flex-direction: column;\n    height: 100vh;\n    overflow: hidden;\n  }\n  #output {\n    flex: 1;\n    margin: 1em;\n    white-space: pre;\n    font-family: monospace;\n  }\n  #output iframe {\n    width: 100%;\n    height: 100%;\n    border: none;\n  }\n</style>\n` }}
 
 <LiveCodes config={pyDemo} height='80vh'></LiveCodes>

docs/docusaurus.config.js

@@ -90,6 +90,11 @@ const config = {
             label: 'App',
             position: 'right',
           },
+          {
+            href: 'https://twitter.com/livecodes_io',
+            label: '𝕏',
+            position: 'right',
+          },
           {
             href: 'https://github.com/live-codes/livecodes',
             label: 'GitHub',
@@ -192,7 +197,7 @@ const config = {
                 href: 'https://github.com/live-codes/livecodes',
               },
               {
-                label: 'Twitter',
+                label: '𝕏 / Twitter',
                 href: 'https://twitter.com/livecodes_io',
               },
               {

docs/sidebars.js

@@ -108,6 +108,7 @@ const sidebars = {
           ],
         },
         'bookmarklet',
+        'gh-action',
         'contribution',
         'credits',
         'license',

src/livecodes/UI/share.ts

@@ -70,7 +70,7 @@ export const createShareContainer = async (
           <img
             src="${getAbsoluteUrl(baseUrl) + 'assets/icons/' + service.icon}"
             alt="${service.name}"
-            ${service.name === 'X / Twitter' ? 'class="twitter"' : ''}
+            ${service.name === '𝕏 / Twitter' ? 'class="twitter"' : ''}
           />
         </span>
         ${service.name}
@@ -103,7 +103,7 @@ export const createShareContainer = async (
       createShareUrl: ({ url }) => `https://www.facebook.com/sharer.php?u=${encode(url)}`,
     },
     {
-      name: 'X / Twitter',
+      name: '𝕏 / Twitter',
       icon: 'x.svg',
       createShareUrl: ({ url, title }) =>
         `https://twitter.com/intent/tweet?url=${encode(url)}&text=${encode(title)}`,

src/livecodes/html/about.html

@@ -68,6 +68,11 @@ <h3>Documentations</h3>
             </li>
             <li><a href="{{DOCS_BASE_URL}}contact" target="_blank" rel="noopener">Contact</a></li>
             <li><a href="{{DOCS_BASE_URL}}about" target="_blank" rel="noopener">About us</a></li>
+            <li>
+              <a href="https://twitter.com/livecodes_io" target="_blank" rel="noopener"
+                >𝕏 / Twitter</a
+              >
+            </li>
             <li><a href="{{REPO_URL}}" target="_blank" rel="noopener">GitHub</a></li>
             <li>
               <a href="{{DOCS_BASE_URL}}overview" target="_blank" rel="noopener" class="more"

src/livecodes/html/welcome.html

@@ -104,6 +104,11 @@ <h3>About LiveCodes</h3>
           <li>
             <a href="{{DOCS_BASE_URL}}sponsor" target="_blank" rel="noopener">Sponsor LiveCodes</a>
           </li>
+          <li>
+            <a href="https://twitter.com/livecodes_io" target="_blank" rel="noopener"
+              >𝕏 / Twitter</a
+            >
+          </li>
           <li><a href="{{REPO_URL}}" target="_blank" rel="noopener">GitHub</a></li>
           <li>
             <a href="{{DOCS_BASE_URL}}overview" target="_blank" rel="noopener" class="more"

src/livecodes/main.ts

@@ -4,7 +4,7 @@
 import appHTML from './html/app.html?raw';
 import { customEvents } from './events/custom-events';
 import type { API, CDN, Config, CustomEvents, EmbedOptions } from './models';
-import { isInIframe } from './utils/utils';
+// import { isInIframe } from './utils/utils';
 import { esModuleShimsPath } from './vendors';
 import { modulesService } from './services/modules';
 
@@ -14,10 +14,7 @@ export const params = new URLSearchParams(location.search);
 export const isHeadless = params.get('view') === 'headless';
 export const isLite = params.get('lite') != null && params.get('lite') !== 'false';
 export const isEmbed =
-  isHeadless ||
-  isLite ||
-  (params.get('embed') != null && params.get('embed') !== 'false') ||
-  isInIframe();
+  isHeadless || isLite || (params.get('embed') != null && params.get('embed') !== 'false');
 export const loadingParam = params.get('loading');
 export const clickToLoad = isEmbed && loadingParam !== 'eager';
 export const loading: EmbedOptions['loading'] = !isEmbed