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

.eleventyignore

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

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

@@ -1,5 +1,26 @@
 # Rainfly
+<div style="display: flex; justify-content: center">
+  <img src="src/lib/assets/splash.svg" alt="Rainfly logo" />
+</div>
 
-WIP
+**An AudioWorklet DSP Playground for Chromium Web Audio API Project (2024)**
 
-This is the directory for Rainfly - 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,36 @@
+{
+  "name": "rainfly",
+  "version": "1.0.0-beta",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite 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>

src/rainfly/src/lib/actions/click-outside.js

@@ -0,0 +1,13 @@
+export const nodes = new Map();
+
+/**
+ * Listen for clicks outside of the node and call the callback.
+ * @param {HTMLElement} node - The node to listen for clicks outside of
+ * @param {Function} callback - callback when click outside occurs
+ * @return {Object.<string, Function>} Object with destroy method to remove
+ */
+export const clickOutside = (node, callback) => {
+  nodes.set(node, callback);
+
+  return {destroy: () => nodes.delete(node)};
+};