mirror of
https://github.com/eliasstepanik/strudel-docker.git
synced 2026-01-12 14:18:31 +00:00
95 lines
3.0 KiB
Plaintext
95 lines
3.0 KiB
Plaintext
---
|
|
import { pwaInfo } from 'virtual:pwa-info';
|
|
import '../styles/index.css';
|
|
|
|
const { BASE_URL } = import.meta.env;
|
|
const base = 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="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="/favicon.ico" />
|
|
<link rel="apple-touch-icon" href="/icons/apple-icon-180.png" sizes="180x180" />
|
|
<meta name="theme-color" content="#222222" />
|
|
|
|
<base href={base} />
|
|
|
|
<!-- Scrollable a11y code helper -->
|
|
<script src="./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>
|
|
import { settings, injectStyle } from '../repl/themes.mjs';
|
|
import { settingsMap } from '../settings.mjs';
|
|
import { listenKeys } from 'nanostores';
|
|
const themeStyle = document.createElement('style');
|
|
themeStyle.id = 'strudel-theme';
|
|
document.head.append(themeStyle);
|
|
|
|
let resetThemeStyle;
|
|
function activateTheme(name) {
|
|
if (!settings[name]) {
|
|
console.warn('theme', name, 'has no settings.. defaulting to strudelTheme settings');
|
|
}
|
|
const themeSettings = settings[name] || settings.strudelTheme;
|
|
// set css variables
|
|
themeStyle.innerHTML = `:root {
|
|
${Object.entries(themeSettings)
|
|
// important to override fallback
|
|
.map(([key, value]) => `--${key}: ${value} !important;`)
|
|
.join('\n')}
|
|
}`;
|
|
// tailwind dark mode
|
|
if (themeSettings.light) {
|
|
document.documentElement.classList.remove('dark');
|
|
} else {
|
|
document.documentElement.classList.add('dark');
|
|
}
|
|
resetThemeStyle?.();
|
|
resetThemeStyle = undefined;
|
|
if (themeSettings.customStyle) {
|
|
resetThemeStyle = injectStyle(themeSettings.customStyle);
|
|
}
|
|
}
|
|
|
|
activateTheme(settingsMap.get().theme);
|
|
listenKeys(settingsMap, ['theme'], ({ theme }) => activateTheme(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 - 1}px`);
|
|
};
|
|
if (typeof window !== 'undefined') {
|
|
window.addEventListener('resize', appHeight);
|
|
appHeight();
|
|
}
|
|
</script>
|