diff --git a/README.md b/README.md index dd857537..f8b1ab2c 100644 --- a/README.md +++ b/README.md @@ -15,25 +15,13 @@ An experiment in making a [Tidal](https://github.com/tidalcycles/tidal/) using w After cloning the project, you can run the REPL locally: ```bash -pnpm run setup -pnpm run repl +pnpm i +pnpm dev ``` ## Using Strudel In Your Project -There are multiple npm packages you can use to use strudel, or only parts of it, in your project: - -- [`core`](./packages/core/): tidal pattern engine -- [`mini`](./packages/mini): mini notation parser + core binding -- [`transpiler`](./packages/transpiler): user code transpiler -- [`webaudio`](./packages/webaudio): webaudio output -- [`osc`](./packages/osc): bindings to communicate via OSC -- [`midi`](./packages/midi): webmidi bindings -- [`serial`](./packages/serial): webserial bindings -- [`tonal`](./packages/tonal): tonal functions -- ... [and there are more](./packages/) - -Click on the package names to find out more about each one. +Read more about how to use Strudel in your Project [here](https://strudel.cc/technical-manual/project-start). ## Contributing diff --git a/packages/web/README.md b/packages/web/README.md index b3d2f6fe..8b567729 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -7,20 +7,17 @@ This package provides an easy to use bundle of multiple strudel packages for the Save this code as a `.html` file and double click it: ```html - + + - ``` -With the help of [skypack](https://www.skypack.dev/), you don't need a bundler nor a server. - As soon as you call `initStrudel()`, all strudel functions are made available. In this case, we are using the `note` function to create a pattern. To actually play the pattern, you have to append `.play()` to the end. @@ -79,4 +76,4 @@ There will probably be an escapte hatch for that in the future. ## More Examples -Check out the examples folder for more examples, both using plain html and vite! \ No newline at end of file +Check out the examples folder for more examples, both using plain html and vite! diff --git a/website/src/config.ts b/website/src/config.ts index d6ecb559..012a6542 100644 --- a/website/src/config.ts +++ b/website/src/config.ts @@ -103,9 +103,9 @@ export const SIDEBAR: Sidebar = { ], Development: [ { text: 'Strudel in your Project', link: 'technical-manual/project-start' }, + { text: 'Packages', link: 'technical-manual/packages' }, { text: 'REPL', link: 'technical-manual/repl' }, { text: 'Sounds', link: 'technical-manual/sounds' }, - { text: 'Packages', link: 'technical-manual/packages' }, { text: 'Docs', link: 'technical-manual/docs' }, { text: 'Testing', link: 'technical-manual/testing' }, // { text: 'Internals', link: 'technical-manual/internals' }, diff --git a/website/src/pages/technical-manual/packages.mdx b/website/src/pages/technical-manual/packages.mdx index 5f272b68..9a067317 100644 --- a/website/src/pages/technical-manual/packages.mdx +++ b/website/src/pages/technical-manual/packages.mdx @@ -26,6 +26,8 @@ These packages give you a batteries-included point of getting started, and most - [repl](https://github.com/tidalcycles/strudel/tree/main/packages/repl): The Strudel REPL as a web component. - [web](https://github.com/tidalcycles/strudel/tree/main/packages/web): Strudel library for the browser, without UI. +To find out more about these two, read [Using Strudel in Your Project](/technical-manual/project-start) + ### Essential Packages These package are the most essential. You might want to use all of those if you're using strudel in your project: diff --git a/website/src/pages/technical-manual/project-start.mdx b/website/src/pages/technical-manual/project-start.mdx index 638065ea..db5c601b 100644 --- a/website/src/pages/technical-manual/project-start.mdx +++ b/website/src/pages/technical-manual/project-start.mdx @@ -38,7 +38,7 @@ To make sure your code is not lost, you can also use the long url: That long URL can just be copy pasted from the URL bar when you're on the strudel website. It always reflects the latest evaluation of your code. -### Inside an iframe via `@strudel/embed` +### @strudel/embed To simplify the process of emebdding via an iframe, you can use the package `@strudel/embed`: @@ -73,11 +73,11 @@ n("<0 1 2 3 4>*8").scale('G4 minor') .lpf(perlin.range(200,20000).slow(4))`}> -For alternative ways to load this package, see [@strudel/embed README](https://github.com/tidalcycles/strudel/tree/main/packages/embed#strudelembed). +For alternative ways to load this package, see the [@strudel/embed README](https://github.com/tidalcycles/strudel/tree/main/packages/embed#strudelembed). -### Without an iframe via `@strudel/repl` +### @strudel/repl -Loading strudel directly in your site looks similar to the iframe variant: +Loading strudel directly in your site, without an iframe, looks similar to the iframe variant: ```html @@ -120,3 +120,32 @@ The upside of using the repl without an iframe is that you can pin the strudel v ``` This will guarantee your pattern wont break due to changes to the strudel project in the future. + +For more info on this package, see the [@strudel/repl README](https://github.com/tidalcycles/strudel/tree/main/packages/repl#strudelrepl). + +## With your own UI + +The above approach assumes you want to use the builtin [codemirror](https://codemirror.net/) editor. +If you'd rather use your own UI, you can use the `@strudel/web` package: + +```html + + + + + +``` + +For more info on this package, see the [@strudel/web README](https://github.com/tidalcycles/strudel/tree/main/packages/web#strudelweb). + +## Via npm + +[All the packages and many more are available on npm under the @strudel namespace](https://www.npmjs.com/search?q=%40strudel). +There are actually many more packages you can use to have fine grained control over what you use and what not. +To use these packages, you have to use a bundler that supports es modules, like [vite](https://vitejs.dev/). + +To find out more about the purpose of each package, see [Packages](/technical-manual/packages)