Rework rehype plugin and clean up changes

website/astro.config.mjs

@@ -15,25 +15,34 @@ 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 all other relative links
 // 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;
+      // NOTE: the base argument to the URL constructor is ignored if the input is already
+      //       absolute and used if not, which facilitates the comparison below
+      // true if url is relative
+      if (new URL(site).origin === new URL(url.href, site).origin) {
+        let newHref = baseNoTrailing;
+        if (url.href.startsWith('#')) {
+          // special case: a relative anchor link to the current page
+          newHref += `/${path}/${url.href}`;
+        } else {
+          // any other relative link
+          // NOTE: this does strip off serialized queries and fragments
+          newHref += (url.pathname.endsWith('/') ? url.pathname : url.pathname + '/');
+        }
+        // console.log(url.href + ' -> ', newHref);
+        return newHref;
       }
-      if (url.href.startsWith('#')) {
-        const absoluteUrl = `${baseNoTrailing}/${path}/${url.href}`;
-        return absoluteUrl;
-      }
-      // console.log(url.href + ' -> ', absoluteUrl);
       return;
     })(tree);
   };
@@ -44,7 +53,7 @@ const options = {
     remarkToc,
     // E.g. `remark-frontmatter`
   ],
-  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], absoluteAnchors],
+  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], relativeURLFix],
 };
 
 // https://astro.build/config

website/src/components/HeadCommon.astro

@@ -3,8 +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.endsWith('/') ? base.slice(0, -1) : base;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---
 
 <!-- Global Metadata -->
@@ -22,7 +21,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
 <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{`${baseNoTrailing}/make-scrollable-code-focusable.js`} is:inline></script>

website/src/components/Header/Header.astro

@@ -18,8 +18,7 @@ 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;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 ---
 
 <nav
@@ -27,7 +26,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
   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">

website/src/pages/swatch/index.astro

@@ -7,8 +7,8 @@ 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;---
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
+---
 
 <head>
   <HeadCommon />
@@ -31,7 +31,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;---
           <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={`${baseNoTrailing}/swatch/${name}.png`} />
+          <img src={`${baseNoTrailing}/swatch/${name}.png/`} />
         </a>
       ))
     }

website/src/pages/workshop/getting-started.mdx

@@ -7,7 +7,9 @@ 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.

website/src/repl/Footer.jsx

@@ -14,8 +14,7 @@ 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;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 export function Footer({ context }) {
   const footerContent = useRef();
@@ -158,7 +157,7 @@ function WelcomeTab() {
       </p>
       <p>
         To learn more about what this all means, check out the{' '}
-        <a href={`${baseNoTrailing}/workshop/getting-started`} target="_blank">
+        <a href={`${baseNoTrailing}/workshop/getting-started/`} target="_blank">
           interactive tutorial
         </a>
         . Also feel free to join the{' '}

website/src/repl/Header.jsx

@@ -12,10 +12,6 @@ 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,

website/src/repl/prebake.mjs

@@ -4,8 +4,7 @@ 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;
+const baseNoTrailing = BASE_URL.endsWith('/') ? BASE_URL.slice(0, -1) : BASE_URL;
 
 export async function prebake() {
   // https://archive.org/details/SalamanderGrandPianoV3