From cf21c4085b61aab043c8770189ca454cdb8c4c62 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Thu, 29 Dec 2022 21:01:28 +0100 Subject: [PATCH 1/3] simplify embedded mode --- website/src/pages/embed.astro | 14 +++++++++ website/src/repl/Header.jsx | 55 ++++++++++++++++++++++------------- website/src/repl/Repl.jsx | 16 ++++++++-- 3 files changed, 62 insertions(+), 23 deletions(-) create mode 100644 website/src/pages/embed.astro diff --git a/website/src/pages/embed.astro b/website/src/pages/embed.astro new file mode 100644 index 00000000..de8d2c2d --- /dev/null +++ b/website/src/pages/embed.astro @@ -0,0 +1,14 @@ +--- +import HeadCommon from '../components/HeadCommon.astro'; +import { Repl } from '../repl/Repl.jsx'; +--- + + + + + Strudel REPL + + + + + diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx index c9de3b75..1ea539fc 100644 --- a/website/src/repl/Header.jsx +++ b/website/src/repl/Header.jsx @@ -1,5 +1,5 @@ import AcademicCapIcon from '@heroicons/react/20/solid/AcademicCapIcon'; -import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon'; +import ArrowPathIcon from '@heroicons/react/20/solid/ArrowPathIcon'; import LinkIcon from '@heroicons/react/20/solid/LinkIcon'; import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; import SparklesIcon from '@heroicons/react/20/solid/SparklesIcon'; @@ -9,10 +9,9 @@ import React, { useContext } from 'react'; // import { ReplContext } from './Repl'; import './Repl.css'; -const isEmbedded = window.location !== window.parent.location; - export function Header({ context }) { const { + embedded, started, pending, isDirty, @@ -25,32 +24,37 @@ export function Header({ context }) { isZen, setIsZen, } = context; + const isEmbedded = embedded || window.location !== window.parent.location; // useContext(ReplContext) return ( diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index ff6be87b..53c744d8 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -22,6 +22,7 @@ import { Footer } from './Footer'; import { Header } from './Header'; import { prebake } from './prebake.mjs'; import * as tunes from './tunes.mjs'; +import PlayCircleIcon from '@heroicons/react/20/solid/PlayCircleIcon'; initAudioOnFirstClick(); @@ -101,7 +102,8 @@ const { code: randomTune, name } = getRandomTune(); export const ReplContext = createContext(null); -export function Repl() { +export function Repl({ embedded = false }) { + const isEmbedded = embedded || window.location !== window.parent.location; const [view, setView] = useState(); // codemirror view const [lastShared, setLastShared] = useState(); const [activeFooter, setActiveFooter] = useState(''); @@ -232,6 +234,7 @@ export function Repl() { } }; const context = { + embedded, started, pending, isDirty, @@ -269,7 +272,16 @@ export function Repl() { {error && (
{error.message || 'Unknown Error :-/'}
)} -