diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..7151754 --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,88 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: ["main", "pipeline/hosted-strudel"] + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow only one concurrent deployment +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + # Build job + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + with: + submodules: recursive + + - name: Generate Presentation (Pandoc) + run: | + mkdir _site + docker run --rm -v ${{ github.workspace }}:/data pandoc/core \ + WORKSHOP.md -t revealjs -s -o _site/index.html \ + -V theme=black -V revealjs-url=https://unpkg.com/reveal.js \ + --slide-level=2 --css=doc/custom.css + + - name: Copy Assets + run: | + mkdir -p _site/doc + cp doc/* _site/doc/ + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: '20' + + - name: Install pnpm + uses: pnpm/action-setup@v2 + with: + version: 8 + + - name: Install Strudel Dependencies + working-directory: strudel + run: pnpm install + + - name: Build Strudel + working-directory: strudel + env: + STRUDEL_SITE: "https://alienmind.github.io" + STRUDEL_BASE: "/algorave/strudel/" + # We run prebuild (Generate docs etc), then build website + run: | + pnpm run prebuild + cd website + pnpm run build + + - name: Prepare Deployment Artifact + run: | + # Create directory for strudel and copy build result + mkdir -p _site/strudel + cp -r strudel/website/dist/* _site/strudel/ + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: '_site' + + # Deployment job + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + needs: build + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/deploy_slides.yml b/.github/workflows/deploy_slides.yml deleted file mode 100644 index 039bab9..0000000 --- a/.github/workflows/deploy_slides.yml +++ /dev/null @@ -1,47 +0,0 @@ -name: Deploy Slides to GitHub Pages - -on: - push: - branches: ["main", "feature/presentation"] - - # Allows you to run this workflow manually from the Actions tab - workflow_dispatch: - -# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages -permissions: - contents: read - pages: write - id-token: write - -# Allow only one concurrent deployment -concurrency: - group: "pages" - cancel-in-progress: false - -jobs: - # Build job - build: - runs-on: ubuntu-latest - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Setup Pages - uses: actions/configure-pages@v5 - - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - path: './web/public' - - # Deployment job - deploy: - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - runs-on: ubuntu-latest - needs: build - steps: - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore index adce1e6..97d97d0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,12 +1,14 @@ node_modules .DS_Store +# Generated Documentation & Examples # Generated Documentation & Examples web/public/examples/*.strudel -# web/public/presentation.html +dist/ # Next.js web/.next/ web/out/ web/build/ .next/ +.env \ No newline at end of file diff --git a/README.md b/README.md index 02955a7..5f88fc7 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ The project is a composite of: This "hub" aims to integrate a conglomerate of useful tools for Algorave: * [**strudel.cc**](https://strudel.cc) - The official Strudel website and player. +* [**Self-hosted Strudel**](https://alienmind.github.io/algorave/strudel/) - The local fork hosted on GitHub Pages. * [**strudel-mcp-server**](https://github.com/williamzujkowski/strudel-mcp-server) - MCP Server for Strudel (local integration) (see also [npm page](https://libraries.io/npm/@williamzujkowski%2Fstrudel-mcp-server)) * [**midi-to-strudel**](https://github.com/alienmind/MIDI-To-Strudel) - Scripts to convert MIDI files to Strudel code. * **Other useful stuff** - More integrations coming soon! diff --git a/WORKSHOP.md b/WORKSHOP.md index 0ee4ec7..03debd0 100644 --- a/WORKSHOP.md +++ b/WORKSHOP.md @@ -6,7 +6,7 @@ A **1-hour workshop** exploring how to create music with code using Strudel. ## đź”— Links -**Strudel**: [https://strudel.cc](https://strudel.cc) +**Strudel**: [https://strudel.cc](https://strudel.cc) || [Self-hosted option](https://alienmind.github.io/algorave/strudel/) (install the PWA for best performance) **Site Gallery / Tutorial**: [https://strudel.patternclub.org/workshop/site-gallery](https://strudel.patternclub.org/workshop/site-gallery) @@ -152,7 +152,7 @@ Add the server to your configuration (~/.gemini/settings.json) Open up side by side: * [MCP Strudel Website](https://mcp-strudel.mcp.mathplosion.com/strudel/) -* Optionally: [Strudel.cc](https://strudel.cc/) - not accessible with ECB laptops +* Optionally: Use my [Strudel.cc fork](https://alienmind.github.io/algorave/strudel/) (or [Official Strudel.cc](https://strudel.cc/) - not accessible with corporate laptops) * Any terminal with Gemini CLI * Pick the session_id from MCP, paste it to LLM as first prompt: "Use session_id: xxxx for Strudel operations" so it can interact with MCP server window diff --git a/docker-compose.yml b/docker-compose.yml index 40dfcf2..6a2275b 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -67,7 +67,7 @@ services: image: pandoc/core volumes: - .:/data - command: [ "WORKSHOP.md", "-t", "revealjs", "-s", "-o", "web/public/presentation.html", "-V", "theme=black", "-V", "revealjs-url=https://unpkg.com/reveal.js", "--slide-level=2", "--css=doc/custom.css" ] + command: [ "WORKSHOP.md", "-t", "revealjs", "-s", "-o", "dist/presentation.html", "-V", "theme=black", "-V", "revealjs-url=https://unpkg.com/reveal.js", "--slide-level=2", "--css=doc/custom.css" ] networks: algorave_network: diff --git a/package.json b/package.json index a0bd08c..3ee5683 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,8 @@ "docker:build-base": "docker build -t algorave/mcp-base:latest -f strudel-mcp-server/Dockerfile strudel-mcp-server", "docker:up": "npm run docker:build-base && docker-compose up --build", "docker:down": "docker-compose down", - "docs": "docker-compose run --rm docs && npm run sync-docs", + "prebuild": "mkdir -p dist", + "docs": "npm run prebuild && docker-compose run --rm docs && npm run sync-docs", "generate-diagram": "node scripts/generate-diagram.js", "sync-docs": "node scripts/sync-docs.js", "sync-examples": "node scripts/sync-examples.js", diff --git a/scripts/sync-docs.js b/scripts/sync-docs.js index e49c426..f12cd8c 100644 --- a/scripts/sync-docs.js +++ b/scripts/sync-docs.js @@ -2,7 +2,7 @@ const fs = require('fs'); const path = require('path'); const srcDocDir = path.join(__dirname, '..', 'doc'); -const destPublicDir = path.join(__dirname, '..', 'web', 'public'); +const destPublicDir = path.join(__dirname, '..', 'dist'); const destDocDir = path.join(destPublicDir, 'doc'); function copyFile(src, dest) { diff --git a/strudel b/strudel index 8a37197..8801c45 160000 --- a/strudel +++ b/strudel @@ -1 +1 @@ -Subproject commit 8a3719752fb418ad39a282df527a5cf3774e4e4c +Subproject commit 8801c45df82f10a20ae729c6761880332c82587d diff --git a/web/public/doc/algorave.png b/web/public/doc/algorave.png deleted file mode 100644 index 9ea8346..0000000 Binary files a/web/public/doc/algorave.png and /dev/null differ diff --git a/web/public/doc/architecture.png b/web/public/doc/architecture.png deleted file mode 100644 index d2db984..0000000 Binary files a/web/public/doc/architecture.png and /dev/null differ diff --git a/web/public/doc/codespaces.png b/web/public/doc/codespaces.png deleted file mode 100644 index aed9792..0000000 Binary files a/web/public/doc/codespaces.png and /dev/null differ diff --git a/web/public/doc/custom.css b/web/public/doc/custom.css deleted file mode 100644 index 6aaa7e9..0000000 --- a/web/public/doc/custom.css +++ /dev/null @@ -1,56 +0,0 @@ -/* Custom Reveal.js Overrides */ - -:root { - --r-main-font-size: 24px; - --r-background-color: #000000; -} - -.reveal { - background-color: #000000 !important; -} - -/* .reveal .slides section { - top: 0 !important; Removed to allow centering -} */ - -/* Limit Logo Size */ -img[src*="logo.png"] { - max-height: 200px !important; - width: auto !important; -} - -/* Hide captions */ -.reveal figcaption { - display: none !important; -} - -/* Adjust heading sizes */ -.reveal h1 { - font-size: 2em; -} - -.reveal h2 { - font-size: 1.5em; -} - -.reveal h3 { - font-size: 1.25em; -} - -/* Code block size and centering */ -.reveal pre { - margin: 20px auto !important; - box-shadow: none !important; -} - -.reveal pre code { - font-size: 0.8em; - max-height: 500px; -} - -/* Center lists relative to slide, but keep content left-aligned */ -.reveal ul, -.reveal ol { - display: inline-block; - text-align: left; -} \ No newline at end of file diff --git a/web/public/doc/gemini.png b/web/public/doc/gemini.png deleted file mode 100644 index db957db..0000000 Binary files a/web/public/doc/gemini.png and /dev/null differ diff --git a/web/public/doc/logo.png b/web/public/doc/logo.png deleted file mode 100644 index 7e228b1..0000000 Binary files a/web/public/doc/logo.png and /dev/null differ diff --git a/web/public/doc/meme.png b/web/public/doc/meme.png deleted file mode 100644 index f44afef..0000000 Binary files a/web/public/doc/meme.png and /dev/null differ diff --git a/web/public/doc/presentation.html b/web/public/doc/presentation.html deleted file mode 100644 index 7d36429..0000000 --- a/web/public/doc/presentation.html +++ /dev/null @@ -1,545 +0,0 @@ - - - - - - - - Algorave Workshop - - - - - - - - - - -
-
- -
-

Algorave Workshop

-

AlienMind

-

2026-01-05

-
- -
-
-

🌀 Algorave Workshop

-

https://github.com/alienmind/algorave

-
-Algorave Hub Logo - -
-

A 1.5 hour workshop exploring how to create music with code, using Strudel, a browser version of -TidalCycles.

-
-
-

⚡ Quick Setup

-

Get up and running in minutes:

- -
-
-

ďż˝ Opening Act

-

Viola Performance -(Vimeo)

-
-
-

⚡ Start Learning

-

Resources to get you started:

- -
-
-

�🎯 Expectations

-

Duration: 1.5 Hours

-

For Learners - What to bring: * Yourself * A laptop -(w/ Google Chrome) * Headphones

-

Learning Objectives: * Create music using Strudel -web editor with some help from LLMs + MCP * Play around with music vibe -coding * Overcome frustration of making music :))))))) * Even if it -sounds like shit it will be fun.

-
-
-

đź“… Schedule

-
    -
  • [10 mins] Welcome & Quick Setup & Opening -Act (Video)
    • -
  • [10 mins] Strudel & TidalCycles Theory
    • -
  • [30 mins] Hands-on Section (w/ Questions)
    • -
  • [30 mins] Share-out!
    • -
  • [10 mins] Recap
    • -
-
- -
-

🌟 Examples & Inspiration

- -
-
-

đź”— Additional Resources

- -
-
- -
-
-
-

🛠️ Technical Setup

- -
-
-

🏛️ Architecture

-
-Project Architecture - -
-
    -
  • Web App: Next.js (React) front-end for prompts and -playback.
    • -
  • MCP Server: Custom Strudel MCP Server for music -generation logic.
    • -
  • Docker: Containerized environment for -reproducibility.
    • -
-
-
-

🚀 Getting Started

-

Prerequisites

-
    -
  • Node.js (v18+)
    • -
  • Docker (Optional, for containerized run)
    • -
-

Installation

-
npm install
-npm run build
-

Running

-

Option 1: Local (Default)

-

Running locally is faster for development and doesn’t require -Docker.

-
npm start
-

This starts the web app at http://localhost:3001 and spawns the -MCP server as a subprocess.

-

Option 2: Docker

-

To run the entire stack in isolated containers:

-
npm run docker:up
-

Stopping

-

To stop the Docker containers:

-
npm stop
-# or
-npm run docker:down
-
-
-

⚙️ Configuration

-

Local Strudel Instance (Airgapped Mode)

-

You can run a local instance of Strudel (e.g. for offline usage) -instead of strudel.cc.

-
    -
  1. Enable Local Strudel: -
      -

    • For Local Run: Create web/.env and -add:

      -
      NEXT_PUBLIC_USE_LOCAL_STRUDEL=true
      • -

    • For Docker Run: The -docker-compose.yml is configured to use false -(external) by default. To change it, set the environment variable before -building:

      -
      NEXT_PUBLIC_USE_LOCAL_STRUDEL=true npm run docker:up -- --build
      • -
    2. -
  2. Access: -
      -
    • Web App: http://localhost:3001
      • -
    • Strudel (Direct): http://localhost:4321
      • -
    3. -
-
-
-

🎵 Usage

-
    -
  1. Start the App (Local or Docker).
    2. -
  2. Open http://localhost:3001.
    3. -
  3. Generate Music: -
      -
    • Enter a style (e.g., “techno”, “house”, “dnb”).
      • -
    • Click “Algorave!”.
      • -
    • Wait for the code to generate and the Strudel player to load.
      • -
    4. -
-
-
-

🛠️ Development

-
    -
  • VS Code DevContainer: Open this folder in VS Code -and click “Reopen in Container” for a configured environment.
    • -
  • npm run docker:up: Start everything in Docker.
    • -
  • npm start: Start locally in dev mode.
    • -
  • npm run docs: Generate this presentation -(Reveal.js).
    • -
-
-
-

đź”® Future Improvements

-
    -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
-
-
-

Credits

- -
-
-
- - - - - - - - - - - diff --git a/web/public/doc/strudel-mcp.png b/web/public/doc/strudel-mcp.png deleted file mode 100644 index 9a5418b..0000000 Binary files a/web/public/doc/strudel-mcp.png and /dev/null differ diff --git a/web/public/doc/strudel.jpg b/web/public/doc/strudel.jpg deleted file mode 100644 index 66e564e..0000000 Binary files a/web/public/doc/strudel.jpg and /dev/null differ diff --git a/web/public/doc/strudel_icon.png b/web/public/doc/strudel_icon.png deleted file mode 100644 index ec9ad8e..0000000 Binary files a/web/public/doc/strudel_icon.png and /dev/null differ diff --git a/web/public/presentation.html b/web/public/presentation.html deleted file mode 100644 index 5081d3d..0000000 --- a/web/public/presentation.html +++ /dev/null @@ -1,499 +0,0 @@ - - - - - - WORKSHOP - - - - - - - - - - -
-
- - -
-
-

🌀 Strudel / Algorave Workshop

-

Strudel

-

A 1-hour workshop exploring how to create music with -code using Strudel.

-
- -
-

đź“… Schedule

-
    -
  • [08 mins] Introduction: Algorave -Culture & Context
    • -
  • [20 mins] Part 1: The Basics & -Demo: Walkthrough of core functionalities
    • -
  • [20 mins] Part 2a: Vibecoders -track: If you just wanna play with LLM+MCP -(BYOK!)
    • -
  • [20 mins] Part 2b: Livecoders -track: If you already know some music
    • -
  • [02 mins] Part 3: Strudel Awards: -maybe ;-)
    • -
-
-
-

đź“š Introduction

-

What is Strudel?

-
-

Strudel Dessert

-
-
    -
  • Web-based Live Coding: A port of -TidalCycles (Haskell) to JavaScript - Open Source and -community-driven!
    • -
  • Zero Footprint: No installation required!
    • -
  • Portability: Make music anywhere, on any device -with a browser.
    • -
-
-
- -

❔Why Algorave?

-

Algorithm + Rave = Algorave

-
    -
  • Live Creation: Music and visuals generated in -real-time.
    • -
  • Transparency: “Show us your screens” - the code is -part of the performance.
    • -
  • Diverse Tooling: While we use Strudel, others -perform with TidalCycles, SonicPi, -SuperCollider, etc.
    • -
  • Visuals: Optional! Often coded live using -Hydra, -P5.js, etc.
    • -
-
- -DJ_Dave & Char Stiles Livecoding Performance @ Algowave Algorave - -

-DJ_Dave & Char Stiles Livecoding Performance @ Algowave Algorave, -2021 -

-
-
-
- -

🚧 Side note - Algorave Hub -(WIP)

-

I’m working on a side project - that integrates strudel knowledge -base + LLM+MCP powered “composition” for “vibe” music coding. https://github.com/alienmind/algorave

-

Architecture

-

Unfortunately not ready yet! - Stay tuned for the next -workshop!

-
-

PLAN FOR TODAY: real livecoding and/or “some” vibe -coding (w/ alternative implementation)

-
-
-
-

đź“– Tutorial

-
-

Follow along here: http://strudel.patternclub.org/workshop/site-gallery

-
-
    -
  1. The basics - Making your first sounds + -mininotation
    2. -
  2. Rhythms, Polyrythms
    3. -
  3. Sound and Synths libraries
    4. -
  4. Some more advanced examples
    5. -
-
-
- -

✋ Livecoders vs 👇 Vibecoders

-
    -
  • Raise your hand âś‹ if you already know some music -and wanna try livecoding.
    • -
  • Lower your hand 👇 if you don’t know any music or -wanna be part of the vibe coding team.
    • -
-
-

Real Coders vs Live Coders

-
-
-

IN REALITY: no need to choose, you can be both -;-)

-
-
-
-

🤖 Part 2a: Vibecoders Track

-

So you want to “vibecode” some Strudel? Let’s start by setting up an -SSE enabled MCP server

- -
-
- -

Skip next slide: if you want to reuse my setup by using a GitHub codespace / devcontainer

-

Click on Code -> Codespaces -> Create codespace on main

-
-

GitHub Codespace

-
-
-
-

Setting up MCP server with Gemini CLI

-

Open your terminal and run:

-
-
$ npm install -g gemini-chat-cli@latest
-
-Add the server to your configuration (~/.gemini/settings.json) -
-
{
-  ...,
-  "general": {
-    "previewFeatures": true
-  },
-  "mcpServers": {
-    "mcp-strudel": {
-      "url": "https://mcp-strudel.mcp.mathplosion.com/sse/",
-      "timeout": 30000,
-      "trust": true
-    }
-  }
-}
-
-
-
- -

Vibe coding session!

-

Open up side by side:

-
    -
  • MCP -Strudel Website
    • -
  • Optionally: Strudel.cc - not -accessible with ECB laptops
    • -
  • Any terminal with Gemini CLI
    • -
  • Pick the session_id from MCP, paste it to LLM as first prompt: “Use -session_id: xxxx for Strudel operations” so it can interact with MCP -server window
    • -
-
-

Strudel MCP -Gemini CLI

-
-

Try this prompt: Try “Write an amazing house track -using Strudel”.

-
-
-

🎹 Part 2b: Livecoders Track

-
    -
  • Follow Along: We will do some real -livecoding. Feel free to copy what I do and modify it, or write your -own!
    • -
  • Experiment: Explore the examples, change numbers, -upload new sounds, break things…
    • -
  • Resources: Use the examples -or the gallery, -more free sounds available in freesound.org
    • -
-

Remember - ⚡ENERGY: YES! ✨QUALITY: NO! - you’re not looking for a -perfect polished track, but something that feels good to you :)

-
-
-

🙋 Volunteers Jam & 🏆 Contest

-

Raise your hand if you wanna show what you’ve made!

-
-
-

đź”— References

-

Please see REFERENCES.md -for a complete list of links and resources used in this workshop.

-
-
-
- - - - - - - - - - -