Merge branch 'main' into docs

website/astro.config.mjs

@@ -32,6 +32,12 @@ export default defineConfig({
   ],
   site: `https://strudel.tidalcycles.org`,
   base: '/',
+  vite: {
+    ssr: {
+      // Example: Force a broken package to skip SSR processing, if needed
+      external: ['fraction.js'], // https://github.com/infusion/Fraction.js/issues/51
+    },
+  },
 });
 
 /*

website/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@example/docs",
+  "name": "@strudel.cycles/website",
   "type": "module",
-  "version": "0.0.1",
+  "version": "0.6.0",
   "private": true,
   "scripts": {
     "dev": "astro dev",
@@ -21,12 +21,25 @@
     "@docsearch/react": "^3.1.0",
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
+    "@strudel.cycles/core": "workspace:*",
+    "@strudel.cycles/csound": "workspace:*",
+    "@strudel.cycles/midi": "workspace:*",
+    "@strudel.cycles/mini": "workspace:*",
+    "@strudel.cycles/osc": "workspace:*",
+    "@strudel.cycles/react": "workspace:*",
+    "@strudel.cycles/serial": "workspace:*",
+    "@strudel.cycles/soundfonts": "workspace:*",
+    "@strudel.cycles/tonal": "workspace:*",
+    "@strudel.cycles/transpiler": "workspace:*",
+    "@strudel.cycles/webaudio": "workspace:*",
+    "@strudel.cycles/xen": "workspace:*",
     "@supabase/supabase-js": "^1.35.3",
     "@tailwindcss/typography": "^0.5.8",
     "@types/node": "^18.0.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "astro": "^1.7.2",
+    "fraction.js": "^4.2.0",
     "nanoid": "^4.0.0",
     "preact": "^10.7.3",
     "react": "^18.2.0",
@@ -34,7 +47,8 @@
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
     "remark-toc": "^8.0.1",
-    "tailwindcss": "^3.2.4"
+    "tailwindcss": "^3.2.4",
+    "canvas": "^2.11.0"
   },
   "devDependencies": {
     "html-escaper": "^3.0.3"

website/src/config.ts

@@ -40,7 +40,7 @@ export const ALGOLIA = {
   apiKey: 'XXXXXXXXXX',
 };
 
-export type Sidebar = Record<typeof KNOWN_LANGUAGE_CODES[number], Record<string, { text: string; link: string }[]>>;
+export type Sidebar = Record<(typeof KNOWN_LANGUAGE_CODES)[number], Record<string, { text: string; link: string }[]>>;
 export const SIDEBAR: Sidebar = {
   en: {
     Tutorial: [

website/src/docs/MiniRepl.astro

@@ -1,7 +1,6 @@
 ---
 import { MiniRepl } from './MiniRepl';
 const { tune } = Astro.props;
-import '@strudel.cycles/react/dist/style.css';
 ---
 
 <MiniRepl tune={tune} client:only="react" />

website/src/docs/MiniRepl.jsx

@@ -8,7 +8,6 @@ if (typeof window !== 'undefined') {
   modules = evalScope(
     controls,
     import('@strudel.cycles/core'),
-    // import('@strudel.cycles/tone'),
     import('@strudel.cycles/tonal'),
     import('@strudel.cycles/mini'),
     import('@strudel.cycles/midi'),

website/src/languages.ts

@@ -6,5 +6,5 @@ export const langPathRegex = /\/([a-z]{2}-?[A-Z]{0,2})\//;
 export function getLanguageFromURL(pathname: string) {
   const langCodeMatch = pathname.match(langPathRegex);
   const langCode = langCodeMatch ? langCodeMatch[1] : 'en';
-  return langCode as typeof KNOWN_LANGUAGE_CODES[number];
+  return langCode as (typeof KNOWN_LANGUAGE_CODES)[number];
 }

website/src/pages/learn/samples.mdx

@@ -203,6 +203,21 @@ note("g2!2 <bb2 c3>!2, <c4@3 [<eb4 bb3> g4 f4]>")
 
 The sampler will always pick the closest matching sample for the current note!
 
+# Shabda
+
+If you don't want to select samples by hand, there is also the wonderful tool called [shabda](https://shabda.ndre.gr/).
+With it, you can enter any sample name(s) to query from [freesound.org](https://freesound.org/). Example:
+
+<MiniRepl
+  client:idle
+  tune={`await samples('https://shabda.ndre.gr/bass:4,hihat:4,rimshot:2.json?strudel=1')
+stack(
+  n("0 1 2 3").s('bass').slow(2),
+  n("0 1*2 2 3*2").s('hihat'),
+  n("~ 0 ~ 1").s('rimshot')
+).clip(1)`}
+/>
+
 # Sampler Effects
 
 Below are four different examples of sampler "effects" which are functions that can be used to change the behaviour of sample playback.

website/src/repl/Repl.css

@@ -1,5 +1,3 @@
-@import '@strudel.cycles/react/dist/style.css';
-
 .darken::before {
   content: ' ';
   position: fixed;

website/src/repl/Repl.jsx

@@ -16,7 +16,6 @@ import {
 import { createClient } from '@supabase/supabase-js';
 import { nanoid } from 'nanoid';
 import React, { createContext, useCallback, useEffect, useState } from 'react';
-import * as WebDirt from 'WebDirt';
 import './Repl.css';
 import { Footer } from './Footer';
 import { Header } from './Header';
@@ -47,7 +46,6 @@ const modules = [
 
 evalScope(
   controls, // sadly, this cannot be exported from core direclty
-  { WebDirt },
   ...modules,
 );
 
@@ -224,10 +222,10 @@ export function Repl({ embedded = false }) {
     }
     // generate uuid in the browser
     const hash = nanoid(12);
+    const shareUrl = window.location.origin + window.location.pathname + '?' + hash;
     const { data, error } = await supabase.from('code').insert([{ code: codeToShare, hash }]);
     if (!error) {
       setLastShared(activeCode || code);
-      const shareUrl = window.location.origin + '?' + hash;
       // copy shareUrl to clipboard
       await navigator.clipboard.writeText(shareUrl);
       const message = `Link copied to clipboard: ${shareUrl}`;

website/src/styles/index.css

@@ -1,5 +1,3 @@
-@import '@strudel.cycles/react/dist/style.css';
-
 body {
   background-color: #222;
 }

website/tailwind.config.cjs

@@ -3,7 +3,10 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 module.exports = {
-  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: [
+    './src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}',
+    '../packages/react/src/**/*.{html,js,jsx,md,mdx,ts,tsx}',
+  ],
   theme: {
     extend: {
       colors: {