Merge pull request #117 from CreativeCodeBerlin/self-host-shadertoy-artwort

self-hosting shadertoy sketches

Author: hamoid

README.md

@@ -8,7 +8,8 @@ Welcome to the Creative Code Berlin website source code, you can visit our websi
 
 ## Adding Artworks
 
-Add the generated JSON generated to the [project.js file](/assets/projects.js)
+Add the generated JSON generated to the [project.js file](/assets/projects.js).  
+We must host ShaderToy sketches ourselves since 2026. [Here's how to do it](docs/shadertoy.md).
 
 
 ## Development Instructions

assets/projects.js

@@ -1,6 +1,6 @@
 export default [
   {
-    "url": "https://www.shadertoy.com/embed/wsB3Rt?gui=false&t=10&paused=false&muted=true",
+    "url": "https://creativecode.berlin/shadertoys/?shader=wsB3Rt",
     "author": "Kazik",
     "author_url": "https://xemantic.com/",
     "color": "black",

docs/shader-request.jpg

@@ -0,0 +1,16 @@
+# Self-hosting sketches from ShaderToy
+
+1) Visit the ShaderToy sketch in your browser (needed because of Cloudflare validation)
+2) Watch network traffic in the development console. Look for the request that downloads a JSON with the sketch's content:  
+   ![screenshot of request](shader-request.jpg)
+3) Save the response into `public/shadertoys` as `sk3tch.json` (keeping the sketch's ID).
+4) In `assets/projects.js` use this URL: `https://creativecode.berlin/shadertoys/?shader=sk3tch`
+
+### Background
+
+To make this work, we are hosting three files that come from ShaderToy:
+- effect.js
+- piLibs.js
+- index.html
+
+The HTML has a few embedded scripts. These have been manually edited so the sketch is shown in embed mode, and no requests are made to unneeded assets like button images. The initial logic made a POST request to `/shadertoy`. This has been replaced with the `?shader=` query parameter.