elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-26 13:08:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

wire up settings and theming

Browse Source
This commit is contained in:
Felix Roos 2023-12-25 20:52:00 +01:00
parent 7dac1e275d
commit e19f799046
5 changed files with 80 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/codemirror/codemirror.mjs
View File

@ -186,6 +186,10 @@ export class StrudelMirror {
this.root.style.backgroundColor = 'var(--background)'; this.root.style.backgroundColor = 'var(--background)';
cmEditor.style.backgroundColor = 'transparent'; cmEditor.style.backgroundColor = 'transparent';
} }
const settings = codemirrorSettings.get();
this.setFontSize(settings.fontSize);
this.setFontFamily(settings.fontFamily);
// stop this repl when another repl is started // stop this repl when another repl is started
this.onStartRepl = (e) => { this.onStartRepl = (e) => {
if (e.detail !== this.id) { if (e.detail !== this.id) {

4
packages/core/repl.mjs
View File

@ -62,10 +62,6 @@ export function repl({
}; };
setTime(() => scheduler.now()); // TODO: refactor? setTime(() => scheduler.now()); // TODO: refactor?
const evaluate = async (code, autostart = true, shouldHush = true) => { const evaluate = async (code, autostart = true, shouldHush = true) => {
if (code === state.activeCode && state.started) {
logger('[eval] skip: not dirty')
return;
}
if (!code) { if (!code) {
throw new Error('no code to evaluate'); throw new Error('no code to evaluate');
} }

58
website/src/components/HeadCommonNext.astro Normal file
View File

@ -0,0 +1,58 @@
---
import { pwaInfo } from 'virtual:pwa-info';
import '../styles/index.css';
const { BASE_URL } = import.meta.env;
const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
---
<!-- Global Metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href={`${baseNoTrailing}/favicon.ico`} />
<meta
name="description"
content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript."
/>
<link rel="icon" href={`${baseNoTrailing}/favicon.ico`} />
<link rel="apple-touch-icon" href={`${baseNoTrailing}/icons/apple-icon-180.png`} sizes="180x180" />
<meta name="theme-color" content="#222222" />
<base href={BASE_URL} />
<!-- Scrollable a11y code helper -->
<script src{`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>
<script src="/src/pwa.ts"></script>
<!-- this does not work for some reason: -->
<!-- <style is:global define:vars={strudelTheme}></style> -->
<!-- the following variables are just a fallback to make sure everything is readable without JS -->
<style is:global>
:root {
--background: #222;
--lineBackground: #22222299;
--foreground: #fff;
--caret: #ffcc00;
--selection: rgba(128, 203, 196, 0.5);
--selectionMatch: #036dd626;
--lineHighlight: #00000050;
--gutterBackground: transparent;
--gutterForeground: #8a919966;
}
</style>
{pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} />}
<script>
// https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8
const appHeight = () => {
const doc = document.documentElement;
doc.style.setProperty('--app-height', `${window.innerHeight - 1}px`);
};
if (typeof window !== 'undefined') {
window.addEventListener('resize', appHeight);
appHeight();
}
</script>

6
website/src/pages/vanilla/2.astro
View File

@ -1,13 +1,11 @@
--- ---
import HeadCommon from '../../components/HeadCommon.astro'; import HeadCommonNext from '../../components/HeadCommonNext.astro';
// import { Repl } from '../repl/Repl.jsx';
import { Repl2 } from '../../repl/Repl2'; import { Repl2 } from '../../repl/Repl2';
--- ---
<html lang="en" class="dark"> <html lang="en" class="dark">
<head> <head>
<HeadCommon /> <HeadCommonNext />
<title>Strudel REPL</title> <title>Strudel REPL</title>
</head> </head>
<body class="h-app-height bg-background"> <body class="h-app-height bg-background">

18
website/src/repl/Repl2.jsx
View File

@ -8,7 +8,7 @@ import { logger, getDrawContext, silence, evalScope, controls } from '@strudel.c
import { cx } from '@strudel.cycles/react'; import { cx } from '@strudel.cycles/react';
import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel.cycles/webaudio'; import { getAudioContext, webaudioOutput, initAudioOnFirstClick } from '@strudel.cycles/webaudio';
import { transpiler } from '@strudel.cycles/transpiler'; import { transpiler } from '@strudel.cycles/transpiler';
import { StrudelMirror } from '@strudel/codemirror'; import { StrudelMirror, defaultSettings } from '@strudel/codemirror';
import { createClient } from '@supabase/supabase-js'; import { createClient } from '@supabase/supabase-js';
/* import { writeText } from '@tauri-apps/api/clipboard'; /* import { writeText } from '@tauri-apps/api/clipboard';
import { nanoid } from 'nanoid'; */ import { nanoid } from 'nanoid'; */
@ -33,6 +33,7 @@ import { useCallback, useRef, useEffect } from 'react';
// import { prebake } from '@strudel/repl'; // import { prebake } from '@strudel/repl';
import { prebake /* , resetSounds */ } from './prebake.mjs'; import { prebake /* , resetSounds */ } from './prebake.mjs';
import * as tunes from './tunes.mjs'; import * as tunes from './tunes.mjs';
import { useStore } from '@nanostores/react';
export const ReplContext = createContext(null); export const ReplContext = createContext(null);
@ -139,10 +140,23 @@ export function Repl2({ embedded = false }) {
}); });
} }
return () => { return () => {
editor.clear(); editorRef.current?.clear();
}; };
}, []); }, []);
// this can be simplified once SettingsTab has been refactored to change codemirrorSettings directly!
// this will be the case when the main repl is being replaced
const _settings = useStore(settingsMap, { keys: Object.keys(defaultSettings) });
useEffect(() => {
let editorSettings = {};
Object.keys(defaultSettings).forEach((key) => {
if (_settings.hasOwnProperty(key)) {
editorSettings[key] = _settings[key];
}
});
editorRef.current?.updateSettings(editorSettings);
}, [_settings]);
// //
// UI Actions // UI Actions
// //