hacklab/strudel
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add quick fix for non root bases

Browse source
This commit is contained in:
Priere 2023-12-03 16:47:40 -05:00
parent ac41426a20
commit 3e5664a877
7 changed files with 34 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

2
website/astro.config.mjs
View file

@ -122,7 +122,7 @@ export default defineConfig({
}), }),
], ],
site, site,
base, base: base,
vite: { vite: {
ssr: { ssr: {
// Example: Force a broken package to skip SSR processing, if needed // Example: Force a broken package to skip SSR processing, if needed

9
website/src/components/HeadCommon.astro
View file

@ -4,6 +4,7 @@ import '../styles/index.css';
const { BASE_URL } = import.meta.env; const { BASE_URL } = import.meta.env;
const base = BASE_URL; const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
--- ---
<!-- Global Metadata --> <!-- Global Metadata -->
@ -11,20 +12,20 @@ const base = BASE_URL;
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<link rel="icon" type="image/svg+xml" href="favicon.ico" /> <link rel="icon" type="image/svg+xml" href={`${baseNoTrailing}/favicon.ico`} />
<meta <meta
name="description" name="description"
content="Strudel is a music live coding environment for the browser, porting the TidalCycles pattern language to JavaScript." 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="icon" href={`${baseNoTrailing}/favicon.ico`} />
<link rel="apple-touch-icon" href="/icons/apple-icon-180.png" sizes="180x180" /> <link rel="apple-touch-icon" href={`${baseNoTrailing}/icons/apple-icon-180.png`} sizes="180x180" />
<meta name="theme-color" content="#222222" /> <meta name="theme-color" content="#222222" />
<base href={base} /> <base href={base} />
<!-- Scrollable a11y code helper --> <!-- Scrollable a11y code helper -->
<script src="./make-scrollable-code-focusable.js" is:inline></script> <script src{`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>
<script src="/src/pwa.ts"></script> <script src="/src/pwa.ts"></script>
<!-- this does not work for some reason: --> <!-- this does not work for some reason: -->

6
website/src/components/Header/Header.astro
View file

@ -16,6 +16,10 @@ const { currentPage } = Astro.props as Props;
// const lang = getLanguageFromURL(currentPage); // const lang = getLanguageFromURL(currentPage);
const langCode = 'en'; // getLanguageFromURL(currentPage); const langCode = 'en'; // getLanguageFromURL(currentPage);
const sidebar = SIDEBAR[langCode]; const sidebar = SIDEBAR[langCode];
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
--- ---
<nav <nav
@ -37,7 +41,7 @@ const sidebar = SIDEBAR[langCode];
<div class="search-item h-10"> <div class="search-item h-10">
<Search client:idle /> <Search client:idle />
</div> </div>
<a href="./" class="hidden md:flex cursor-pointer items-center space-x-1" <a href={`${baseNoTrailing}/`} class="hidden md:flex cursor-pointer items-center space-x-1"
><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span> ><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
</a> </a>
<div class="md:hidden"> <div class="md:hidden">

9
website/src/pages/swatch/index.astro
View file

@ -5,7 +5,10 @@ import { Content } from '../../../../my-patterns/README.md';
import HeadCommon from '../../components/HeadCommon.astro'; import HeadCommon from '../../components/HeadCommon.astro';
const myPatterns = await getMyPatterns(); const myPatterns = await getMyPatterns();
---
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;---
<head> <head>
<HeadCommon /> <HeadCommon />
@ -23,12 +26,12 @@ const myPatterns = await getMyPatterns();
Object.entries(myPatterns).map(([name, tune]) => ( Object.entries(myPatterns).map(([name, tune]) => (
<a <a
class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative"
href={`./#${btoa(tune as string)}`} href={`${baseNoTrailing}/#${btoa(tune as string)}`}
> >
<div class="absolute w-full h-full flex justify-center items-center"> <div class="absolute w-full h-full flex justify-center items-center">
<span class="bg-slate-800 p-2 rounded-md text-white">{name}</span> <span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
</div> </div>
<img src={`./swatch/${name}.png`} /> <img src={`${baseNoTrailing}/swatch/${name}.png`} />
</a> </a>
)) ))
} }

6
website/src/repl/Footer.jsx
View file

@ -13,6 +13,10 @@ import { FilesTab } from './FilesTab';
const TAURI = window.__TAURI__; const TAURI = window.__TAURI__;
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
export function Footer({ context }) { export function Footer({ context }) {
const footerContent = useRef(); const footerContent = useRef();
const [log, setLog] = useState([]); const [log, setLog] = useState([]);
@ -154,7 +158,7 @@ function WelcomeTab() {
</p> </p>
<p> <p>
To learn more about what this all means, check out the{' '} To learn more about what this all means, check out the{' '}
<a href="./workshop/getting-started" target="_blank"> <a href={`${baseNoTrailing}/workshop/getting-started`} target="_blank">
interactive tutorial interactive tutorial
</a> </a>
. Also feel free to join the{' '} . Also feel free to join the{' '}

4
website/src/repl/Header.jsx
View file

@ -12,6 +12,10 @@ import './Repl.css';
const { BASE_URL } = import.meta.env; const { BASE_URL } = import.meta.env;
const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL; const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
export function Header({ context }) { export function Header({ context }) {
const { const {
embedded, embedded,

12
website/src/repl/prebake.mjs
View file

@ -3,6 +3,10 @@ import { registerSynthSounds, registerZZFXSounds, samples } from '@strudel.cycle
import './piano.mjs'; import './piano.mjs';
import './files.mjs'; import './files.mjs';
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
export async function prebake() { export async function prebake() {
// https://archive.org/details/SalamanderGrandPianoV3 // https://archive.org/details/SalamanderGrandPianoV3
// License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
@ -14,16 +18,16 @@ export async function prebake() {
// => getting "window is not defined", as soon as "@strudel.cycles/soundfonts" is imported statically // => getting "window is not defined", as soon as "@strudel.cycles/soundfonts" is imported statically
// seems to be a problem with soundfont2 // seems to be a problem with soundfont2
import('@strudel.cycles/soundfonts').then(({ registerSoundfonts }) => registerSoundfonts()), import('@strudel.cycles/soundfonts').then(({ registerSoundfonts }) => registerSoundfonts()),
samples(`./piano.json`, `./piano/`, { prebake: true }), samples(`${baseNoTrailing}/piano.json`, `./piano/`, { prebake: true }),
// https://github.com/sgossner/VCSL/ // https://github.com/sgossner/VCSL/
// https://api.github.com/repositories/126427031/contents/ // https://api.github.com/repositories/126427031/contents/
// LICENSE: CC0 general-purpose // LICENSE: CC0 general-purpose
samples(`./vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }), samples(`${baseNoTrailing}/vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', { samples(`${baseNoTrailing}/tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
prebake: true, prebake: true,
tag: 'drum-machines', tag: 'drum-machines',
}), }),
samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }), samples(`${baseNoTrailing}/EmuSP12.json`, `${baseNoTrailing}/EmuSP12/`, { prebake: true, tag: 'drum-machines' }),
samples( samples(
{ {
casio: ['casio/high.wav', 'casio/low.wav', 'casio/noise.wav'], casio: ['casio/high.wav', 'casio/low.wav', 'casio/noise.wav'],