Merge branch 'main' into eefano-brotli

pnpm-lock.yaml

@@ -804,6 +804,9 @@ importers:
       astro:
         specifier: ^5.1.9
         version: 5.1.9(@types/node@22.10.10)(jiti@2.4.2)(lightningcss@1.29.1)(rollup@2.79.2)(terser@5.37.0)(typescript@5.7.3)(yaml@2.7.0)
+      base64url-universal:
+        specifier: ^2.0.0
+        version: 2.0.0
       claviature:
         specifier: ^0.1.0
         version: 0.1.0
@@ -3297,6 +3300,14 @@ packages:
   base64-js@1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
 
+  base64url-universal@2.0.0:
+    resolution: {integrity: sha512-6Hpg7EBf3t148C3+fMzjf+CHnADVDafWzlJUXAqqqbm4MKNXbsoPdOkWeRTjNlkYG7TpyjIpRO1Gk0SnsFD1rw==}
+    engines: {node: '>=14'}
+
+  base64url@3.0.1:
+    resolution: {integrity: sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A==}
+    engines: {node: '>=6.0.0'}
+
   before-after-hook@2.2.3:
     resolution: {integrity: sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==}
 
@@ -11008,6 +11019,12 @@ snapshots:
 
   base64-js@1.5.1: {}
 
+  base64url-universal@2.0.0:
+    dependencies:
+      base64url: 3.0.1
+
+  base64url@3.0.1: {}
+
   before-after-hook@2.2.3: {}
 
   bin-links@4.0.4:
@@ -12978,7 +12995,7 @@ snapshots:
   jake@10.9.2:
     dependencies:
       async: 3.2.6
-      chalk: 4.1.0
+      chalk: 4.1.2
       filelist: 1.0.4
       minimatch: 3.1.2
 

website/package.json

@@ -53,6 +53,7 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "astro": "^5.1.9",
+    "base64url-universal": "^2.0.0",
     "claviature": "^0.1.0",
     "date-fns": "^4.1.0",
     "hs2js": "0.1.0",

website/src/repl/useReplContext.jsx

@@ -38,6 +38,7 @@ import { getRandomTune, initCode, loadModules, shareCode } from './util.mjs';
 import './Repl.css';
 import { setInterval, clearInterval } from 'worker-timers';
 import { getMetadata } from '../metadata_parser';
+import { encode as base64urlencode } from 'base64url-universal';
 import { debugAudiograph } from './audiograph';
 
 const { latestCode, maxPolyphony, audioDeviceName, multiChannelOrbits } = settingsMap.get();
@@ -101,13 +102,29 @@ export function useReplContext() {
         }
       },
       beforeEval: () => audioReady,
-      afterEval: (all) => {
+      afterEval: async (all) => {
         const { code } = all;
         //post to iframe parent (like Udels) if it exists...
         window.parent?.postMessage(code);
 
         setLatestCode(code);
-        window.location.hash = '#' + code2hash(code);
+        //window.location.hash = '#' + code2hash(code);
+
+        // Compress the script and encode it with base64url
+        const encoded = new TextEncoder().encode(code);
+        //console.log('encoded',encoded);
+
+        const cs = new CompressionStream('deflate');
+        const writer = cs.writable.getWriter();
+        writer.write(encoded);
+        writer.close();
+        const compressed = new Uint8Array(await new Response(cs.readable).arrayBuffer());
+        //console.log('compressed',compressed);
+
+        const baseurled = base64urlencode(compressed);
+        //console.log('baseurled',baseurled);
+        window.location.hash = '#~' + baseurled;
+
         setDocumentTitle(code);
         const viewingPatternData = getViewingPatternData();
         setVersionDefaultsFrom(code);

website/src/repl/util.mjs

@@ -7,6 +7,7 @@ import './Repl.css';
 import { createClient } from '@supabase/supabase-js';
 import { writeText } from '@tauri-apps/plugin-clipboard-manager';
 import { $featuredPatterns /* , loadDBPatterns */ } from '@src/user_pattern_utils.mjs';
+import { decode as base64urldecode } from 'base64url-universal';
 
 // Create a single supabase client for interacting with your database
 export const supabase = createClient(
@@ -26,6 +27,38 @@ export async function initCode() {
     const hash = initialUrl.split('?')[1]?.split('#')?.[0]?.split('&')[0];
     const codeParam = window.location.href.split('#')[1] || '';
     if (codeParam) {
+      if (codeParam[0] === '~') {
+        // Encoded using base64url and compressed
+        const baseurled = codeParam.substring(1);
+        //console.log('baseurled', baseurled);
+        const compressed = base64urldecode(baseurled);
+        //console.log('compressed', compressed);
+
+        const cs = new DecompressionStream('deflate');
+        const writer = cs.writable.getWriter();
+        writer.write(compressed);
+        writer.close();
+        const encoded = await new Response(cs.readable).arrayBuffer();
+        //console.log('encoded', encoded);
+
+        const decoded = new TextDecoder().decode(encoded);
+        //console.log('decoded', decoded);
+        return decoded;
+      }
+      if (codeParam[0] === '_') {
+        const url = decodeURIComponent(codeParam.substring(1));
+        try {
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+          }
+          console.log('Response', response);
+          return await response.text();
+        } catch (error) {
+          return `/* ERROR LOADING SCRIPT. ${error.message} */`;
+        }
+      }
+
       // looking like https://strudel.cc/#ImMzIGUzIg%3D%3D (hash length depends on code length)
       return hash2code(codeParam);
     } else if (hash) {