Merge pull request #345 from tidalcycles/fix-prebake-base-path

Fix prebake base path

website/astro.config.mjs

@@ -31,7 +31,7 @@ export default defineConfig({
     tailwind(),
   ],
   site: `https://strudel.tidalcycles.org`,
-  base: '',
+  base: '/',
 });
 
 /*

website/src/components/HeadCommon.astro

@@ -1,5 +1,8 @@
 ---
 import '../styles/index.css';
+
+const { BASE_URL } = import.meta.env;
+const base = BASE_URL;
 ---
 
 <!-- Global Metadata -->
@@ -7,9 +10,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 +22,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>

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">

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

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 />

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>

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]

website/src/pages/examples/index.astro

@@ -1,16 +1,20 @@
 ---
 import * as tunes from '../../../src/repl/tunes.mjs';
+import HeadCommon from '../../components/HeadCommon.astro';
 ---
 
+<head>
+  <HeadCommon />
+</head>
 <body class="bg-slate-800">
   <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(tunes).map(([name, tune]) => (
-        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`/#${btoa(tune)}`}>
+        <a class="rounded-md bg-slate-900 hover:bg-slate-700 cursor-pointer relative" href={`./#${btoa(tune)}`}>
           <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={`/img/example-${name}.png`} />
+          <img src={`./img/example-${name}.png`} />
         </a>
       ))
     }

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

@@ -42,7 +42,7 @@ This interactive tutorial will guide you through the basics of Strudel.
 To see and hear what Strudel can do, visit the [Strudel REPL](https://strudel.tidalcycles.org/) and click the Shuffle icon in the top menu bar.
 You can get a feel for Strudel by browsing and editing these examples and clicking the Refresh icon to update.
 
-You can also browse through the examples [here](/examples).
+You can also browse through the examples [here](./examples).
 
 Alternatively, you can get a taste of what Strudel can do by clicking play on this track:
 

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 && (
@@ -19,12 +23,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={`./#${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>
       ))
     }

website/src/repl/prebake.mjs

@@ -1,17 +1,17 @@
 import { Pattern, toMidi, valueToMidi } from '@strudel.cycles/core';
 import { samples } from '@strudel.cycles/webaudio';
 
-export async function prebake({ baseDir = '' } = {}) {
+export async function prebake() {
   // https://archive.org/details/SalamanderGrandPianoV3
   // License: CC-by http://creativecommons.org/licenses/by/3.0/ Author: Alexander Holm
   return await Promise.all([
-    samples('/piano.json', `${baseDir}/piano/`),
+    samples(`./piano.json`, `./piano/`),
     // https://github.com/sgossner/VCSL/
     // https://api.github.com/repositories/126427031/contents/
     // LICENSE: CC0 general-purpose
-    samples('/vcsl.json', 'github:sgossner/VCSL/master/'),
+    samples(`./vcsl.json`, 'github:sgossner/VCSL/master/'),
-    samples('/tidal-drum-machines.json', 'github:ritchse/tidal-drum-machines/main/machines/'),
+    samples(`./tidal-drum-machines.json`, 'github:ritchse/tidal-drum-machines/main/machines/'),
-    samples('/EmuSP12.json', `${baseDir}/EmuSP12/`),
+    samples(`./EmuSP12.json`, `./EmuSP12/`),
     // samples('github:tidalcycles/Dirt-Samples/master'),
   ]);
 }