├── p5js ├── .minify.json ├── build.js ├── Makefile ├── input │ ├── 01_fflate_callback.js │ └── 02_main.js ├── README.md └── page-structure.html ├── threejs ├── .minify.json ├── build.js ├── Makefile ├── compressed-inputs │ ├── 01_dim_fflate.js │ └── 02_main.min.js ├── README.md ├── page-structure.html └── 02_main.js ├── compress-html ├── .minify.json ├── build.js ├── Makefile ├── README.md ├── page-structure.html ├── onepage │ ├── index.html │ └── indexupdatedui.html └── examples │ └── 7345219 Space Shooter compressed.html ├── browserUI ├── README.md ├── template.html ├── __test_output_p5js.html ├── __test_output_threejs.html └── index.html └── README.md /p5js/.minify.json: -------------------------------------------------------------------------------- 1 | { 2 | "js": { 3 | "removeUnusedVariables": false 4 | } 5 | } -------------------------------------------------------------------------------- /threejs/.minify.json: -------------------------------------------------------------------------------- 1 | { 2 | "js": { 3 | "removeUnusedVariables": false 4 | } 5 | } -------------------------------------------------------------------------------- /compress-html/.minify.json: -------------------------------------------------------------------------------- 1 | { 2 | "js": { 3 | "removeUnusedVariables": false 4 | } 5 | } -------------------------------------------------------------------------------- /p5js/build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const page_structure = fs.readFileSync('page-structure.html', {encoding:'utf8'}); 3 | const src_compressed = fs.readFileSync('src-compressed-string.base64', {encoding:'utf8'}).trim() 4 | const page01 = page_structure.replace('SRC_COMPRESSED_STRING', src_compressed); 5 | console.log(page01); 6 | -------------------------------------------------------------------------------- /threejs/build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const page_structure = fs.readFileSync('page-structure.html', {encoding:'utf8'}); 3 | const src_compressed = fs.readFileSync('src-compressed-string.base64', {encoding:'utf8'}).trim() 4 | const page01 = page_structure.replace('SRC_COMPRESSED_STRING', src_compressed); 5 | console.log(page01); 6 | -------------------------------------------------------------------------------- /compress-html/build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const page_structure = fs.readFileSync('page-structure.html', {encoding:'utf8'}); 3 | const src_compressed = fs.readFileSync('src-compressed-string.base64', {encoding:'utf8'}).trim() 4 | const page01 = page_structure.replace('SRC_COMPRESSED_STRING', src_compressed); 5 | console.log(page01); 6 | -------------------------------------------------------------------------------- /p5js/Makefile: -------------------------------------------------------------------------------- 1 | all: src-compressed-string.base64 index.html 2 | 3 | index.html: src-compressed-string.base64 build.js page-structure.html 4 | node build.js >$@ 5 | 6 | src-compressed-string.base64: input/ 7 | cat input/* | gzip -9 -c | base64 | tr -d '\n' >$@ 8 | 9 | clean: 10 | rm -f src-compressed-string.base64 index.html 11 | -------------------------------------------------------------------------------- /compress-html/Makefile: -------------------------------------------------------------------------------- 1 | all: src-compressed-string.base64 index.html 2 | 3 | index.html: src-compressed-string.base64 build.js page-structure.html 4 | node build.js >$@ 5 | 6 | src-compressed-string.base64: input/ 7 | cat input/* | gzip -9 -c | base64 | tr -d '\n' >$@ 8 | 9 | clean: 10 | rm -f src-compressed-string.base64 index.html 11 | -------------------------------------------------------------------------------- /p5js/input/01_fflate_callback.js: -------------------------------------------------------------------------------- 1 | function fflateCallback2() { 2 | const p5Code = fflate.strFromU8(fflate.gunzipSync(new Uint8Array(Array.from(atob(d3)).map((char) => char.charCodeAt(0))))); 3 | 4 | const newScript = document.createElement('script'); 5 | newScript.innerHTML = [p5Code].join(";\n"); 6 | document.body.appendChild(newScript); 7 | } -------------------------------------------------------------------------------- /threejs/Makefile: -------------------------------------------------------------------------------- 1 | all: src-compressed-string.base64 index.html 2 | 3 | index.html: src-compressed-string.base64 build.js page-structure.html 4 | node build.js >$@ 5 | 6 | src-compressed-string.base64: compressed-inputs/ 7 | cat compressed-inputs/* | gzip -9 -c | base64 | tr -d '\n' >$@ 8 | 9 | clean: 10 | rm -f src-compressed-string.base64 index.html 11 | -------------------------------------------------------------------------------- /p5js/input/02_main.js: -------------------------------------------------------------------------------- 1 | let z; 2 | 3 | function setup() { 4 | createCanvas(720, 400); 5 | stroke(255); 6 | noLoop(); 7 | z = height * 0.5; 8 | } 9 | 10 | function draw() { 11 | background(0); 12 | z = z - 4; 13 | if (z < 0) { 14 | z = height; 15 | } 16 | line(0, z, width, z); 17 | } 18 | 19 | function mousePressed() { 20 | redraw(); 21 | } -------------------------------------------------------------------------------- /p5js/README.md: -------------------------------------------------------------------------------- 1 | ### Use p5.js 2 | 3 | 1. Navigate to the `p5js` directory with `cd ../p5js`. 4 | 2. Put your js code in `input/02_main.js`. 5 | 3. Run `make clean && make` in the terminal. 6 | 4. Your final file will be `index.html`. 7 | 5. To check if `index.html` file works locally, open `index.html` and search and replace "fetch(/content/" with "fetch(https://ordinals.com/content/" (2 places). 8 | -------------------------------------------------------------------------------- /compress-html/README.md: -------------------------------------------------------------------------------- 1 | ### Compress HTML 2 | 3 | 1. Navigate to the `compress-html` directory with `cd compress-html`. 4 | 2. Place your `.html` file in the `input` directory. 5 | 3. Run `make clean && make` in the terminal. 6 | 4. Your compressed file will be `index.html`. 7 | 5. To check if `index.html` file works locally, open `index.html` and search and replace "fetch(/content/" with "fetch(https://ordinals.com/content/". -------------------------------------------------------------------------------- /threejs/compressed-inputs/01_dim_fflate.js: -------------------------------------------------------------------------------- 1 | function fflateCallback2() { 2 | const dimCode = fflate.strFromU8(fflate.gunzipSync(new Uint8Array(Array.from(atob(d3)).map((char) => char.charCodeAt(0))))); 3 | const threeJsCode = dimCode.split('\n')[5]; 4 | 5 | const ocmCallbackScript = "ocmCallback();"; 6 | 7 | const newScript = document.createElement('script'); 8 | newScript.innerHTML = [threeJsCode, ocmCallbackScript].join(";\n"); 9 | document.body.appendChild(newScript); 10 | } -------------------------------------------------------------------------------- /threejs/README.md: -------------------------------------------------------------------------------- 1 | ### Use Three.js 2 | 3 | 1. Navigate to the `threejs` directory with `cd ../threejs`. 4 | 2. Minify your `02_main.js` file and save it as `compressed-inputs/02_main.min.js`. 5 | - If you have `minify` installed, run `minify 02_main.js > compressed-inputs/02_main.min.js` in the terminal. 6 | - If you don't have `minify`, just put the js code in `compressed-inputs/02_main.min.js` directly. 7 | 3. Run `make clean && make` in the terminal. 8 | 4. Your final file will be `index.html`. 9 | 5. To check if `index.html` file works locally, open `index.html` and search and replace "fetch(/content/" with "fetch(https://ordinals.com/content/". 10 | -------------------------------------------------------------------------------- /browserUI/README.md: -------------------------------------------------------------------------------- 1 | ### Browser UI 2 | 3 | This folder provides an in-browser tool for assembling a compressed HTML page. 4 | It uses the same on-chain libraries as the command line utilities but lets you 5 | experiment without running `make`. 6 | 7 | #### Usage 8 | 9 | 1. Open `index.html` in your browser. 10 | 2. Select the libraries you want to include. 11 | 3. Paste or write your JavaScript/HTML code. 12 | 4. Click **Compile** to generate a ready-to-inscribe page. 13 | 14 | The generated page is based on `template.html`. For offline testing you can set 15 | `isTesting` to `true` in that file, which prepends `https://ordinals.com` to 16 | fetch calls. 17 | 18 | -------------------------------------------------------------------------------- /threejs/compressed-inputs/02_main.min.js: -------------------------------------------------------------------------------- 1 | function ocmCallback(){var a=new THREE.WebGLRenderer({antialias:!0}),c=new THREE.Scene(),d=new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100),f=new THREE.PointLight(0xffffff, 1, 100),g=new THREE.TorusKnotGeometry(10, 2, 200, 20, 6, 8),h=new THREE.MeshStandardMaterial({color:0xffffaa,wireframe:!1}),i=new THREE.Mesh(g, h);a.setSize(window.innerWidth,window.innerHeight);a.shadowMap.enabled=!0;d.position.set(0,0.6,50.5);c.add(new THREE.AmbientLight(0x330066, 0.5));f.position.set(1,1,1);c.add(f);c.add(i);c.add(i);function j(){requestAnimationFrame(j);i.rotation.x+=0.01;i.rotation.y+=0.01;a.render(c,d)}j();document.querySelector("#scene").appendChild(a.domElement)} 2 | -------------------------------------------------------------------------------- /threejs/page-structure.html: -------------------------------------------------------------------------------- 1 |
17 | -------------------------------------------------------------------------------- /p5js/page-structure.html: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /compress-html/page-structure.html: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /threejs/02_main.js: -------------------------------------------------------------------------------- 1 | function ocmCallback() { 2 | const renderer = new THREE.WebGLRenderer({ antialias: !0 }); 3 | renderer.setSize(window.innerWidth, window.innerHeight); 4 | renderer.shadowMap.enabled = true; 5 | 6 | const scene = new THREE.Scene(); 7 | 8 | const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100); 9 | camera.position.set(0, 0.6, 50.5); 10 | 11 | const ambientLight = new THREE.AmbientLight(0x330066, 0.5); 12 | scene.add(ambientLight); 13 | 14 | const light = new THREE.PointLight(0xffffff, 1, 100); 15 | light.position.set(1, 1, 1); 16 | scene.add(light); 17 | 18 | const geometry = new THREE.TorusKnotGeometry(10, 2, 200, 20, 6, 8); 19 | const material = new THREE.MeshStandardMaterial({ color: 0xffffaa, wireframe: false }); 20 | const torusKnot = new THREE.Mesh(geometry, material); scene.add(torusKnot); 21 | 22 | scene.add(torusKnot); 23 | 24 | function animate() { 25 | requestAnimationFrame( animate ); 26 | 27 | torusKnot.rotation.x += 0.01; 28 | torusKnot.rotation.y += 0.01; 29 | 30 | renderer.render( scene, camera ); 31 | } 32 | 33 | animate(); 34 | 35 | document.querySelector("#scene").appendChild(renderer.domElement); 36 | } 37 | -------------------------------------------------------------------------------- /compress-html/onepage/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |