From 18d3a7e23aa3001ba9e326a1b533b01960317d12 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 17 Feb 2023 10:41:49 +0100 Subject: [PATCH 01/21] add vim extension (hard coded) --- packages/react/package.json | 1 + packages/react/src/components/CodeMirror6.jsx | 2 ++ pnpm-lock.yaml | 15 +++++++++++++++ 3 files changed, 18 insertions(+) diff --git a/packages/react/package.json b/packages/react/package.json index adfdc9bf..dfc72b46 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -37,6 +37,7 @@ "@codemirror/state": "^6.2.0", "@codemirror/view": "^6.7.3", "@lezer/highlight": "^1.1.3", + "@replit/codemirror-vim": "^6.0.6", "@strudel.cycles/core": "workspace:*", "@strudel.cycles/transpiler": "workspace:*", "@strudel.cycles/webaudio": "workspace:*", diff --git a/packages/react/src/components/CodeMirror6.jsx b/packages/react/src/components/CodeMirror6.jsx index 06b95de0..72e266f8 100644 --- a/packages/react/src/components/CodeMirror6.jsx +++ b/packages/react/src/components/CodeMirror6.jsx @@ -8,6 +8,7 @@ import './style.css'; import { useCallback } from 'react'; import { autocompletion } from '@codemirror/autocomplete'; import { strudelAutocomplete } from './Autocomplete'; +import { vim } from '@replit/codemirror-vim'; export const setFlash = StateEffect.define(); const flashField = StateField.define({ @@ -84,6 +85,7 @@ const highlightField = StateField.define({ const extensions = [ javascript(), + vim(), highlightField, flashField, // javascriptLanguage.data.of({ autocomplete: strudelAutocomplete }), diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 97aa6c81..90cda99a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -164,6 +164,7 @@ importers: '@codemirror/state': ^6.2.0 '@codemirror/view': ^6.7.3 '@lezer/highlight': ^1.1.3 + '@replit/codemirror-vim': ^6.0.6 '@strudel.cycles/core': workspace:* '@strudel.cycles/transpiler': workspace:* '@strudel.cycles/webaudio': workspace:* @@ -185,6 +186,7 @@ importers: '@codemirror/state': 6.2.0 '@codemirror/view': 6.7.3 '@lezer/highlight': 1.1.3 + '@replit/codemirror-vim': 6.0.6_a4vbhepr4qhxm5cldqd4jpyase '@strudel.cycles/core': link:../core '@strudel.cycles/transpiler': link:../transpiler '@strudel.cycles/webaudio': link:../webaudio @@ -3400,6 +3402,19 @@ packages: tsm: 2.3.0 dev: false + /@replit/codemirror-vim/6.0.6_a4vbhepr4qhxm5cldqd4jpyase: + resolution: {integrity: sha512-/Lc+5AmV+T5pTm5P+rWpL+gseNHNye7xaUWpULczHai5ZLVg/ZE3+MBwK3Ai+/SmZKR/mK2YuXgNKnTGToEGYg==} + peerDependencies: + '@codemirror/commands': ^6.0.0 + '@codemirror/language': ^6.1.0 + '@codemirror/search': ^6.2.0 + '@codemirror/state': ^6.0.1 + '@codemirror/view': ^6.0.3 + dependencies: + '@codemirror/state': 6.2.0 + '@codemirror/view': 6.7.3 + dev: false + /@rollup/plugin-babel/5.3.1_3dsfpkpoyvuuxyfgdbpn4j4uzm: resolution: {integrity: sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==} engines: {node: '>= 10.0.0'} From 540bd938f2ef6fe683c79b511ecf74333b9992e6 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 17 Feb 2023 21:48:34 +0100 Subject: [PATCH 02/21] remove unused Footer + fix AvatarList (still unused) --- .../src/components/Footer/AvatarList.astro | 244 +++++++++--------- website/src/components/Footer/Footer.astro | 19 -- .../RightSidebar/RightSidebar.astro | 2 + website/src/layouts/MainLayout.astro | 2 - 4 files changed, 123 insertions(+), 144 deletions(-) delete mode 100644 website/src/components/Footer/Footer.astro diff --git a/website/src/components/Footer/AvatarList.astro b/website/src/components/Footer/AvatarList.astro index b75589f5..86bbcc87 100644 --- a/website/src/components/Footer/AvatarList.astro +++ b/website/src/components/Footer/AvatarList.astro @@ -1,66 +1,64 @@ --- // fetch all commits for just this page's path type Props = { - path: string; + path: string; }; const { path } = Astro.props as Props; -const resolvedPath = `examples/docs/${path}`; -const url = `https://api.github.com/repos/withastro/astro/commits?path=${resolvedPath}`; -const commitsURL = `https://github.com/withastro/astro/commits/main/${resolvedPath}`; +const resolvedPath = `website/src/pages${path}.mdx`; +const url = `https://api.github.com/repos/tidalcycles/strudel/commits?path=${resolvedPath}`; +const commitsURL = `https://github.com/tidalcycles/strudel/commits/main/${resolvedPath}`; type Commit = { - author: { - id: string; - login: string; - }; + author: { + id: string; + login: string; + }; }; async function getCommits(url: string) { - try { - const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? 'hello'; - if (!token) { - throw new Error( - 'Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.' - ); - } + try { + const token = import.meta.env.SNOWPACK_PUBLIC_GITHUB_TOKEN ?? 'hello'; + if (!token) { + throw new Error('Cannot find "SNOWPACK_PUBLIC_GITHUB_TOKEN" used for escaping rate-limiting.'); + } - const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`; + const auth = `Basic ${Buffer.from(token, 'binary').toString('base64')}`; - const res = await fetch(url, { - method: 'GET', - headers: { - Authorization: auth, - 'User-Agent': 'astro-docs/1.0', - }, - }); + const res = await fetch(url, { + method: 'GET', + headers: { + Authorization: auth, + 'User-Agent': 'astro-docs/1.0', + }, + }); - const data = await res.json(); + const data = await res.json(); - if (!res.ok) { - throw new Error( - `Request to fetch commits failed. Reason: ${res.statusText} - Message: ${data.message}` - ); - } + if (!res.ok) { + throw new Error( + `Request to fetch commits failed. Reason: ${res.statusText} + Message: ${data.message}`, + ); + } - return data as Commit[]; - } catch (e) { - console.warn(`[error] /src/components/AvatarList.astro + return data as Commit[]; + } catch (e) { + console.warn(`[error] /src/components/AvatarList.astro ${(e as any)?.message ?? e}`); - return [] as Commit[]; - } + return [] as Commit[]; + } } function removeDups(arr: Commit[]) { - const map = new Map(); + const map = new Map(); + for (let item of arr) { + const author = item.author; + // Deduplicate based on author.id + //map.set(author.id, { login: author.login, id: author.id }); + author && map.set(author.id, { login: author.login, id: author.id }); + } - for (let item of arr) { - const author = item.author; - // Deduplicate based on author.id - map.set(author.id, { login: author.login, id: author.id }); - } - - return [...map.values()]; + return [...map.values()]; } const data = await getCommits(url); @@ -70,102 +68,102 @@ const additionalContributors = unique.length - recentContributors.length; // lis --- -
-
    - { - recentContributors.map((item) => ( -
  • - - {`Contributor - -
    • - )) - } -
- { - additionalContributors > 0 && ( - - {`and ${additionalContributors} additional contributor${ - additionalContributors > 1 ? 's' : '' - }.`} - - ) - } - {unique.length === 0 && Contributors} +
+
    + { + recentContributors.map((item) => ( +
  • + + {`Contributor + +
    • + )) + } +
+ { + additionalContributors > 0 && ( + + {`and ${additionalContributors} additional contributor${ + additionalContributors > 1 ? 's' : '' + }.`} + + ) + } + {unique.length === 0 && Contributors}
diff --git a/website/src/components/Footer/Footer.astro b/website/src/components/Footer/Footer.astro deleted file mode 100644 index 1ec756b8..00000000 --- a/website/src/components/Footer/Footer.astro +++ /dev/null @@ -1,19 +0,0 @@ ---- -import AvatarList from './AvatarList.astro'; -type Props = { - path: string; -}; -const { path } = Astro.props as Props; ---- - -
- -
- - diff --git a/website/src/components/RightSidebar/RightSidebar.astro b/website/src/components/RightSidebar/RightSidebar.astro index e6031e4d..ba193d24 100644 --- a/website/src/components/RightSidebar/RightSidebar.astro +++ b/website/src/components/RightSidebar/RightSidebar.astro @@ -2,6 +2,7 @@ import TableOfContents from './TableOfContents'; import MoreMenu from './MoreMenu.astro'; import type { MarkdownHeading } from 'astro'; +import AvatarList from '../Footer/AvatarList.astro'; type Props = { headings: MarkdownHeading[]; @@ -17,4 +18,5 @@ currentPage = currentPage.endsWith('/') ? currentPage.slice(0, -1) : currentPage diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro index f4cf091a..ac268cab 100644 --- a/website/src/layouts/MainLayout.astro +++ b/website/src/layouts/MainLayout.astro @@ -7,7 +7,6 @@ import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro'; import RightSidebar from '../components/RightSidebar/RightSidebar.astro'; import * as CONFIG from '../config'; import type { MarkdownHeading } from 'astro'; -import Footer from '../components/Footer/Footer.astro'; import '../docs/docs.css'; type Props = { @@ -49,7 +48,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
- From 4a3540cf2b7635cee9590d3e0f98e229b109e56d Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Fri, 17 Feb 2023 21:48:45 +0100 Subject: [PATCH 03/21] encapsulate footer components --- website/src/repl/Footer.jsx | 227 +++++++++++++++++++----------------- 1 file changed, 120 insertions(+), 107 deletions(-) diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx index 28939c03..522b2f8d 100644 --- a/website/src/repl/Footer.jsx +++ b/website/src/repl/Footer.jsx @@ -76,7 +76,7 @@ export function Footer({ context }) { - + {activeFooter !== '' && ( + ))} + + ); +} + +function SelectInput({ value, options, onChange }) { + return ( + + ); +} + +function NumberSlider({ value, onChange, step = 1, ...rest }) { + return ( +
+ onChange(Number(e.target.value))} + {...rest} + /> + onChange(Number(e.target.value))} + /> +
+ ); +} + +function FormItem({ label, children }) { + return ( +
+ + {children} +
+ ); +} + +const themeOptions = Object.fromEntries(Object.keys(themes).map((k) => [k, k])); + +function SettingsTab() { + const { state, update } = useStore(); + const { theme, keybindings, fontSize } = state; + return ( +
+
+ + update((current) => ({ ...current, theme }))} + /> + + + update((current) => ({ ...current, fontSize }))} + min={10} + max={40} + step={2} + /> + +
+ + update((current) => ({ ...current, keybindings }))} + items={{ codemirror: 'Codemirror', vim: 'Vim', emacs: 'Emacs' }} + > +
); } diff --git a/website/src/repl/Repl.jsx b/website/src/repl/Repl.jsx index 3b2f306c..f91310d6 100644 --- a/website/src/repl/Repl.jsx +++ b/website/src/repl/Repl.jsx @@ -121,7 +121,7 @@ export function Repl({ embedded = false }) { const { theme, themeSettings } = useTheme(); const { - state: { vim }, + state: { keybindings, fontSize }, } = useStore(); const { code, setCode, scheduler, evaluate, activateCode, isDirty, activeCode, pattern, started, stop, error } = @@ -282,7 +282,8 @@ export function Repl({ embedded = false }) { Date: Sun, 19 Feb 2023 13:50:08 +0100 Subject: [PATCH 06/21] fix app height for ios --- website/src/components/HeadCommon.astro | 9 +++++++++ website/src/layouts/MainLayout.astro | 2 +- website/tailwind.config.cjs | 3 +++ 3 files changed, 13 insertions(+), 1 deletion(-) diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro index dcf9af3b..002a5a92 100644 --- a/website/src/components/HeadCommon.astro +++ b/website/src/components/HeadCommon.astro @@ -80,4 +80,13 @@ const { strudelTheme } = settings; } setTheme(get().theme); watch(setTheme, 'theme'); + // https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8 + const appHeight = () => { + const doc = document.documentElement; + doc.style.setProperty('--app-height', `${window.innerHeight}px`); + }; + if (typeof window !== 'undefined') { + window.addEventListener('resize', appHeight); + appHeight(); + } diff --git a/website/src/layouts/MainLayout.astro b/website/src/layouts/MainLayout.astro index ac268cab..49952a7e 100644 --- a/website/src/layouts/MainLayout.astro +++ b/website/src/layouts/MainLayout.astro @@ -30,7 +30,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`; - +
diff --git a/website/tailwind.config.cjs b/website/tailwind.config.cjs index f2421598..4b5fd0c0 100644 --- a/website/tailwind.config.cjs +++ b/website/tailwind.config.cjs @@ -25,6 +25,9 @@ module.exports = { gutterBorder: 'var(--gutterBorder)', lineHighlight: 'var(--lineHighlight)', }, + spacing: { + 'app-height': 'var(--app-height)', + }, typography(theme) { return { DEFAULT: { From 1e3f09f69b6a6856d06b9a724d3b6b814f210938 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 19 Feb 2023 18:53:35 +0100 Subject: [PATCH 07/21] add some custom themes --- packages/react/src/components/style.css | 1 + packages/react/src/themes/blackscreen.js | 36 ++++++++++++++++++++++ packages/react/src/themes/bluescreen.js | 39 ++++++++++++++++++++++++ packages/react/src/themes/gameboy.js | 38 +++++++++++++++++++++++ packages/react/src/themes/whitescreen.js | 38 +++++++++++++++++++++++ website/src/docs/MiniRepl.jsx | 6 ++-- website/src/repl/Footer.jsx | 6 ++-- website/src/repl/themes.mjs | 12 ++++++++ website/src/useStore.mjs | 15 +++++++-- 9 files changed, 184 insertions(+), 7 deletions(-) create mode 100644 packages/react/src/themes/blackscreen.js create mode 100644 packages/react/src/themes/bluescreen.js create mode 100644 packages/react/src/themes/gameboy.js create mode 100644 packages/react/src/themes/whitescreen.js diff --git a/packages/react/src/components/style.css b/packages/react/src/components/style.css index 8983884e..ae33a5d2 100644 --- a/packages/react/src/components/style.css +++ b/packages/react/src/components/style.css @@ -6,6 +6,7 @@ .cm-theme { width: 100%; + height: 100%; } .cm-theme-light { diff --git a/packages/react/src/themes/blackscreen.js b/packages/react/src/themes/blackscreen.js new file mode 100644 index 00000000..8356942f --- /dev/null +++ b/packages/react/src/themes/blackscreen.js @@ -0,0 +1,36 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from '@uiw/codemirror-themes'; +export const settings = { + background: 'black', + foreground: 'white', // whats that? + caret: 'white', + selection: '#ffffff20', + selectionMatch: '#036dd626', + lineHighlight: '#ffffff10', + gutterBackground: 'transparent', + gutterForeground: '#8a919966', +}; +export default createTheme({ + theme: 'dark', + settings, + styles: [ + { tag: t.keyword, color: 'white' }, + { tag: t.operator, color: 'white' }, + { tag: t.special(t.variableName), color: 'white' }, + { tag: t.typeName, color: 'white' }, + { tag: t.atom, color: 'white' }, + { tag: t.number, color: 'white' }, + { tag: t.definition(t.variableName), color: 'white' }, + { tag: t.string, color: 'white' }, + { tag: t.special(t.string), color: 'white' }, + { tag: t.comment, color: 'white' }, + { tag: t.variableName, color: 'white' }, + { tag: t.tagName, color: 'white' }, + { tag: t.bracket, color: 'white' }, + { tag: t.meta, color: 'white' }, + { tag: t.attributeName, color: 'white' }, + { tag: t.propertyName, color: 'white' }, + { tag: t.className, color: 'white' }, + { tag: t.invalid, color: 'white' }, + ], +}); diff --git a/packages/react/src/themes/bluescreen.js b/packages/react/src/themes/bluescreen.js new file mode 100644 index 00000000..c4512039 --- /dev/null +++ b/packages/react/src/themes/bluescreen.js @@ -0,0 +1,39 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from '@uiw/codemirror-themes'; +export const settings = { + background: '#051DB5', + foreground: 'white', // whats that? + caret: 'white', + selection: 'rgba(128, 203, 196, 0.5)', + selectionMatch: '#036dd626', + // lineHighlight: '#8a91991a', // original + lineHighlight: '#00000050', + gutterBackground: 'transparent', + // gutterForeground: '#8a919966', + gutterForeground: '#8a919966', +}; + +export default createTheme({ + theme: 'dark', + settings, + styles: [ + { tag: t.keyword, color: 'white' }, + { tag: t.operator, color: 'white' }, + { tag: t.special(t.variableName), color: 'white' }, + { tag: t.typeName, color: 'white' }, + { tag: t.atom, color: 'white' }, + { tag: t.number, color: 'white' }, + { tag: t.definition(t.variableName), color: 'white' }, + { tag: t.string, color: 'white' }, + { tag: t.special(t.string), color: 'white' }, + { tag: t.comment, color: 'white' }, + { tag: t.variableName, color: 'white' }, + { tag: t.tagName, color: 'white' }, + { tag: t.bracket, color: 'white' }, + { tag: t.meta, color: 'white' }, + { tag: t.attributeName, color: 'white' }, + { tag: t.propertyName, color: 'white' }, + { tag: t.className, color: 'white' }, + { tag: t.invalid, color: 'white' }, + ], +}); diff --git a/packages/react/src/themes/gameboy.js b/packages/react/src/themes/gameboy.js new file mode 100644 index 00000000..c9cf72ce --- /dev/null +++ b/packages/react/src/themes/gameboy.js @@ -0,0 +1,38 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from '@uiw/codemirror-themes'; +export const settings = { + background: '#9bbc0f', + foreground: '#0f380f', // whats that? + caret: '#0f380f', + selection: '#306230', + selectionMatch: '#ffffff26', + lineHighlight: '#8bac0f', + lineBackground: '#9bbc0f50', + gutterBackground: 'transparent', + gutterForeground: '#0f380f', + light: true, +}; +export default createTheme({ + theme: 'light', + settings, + styles: [ + { tag: t.keyword, color: '#0f380f' }, + { tag: t.operator, color: '#0f380f' }, + { tag: t.special(t.variableName), color: '#0f380f' }, + { tag: t.typeName, color: '#0f380f' }, + { tag: t.atom, color: '#0f380f' }, + { tag: t.number, color: '#0f380f' }, + { tag: t.definition(t.variableName), color: '#0f380f' }, + { tag: t.string, color: '#0f380f' }, + { tag: t.special(t.string), color: '#0f380f' }, + { tag: t.comment, color: '#0f380f' }, + { tag: t.variableName, color: '#0f380f' }, + { tag: t.tagName, color: '#0f380f' }, + { tag: t.bracket, color: '#0f380f' }, + { tag: t.meta, color: '#0f380f' }, + { tag: t.attributeName, color: '#0f380f' }, + { tag: t.propertyName, color: '#0f380f' }, + { tag: t.className, color: '#0f380f' }, + { tag: t.invalid, color: '#0f380f' }, + ], +}); diff --git a/packages/react/src/themes/whitescreen.js b/packages/react/src/themes/whitescreen.js new file mode 100644 index 00000000..22abad9e --- /dev/null +++ b/packages/react/src/themes/whitescreen.js @@ -0,0 +1,38 @@ +import { tags as t } from '@lezer/highlight'; +import { createTheme } from '@uiw/codemirror-themes'; +export const settings = { + background: 'white', + foreground: 'black', // whats that? + caret: 'black', + selection: 'rgba(128, 203, 196, 0.5)', + selectionMatch: '#ffffff26', + lineHighlight: '#cccccc50', + lineBackground: '#ffffff50', + gutterBackground: 'transparent', + gutterForeground: 'black', + light: true, +}; +export default createTheme({ + theme: 'light', + settings, + styles: [ + { tag: t.keyword, color: 'black' }, + { tag: t.operator, color: 'black' }, + { tag: t.special(t.variableName), color: 'black' }, + { tag: t.typeName, color: 'black' }, + { tag: t.atom, color: 'black' }, + { tag: t.number, color: 'black' }, + { tag: t.definition(t.variableName), color: 'black' }, + { tag: t.string, color: 'black' }, + { tag: t.special(t.string), color: 'black' }, + { tag: t.comment, color: 'black' }, + { tag: t.variableName, color: 'black' }, + { tag: t.tagName, color: 'black' }, + { tag: t.bracket, color: 'black' }, + { tag: t.meta, color: 'black' }, + { tag: t.attributeName, color: 'black' }, + { tag: t.propertyName, color: 'black' }, + { tag: t.className, color: 'black' }, + { tag: t.invalid, color: 'black' }, + ], +}); diff --git a/website/src/docs/MiniRepl.jsx b/website/src/docs/MiniRepl.jsx index 51e48915..10065d89 100644 --- a/website/src/docs/MiniRepl.jsx +++ b/website/src/docs/MiniRepl.jsx @@ -4,8 +4,7 @@ import { useEffect, useState } from 'react'; import { prebake } from '../repl/prebake'; import { themes, settings } from '../repl/themes.mjs'; import './MiniRepl.css'; - -const theme = localStorage.getItem('strudel-theme') || 'strudelTheme'; +import useStore from '../useStore.mjs'; let modules; if (typeof window !== 'undefined') { @@ -29,6 +28,9 @@ if (typeof window !== 'undefined') { export function MiniRepl({ tune, drawTime, punchcard, canvasHeight = 100 }) { const [Repl, setRepl] = useState(); + const { + state: { theme }, + } = useStore(); useEffect(() => { // we have to load this package on the client // because codemirror throws an error on the server diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx index bab35400..f7a4fb13 100644 --- a/website/src/repl/Footer.jsx +++ b/website/src/repl/Footer.jsx @@ -6,7 +6,7 @@ import { nanoid } from 'nanoid'; import React, { useCallback, useLayoutEffect, useRef, useState } from 'react'; import { loadedSamples } from './Repl'; import { Reference } from './Reference'; -import { themes, themeColors } from './themes.mjs'; +import { themes } from './themes.mjs'; import useStore from '../useStore.mjs'; export function Footer({ context }) { @@ -209,7 +209,7 @@ function SamplesTab() { function ButtonGroup({ value, onChange, items }) { return ( -
+
{Object.entries(items).map(([key, label], i, arr) => ( )} {isEmbedded && ( - +
); } diff --git a/website/src/useStore.mjs b/website/src/useStore.mjs index 065be3d1..1b358c6b 100644 --- a/website/src/useStore.mjs +++ b/website/src/useStore.mjs @@ -6,7 +6,7 @@ import {} from 'react'; function useStore() { const [state, setState] = useState(Store.get()); useEvent(Store.storeKey, (e) => setState(e.detail.next)); - return { state, update: Store.updateState }; + return { state, ...Store }; } // TODO: dedupe From 89cd0c769b8ae6cbaa931197cc0212161be056d1 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 19 Feb 2023 23:27:56 +0100 Subject: [PATCH 14/21] fix bluescreen line bg --- packages/react/src/themes/bluescreen.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react/src/themes/bluescreen.js b/packages/react/src/themes/bluescreen.js index c57bd120..661fcf68 100644 --- a/packages/react/src/themes/bluescreen.js +++ b/packages/react/src/themes/bluescreen.js @@ -2,6 +2,7 @@ import { tags as t } from '@lezer/highlight'; import { createTheme } from '@uiw/codemirror-themes'; export const settings = { background: '#051DB5', + lineBackground: '#051DB550', foreground: 'white', // whats that? caret: 'white', selection: 'rgba(128, 203, 196, 0.5)', From 7716574076857532ea87b23fc3589eab15f56ef3 Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 19 Feb 2023 23:28:33 +0100 Subject: [PATCH 15/21] use terminal font for console + samples --- website/src/repl/Footer.jsx | 10 ++++++++-- website/src/styles/index.css | 5 +++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx index f816df92..384e95ef 100644 --- a/website/src/repl/Footer.jsx +++ b/website/src/repl/Footer.jsx @@ -175,7 +175,13 @@ function WelcomeTab() { function ConsoleTab({ log }) { return ( -
+
+ 
{`β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ•—   β–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•— β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ•—     
+β–ˆβ–ˆβ•”β•β•β•β•β•β•šβ•β•β–ˆβ–ˆβ•”β•β•β•β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•”β•β•β•β•β•β–ˆβ–ˆβ•‘     
+β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—   β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•”β•β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•‘  β–ˆβ–ˆβ•‘β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—  β–ˆβ–ˆβ•‘     
+β•šβ•β•β•β•β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•”β•β•β–ˆβ–ˆβ•—β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•‘  β–ˆβ–ˆβ•‘β–ˆβ–ˆβ•”β•β•β•  β–ˆβ–ˆβ•‘     
+β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘   β–ˆβ–ˆβ•‘  β–ˆβ–ˆβ•‘β•šβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•”β•β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•”β•β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ•—
+β•šβ•β•β•β•β•β•β•   β•šβ•β•   β•šβ•β•  β•šβ•β• β•šβ•β•β•β•β•β• β•šβ•β•β•β•β•β• β•šβ•β•β•β•β•β•β•β•šβ•β•β•β•β•β•β•`}
{log.map((l, i) => { const message = linkify(l.message); return ( @@ -191,7 +197,7 @@ function ConsoleTab({ log }) { function SamplesTab() { return ( -
+
{loadedSamples.length} banks loaded: {loadedSamples.map(([name, samples]) => ( {}}> diff --git a/website/src/styles/index.css b/website/src/styles/index.css index c34a65fa..2657bab7 100644 --- a/website/src/styles/index.css +++ b/website/src/styles/index.css @@ -21,3 +21,8 @@ :root { --app-height: 100vh; } + +#console-tab, +#samples-tab { + font-family: BigBlueTerminal, monospace; +} From 20848aac093b8f1952f2559841d875be35d8277e Mon Sep 17 00:00:00 2001 From: Felix Roos Date: Sun, 19 Feb 2023 23:28:46 +0100 Subject: [PATCH 16/21] fix store import --- website/src/components/HeadCommon.astro | 8 +++----- website/{public => src}/store.mjs | 0 website/src/useStore.mjs | 2 +- 3 files changed, 4 insertions(+), 6 deletions(-) rename website/{public => src}/store.mjs (100%) diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro index 002a5a92..47929bc6 100644 --- a/website/src/components/HeadCommon.astro +++ b/website/src/components/HeadCommon.astro @@ -1,12 +1,9 @@ --- import { pwaInfo } from 'virtual:pwa-info'; import '../styles/index.css'; -import { settings } from '../repl/themes.mjs'; const { BASE_URL } = import.meta.env; const base = BASE_URL; - -const { strudelTheme } = settings; --- @@ -48,8 +45,9 @@ const { strudelTheme } = settings; {pwaInfo && } -