Add quick fix for non root bases

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

View File

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

View File

@ -4,6 +4,7 @@ import '../styles/index.css';
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
---
<!-- Global Metadata -->
@ -11,20 +12,20 @@ const base = BASE_URL;
<meta name="viewport" content="width=device-width" />
<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
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" />
<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} />
<!-- 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>
<!-- this does not work for some reason: -->

View File

@ -16,6 +16,10 @@ const { currentPage } = Astro.props as Props;
// const lang = getLanguageFromURL(currentPage);
const langCode = 'en'; // getLanguageFromURL(currentPage);
const sidebar = SIDEBAR[langCode];
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
---
<nav
@ -37,7 +41,7 @@ const sidebar = SIDEBAR[langCode];
<div class="search-item h-10">
<Search client:idle />
</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>
</a>
<div class="md:hidden">

View File

@ -5,7 +5,10 @@ import { Content } from '../../../../my-patterns/README.md';
import HeadCommon from '../../components/HeadCommon.astro';
const myPatterns = await getMyPatterns();
---
const { BASE_URL } = import.meta.env;
const base = BASE_URL;
const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;---
<head>
<HeadCommon />
@ -23,12 +26,12 @@ const myPatterns = await getMyPatterns();
Object.entries(myPatterns).map(([name, tune]) => (
<a
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">
<span class="bg-slate-800 p-2 rounded-md text-white">{name}</span>
</div>
<img src={`./swatch/${name}.png`} />
<img src={`${baseNoTrailing}/swatch/${name}.png`} />
</a>
))
}

View File

@ -13,6 +13,10 @@ import { FilesTab } from './FilesTab';
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 }) {
const footerContent = useRef();
const [log, setLog] = useState([]);
@ -154,7 +158,7 @@ function WelcomeTab() {
</p>
<p>
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
</a>
. Also feel free to join the{' '}

View File

@ -12,6 +12,10 @@ import './Repl.css';
const { BASE_URL } = import.meta.env;
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 }) {
const {
embedded,

View File

@ -3,6 +3,10 @@ import { registerSynthSounds, registerZZFXSounds, samples } from '@strudel.cycle
import './piano.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() {
// https://archive.org/details/SalamanderGrandPianoV3
// 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
// seems to be a problem with soundfont2
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://api.github.com/repositories/126427031/contents/
// LICENSE: CC0 general-purpose
samples(`./vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
samples(`${baseNoTrailing}/vcsl.json`, 'github:sgossner/VCSL/master/', { prebake: true }),
samples(`${baseNoTrailing}/tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/', {
prebake: true,
tag: 'drum-machines',
}),
samples(`./EmuSP12.json`, `./EmuSP12/`, { prebake: true, tag: 'drum-machines' }),
samples(`${baseNoTrailing}/EmuSP12.json`, `${baseNoTrailing}/EmuSP12/`, { prebake: true, tag: 'drum-machines' }),
samples(
{
casio: ['casio/high.wav', 'casio/low.wav', 'casio/noise.wav'],