Rainfly - An AudioWorklet DSP Playground [MVP] (#395)

* create rainfly directory

* Add rainfly code from https://github.com/Kizjkre/rainfly

* [Untested] Add build script

* [Untested] Add install script before building rainfly

* [Untested] Use install instead of a clean install

* [Untested] Update node version

* add rainfly link to audioworklet page eleventy

* fix svelte output paths

* add compile run button and mouse scroll hack

* add PR fixes and code health improvements

* newline deletion

* fix modal splash.svg

* add license + small changes

---------

Co-authored-by: Tristan <24882191+Kizjkre@users.noreply.github.com>

.eleventyignore

@@ -1,3 +1,3 @@
 node_modules/
 ./src/archive/
-**/README.md
+**/README.md

.github/workflows/main.yml

@@ -19,7 +19,7 @@ jobs:
     - name: Install Node.js
       uses: actions/setup-node@v3
       with:
-        node-version: 16
+        node-version: 18
     - name: npm install and build
       run: |
         npm install

package.json

@@ -8,6 +8,7 @@
     "build": "npm run clean && run-p build:*",
     "build:eleventy": "ELEVENTY_ENV=production eleventy",
     "build:postcss": "ELEVENTY_ENV=production postcss src/styles/*.css --dir _site",
+    "build:rainfly": "cd src/rainfly && npm run build",
     "start": "run-p start:*",
     "start:eleventy": "eleventy --serve",
     "start:postcss": "postcss src/styles/*.css --dir _site --watch",

src/_data/build_info.json

@@ -1 +1 @@
-{"version":"3.2.0","revision":"e45e5d0","lastUpdated":"2024-08-07","copyrightYear":2024}
+{"version":"3.2.0","revision":"7cb0fdf","lastUpdated":"2024-10-17","copyrightYear":2024}

src/_data/landing_data.yaml

@@ -18,9 +18,9 @@
     - title: Canopy
       description: Web Audio code editor and visual debugger
       href: https://hoch.github.io/canopy/
-#    - title: Audio Worklets Playground
-#      description: Audio Worklet playground
-#      href: \#
+    - title: Rainfly
+      description: AudioWorklet DSP Playground and Visualizer
+      href: rainfly/
 
 - title: Demos
   entries:

src/rainfly/.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:svelte/recommended",
+    "google"
+  ],
+  "ignorePatterns": [
+    "build/",
+    ".svelte-kit/",
+    "dist/",
+    "static/"
+  ],
+  "globals": {
+    "window": "readonly",
+    "document": "readonly"
+  },
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {}
+}

src/rainfly/.gitignore

@@ -0,0 +1,29 @@
+node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# IDE
+.idea
+.vscode
+
+# Lockfiles
+package-lock.json
+bun.lockb

src/rainfly/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

src/rainfly/README.md

@@ -0,0 +1,26 @@
+# Rainfly
+<div style="display: flex; justify-content: center">
+  <img src="src/lib/assets/splash.svg" alt="Rainfly logo" />
+</div>
+
+**An AudioWorklet DSP Playground for Chromium Web Audio API Project (2024)**
+
+## Developing
+Install dependencies with `npm install` (or `pnpm install` or `yarn`), and then start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of Rainfly:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.

src/rainfly/jsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

src/rainfly/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "rainfly",
+  "version": "1.0.0-beta",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "prebuild": "npm i",
+    "build": "vite build",
+    "postbuild": "rm -rf ../../_site/rainfly/* && cp -r build/* ../../_site/rainfly/ && rm -rf build/",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "lint": "eslint  --fix ."
+  },
+  "devDependencies": {
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/eslint": "^9.6.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-google": "^0.14.0",
+    "eslint-plugin-svelte": "^2.36.0",
+    "globals": "^15.0.0",
+    "monaco-editor": "^0.50.0",
+    "postcss": "^8.4.40",
+    "svelte": "^4.2.7",
+    "svelte-check": "^3.6.0",
+    "tailwindcss": "^3.4.7",
+    "typescript": "^5.0.0",
+    "vite": "^5.0.3"
+  },
+  "type": "module",
+  "dependencies": {
+    "@sveltejs/adapter-static": "^3.0.4",
+    "jszip": "^3.10.1",
+    "monaco-vim": "^0.4.1"
+  }
+}

src/rainfly/postcss.config.js

@@ -0,0 +1,7 @@
+// noinspection JSUnusedGlobalSymbols
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/rainfly/src/app.css

@@ -0,0 +1,173 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@keyframes left-bounce-expand-in {
+  0% {
+    transform: translateX(-100%) scaleY(0.5);
+    opacity: 0;
+  }
+
+  80% {
+    transform: translateX(40%) scaleY(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(0.25rem);
+  }
+}
+
+@keyframes left-bounce-shrink-out {
+  0% {
+    transform: translateX(0.25rem);
+  }
+
+  20% {
+    transform: translateX(40%) scaleY(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(-100%) scaleY(0.5);
+    opacity: 0;
+  }
+}
+
+@keyframes right-bounce-in {
+  0% {
+    transform: translateX(100%) scaleY(0.5);
+    opacity: 0;
+  }
+
+  80% {
+    transform: translateX(-5rem) scaleY(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes right-bounce-out {
+  0% {
+    transform: translateX(0);
+  }
+
+  20% {
+    transform: translateX(-5rem) scaleY(1);
+    opacity: 1;
+  }
+
+  100% {
+    transform: translateX(100%) scaleY(0.5);
+    opacity: 0;
+  }
+}
+
+@keyframes unfold {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    max-height: 10rem;
+  }
+}
+
+@keyframes fold {
+  0% {
+    max-height: 10rem;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+    transform: scale(.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes disappear {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  100% {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+body, html {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+  width: 100vw;
+}
+
+.fab-in {
+  animation: left-bounce-expand-in 0.25s ease-in-out forwards;
+}
+
+.fab-out {
+  animation: left-bounce-shrink-out 0.25s ease-in-out forwards;
+}
+
+.fold {
+  @apply overflow-hidden;
+  animation: fold 0.2s ease-in-out forwards;
+}
+
+.unfold {
+  @apply overflow-hidden;
+  animation: unfold 0.2s ease-in-out forwards;
+}
+
+.toast-in {
+  animation: right-bounce-in 0.25s ease-in-out forwards;
+}
+
+.toast-out {
+  animation: right-bounce-out 0.25s ease-in-out forwards;
+}
+
+.tooltip-in {
+  animation: appear 0.05s ease-in-out forwards;
+}
+
+.tooltip-out {
+  animation: disappear 0.05s ease-in-out forwards;
+}
+
+.vimBar {
+  @apply w-full h-6 px-1 border-none bg-gray-200 text-sm items-center;
+  display: flex !important;
+}
+
+.vimBar input {
+  @apply outline-none bg-transparent border-none;
+}

src/rainfly/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/rainfly/src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>