Merge branch 'main' into docs

.prettierrc

@@ -7,7 +7,7 @@
   "jsxSingleQuote": false,
   "trailingComma": "all",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
+  "bracketSameLine": false,
   "arrowParens": "always",
   "proseWrap": "preserve",
   "htmlWhitespaceSensitivity": "css",

CONTRIBUTING.md

@@ -82,6 +82,10 @@ Please report any problems you've had with the setup instructions!
 ## Code Style
 
 To make sure the code changes only where it should, we are using prettier to unify the code style.
+
+- You can format all files at once by running `pnpm prettier` from the project root
+- Run `pnpm format-check` from the project root to check if all files are well formatted
+
 If you use VSCode, you can
 
 1. install [the prettier extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
@@ -89,6 +93,24 @@ If you use VSCode, you can
 3. Choose "Configure Default Formatter..."
 4. Select prettier
 
+## ESLint
+
+To prevent unwanted runtime errors, this project uses [eslint](https://eslint.org/).
+
+- You can check for lint errors by running `pnpm lint`
+
+There are also eslint extensions / plugins for most editors.
+
+## Running Tests
+
+- Run all tests with `pnpm test`
+- Run all tests with UI using `pnpm test-ui`
+
+## Running all CI Checks
+
+When opening a PR, the CI runner will automatically check the code style and eslint, as well as run all tests.
+You can run the same check with `pnpm check`
+
 ## Package Workflow
 
 The project is split into multiple [packages](https://github.com/tidalcycles/strudel/tree/main/packages) with independent versioning.

my-patterns/README.md

@@ -20,11 +20,8 @@ Example: <https://felixroos.github.io/strudel/swatch/>
 ### 6. edit `website/astro.config.mjs` to use site: `https://<your-username>.github.io` and base `/strudel`, like this
 
 ```js
-export default defineConfig({
-  /* ... rest of config ... */
-  site: 'https://<your-username>.github.io',
-  base: '/strudel',
-});
+const site = 'https://<your-username>.github.io';
+const base = '/strudel';
 ```
 
 ### 7. commit & push the changes

packages/core/controls.mjs

@@ -4,7 +4,7 @@ Copyright (C) 2022 Strudel contributors - see <https://github.com/tidalcycles/st
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-import { Pattern, sequence } from './pattern.mjs';
+import { Pattern, sequence, registerControl } from './pattern.mjs';
 
 const controls = {};
 const generic_params = [
@@ -828,26 +828,26 @@ const generic_params = [
 
 // TODO: slice / splice https://www.youtube.com/watch?v=hKhPdO0RKDQ&list=PL2lW1zNIIwj3bDkh-Y3LUGDuRcoUigoDs&index=13
 
-const _name = (name, ...pats) => sequence(...pats).withValue((x) => ({ [name]: x }));
-
-const _setter = (func, name) =>
-  function (...pats) {
+const makeControl = function (name) {
+  const func = (...pats) => sequence(...pats).withValue((x) => ({ [name]: x }));
+  const setter = function (...pats) {
     if (!pats.length) {
       return this.fmap((value) => ({ [name]: value }));
     }
     return this.set(func(...pats));
   };
+  Pattern.prototype[name] = setter;
+  registerControl(name, func);
+  return func;
+};
 
 generic_params.forEach(([type, name, description]) => {
-  controls[name] = (...pats) => _name(name, ...pats);
-  Pattern.prototype[name] = _setter(controls[name], name);
+  controls[name] = makeControl(name);
 });
 
 // create custom param
 controls.createParam = (name) => {
-  const func = (...pats) => _name(name, ...pats);
-  Pattern.prototype[name] = _setter(func, name);
-  return (...pats) => _name(name, ...pats);
+  return makeControl(name);
 };
 
 controls.createParams = (...names) =>

packages/core/pattern.mjs

@@ -21,6 +21,141 @@ let stringParser;
 // intended to use with mini to automatically interpret all strings as mini notation
 export const setStringParser = (parser) => (stringParser = parser);
 
+const alignments = ['in', 'out', 'mix', 'squeeze', 'squeezeout', 'trig', 'trigzero'];
+
+const methodRegistry = [];
+const getterRegistry = [];
+const controlRegistry = [];
+const controlSubscribers = [];
+const composifiedRegistry = [];
+
+//////////////////////////////////////////////////////////////////////
+// Magic for supporting higher order composition of method chains
+
+// Dresses the given (unary) function with methods for composition chaining, so e.g.
+// `fast(2).iter(4)` composes to pattern functions into a new one.
+function composify(func) {
+  if (!func.__composified) {
+    for (const [name, method] of methodRegistry) {
+      func[name] = method;
+    }
+    for (const [name, getter] of getterRegistry) {
+      Object.defineProperty(func, name, getter);
+    }
+    func.__composified = true;
+    composifiedRegistry.push(func);
+  } else {
+    console.log('Warning: attempt at composifying a function more than once');
+  }
+  return func;
+}
+
+export function registerMethod(name, addAlignments = false, addControls = false) {
+  if (addAlignments || addControls) {
+    // This method needs to make its 'this' object available to chained alignments and/or
+    // control parameters, so it has to be implemented as a getter
+    const getter = {
+      get: function () {
+        const func = this;
+        const wrapped = function (...args) {
+          const composed = (pat) => func(pat)[name](...args);
+          return composify(composed);
+        };
+
+        if (addAlignments) {
+          for (const alignment of alignments) {
+            wrapped[alignment] = function (...args) {
+              const composed = (pat) => func(pat)[name][alignment](...args);
+              return composify(composed);
+            };
+            for (const [controlname, controlfunc] of controlRegistry) {
+              wrapped[alignment][controlname] = function (...args) {
+                const composed = (pat) => func(pat)[name][alignment](controlfunc(...args));
+                return composify(composed);
+              };
+            }
+          }
+        }
+        if (addControls) {
+          for (const [controlname, controlfunc] of controlRegistry) {
+            wrapped[controlname] = function (...args) {
+              const composed = (pat) => func(pat)[name](controlfunc(...args));
+              return composify(composed);
+            };
+          }
+        }
+        return wrapped;
+      },
+    };
+
+    getterRegistry.push([name, getter]);
+
+    // Add to functions already 'composified'
+    for (const composified of composifiedRegistry) {
+      Object.defineProperty(composified, name, getter);
+    }
+  } else {
+    // No chained alignments/controls needed, so we can just add as a plain method,
+    // probably more efficient this way?
+    const method = function (...args) {
+      const func = this;
+      const composed = (pat) => func(pat)[name](...args);
+      return composify(composed);
+    };
+
+    methodRegistry.push([name, method]);
+
+    // Add to functions already 'composified'
+    for (const composified of composifiedRegistry) {
+      composified[name] = method;
+    }
+  }
+}
+
+export function registerControl(controlname, controlfunc) {
+  registerMethod(controlname);
+  controlRegistry.push([controlname, controlfunc]);
+  for (const subscriber of controlSubscribers) {
+    subscriber(controlname, controlfunc);
+  }
+}
+
+export function withControls(func) {
+  for (const [controlname, controlfunc] of controlRegistry) {
+    func(controlname, controlfunc);
+  }
+  controlSubscribers.push(func);
+}
+
+export function addToPrototype(name, func) {
+  Pattern.prototype[name] = func;
+  registerMethod(name);
+}
+
+export function curryPattern(func, arity = func.length) {
+  const fn = function curried(...args) {
+    if (args.length >= arity) {
+      return func.apply(this, args);
+    }
+
+    const partial = function (...args2) {
+      return curried.apply(this, args.concat(args2));
+    };
+    if (args.length == arity - 1) {
+      return composify(partial);
+    }
+
+    return partial;
+  };
+  if (arity == 1) {
+    composify(fn);
+  }
+  return fn;
+}
+
+//////////////////////////////////////////////////////////////////////
+// The core Pattern class
+
 /** @class Class representing a pattern. */
 export class Pattern {
   /**
@@ -643,7 +778,9 @@ export class Pattern {
    * @noAutocomplete
    */
   get firstCycleValues() {
-    return this.firstCycle().map((hap) => hap.value);
+    return this.sortHapsByPart()
+      .firstCycle()
+      .map((hap) => hap.value);
   }
 
   /**
@@ -693,7 +830,7 @@ export class Pattern {
     const otherPat = reify(other);
     return this.fmap((a) => otherPat.fmap((b) => func(a)(b))).squeezeJoin();
   }
-  _opSqueezeOut(other, func) {
+  _opSqueezeout(other, func) {
     const thisPat = this;
     const otherPat = reify(other);
     return otherPat.fmap((a) => thisPat.fmap((b) => func(b)(a))).squeezeJoin();
@@ -860,11 +997,11 @@ function groupHapsBy(eq, haps) {
 const congruent = (a, b) => a.spanEquals(b);
 // Pattern<Hap<T>> -> Pattern<Hap<T[]>>
 // returned pattern contains arrays of congruent haps
-Pattern.prototype.collect = function () {
+addToPrototype('collect', function () {
   return this.withHaps((haps) =>
     groupHapsBy(congruent, haps).map((_haps) => new Hap(_haps[0].whole, _haps[0].part, _haps, {})),
   );
-};
+});
 
 /**
  * Selects indices in in stacked notes.
@@ -872,12 +1009,12 @@ Pattern.prototype.collect = function () {
  * note("<[c,eb,g]!2 [c,f,ab] [d,f,ab]>")
  * .arpWith(haps => haps[2])
  * */
-Pattern.prototype.arpWith = function (func) {
+addToPrototype('arpWith', function (func) {
   return this.collect()
     .fmap((v) => reify(func(v)))
     .innerJoin()
     .withHap((h) => new Hap(h.whole, h.part, h.value.value, h.combineContext(h.value)));
-};
+});
 
 /**
  * Selects indices in in stacked notes.
@@ -885,9 +1022,9 @@ Pattern.prototype.arpWith = function (func) {
  * note("<[c,eb,g]!2 [c,f,ab] [d,f,ab]>")
  * .arp("0 [0,2] 1 [0,2]").slow(2)
  * */
-Pattern.prototype.arp = function (pat) {
+addToPrototype('arp', function (pat) {
   return this.arpWith((haps) => pat.fmap((i) => haps[i % haps.length]));
-};
+});
 
 //////////////////////////////////////////////////////////////////////
 // compose matrix functions
@@ -985,15 +1122,15 @@ function _composeOp(a, b, func) {
     func: [(a, b) => b(a)],
   };
 
-  const hows = ['In', 'Out', 'Mix', 'Squeeze', 'SqueezeOut', 'Trig', 'Trigzero'];
+  const hows = alignments.map((x) => x.charAt(0).toUpperCase() + x.slice(1));
 
   // generate methods to do what and how
   for (const [what, [op, preprocess]] of Object.entries(composers)) {
     // make plain version, e.g. pat._add(value) adds that plain value
     // to all the values in pat
-    Pattern.prototype['_' + what] = function (value) {
+    addToPrototype('_' + what, function (value) {
       return this.fmap((x) => op(x, value));
-    };
+    });
 
     // make patternified monster version
     Object.defineProperty(Pattern.prototype, what, {
@@ -1007,7 +1144,7 @@ function _composeOp(a, b, func) {
 
         // add methods to that function for each behaviour
         for (const how of hows) {
-          wrapper[how.toLowerCase()] = function (...other) {
+          const howfunc = function (...other) {
             var howpat = pat;
             other = sequence(other);
             if (preprocess) {
@@ -1025,19 +1162,41 @@ function _composeOp(a, b, func) {
             }
             return result;
           };
+
+          for (const [controlname, controlfunc] of controlRegistry) {
+            howfunc[controlname] = (...args) => howfunc(controlfunc(...args));
+          }
+          wrapper[how.toLowerCase()] = howfunc;
         }
         wrapper.squeezein = wrapper.squeeze;
 
+        for (const [controlname, controlfunc] of controlRegistry) {
+          wrapper[controlname] = (...args) => wrapper.in(controlfunc(...args));
+        }
+
         return wrapper;
       },
     });
 
-    // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
-    for (const how of hows) {
-      Pattern.prototype[how.toLowerCase()] = function (...args) {
-        return this.set[how.toLowerCase()](args);
-      };
-    }
+    registerMethod(what, true, true);
+  }
+
+  // Default op to 'set', e.g. pat.squeeze(pat2) = pat.set.squeeze(pat2)
+  for (const howLower of alignments) {
+    // Using a 'get'ted function so that all the controls are added
+    Object.defineProperty(Pattern.prototype, howLower, {
+      get: function () {
+        const pat = this;
+        const howfunc = function (...args) {
+          return pat.set[howLower](args);
+        };
+        for (const [controlname, controlfunc] of controlRegistry) {
+          howfunc[controlname] = (...args) => howfunc(controlfunc(...args));
+        }
+        return howfunc;
+      },
+    });
+    registerMethod(howLower, false, true);
   }
 
   // binary composers
@@ -1049,36 +1208,36 @@ function _composeOp(a, b, func) {
    *   .struct("x ~ x ~ ~ x ~ x ~ ~ ~ x ~ x ~ ~")
    *   .slow(4)
    */
-  Pattern.prototype.struct = function (...args) {
+  addToPrototype('struct', function (...args) {
     return this.keepif.out(...args);
-  };
-  Pattern.prototype.structAll = function (...args) {
+  });
+  addToPrototype('structAll', function (...args) {
     return this.keep.out(...args);
-  };
+  });
   /**
    * Returns silence when mask is 0 or "~"
    *
    * @example
    * note("c [eb,g] d [eb,g]").mask("<1 [0 1]>").slow(2)
    */
-  Pattern.prototype.mask = function (...args) {
+  addToPrototype('mask', function (...args) {
     return this.keepif.in(...args);
-  };
-  Pattern.prototype.maskAll = function (...args) {
+  });
+  addToPrototype('maskAll', function (...args) {
     return this.keep.in(...args);
-  };
+  });
   /**
    * Resets the pattern to the start of the cycle for each onset of the reset pattern.
    *
    * @example
    * s("<bd lt> sd, hh*4").reset("<x@3 x(3,8)>")
    */
-  Pattern.prototype.reset = function (...args) {
+  addToPrototype('reset', function (...args) {
     return this.keepif.trig(...args);
-  };
-  Pattern.prototype.resetAll = function (...args) {
+  });
+  addToPrototype('resetAll', function (...args) {
     return this.keep.trig(...args);
-  };
+  });
   /**
    * Restarts the pattern for each onset of the restart pattern.
    * While reset will only reset the current cycle, restart will start from cycle 0.
@@ -1086,12 +1245,12 @@ function _composeOp(a, b, func) {
    * @example
    * s("<bd lt> sd, hh*4").restart("<x@3 x(3,8)>")
    */
-  Pattern.prototype.restart = function (...args) {
+  addToPrototype('restart', function (...args) {
     return this.keepif.trigzero(...args);
-  };
-  Pattern.prototype.restartAll = function (...args) {
+  });
+  addToPrototype('restartAll', function (...args) {
     return this.keep.trigzero(...args);
-  };
+  });
 })();
 
 // aliases
@@ -1336,36 +1495,68 @@ export function pm(...args) {
   polymeter(...args);
 }
 
-export const mask = curry((a, b) => reify(b).mask(a));
-export const struct = curry((a, b) => reify(b).struct(a));
-export const superimpose = curry((a, b) => reify(b).superimpose(...a));
+export const mask = curryPattern((a, b) => reify(b).mask(a));
+export const struct = curryPattern((a, b) => reify(b).struct(a));
+export const superimpose = curryPattern((a, b) => reify(b).superimpose(...a));
+
+const methodToFunction = function (name, addAlignments = false) {
+  const func = curryPattern((a, b) => reify(b)[name](a));
+
+  withControls((controlname, controlfunc) => {
+    func[controlname] = function (...pats) {
+      return func(controlfunc(...pats));
+    };
+  });
+
+  if (addAlignments) {
+    for (const alignment of alignments) {
+      func[alignment] = curryPattern((a, b) => reify(b)[name][alignment](a));
+      withControls((controlname, controlfunc) => {
+        func[alignment][controlname] = function (...pats) {
+          return func[alignment](controlfunc(...pats));
+        };
+      });
+    }
+  }
+
+  return func;
+};
 
 // operators
-export const set = curry((a, b) => reify(b).set(a));
-export const keep = curry((a, b) => reify(b).keep(a));
-export const keepif = curry((a, b) => reify(b).keepif(a));
-export const add = curry((a, b) => reify(b).add(a));
-export const sub = curry((a, b) => reify(b).sub(a));
-export const mul = curry((a, b) => reify(b).mul(a));
-export const div = curry((a, b) => reify(b).div(a));
-export const mod = curry((a, b) => reify(b).mod(a));
-export const pow = curry((a, b) => reify(b).pow(a));
-export const band = curry((a, b) => reify(b).band(a));
-export const bor = curry((a, b) => reify(b).bor(a));
-export const bxor = curry((a, b) => reify(b).bxor(a));
-export const blshift = curry((a, b) => reify(b).blshift(a));
-export const brshift = curry((a, b) => reify(b).brshift(a));
-export const lt = curry((a, b) => reify(b).lt(a));
-export const gt = curry((a, b) => reify(b).gt(a));
-export const lte = curry((a, b) => reify(b).lte(a));
-export const gte = curry((a, b) => reify(b).gte(a));
-export const eq = curry((a, b) => reify(b).eq(a));
-export const eqt = curry((a, b) => reify(b).eqt(a));
-export const ne = curry((a, b) => reify(b).ne(a));
-export const net = curry((a, b) => reify(b).net(a));
-export const and = curry((a, b) => reify(b).and(a));
-export const or = curry((a, b) => reify(b).or(a));
-export const func = curry((a, b) => reify(b).func(a));
+export const set = methodToFunction('set', true);
+export const keep = methodToFunction('keep', true);
+export const keepif = methodToFunction('keepif', true);
+export const add = methodToFunction('add', true);
+export const sub = methodToFunction('sub', true);
+export const mul = methodToFunction('mul', true);
+export const div = methodToFunction('div', true);
+export const mod = methodToFunction('mod', true);
+export const pow = methodToFunction('pow', true);
+export const band = methodToFunction('band', true);
+export const bor = methodToFunction('bor', true);
+export const bxor = methodToFunction('bxor', true);
+export const blshift = methodToFunction('blshift', true);
+export const brshift = methodToFunction('brshift', true);
+export const lt = methodToFunction('lt', true);
+export const gt = methodToFunction('gt', true);
+export const lte = methodToFunction('lte', true);
+export const gte = methodToFunction('gte', true);
+export const eq = methodToFunction('eq', true);
+export const eqt = methodToFunction('eqt', true);
+export const ne = methodToFunction('ne', true);
+export const net = methodToFunction('net', true);
+export const and = methodToFunction('and', true);
+export const or = methodToFunction('or', true);
+export const func = methodToFunction('func', true);
+
+// alignments
+// export const in = methodToFunction('in'); // reserved word :(
+export const out = methodToFunction('out');
+export const mix = methodToFunction('mix');
+export const squeeze = methodToFunction('squeeze');
+export const squeezeout = methodToFunction('squeezeout');
+export const trig = methodToFunction('trig');
+export const trigzero = methodToFunction('trigzero');
 
 /**
  * Registers a new pattern method. The method is added to the Pattern class + the standalone function is returned from register.
@@ -1384,9 +1575,10 @@ export function register(name, func) {
     return result;
   }
   const arity = func.length;
-  var pfunc; // the patternified function
 
-  pfunc = function (...args) {
+  registerMethod(name);
+
+  const pfunc = function (...args) {
     args = args.map(reify);
     const pat = args[args.length - 1];
     if (arity === 1) {
@@ -1402,8 +1594,12 @@ export function register(name, func) {
         .map((_, i) => args[i] ?? undefined);
       return func(...args, pat);
     };
-    mapFn = curry(mapFn, null, arity - 1);
-    return right.reduce((acc, p) => acc.appLeft(p), left.fmap(mapFn)).innerJoin();
+    mapFn = curryPattern(mapFn, arity - 1);
+
+    const app = (acc, p) => acc.appLeft(p);
+    const start = left.fmap(mapFn);
+
+    return right.reduce(app, start).innerJoin();
   };
 
   Pattern.prototype[name] = function (...args) {
@@ -1428,7 +1624,7 @@ export function register(name, func) {
 
   // toplevel functions get curried as well as patternified
   // because pfunc uses spread args, we need to state the arity explicitly!
-  return curry(pfunc, null, arity);
+  return curryPattern(pfunc, arity);
 }
 
 //////////////////////////////////////////////////////////////////////

packages/core/test/pattern.test.mjs

@@ -45,6 +45,8 @@ import {
   rev,
   time,
   run,
+  hitch,
+  set,
 } from '../index.mjs';
 
 import { steady } from '../signal.mjs';
@@ -204,7 +206,7 @@ describe('Pattern', () => {
         ),
       );
     });
-    it('can SqueezeOut() structure', () => {
+    it('can squeezeout() structure', () => {
       sameFirst(
         sequence(1, [2, 3]).add.squeezeout(10, 20, 30),
         sequence([11, [12, 13]], [21, [22, 23]], [31, [32, 33]]),
@@ -252,7 +254,7 @@ describe('Pattern', () => {
         ),
       );
     });
-    it('can SqueezeOut() structure', () => {
+    it('can squeezeout() structure', () => {
       sameFirst(sequence(1, [2, 3]).keep.squeezeout(10, 20, 30), sequence([1, [2, 3]], [1, [2, 3]], [1, [2, 3]]));
     });
   });
@@ -294,7 +296,7 @@ describe('Pattern', () => {
         ),
       );
     });
-    it('can SqueezeOut() structure', () => {
+    it('can squeezeout() structure', () => {
       sameFirst(sequence(1, [2, 3]).keepif.squeezeout(true, true, false), sequence([1, [2, 3]], [1, [2, 3]], silence));
     });
   });
@@ -929,6 +931,14 @@ describe('Pattern', () => {
     });
   });
   describe('alignments', () => {
+    it('Can combine controls', () => {
+      sameFirst(s('bd').set.in.n(3), s('bd').n(3));
+      sameFirst(s('bd').set.squeeze.n(3, 4), sequence(s('bd').n(3), s('bd').n(4)));
+    });
+    it('Can combine functions with alignmed controls', () => {
+      sameFirst(s('bd').apply(fast(2).set(n(3))), s('bd').fast(2).set.in.n(3));
+      sameFirst(s('bd').apply(fast(2).set.in.n(3)), s('bd').fast(2).set.in.n(3));
+    });
     it('Can squeeze arguments', () => {
       expect(sequence(1, 2).add.squeeze(4, 5).firstCycle()).toStrictEqual(sequence(5, 6, 6, 7).firstCycle());
     });
@@ -959,4 +969,16 @@ describe('Pattern', () => {
       sameFirst(s('a', 'b').hurry(2), s('a', 'b').fast(2).speed(2));
     });
   });
+  describe('composable functions', () => {
+    it('Can compose functions', () => {
+      sameFirst(sequence(3, 4).fast(2).rev().fast(2), fast(2).rev().fast(2)(sequence(3, 4)));
+    });
+    it('Can compose by method chaining operators with controls', () => {
+      sameFirst(s('bd').apply(set.n(3).fast(2)), s('bd').set.n(3).fast(2));
+    });
+    it('Can compose by method chaining operators and alignments with controls', () => {
+      sameFirst(s('bd').apply(set.in.n(3).fast(2)), s('bd').set.n(3).fast(2));
+      //      sameFirst(s('bd').apply(set.squeeze.n(3).fast(2)), s('bd').set.squeeze.n(3).fast(2));
+    });
+  });
 });

packages/core/util.mjs

@@ -139,7 +139,7 @@ export const removeUndefineds = (xs) => xs.filter((x) => x != undefined);
 export const flatten = (arr) => [].concat(...arr);
 
 export const id = (a) => a;
-export const constant = (a, b) => a;
+export const constant = curry((a, b) => a);
 
 export const listRange = (min, max) => Array.from({ length: max - min + 1 }, (_, i) => i + min);
 

pnpm-lock.yaml

@@ -387,6 +387,7 @@ importers:
       react-dom: ^18.2.0
       rehype-autolink-headings: ^6.1.1
       rehype-slug: ^5.0.1
+      rehype-urls: ^1.1.1
       remark-toc: ^8.0.1
       tailwindcss: ^3.2.4
       vite-plugin-pwa: ^0.14.1
@@ -428,6 +429,7 @@ importers:
       react-dom: 18.2.0_react@18.2.0
       rehype-autolink-headings: 6.1.1
       rehype-slug: 5.1.0
+      rehype-urls: 1.1.1
       remark-toc: 8.0.1
       tailwindcss: 3.2.4
     devDependencies:
@@ -7432,6 +7434,10 @@ packages:
       web-namespaces: 2.0.1
     dev: false
 
+  /hast-util-has-property/1.0.4:
+    resolution: {integrity: sha512-ghHup2voGfgFoHMGnaLHOjbYFACKrRh9KFttdCzMCbFoBMJXiNi2+XTrPP8+q6cDJM/RSqlCfVWrjp1H201rZg==}
+    dev: false
+
   /hast-util-has-property/2.0.1:
     resolution: {integrity: sha512-X2+RwZIMTMKpXUzlotatPzWj8bspCymtXH3cfG3iQKV+wPF53Vgaqxi/eLqGck0wKq1kS9nvoB1wchbCPEL8sg==}
     dev: false
@@ -7775,6 +7781,10 @@ packages:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
     dev: true
 
+  /is-arrayish/0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+    dev: false
+
   /is-bigint/1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
     dependencies:
@@ -11110,6 +11120,14 @@ packages:
       unified: 10.1.2
     dev: false
 
+  /rehype-urls/1.1.1:
+    resolution: {integrity: sha512-ct9Kb/nAL6oe/O5fDc0xjiqm8Z9xgXdorOdDhZAWx7awucyiuYXU7Dax+23Gu24nnGwtdaCW6zslKAYzlEW1lw==}
+    dependencies:
+      hast-util-has-property: 1.0.4
+      stdopt: 2.2.0
+      unist-util-visit: 1.4.1
+    dev: false
+
   /rehype/12.0.1:
     resolution: {integrity: sha512-ey6kAqwLM3X6QnMDILJthGvG1m1ULROS9NT4uG9IDCuv08SFyLlreSuvOa//DgEvbXx62DS6elGVqusWhRUbgw==}
     dependencies:
@@ -11839,6 +11857,12 @@ packages:
       tslib: 2.5.0
     dev: false
 
+  /stdopt/2.2.0:
+    resolution: {integrity: sha512-D/p41NgXOkcj1SeGhfXOwv9z1K6EV3sjAUY5aeepVbgEHv7DpKWLTjhjScyzMWAQCAgUQys1mjH0eArm4cjRGw==}
+    dependencies:
+      is-arrayish: 0.3.2
+    dev: false
+
   /stream-connect/1.0.2:
     resolution: {integrity: sha512-68Kl+79cE0RGKemKkhxTSg8+6AGrqBt+cbZAXevg2iJ6Y3zX4JhA/sZeGzLpxW9cXhmqAcE7KnJCisUmIUfnFQ==}
     engines: {node: '>=0.10.0'}
@@ -12707,6 +12731,10 @@ packages:
     resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
     dev: false
 
+  /unist-util-is/3.0.0:
+    resolution: {integrity: sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==}
+    dev: false
+
   /unist-util-is/5.2.0:
     resolution: {integrity: sha512-Glt17jWwZeyqrFqOK0pF1Ded5U3yzJnFr8CG1GMjCWTp9zDo2p+cmD6pWbZU8AgM5WU3IzRv6+rBwhzsGh6hBQ==}
     dev: false
@@ -12755,6 +12783,12 @@ packages:
       '@types/unist': 2.0.6
     dev: false
 
+  /unist-util-visit-parents/2.1.2:
+    resolution: {integrity: sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==}
+    dependencies:
+      unist-util-is: 3.0.0
+    dev: false
+
   /unist-util-visit-parents/5.1.3:
     resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
     dependencies:
@@ -12762,6 +12796,12 @@ packages:
       unist-util-is: 5.2.0
     dev: false
 
+  /unist-util-visit/1.4.1:
+    resolution: {integrity: sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==}
+    dependencies:
+      unist-util-visit-parents: 2.1.2
+    dev: false
+
   /unist-util-visit/4.1.2:
     resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
     dependencies:

website/astro.config.mjs

@@ -1,24 +1,47 @@
 import { defineConfig } from 'astro/config';
 import preact from '@astrojs/preact';
 import react from '@astrojs/react';
-
 import mdx from '@astrojs/mdx';
 
 import remarkToc from 'remark-toc';
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
+import rehypeUrls from 'rehype-urls';
 
 import tailwind from '@astrojs/tailwind';
 import AstroPWA from '@vite-pwa/astro';
 // import { visualizer } from 'rollup-plugin-visualizer';
 
+const site = `https://strudel.tidalcycles.org`; // root url without a path
+const base = '/'; // base path of the strudel site
+
+// 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 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() {
+  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('#')) {
+        return;
+      }
+      const baseWithSlash = base.endsWith('/') ? base : base + '/';
+      const absoluteUrl = baseWithSlash + path + url.href;
+      // console.log(url.href + ' -> ', absoluteUrl);
+      return absoluteUrl;
+    })(tree);
+  };
+}
 const options = {
   // See https://mdxjs.com/advanced/plugins
   remarkPlugins: [
     remarkToc,
     // E.g. `remark-frontmatter`
   ],
-  rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
+  rehypePlugins: [rehypeSlug, [rehypeAutolinkHeadings, { behavior: 'append' }], absoluteAnchors],
 };
 
 // https://astro.build/config
@@ -97,8 +120,8 @@ export default defineConfig({
       },
     }),
   ],
-  site: `https://strudel.tidalcycles.org`,
-  base: '/',
+  site,
+  base,
   vite: {
     ssr: {
       // Example: Force a broken package to skip SSR processing, if needed
@@ -106,13 +129,3 @@ export default defineConfig({
     },
   },
 });
-
-/*
-  build: {
-    outDir: '../out',
-    sourcemap: true,
-    rollupOptions: {
-      plugins: [visualizer({ template: 'treemap' })],
-    },
-  },
-  */

website/package.json

@@ -48,6 +48,7 @@
     "react-dom": "^18.2.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
+    "rehype-urls": "^1.1.1",
     "remark-toc": "^8.0.1",
     "tailwindcss": "^3.2.4"
   },

website/src/components/RightSidebar/RightSidebar.astro

@@ -9,7 +9,9 @@ type Props = {
 };
 
 const { headings, githubEditUrl } = Astro.props as Props;
-const currentPage = Astro.url.pathname;
+let currentPage = Astro.url.pathname;
+// remove slash before #
+currentPage = currentPage.endsWith('/') ? currentPage.slice(0, -1) : currentPage;
 ---
 
 <nav aria-labelledby="grid-right" class="w-64 text-foreground">

website/src/docs/docs.css

@@ -10,27 +10,33 @@
   height: 70px;
   visibility: hidden;
   pointer-events: none;
-  position: relative;
 }
 
-.prose h1:hover .icon-link,
-.prose h2:hover .icon-link,
-.prose h3:hover .icon-link,
-.prose h4:hover .icon-link,
-.prose h5:hover .icon-link,
-.prose h6:hover .icon-link,
-.icon.icon-link:hover {
+.icon.icon-link {
+  visibility: hidden;
+}
+
+.prose h1:hover .icon.icon-link,
+.prose h2:hover .icon.icon-link,
+.prose h3:hover .icon.icon-link,
+.prose h4:hover .icon.icon-link,
+.prose h5:hover .icon.icon-link,
+.prose h6:hover .icon.icon-link {
   visibility: visible;
 }
-.icon.icon-link {
-  background-image: url(./link.svg);
-  background-repeat: no-repeat;
-  width: 16px;
-  height: 16px;
-  display: block;
-  position: absolute;
-  visibility: hidden;
-  margin-left: -20px;
-  width: 20px;
-  margin-top: 8px;
+
+.prose h1 > a,
+.prose h2 > a,
+.prose h3 > a,
+.prose h4 > a,
+.prose h5 > a,
+.prose h6 > a {
+  text-decoration: none !important;
+}
+
+.icon.icon-link::after {
+  content: '#';
+  margin-left: 8px;
+  font-size: 0.9em;
+  opacity: 50%;
 }

website/src/pages/functions/intro.mdx

@@ -71,3 +71,5 @@ You can freely mix JS patterns, mini patterns and values! For example, this patt
 
 While mini notation is almost always shorter, it only has a handful of modifiers: \* / ! @.
 When using JS patterns, there is a lot more you can do.
+
+What [Pattern Constructors](/learn/factories) does Strudel offer?

website/src/pages/functions/value-modifiers.mdx

@@ -160,3 +160,5 @@ x(sine.range(0, 200)).y(cosine.range(0, 200));
 />
 
 Note that these params will not do anything until you give them meaning in your custom output!
+
+From modifying parameters we transition to the concept of [Signals](/learn/signals).

website/src/pages/learn/accumulation.mdx

@@ -31,3 +31,5 @@ import { JsDoc } from '../../docs/JsDoc';
 ## stut
 
 <JsDoc client:idle name="stut" h={0} />
+
+There are also [Tonal Modifiers](/learn/tonal).

website/src/pages/learn/code.mdx

@@ -15,7 +15,7 @@ Let's look at this simple example again. What do we notice?
 <MiniRepl client:idle tune={`freq("220 275 330 440").s("sine")`} />
 
 - We have a word `freq` which is followed by some brackets `()` with some words/letters/numbers inside, surrounded by quotes `"a3 c#4 e4 a4"`.
-- Then we have a dot `.` followed by another similar piece of code `s("sawtooth")`.
+- Then we have a dot `.` followed by another similar piece of code `s("sine")`.
 - We can also see these texts are _highlighted_ using colours: word `freq` is purple, the brackets `()` are grey, and the content inside the `""` are green.
 
 What happens if we try to 'break' this pattern in different ways?

website/src/pages/learn/conditional-modifiers.mdx

@@ -59,3 +59,5 @@ import { JsDoc } from '../../docs/JsDoc';
 ## invert
 
 <JsDoc client:idle name="invert" h={0} />
+
+After Conditional Modifiers, let's see what [Accumulation Modifiers](/learn/accumulation) have to offer.

website/src/pages/learn/csound.mdx

@@ -150,3 +150,5 @@ In the future, the integration could be improved by passing all patterned contro
 This could work by a unique [channel](https://kunstmusik.github.io/icsc2022-csound-web/tutorial2-interacting-with-csound/#step-4---writing-continuous-data-channels)
 for each value. Channels could be read [like this](https://github.com/csound/csound/blob/master/Android/CsoundForAndroid/CsoundAndroidExamples/src/main/res/raw/multitouch_xy.csd).
 Also, it might make sense to have a standard library of csound instruments for strudel's effects.
+
+Now, let's dive into the [Functional JavaScript API](/functions/intro)

website/src/pages/learn/effects.mdx

@@ -146,3 +146,5 @@ global effects use the same chain for all events of the same orbit:
 ## roomsize
 
 <JsDoc client:idle name="roomsize" h={0} />
+
+Next, we'll look at strudel's support for [Csound](/learn/csound).

website/src/pages/learn/factories.mdx

@@ -64,3 +64,5 @@ As a chained function:
 ## run
 
 <JsDoc client:idle name="run" h={0} punchcard />
+
+After Pattern Constructors, let's see what [Time Modifiers](/learn/time-modifiers) are available.

website/src/pages/learn/input-output.mdx

@@ -69,3 +69,5 @@ The following functions can be used with [SuperDirt](https://github.com/musikinf
 Please refer to [Tidal Docs](https://tidalcycles.org/) for more info.
 
 <br />
+
+But can we use Strudel [offline](/learn/pwa)?

website/src/pages/learn/mini-notation.mdx

@@ -58,7 +58,7 @@ Try adding or removing notes and notice how the tempo changes!
 
 <MiniRepl client:idle tune={`note("c d e f g a b")`} punchcard />
 
-Note that the overall duration of time does not change, and instead each note length descreases.
+Note that the overall duration of time does not change, and instead each note length decreases.
 This is a key idea, as it illustrates the 'Cycle' in TidalCycles!
 
 Each space-separated note in this sequence is an _event_.
@@ -103,7 +103,7 @@ Contrary to division, a sequence can be sped up by multiplying it by a number us
 
 <MiniRepl client:idle tune={`note("[e5 b4 d5 c5]*2")`} punchcard />
 
-The multiplication by two here means that the sequence will play twice a cycle.
+The multiplication by two here means that the sequence will play twice per cycle.
 
 As with divisions, multiplications can be decimal (`*2.75`):
 
@@ -235,3 +235,5 @@ Starting with this one `n`, can you make a _pattern string_ that uses every sing
 <MiniRepl client:idle tune={`n("60")`} />
 
 <br />
+
+Next: How do [Samples](/learn/samples) play into this?

website/src/pages/learn/pwa.mdx

@@ -7,3 +7,5 @@ layout: ../../layouts/MainLayout.astro
 
 You can use Strudel even without a network! When you first visit the [Strudel REPL](strudel.tidalcycles.org/),
 your browser will download the whole web app including documentation.
+
+Ok, what are [Patterns](/technical-manual/patterns) all about?

website/src/pages/learn/samples.mdx

@@ -322,3 +322,5 @@ Sampler effects are functions that can be used to change the behaviour of sample
 ### speed
 
 <JsDoc client:idle name="speed" h={0} />
+
+After samples, let's see what [Synths](/learn/synths) afford us.

website/src/pages/learn/signals.mdx

@@ -106,3 +106,5 @@ These methods add random behavior to your Patterns.
 ## always
 
 <JsDoc client:idle name="Pattern.always" h={0} />
+
+Next up: [Conditional Modifiers](/learn/conditional-modifiers)

website/src/pages/learn/strudel-vs-tidal.mdx

@@ -144,3 +144,5 @@ You can get the same tempo as tidal with:
 ```
 note("c a f e").fast(.5625);
 ```
+
+Next up: the [REPL](/technical-manual/repl)

website/src/pages/learn/synths.mdx

@@ -9,7 +9,7 @@ import { JsDoc } from '../../docs/JsDoc';
 # Synths
 
 For now, [samples](/learn/samples) are the main way to play with Strudel.
-In future, more powerful synthesis capabilities will be added.
+In the future, more powerful synthesis capabilities will be added.
 If in the meantime you want to dive deeper into audio synthesis with Tidal, you will need to [install SuperCollider and SuperDirt](https://tidalcycles.org/docs/).
 
 ## Playing synths with `s`
@@ -27,3 +27,5 @@ The power of patterns allows us to sequence any _param_ independently:
 
 Now we not only pattern the notes, but the sound as well!
 `sawtooth` `square` and `triangle` are the basic waveforms available in `s`.
+
+Next up: [Audio Effects](/learn/effects)...

website/src/pages/learn/time-modifiers.mdx

@@ -105,3 +105,5 @@ Some of these have equivalent operators in the Mini Notation:
 ## ribbon
 
 <JsDoc client:idle name="ribbon" h={0} />
+
+Apart from modifying time, there are ways to [Control Parameters](functions/value-modifiers).

website/src/pages/learn/tonal.mdx

@@ -70,3 +70,5 @@ Together with layer, struct and voicings, this can be used to create a basic bac
   x => x.rootNotes(2).note().s('sawtooth').cutoff(800)
 )`}
 />
+
+So far, we've stayed within the browser. [MIDI and OSC](/learn/input-output) are ways to break out of it.

website/src/pages/technical-manual/alignment.mdx

@@ -45,3 +45,5 @@ This makes way for other ways to align the pattern, and several are already defi
 - `trigzero` is similar to `trig`, but the pattern is 'triggered' from its very first cycle, rather than from the current cycle. `trig` and `trigzero` therefore only give different results where the leftmost pattern differs from one cycle to the next.
 
 We will save going deeper into the background, design and practicalities of these alignment functions for future publications. However in the next section, we take them as a case study for looking at the different design affordances offered by Haskell to Tidal, and JavaScript to Strudel.
+
+Ok, so how do Strudel and Tidal [compare](/learn/strudel-vs-tidal)?

website/src/pages/technical-manual/docs.mdx

@@ -74,3 +74,5 @@ Documentation is written with [jsdoc](https://jsdoc.app/) comments. Example:
 - To regenerate the `doc.json` file manually, run `npm run jsdoc-json`
 - The file is used by the `JsDoc` component to find the documentation by name
 - Also, it is used for the `examples.test.mjs` snapshot test
+
+How does Strudel do its [Testing](/technical-manual/testing)?

website/src/pages/technical-manual/patterns.mdx

@@ -37,3 +37,5 @@ Each event has a value, a begin time and an end time, where time is represented
 Note that the query function is not just a way to access a pattern, but true to the principles of functional programming, is the pattern itself. This means that in theory there is no way to change a pattern, it is opaque as a pure function. In practice though, Strudel and Tidal are all about transforming patterns, so how is this done? The answer is, by replacing the pattern with a new one, that calls the old one. This new one is only able to manipulate the query before passing it to the old pattern, and manipulate the results from it before returning them to caller. But, this is enough to support all the temporal and structural manipulations provided by Strudel (and Tidal's) extensive library of functions.
 
 The above examples do not represent how Strudel is used in practice. In the live coding editor, the user only has to type in the pattern itself, the querying will be handled by the scheduler. The scheduler will repeatedly query the pattern for events, which are then scheduled as sound synthesis or other event triggers.
+
+Can we [align](/technical-manual/alignment) patterns?

website/src/pages/technical-manual/repl.mdx

@@ -186,3 +186,5 @@ function onTrigger(hap, deadline, duration) {
 ```
 
 The above example will create an `OscillatorNode` for each event, where the frequency is controlled by the `note` param. In essence, this is how the WebAudio API output of Strudel works, only with many more parameters to control synths, samples and effects.
+
+I want to help, how do I contribute to the [Docs](/technical-manual/docs)?

website/src/repl/Repl.css

@@ -10,14 +10,14 @@
   opacity: 0.5;
 }
 
-.cm-content {
+#code .cm-content {
   padding-top: 12px !important;
   padding-left: 8px !important;
 }
 
-.cm-scroller {
+#code .cm-scroller {
   padding-bottom: 50vh;
 }
-.cm-line > * {
+#code .cm-line > * {
   background: var(--lineBackground);
 }