Merge pull request #843 from shiyouganai/shiyouganai-slashocalypse

Add in fixes from my fork to slashocalypse branch
2026-01-12 14:18:31 +00:00 · 2023-12-06 21:26:48 +01:00 · 2023-12-06 21:26:48 +01:00 · 74aa85b38b
commit 74aa85b38b
parent ac41426a20 8e9b607fa1
7 changed files with 48 additions and 30 deletions
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@ -15,26 +15,32 @@ const site = `https://strudel.cc/`; // root url without a path
 const base = '/'; // base path of the strudel site
 const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;

-// this rehype plugin converts relative anchor links to absolute ones
-// it wokrs by prepending the absolute page path to anchor links
-// example: #gain -> /learn/effects/#gain
+// this rehype plugin fixes relative links
+// it works by prepending the base + page path to anchor links
+// and by prepending the base path to other relative links starting with /
 // this is necessary when using a base href like <base href={base} />
-// in this setup, relative anchor links will always link to base, instead of the current page
-function absoluteAnchors() {
+// examples with base as "mybase":
+//   #gain -> /mybase/learn/effects/#gain
+//   /some/page -> /mybase/some/page
+function relativeURLFix() {
  return (tree, file) => {
    const chunks = file.history[0].split('/src/pages/'); // file.history[0] is the file path
    const path = chunks[chunks.length - 1].slice(0, -4); // only path inside src/pages, without .mdx
    return rehypeUrls((url) => {
-      if (url.href.startsWith('/')) {
-        const hrefWithTrailingSlash = url.href.endsWith('/') ? url.href : url.href + '/';
-        return baseNoTrailing + hrefWithTrailingSlash;
-      }
+      let newHref = baseNoTrailing;
      if (url.href.startsWith('#')) {
-        const absoluteUrl = `${baseNoTrailing}/${path}/${url.href}`;
-        return absoluteUrl;
+        // special case: a relative anchor link to the current page
+        newHref += `/${path}/${url.href}`;
+      } else if (url.href.startsWith('/')) {
+        // any other relative url starting with /
+        // NOTE: this does strip off serialized queries and fragments
+        newHref += url.pathname.endsWith('/') ? url.pathname : url.pathname + '/';
+      } else {
+        // leave this URL alone
+        return;
      }
-      // console.log(url.href + ' -> ', absoluteUrl);
-      return;
+      // console.log(url.href + ' -> ', newHref);
+      return newHref;
    })(tree);
  };
 }
@ -44,7 +50,7 @@ const options = {
    remarkToc,
    // E.g. `remark-frontmatter`
  ],
-  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], absoluteAnchors],
+  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], relativeURLFix],
 };

 // https://astro.build/config
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@ -3,7 +3,7 @@ import { pwaInfo } from 'virtual:pwa-info';
 import '../styles/index.css';

 const { BASE_URL } = import.meta.env;
-const base = BASE_URL;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---

 <!-- Global Metadata -->
@ -11,20 +11,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} />
+<base href={BASE_URL} />

 <!-- 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: -->
--- a/website/src/components/Header/Header.astro
+++ b/website/src/components/Header/Header.astro
@ -16,6 +16,9 @@ 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 baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---

 <nav
@ -23,7 +26,7 @@ const sidebar = SIDEBAR[langCode];
  title="Top Navigation"
 >
  <div class="flex overflow-visible items-center grow" style="overflow:visible">
-    <a href="/" class="flex items-center text-2xl space-x-2">
+    <a href={`${baseNoTrailing}/`} class="flex items-center text-2xl space-x-2">
      <h1 class="font-bold flex space-x-2 items-baseline text-xl">
        <span>🌀</span>
        <div class="flex space-x-1 items-baseline">
@ -37,7 +40,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">
--- a/website/src/pages/swatch/index.astro
+++ b/website/src/pages/swatch/index.astro
@ -5,6 +5,9 @@ import { Content } from '../../../../my-patterns/README.md';
 import HeadCommon from '../../components/HeadCommon.astro';

 const myPatterns = await getMyPatterns();
+
+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---

 <head>
@ -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>
      ))
    }
--- a/website/src/pages/workshop/getting-started.mdx
+++ b/website/src/pages/workshop/getting-started.mdx
@ -7,7 +7,7 @@ import { MiniRepl } from '../../docs/MiniRepl';

 # Welcome

-<img src="/icons/strudel_icon.png" className="w-32 animate-pulse md:float-right ml-8" />
+<div className="w-32 animate-pulse md:float-right ml-8">![Strudel Icon](/icons/strudel_icon.png)</div>

 Welcome to the Strudel documentation pages!
 You've come to the right place if you want to learn how to make music with code.
--- a/website/src/repl/Footer.jsx
+++ b/website/src/repl/Footer.jsx
@ -13,6 +13,9 @@ import { FilesTab } from './FilesTab';

 const TAURI = window.__TAURI__;

+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+
 export function Footer({ context }) {
  const footerContent = useRef();
  const [log, setLog] = useState([]);
@ -154,7 +157,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{' '}
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@ -3,6 +3,9 @@ import { registerSynthSounds, registerZZFXSounds, samples } from '@strudel.cycle
 import './piano.mjs';
 import './files.mjs';

+const { BASE_URL } = import.meta.env;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+
 export async function prebake() {
  // https://archive.org/details/SalamanderGrandPianoV3
  // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
@ -14,16 +17,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'],