diff --git a/test/__snapshots__/tunes.test.mjs.snap b/test/__snapshots__/tunes.test.mjs.snap index 5b3b5fb5..b5adfeb0 100644 --- a/test/__snapshots__/tunes.test.mjs.snap +++ b/test/__snapshots__/tunes.test.mjs.snap @@ -8127,10 +8127,10 @@ exports[`renders tunes > tune: loungeSponge 1`] = ` exports[`renders tunes > tune: meltingsubmarine 1`] = ` [ - "[ (0/1 → 1/1) ⇝ 3/2 | s:bd speed:0.7519542165100574 ]", - "[ (3/4 → 1/1) ⇝ 3/2 | s:sd speed:0.7931522866332671 ]", - "[ 3/8 → 3/4 | s:hh speed:0.7285963821098448 ]", - "[ (3/4 → 1/1) ⇝ 9/8 | s:hh speed:0.77531205091027 ]", + "[ (0/1 → 1/1) ⇝ 3/2 | s:bd:5 speed:0.7519542165100574 ]", + "[ (3/4 → 1/1) ⇝ 3/2 | s:sd:1 speed:0.7931522866332671 ]", + "[ 3/8 → 3/4 | s:hh27 speed:0.7285963821098448 ]", + "[ (3/4 → 1/1) ⇝ 9/8 | s:hh27 speed:0.77531205091027 ]", "[ (0/1 → 1/1) ⇝ 3/2 | n:33.129885541275144 decay:0.15 sustain:0 s:sawtooth gain:0.4 cutoff:3669.6267869262615 ]", "[ (0/1 → 1/1) ⇝ 3/2 | n:33.17988554127514 decay:0.15 sustain:0 s:sawtooth gain:0.4 cutoff:3669.6267869262615 ]", "[ (0/1 → 1/1) ⇝ 3/2 | n:55.129885541275144 s:sawtooth gain:0.16 cutoff:500 attack:1 ]", 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 :-/'}
)} -