From 042480e701c4b0e55734315b96037f70993eaa4c Mon Sep 17 00:00:00 2001
From: Nicholas Jitkoff <nicholas@jitkoff.com>
Date: Sat, 9 Jul 2022 07:38:32 -0700
Subject: [PATCH] Fix codepen support

---
 docs/edit.js                      | 60 +++++++++++++++++--------------
 docs/render/canvas.boilerplate.js | 14 ++++++++
 2 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 docs/render/canvas.boilerplate.js

diff --git a/docs/edit.js b/docs/edit.js
index c2e4ccb..520669f 100644
--- a/docs/edit.js
+++ b/docs/edit.js
@@ -219,36 +219,42 @@ function handlePaste(e) {
 
 var TEMPLATE_MARKER = "/*use-itty-bitty-template*/";
 function fetchCodepen(url) {
-  var h, c, j;
-  $.when(
-    $.get({ url: url + ".html", cache: false }, function(html) {
-      h = html;
-    }),
-    $.get({ url: url + ".css", cache: false }, function(css) {
-      c = css;
-    }),
-    $.get({ url: url + ".js", cache: false }, function(js) {
-      j = js;
-    })
-  ).then(function() {
+
+  Promise.all([
+    fetch(url + ".html"),
+    fetch(url + ".css"),
+    fetch(url + ".js"),
+  ]).then(async function(responses) {
+    console.log("responses", responses);
+    let h = await responses[0].text();
+    let c = await responses[1].text();
+    let j = await responses[2].text();
+
+    console.log({h,c,j})
+
     var useTemplate = c.indexOf(TEMPLATE_MARKER) >= 0;
     var string =
-      '<style type="text/css">' +
-      c +
-      "</style>" +
+      '<style type="text/css">' + c + "</style>" +
       h +
-      '<script type="text/javascript">' +
-      j +
-      "</script>";
-    stringToZip(string, function(zip) {
-      setFileName("✒️" + url);
-      var title = QS("#doc-title").innerText;
-      setTimeout(function() {
-        var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip;
-        importedFileData = data;
-        updateLink(data, {title});
-      }, 300);
-    });
+      '<script type="text/javascript">' + j + "</script>";
+      console.log("string", string);
+
+    let url = `data:text/html;charset=utf-8,${encodeURIComponent(string)}`;
+
+    let durl = new bitty.DataURL(url);
+    durl = await durl.compress(bitty.GZIP_MARKER);
+
+    let ratio = durl.href.length / url.length;
+    console.log(`Compressed from ${url.length} to ${durl.href.length} bytes (${Math.round(ratio * 100)}%)`);
+
+    // setFileName("✒️" + "codepen");
+    var title = QS("#doc-title").innerText;
+    setTimeout(function() {
+      // var data = (useTemplate ? "" : DATA_PREFIX_BXZE) + zip;
+      // importedFileData = url;
+      updateLink(durl.href, {title:"CODEPEN"});
+    }, 300);
+
   });
 }
 
diff --git a/docs/render/canvas.boilerplate.js b/docs/render/canvas.boilerplate.js
new file mode 100644
index 0000000..a8a155e
--- /dev/null
+++ b/docs/render/canvas.boilerplate.js
@@ -0,0 +1,14 @@
+document.body.style = "display:flex; min-height:100vh; justify-content: center; align-items: center; margin:0;"
+let canvas = window.canvas = document.createElement("canvas");
+canvas.style = "max-height: 100vh; max-width: 100vw;";
+document.body.append(canvas);
+window.ctx = canvas.getContext("2d");
+let update = () => {
+  var density = window.devicePixelRatio;
+  window.w = canvas.width = window.innerWidth * density;
+  window.h = canvas.height = window.innerHeight * density;
+  console.log("canvas", canvas.width, canvas.height)
+
+  draw();
+}
+(window.onresize = update)()
\ No newline at end of file