From 11d3251c67ac0b592d947dfef4696cf2b9d54fe3 Mon Sep 17 00:00:00 2001
From: Felix Roos <roos@entrecode.de>
Date: Tue, 3 Jan 2023 23:02:41 +0100
Subject: [PATCH] add base path + use relative links

---
 website/astro.config.mjs                             |  2 +-
 website/src/components/HeadCommon.astro              | 12 +++++++++---
 website/src/components/Header/Header.astro           |  2 +-
 website/src/components/LeftSidebar/LeftSidebar.astro |  6 ++++--
 website/src/components/PageContent/PageContent.astro |  3 ++-
 .../src/components/RightSidebar/RightSidebar.astro   |  3 ++-
 .../src/components/RightSidebar/TableOfContents.tsx  |  7 +++++--
 website/src/pages/swatch/index.astro                 | 11 ++++++-----
 website/src/repl/prebake.mjs                         |  9 ++++-----
 9 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/website/astro.config.mjs b/website/astro.config.mjs
index 6714f548..9dca58df 100644
--- a/website/astro.config.mjs
+++ b/website/astro.config.mjs
@@ -31,7 +31,7 @@ export default defineConfig({
     tailwind(),
   ],
   site: `https://strudel.tidalcycles.org`,
-  base: '',
+  base: '/',
 });
 
 /*
diff --git a/website/src/components/HeadCommon.astro b/website/src/components/HeadCommon.astro
index 410e9b91..9a1ed6f8 100644
--- a/website/src/components/HeadCommon.astro
+++ b/website/src/components/HeadCommon.astro
@@ -1,5 +1,9 @@
 ---
 import '../styles/index.css';
+
+const { url } = Astro;
+const { BASE_URL } = import.meta.env;
+const base = url.origin + BASE_URL;
 ---
 
 <!-- Global Metadata -->
@@ -7,9 +11,11 @@ import '../styles/index.css';
 <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="favicon.ico" />
 
-<link rel="sitemap" href="/sitemap.xml" />
+<link rel="sitemap" href="./sitemap.xml" />
+
+<base href={base} />
 
 <!-- Preload Fonts -->
 <link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -17,7 +23,7 @@ import '../styles/index.css';
 <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
 
 <!-- Scrollable a11y code helper -->
-<script src="/make-scrollable-code-focusable.js" is:inline></script>
+<script src="./make-scrollable-code-focusable.js" is:inline></script>
 
 <!-- This is intentionally inlined to avoid FOUC -->
 <script is:inline>
diff --git a/website/src/components/Header/Header.astro b/website/src/components/Header/Header.astro
index 2866804d..8bb9497d 100644
--- a/website/src/components/Header/Header.astro
+++ b/website/src/components/Header/Header.astro
@@ -38,7 +38,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="./" 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/components/LeftSidebar/LeftSidebar.astro b/website/src/components/LeftSidebar/LeftSidebar.astro
index 741e3f0c..df505925 100644
--- a/website/src/components/LeftSidebar/LeftSidebar.astro
+++ b/website/src/components/LeftSidebar/LeftSidebar.astro
@@ -7,7 +7,9 @@ type Props = {
 };
 
 const { currentPage } = Astro.props as Props;
-const currentPageMatch = currentPage.endsWith('/') ? currentPage.slice(1, -1) : currentPage.slice(1);
+const { BASE_URL } = import.meta.env;
+let currentPageMatch = currentPage.slice(BASE_URL.length, currentPage.endsWith('/') ? -1 : undefined);
+
 const langCode = 'en'; // getLanguageFromURL(currentPage);
 const sidebar = SIDEBAR[langCode];
 ---
@@ -21,7 +23,7 @@ const sidebar = SIDEBAR[langCode];
             <h2>{header}</h2>
             <ul>
               {children.map((child) => {
-                const url = Astro.site?.pathname + child.link;
+                const url = '.' + Astro.site?.pathname + child.link;
                 return (
                   <li class="">
                     <a
diff --git a/website/src/components/PageContent/PageContent.astro b/website/src/components/PageContent/PageContent.astro
index 5c4fa0fc..b6131e16 100644
--- a/website/src/components/PageContent/PageContent.astro
+++ b/website/src/components/PageContent/PageContent.astro
@@ -12,6 +12,7 @@ type Props = {
 
 const { frontmatter, headings, githubEditUrl } = Astro.props as Props;
 const title = frontmatter.title;
+const currentPage = Astro.url.pathname;
 ---
 
 <article id="article" class="content">
@@ -19,7 +20,7 @@ const title = frontmatter.title;
     <!-- TODO: add dropdown toc on mobile -->
     <!--     <nav class="block sm:hidden mb-8">
       <span>On this Page:</span>
-      <TableOfContents client:media="(max-width: 50em)" headings={headings} />
+      <TableOfContents client:media="(max-width: 50em)" headings={headings} currentPage={currentPage} />
     </nav> -->
     <div class="prose prose-invert max-w-full pb-8">
       <slot />
diff --git a/website/src/components/RightSidebar/RightSidebar.astro b/website/src/components/RightSidebar/RightSidebar.astro
index 7334b1eb..be0df4c6 100644
--- a/website/src/components/RightSidebar/RightSidebar.astro
+++ b/website/src/components/RightSidebar/RightSidebar.astro
@@ -9,9 +9,10 @@ type Props = {
 };
 
 const { headings, githubEditUrl } = Astro.props as Props;
+const currentPage = Astro.url.pathname;
 ---
 
 <nav aria-labelledby="grid-right">
-  <TableOfContents client:media="(min-width: 50em)" headings={headings} />
+  <TableOfContents client:media="(min-width: 50em)" headings={headings} currentPage={currentPage} />
   <MoreMenu editHref={githubEditUrl} />
 </nav>
diff --git a/website/src/components/RightSidebar/TableOfContents.tsx b/website/src/components/RightSidebar/TableOfContents.tsx
index ed48fcca..efb1d185 100644
--- a/website/src/components/RightSidebar/TableOfContents.tsx
+++ b/website/src/components/RightSidebar/TableOfContents.tsx
@@ -8,7 +8,10 @@ type ItemOffsets = {
   topOffset: number;
 };
 
-const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({ headings = [] }) => {
+const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[]; currentPage: string }> = ({
+  headings = [],
+  currentPage,
+}) => {
   const toc = useRef<any>();
   const onThisPageID = 'on-this-page-heading';
   const itemOffsets = useRef<ItemOffsets[]>([]);
@@ -73,7 +76,7 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
           .map((heading) => (
             <li className={`w-full`}>
               <a
-                href={`#${heading.slug}`}
+                href={`${currentPage}#${heading.slug}`}
                 onClick={onLinkClick}
                 className={`py-0.5 block cursor-pointer w-full border-l-4 border-header hover:bg-header ${
                   ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
diff --git a/website/src/pages/swatch/index.astro b/website/src/pages/swatch/index.astro
index 5c7d65ad..edf28f77 100644
--- a/website/src/pages/swatch/index.astro
+++ b/website/src/pages/swatch/index.astro
@@ -2,10 +2,14 @@
 import { getMyPatterns } from './list.json';
 
 import { Content } from '../../../../my-patterns/README.md';
+import HeadCommon from '../../components/HeadCommon.astro';
 
 const myPatterns = await getMyPatterns();
 ---
 
+<head>
+  <HeadCommon />
+</head>
 <body class="bg-slate-800">
   {
     Object.keys(myPatterns).length === 0 && (
@@ -17,14 +21,11 @@ const myPatterns = await getMyPatterns();
   <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-2 p-2 select-none">
     {
       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)}`}
-        >
+        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`#${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={`./${name}.png`} />
+          <img src={`./swatch/${name}.png`} />
         </a>
       ))
     }
diff --git a/website/src/repl/prebake.mjs b/website/src/repl/prebake.mjs
index 27bf521c..b0e1cc96 100644
--- a/website/src/repl/prebake.mjs
+++ b/website/src/repl/prebake.mjs
@@ -2,17 +2,16 @@ import { Pattern, toMidi, valueToMidi } from '@strudel.cycles/core';
 import { samples } from '@strudel.cycles/webaudio';
 
 export async function prebake() {
-  const { BASE_URL = '/' } = import.meta.env;
   // https://archive.org/details/SalamanderGrandPianoV3
   // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
   return await Promise.all([
-    samples(`${BASE_URL}piano.json`, `${BASE_URL}piano/`),
+    samples(`./piano.json`, `./piano/`),
     // https://github.com/sgossner/VCSL/
     // https://api.github.com/repositories/126427031/contents/
     // LICENSE: CC0 general-purpose
-    samples(`${BASE_URL}vcsl.json`, 'github:sgossner/VCSL/master/'),
-    samples(`${BASE_URL}tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/'),
-    samples(`${BASE_URL}EmuSP12.json`, `${BASE_URL}EmuSP12/`),
+    samples(`./vcsl.json`, 'github:sgossner/VCSL/master/'),
+    samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/'),
+    samples(`./EmuSP12.json`, `./EmuSP12/`),
     // samples('github:tidalcycles/Dirt-Samples/master'),
   ]);
 }