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;---
@@ -23,12 +26,12 @@ const myPatterns = await getMyPatterns();
Object.entries(myPatterns).map(([name, tune]) => (
{name}
- 
+ 
))
}
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() {
To learn more about what this all means, check out the{' '}
-
+
interactive tutorial
. 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'],
From 2c43fb25123c5e0978bcdd571dd5835515c0d9dd Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Sun, 3 Dec 2023 16:50:28 -0500
Subject: [PATCH 2/6] Remove unnecessary change
---
website/astro.config.mjs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index a192c4ab..84a89b33 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
From 018a45e2d45c278b0151e0b5c58c29ed2b20740c Mon Sep 17 00:00:00 2001
From: Priere <44214460+shiyouganai@users.noreply.github.com>
Date: Tue, 5 Dec 2023 20:52:21 -0500
Subject: [PATCH 3/6] Rework rehype plugin and clean up changes
---
website/astro.config.mjs | 37 ++++++++++++-------
website/src/components/HeadCommon.astro | 5 +--
website/src/components/Header/Header.astro | 5 +--
website/src/pages/swatch/index.astro | 6 +--
.../src/pages/workshop/getting-started.mdx | 4 +-
website/src/repl/Footer.jsx | 5 +--
website/src/repl/Header.jsx | 4 --
website/src/repl/prebake.mjs | 3 +-
8 files changed, 36 insertions(+), 33 deletions(-)
diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 84a89b33..3a18ce54 100644
--- a/website/astro.config.mjs
+++ b/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
-// 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
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index 724c4b07..ab18500f 100644
--- a/website/src/components/HeadCommon.astro
+++ b/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;
---
@@ -22,7 +21,7 @@ const baseNoTrailing = base.endsWith('/') ? base.slice(0, -1) : base;
-
+
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index b429fdb1..6447d9d6 100644
--- a/website/src/components/Header/Header.astro
+++ b/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;
---