From 4f2485b7117204eb9a1ad3a451ebd668ddf85668 Mon Sep 17 00:00:00 2001 From: Jack Zhao Date: Mon, 30 Oct 2023 05:25:49 +0000 Subject: [PATCH] add repl example --- docs/package.json | 4 +- docs/public/xterm.css | 209 ++++++++++++++++++ docs/src/components/PyTerminal.astro | 45 ++++ docs/src/content/config.ts | 3 +- .../examples/MainThread/example1_stdout.mdx | 2 +- .../examples/MainThread/example2_display.mdx | 2 +- .../examples/MainThread/example3_seaborn.mdx | 2 +- .../examples/MainThread/example4_document.mdx | 2 +- .../MainThreadRestricted/example1_stdout.mdx | 2 +- .../MainThreadRestricted/example2_display.mdx | 2 +- .../MainThreadRestricted/example3_seaborn.mdx | 2 +- .../example4_document.mdx | 2 +- .../docs/examples/Worker/example1_stdout.mdx | 2 +- .../docs/examples/Worker/example2_display.mdx | 2 +- .../docs/examples/Worker/example3_seaborn.mdx | 2 +- .../examples/Worker/example4_document.mdx | 2 +- .../WorkerRestricted/example1_stdout.mdx | 2 +- .../WorkerRestricted/example2_display.mdx | 2 +- .../WorkerRestricted/example3_seaborn.mdx | 2 +- .../WorkerRestricted/example4_document.mdx | 2 +- docs/src/content/docs/guides/examples.mdx | 6 + docs/src/content/docs/guides/installation.md | 2 +- docs/tsconfig.json | 9 +- docs/yarn.lock | 14 +- 24 files changed, 302 insertions(+), 22 deletions(-) create mode 100644 docs/public/xterm.css create mode 100644 docs/src/components/PyTerminal.astro diff --git a/docs/package.json b/docs/package.json index 920b68e..a005488 100644 --- a/docs/package.json +++ b/docs/package.json @@ -18,7 +18,9 @@ "@codemirror/lang-python": "^6.1.3", "astro": "^3.0.6", "codemirror": "^6.0.1", - "pysandbox": "link:.." + "pysandbox": "link:..", + "xterm": "^5.3.0", + "xterm-readline": "^1.1.1" }, "devDependencies": { "prettier": "^3.0.3", diff --git a/docs/public/xterm.css b/docs/public/xterm.css new file mode 100644 index 0000000..74acc26 --- /dev/null +++ b/docs/public/xterm.css @@ -0,0 +1,209 @@ +/** + * Copyright (c) 2014 The xterm.js authors. All rights reserved. + * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License) + * https://github.com/chjj/term.js + * @license MIT + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * Originally forked from (with the author's permission): + * Fabrice Bellard's javascript vt100 for jslinux: + * http://bellard.org/jslinux/ + * Copyright (c) 2011 Fabrice Bellard + * The original design remains. The terminal itself + * has been extended to include xterm CSI codes, among + * other features. + */ + +/** + * Default styles for xterm.js + */ + +.xterm { + cursor: text; + position: relative; + user-select: none; + -ms-user-select: none; + -webkit-user-select: none; +} + +.xterm.focus, +.xterm:focus { + outline: none; +} + +.xterm .xterm-helpers { + position: absolute; + top: 0; + /** + * The z-index of the helpers must be higher than the canvases in order for + * IMEs to appear on top. + */ + z-index: 5; +} + +.xterm .xterm-helper-textarea { + padding: 0; + border: 0; + margin: 0; + /* Move textarea out of the screen to the far left, so that the cursor is not visible */ + position: absolute; + opacity: 0; + left: -9999em; + top: 0; + width: 0; + height: 0; + z-index: -5; + /** Prevent wrapping so the IME appears against the textarea at the correct position */ + white-space: nowrap; + overflow: hidden; + resize: none; +} + +.xterm .composition-view { + /* TODO: Composition position got messed up somewhere */ + background: #000; + color: #FFF; + display: none; + position: absolute; + white-space: nowrap; + z-index: 1; +} + +.xterm .composition-view.active { + display: block; +} + +.xterm .xterm-viewport { + /* On OS X this is required in order for the scroll bar to appear fully opaque */ + background-color: #000; + overflow-y: scroll; + cursor: default; + position: absolute; + right: 0; + left: 0; + top: 0; + bottom: 0; +} + +.xterm .xterm-screen { + position: relative; +} + +.xterm .xterm-screen canvas { + position: absolute; + left: 0; + top: 0; +} + +.xterm .xterm-scroll-area { + visibility: hidden; +} + +.xterm-char-measure-element { + display: inline-block; + visibility: hidden; + position: absolute; + top: 0; + left: -9999em; + line-height: normal; +} + +.xterm.enable-mouse-events { + /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */ + cursor: default; +} + +.xterm.xterm-cursor-pointer, +.xterm .xterm-cursor-pointer { + cursor: pointer; +} + +.xterm.column-select.focus { + /* Column selection mode */ + cursor: crosshair; +} + +.xterm .xterm-accessibility, +.xterm .xterm-message { + position: absolute; + left: 0; + top: 0; + bottom: 0; + right: 0; + z-index: 10; + color: transparent; + pointer-events: none; +} + +.xterm .live-region { + position: absolute; + left: -9999px; + width: 1px; + height: 1px; + overflow: hidden; +} + +.xterm-dim { + /* Dim should not apply to background, so the opacity of the foreground color is applied + * explicitly in the generated class and reset to 1 here */ + opacity: 1 !important; +} + +.xterm-underline-1 { text-decoration: underline; } +.xterm-underline-2 { text-decoration: double underline; } +.xterm-underline-3 { text-decoration: wavy underline; } +.xterm-underline-4 { text-decoration: dotted underline; } +.xterm-underline-5 { text-decoration: dashed underline; } + +.xterm-overline { + text-decoration: overline; +} + +.xterm-overline.xterm-underline-1 { text-decoration: overline underline; } +.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; } +.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; } +.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; } +.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; } + +.xterm-strikethrough { + text-decoration: line-through; +} + +.xterm-screen .xterm-decoration-container .xterm-decoration { + z-index: 6; + position: absolute; +} + +.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer { + z-index: 7; +} + +.xterm-decoration-overview-ruler { + z-index: 8; + position: absolute; + top: 0; + right: 0; + pointer-events: none; +} + +.xterm-decoration-top { + z-index: 2; + position: relative; +} diff --git a/docs/src/components/PyTerminal.astro b/docs/src/components/PyTerminal.astro new file mode 100644 index 0000000..84281b1 --- /dev/null +++ b/docs/src/components/PyTerminal.astro @@ -0,0 +1,45 @@ + + + +
diff --git a/docs/src/content/config.ts b/docs/src/content/config.ts index f043fb4..a4eec59 100644 --- a/docs/src/content/config.ts +++ b/docs/src/content/config.ts @@ -1,7 +1,6 @@ import { defineCollection } from "astro:content"; -import { docsSchema, i18nSchema } from "@astrojs/starlight/schema"; +import { docsSchema } from "@astrojs/starlight/schema"; export const collections = { docs: defineCollection({ schema: docsSchema() }), - i18n: defineCollection({ type: "data", schema: i18nSchema() }), }; diff --git a/docs/src/content/docs/examples/MainThread/example1_stdout.mdx b/docs/src/content/docs/examples/MainThread/example1_stdout.mdx index 0cc48a3..96484cc 100644 --- a/docs/src/content/docs/examples/MainThread/example1_stdout.mdx +++ b/docs/src/content/docs/examples/MainThread/example1_stdout.mdx @@ -2,6 +2,6 @@ title: stdout --- -import PySandboxExample from "../../../../components/PySandboxExample.astro"; +import PySandboxExample from "@components/PySandboxExample.astro"; diff --git a/docs/src/content/docs/examples/MainThread/example2_display.mdx b/docs/src/content/docs/examples/MainThread/example2_display.mdx index 3b1f3af..b415bf8 100644 --- a/docs/src/content/docs/examples/MainThread/example2_display.mdx +++ b/docs/src/content/docs/examples/MainThread/example2_display.mdx @@ -2,7 +2,7 @@ title: display --- -import PySandboxExample from "../../../../components/PySandboxExample.astro"; +import PySandboxExample from "@components/PySandboxExample.astro"; diff --git a/docs/src/content/docs/examples/MainThreadRestricted/example2_display.mdx b/docs/src/content/docs/examples/MainThreadRestricted/example2_display.mdx index d2eea13..2834a00 100644 --- a/docs/src/content/docs/examples/MainThreadRestricted/example2_display.mdx +++ b/docs/src/content/docs/examples/MainThreadRestricted/example2_display.mdx @@ -2,7 +2,7 @@ title: display --- -import PySandboxExample from "../../../../components/PySandboxExample.astro"; +import PySandboxExample from "@components/PySandboxExample.astro"; diff --git a/docs/src/content/docs/examples/Worker/example2_display.mdx b/docs/src/content/docs/examples/Worker/example2_display.mdx index 729980f..d1815f3 100644 --- a/docs/src/content/docs/examples/Worker/example2_display.mdx +++ b/docs/src/content/docs/examples/Worker/example2_display.mdx @@ -2,7 +2,7 @@ title: display --- -import PySandboxExample from "../../../../components/PySandboxExample.astro"; +import PySandboxExample from "@components/PySandboxExample.astro"; + Each example below provides a live coding sandbox powered by PySandbox and CodeMirror. You can use the editor to modify the code and to show the new result. import { LinkCard, CardGrid } from "@astrojs/starlight/components"; diff --git a/docs/src/content/docs/guides/installation.md b/docs/src/content/docs/guides/installation.md index 3936af0..7e4d7a6 100644 --- a/docs/src/content/docs/guides/installation.md +++ b/docs/src/content/docs/guides/installation.md @@ -9,7 +9,7 @@ Usage in html: ```html