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

font settings

Browse Source
This commit is contained in:
Jade (Rose) Rowland 2025-02-21 11:06:21 -05:00
parent 1ded398468
commit 4959bff060
10 changed files with 31 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/codemirror/codemirror.mjs
View File

@ -67,6 +67,7 @@ export function initEditor({ initialCode = '', onChange, onEvaluate, onStop, roo
const initialSettings = Object.keys(compartments).map((key) =>
compartments[key].of(extensions[key](parseBooleans(settings[key]))),
);
initTheme(settings.theme);
let state = EditorState.create({
doc: initialCode,

4
website/src/components/Udels/UdelsEditor.jsx
View File

@ -9,11 +9,11 @@ import UserFacingErrorMessage from '@src/repl/components/UserFacingErrorMessage'
// }
export default function UdelsEditor(Props) {
const { context } = Props;
const { context, ...editorProps } = Props;
const { containerRef, editorRef, error, init, pending, started, handleTogglePlay } = context;
return (
<div className={'h-full flex w-full flex-col relative'}>
<div className={'h-full flex w-full flex-col relative'} {...editorProps}>
<Loader active={pending} />
<BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />
<div className="grow flex relative overflow-hidden">

2
website/src/components/Udels/UdelsHeader.jsx
View File

@ -4,7 +4,7 @@ export default function UdelsHeader(Props) {
const { numWindows, setNumWindows } = Props;
return (
<header id="header" className="flex text-white z-[100] text-lg select-none bg-neutral-900">
<header id="header" className="flex text-white z-[100] text-lg select-none bg-neutral-800">
<div className="px-4 items-center gap-2 flex space-x-2 md:pt-0 select-none">
<h1 onClick={() => {}} className={'text-l cursor-pointer flex gap-4'}>
<div className={'mt-[1px] cursor-pointer'}>🌀</div>

4
website/src/repl/Repl.jsx
View File

@ -9,10 +9,12 @@ import UdelsEditor from '@components/Udels/UdelsEditor';
import ReplEditor from './components/ReplEditor';
import EmbeddedReplEditor from './components/EmbeddedReplEditor';
import { useReplContext } from './useReplContext';
import { useSettings } from '@src/settings.mjs';
export function Repl({ embedded = false }) {
const isEmbedded = embedded || isIframe();
const Editor = isUdels() ? UdelsEditor : isEmbedded ? EmbeddedReplEditor : ReplEditor;
const context = useReplContext();
return <Editor context={context} />;
const { fontFamily } = useSettings();
return <Editor context={context} style={{ fontFamily }} />;
}

4
website/src/repl/components/EmbeddedReplEditor.jsx
View File

@ -9,10 +9,10 @@ import { Header } from './Header';
// }
export default function EmbeddedReplEditor(Props) {
const { context } = Props;
const { context, ...editorProps } = Props;
const { pending, started, handleTogglePlay, containerRef, editorRef, error, init } = context;
return (
<div className="h-full flex flex-col relative">
<div className="h-full flex flex-col relative" {...editorProps}>
<Loader active={pending} />
<Header context={context} embedded={true} />
<BigPlayButton started={started} handleTogglePlay={handleTogglePlay} />

4
website/src/repl/components/ReplEditor.jsx
View File

@ -10,13 +10,13 @@ import { useSettings } from '@src/settings.mjs';
// }
export default function ReplEditor(Props) {
const { context } = Props;
const { context, ...editorProps } = Props;
const { containerRef, editorRef, error, init, pending } = context;
const settings = useSettings();
const { panelPosition, isZen } = settings;
return (
<div className="h-full flex flex-col relative">
<div className="h-full flex flex-col relative" {...editorProps}>
<Loader active={pending} />
<Header context={context} />
<div className="grow flex relative overflow-hidden">

3
website/src/repl/components/panel/Panel.jsx
View File

@ -149,9 +149,8 @@ function PanelTab({ label, isSelected, onClick }) {
);
}
function Tabs({ setTab, tab, className }) {
const {fontFamily, fontSize} = useSettings()
return (
<div className={cx('flex select-none max-w-full overflow-auto pb-2', className)} style={{fontFamily}}>
<div className={cx('flex select-none max-w-full overflow-auto pb-2', className)}>
{Object.keys(tabNames).map((key) => {
const val = tabNames[key];
return <PanelTab key={key} isSelected={tab === val} label={key} onClick={() => setTab(val)} />;

19
website/src/repl/components/panel/PatternsTab.jsx
View File

@ -89,7 +89,7 @@ export function PatternsTab({ context }) {
const viewingPatternStore = useViewingPatternData();
const viewingPatternData = parseJSON(viewingPatternStore);
const { userPatterns, patternFilter, fontFamily } = useSettings();
const { userPatterns, patternFilter } = useSettings();
const examplePatterns = useExamplePatterns();
const collections = examplePatterns.collections;
@ -102,7 +102,7 @@ export function PatternsTab({ context }) {
const autoResetPatternOnChange = !isUdels();
return (
<div className="px-4 w-full text-foreground space-y-2 flex flex-col overflow-hidden max-h-full h-full" style={{fontFamily}}>
<div className="px-4 w-full text-foreground space-y-2 flex flex-col overflow-hidden max-h-full h-full">
<ButtonGroup
value={patternFilter}
onChange={(value) => settingsMap.setKey('patternFilter', value)}
@ -173,14 +173,13 @@ export function PatternsTab({ context }) {
return (
<section key={collection} className="py-2">
<h2 className="text-xl mb-2">{collection}</h2>
<PatternButtons
onClick={(id) => updateCodeWindow({ ...patterns[id], collection }, autoResetPatternOnChange)}
started={context.started}
patterns={patterns}
activePattern={activePattern}
/>
<PatternButtons
onClick={(id) => updateCodeWindow({ ...patterns[id], collection }, autoResetPatternOnChange)}
started={context.started}
patterns={patterns}
activePattern={activePattern}
/>
</section>
);
})}

16
website/src/repl/components/panel/Reference.jsx
View File

@ -1,7 +1,7 @@
import { useMemo, useState } from 'react';
import jsdocJson from '../../../../../doc.json';
import { useSettings } from '@src/settings.mjs';
const availableFunctions = jsdocJson.docs
.filter(({ name, description }) => name && !name.startsWith('_') && !!description)
.sort((a, b) => /* a.meta.filename.localeCompare(b.meta.filename) + */ a.name.localeCompare(b.name));
@ -15,8 +15,6 @@ const getInnerText = (html) => {
export function Reference() {
const [search, setSearch] = useState('');
const {fontFamily} = useSettings()
const visibleFunctions = useMemo(() => {
return availableFunctions.filter((entry) => {
if (!search) {
@ -28,7 +26,7 @@ export function Reference() {
}, [search]);
return (
<div className="flex h-full w-full p-2 overflow-hidden" style={{fontFamily}}>
<div className="flex h-full w-full p-2 overflow-hidden">
<div className="h-full flex flex-col gap-2 w-1/3 max-w-72 ">
<div class="w-full flex">
<input
@ -59,17 +57,17 @@ export function Reference() {
id="reference-container"
>
<div className="prose dark:prose-invert min-w-full px-1 ">
<h2 >API Reference</h2>
<h2>API Reference</h2>
<p>
This is the long list of functions you can use. Remember that you don't need to remember all of those and
that you can already make music with a small set of functions!
</p>
{visibleFunctions.map((entry, i) => (
<section key={i}>
<h3 id={`doc-${i}`}>{entry.name}</h3>
<h3 id={`doc-${i}`}>{entry.name}</h3>
{!!entry.synonyms_text && (
<p>
Synonyms: <code className='text-foreground'>{entry.synonyms_text}</code>
Synonyms: <code className="text-foreground">{entry.synonyms_text}</code>
</p>
)}
{/* <small>{entry.meta.filename}</small> */}
@ -82,7 +80,9 @@ export function Reference() {
))}
</ul>
{entry.examples?.map((example, j) => (
<pre className='bg-background' key={j}>{example}</pre>
<pre className="bg-background" key={j}>
{example}
</pre>
))}
</section>
))}

4
website/src/repl/components/panel/SoundsTab.jsx
View File

@ -11,7 +11,7 @@ const getSamples = (samples) =>
export function SoundsTab() {
const sounds = useStore(soundMap);
const { soundsFilter, fontFamily } = useSettings();
const { soundsFilter } = useSettings();
const [search, setSearch] = useState('');
const soundEntries = useMemo(() => {
@ -52,7 +52,7 @@ export function SoundsTab() {
});
return (
<div id="sounds-tab" className="px-4 flex flex-col w-full h-full text-foreground" style={{fontFamily}}>
<div id="sounds-tab" className="px-4 flex flex-col w-full h-full text-foreground">
<input
className="w-full p-1 bg-background rounded-md my-2"
placeholder="Search"