From b14b48dbb415ea1ba711a1d41ec6ca612fbb0711 Mon Sep 17 00:00:00 2001 From: Hatem Hosny Date: Fri, 2 Feb 2024 15:04:12 +0200 Subject: [PATCH 1/3] fix docs examples --- docs/docs/features/display-modes.md | 4 ++-- docs/docs/sdk/headless.md | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/docs/features/display-modes.md b/docs/docs/features/display-modes.md index db15f9d8c..0440d16e9 100644 --- a/docs/docs/features/display-modes.md +++ b/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: - + 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. diff --git a/docs/docs/sdk/headless.md b/docs/docs/sdk/headless.md index a78500151..139785faf 100644 --- a/docs/docs/sdk/headless.md +++ b/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`. -export const mdDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://unpkg.com/livecodes@0.2.0";\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\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} +export const mdDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://unpkg.com/livecodes@0.2.0";\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\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} @@ -64,7 +64,7 @@ If you do not want to run the result page in the headless playground and only wa ::: -export const mdxDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://unpkg.com/livecodes@0.2.0";\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

Hello, {name}!

\n

You clicked {count} times.

\n \n \n );\n};\n\n\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\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} +export const mdxDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://unpkg.com/livecodes@0.2.0";\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

Hello, {name}!

\n

You clicked {count} times.

\n \n \n );\n};\n\n\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\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }} @@ -73,6 +73,6 @@ export const mdxDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://unpkg.com/livecodes@0.2.0";\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\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/python/python.js">\x3C/script>\n\n\n` }} +export const pyDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://unpkg.com/livecodes@0.2.0";\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\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/python/python.js">\x3C/script>\n\n\n` }} From 9fbe862b0f0554d8bb3a1d5764055a3a7a728b64 Mon Sep 17 00:00:00 2001 From: Hatem Hosny Date: Fri, 2 Feb 2024 15:27:03 +0200 Subject: [PATCH 2/3] add twitter link --- docs/docs/gh-action.md | 1 + docs/docusaurus.config.js | 7 ++++++- docs/sidebars.js | 1 + src/livecodes/UI/share.ts | 4 ++-- src/livecodes/html/about.html | 5 +++++ src/livecodes/html/welcome.html | 5 +++++ 6 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 docs/docs/gh-action.md diff --git a/docs/docs/gh-action.md b/docs/docs/gh-action.md new file mode 100644 index 000000000..5658affa0 --- /dev/null +++ b/docs/docs/gh-action.md @@ -0,0 +1 @@ +# GitHub Action ⚡ diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index bd9e943a9..428d0f2a6 100644 --- a/docs/docusaurus.config.js +++ b/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', }, { diff --git a/docs/sidebars.js b/docs/sidebars.js index 6f83956e9..9cdaf25ac 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -108,6 +108,7 @@ const sidebars = { ], }, 'bookmarklet', + 'gh-action', 'contribution', 'credits', 'license', diff --git a/src/livecodes/UI/share.ts b/src/livecodes/UI/share.ts index 07a6803f9..4b8af4784 100644 --- a/src/livecodes/UI/share.ts +++ b/src/livecodes/UI/share.ts @@ -70,7 +70,7 @@ export const createShareContainer = async ( ${service.name} ${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)}`, diff --git a/src/livecodes/html/about.html b/src/livecodes/html/about.html index e2e819cf7..86148e4f6 100644 --- a/src/livecodes/html/about.html +++ b/src/livecodes/html/about.html @@ -68,6 +68,11 @@

Documentations

  • Contact
  • About us
    • +
  • + 𝕏 / Twitter +
  • GitHub
  • About LiveCodes
  • Sponsor LiveCodes
    • +
  • + 𝕏 / Twitter +
  • GitHub
  • Date: Fri, 2 Feb 2024 18:44:24 +0200 Subject: [PATCH 3/3] --- --- src/livecodes/main.ts | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/src/livecodes/main.ts b/src/livecodes/main.ts index ed4512f7a..c2a376e47 100644 --- a/src/livecodes/main.ts +++ b/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