From 3e5664a877ed0239d11a44844f201ce133c21351 Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Sun, 3 Dec 2023 16:47:40 -0500
Subject: [PATCH] Add quick fix for non root bases

---
 website/astro.config.mjs                   |  2 +-
 website/src/components/HeadCommon.astro    |  9 +++++----
 website/src/components/Header/Header.astro |  6 +++++-
 website/src/pages/swatch/index.astro       |  9 ++++++---
 website/src/repl/Footer.jsx                |  6 +++++-
 website/src/repl/Header.jsx                |  4 ++++
 website/src/repl/prebake.mjs               | 12 ++++++++----
 7 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 84a89b33..a192c4ab 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -122,7 +122,7 @@ export default defineConfig({
     }),
   ],
   site,
-  base,
+  base: base,
   vite: {
     ssr: {
       // Example: Force a broken package to skip SSR processing, if needed
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index 2aa6acfe..724c4b07 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -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: -->
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index 4cee4282..b429fdb1 100644
--- a/website/src/components/Header/Header.astro
+++ b/website/src/components/Header/Header.astro
@@ -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">
diff --git a/website/src/pages/swatch/index.astro b/website/src/pages/swatch/index.astro
index e10ebcb7..bbc9df48 100644
--- a/website/src/pages/swatch/index.astro
+++ b/website/src/pages/swatch/index.astro
@@ -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>
       ))
     }
diff --git a/website/src/repl/Footer.jsx b/website/src/repl/Footer.jsx
index 35625093..dee13f5b 100644
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@@ -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{' '}
diff --git a/website/src/repl/Header.jsx b/website/src/repl/Header.jsx
index 5e991f8a..49ebe84f 100644
--- a/website/src/repl/Header.jsx
+++ b/website/src/repl/Header.jsx
@@ -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,
diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs
index 28678c9d..c5a04859 100644
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@@ -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'],