Merge branch 'main' into docs

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;
 }