diff --git a/packages/website/package.json b/packages/website/package.json index fffca759..cd76fbb7 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -15,8 +15,10 @@ "@docusaurus/core": "2.0.0-beta.21", "@docusaurus/preset-classic": "2.0.0-beta.21", "@quri/squiggle-components": "^0.2.20", + "base64-js": "^1.5.1", "clsx": "^1.1.1", "hast-util-is-element": "2.1.2", + "pako": "^2.0.4", "prism-react-renderer": "^1.3.3", "react": "^18.1.0", "react-dom": "^18.2.0", diff --git a/packages/website/src/pages/playground.js b/packages/website/src/pages/playground.js index efbbac13..661aeedd 100644 --- a/packages/website/src/pages/playground.js +++ b/packages/website/src/pages/playground.js @@ -1,23 +1,29 @@ +import { deflate, inflate } from "pako"; +import { toByteArray, fromByteArray } from "base64-js"; import React from "react"; import Layout from "@theme/Layout"; import { SquigglePlayground } from "../components/SquigglePlayground"; function getHashData() { - if (typeof window === "undefined") { + if (typeof window === "undefined" || !window.location.hash) { return {}; } try { - return JSON.parse(window.decodeURIComponent(window.location.hash.slice(1))); + const compressed = toByteArray( + decodeURIComponent(window.location.hash.slice(1)) + ); + const text = inflate(compressed, { to: "string" }); + return JSON.parse(text); } catch (err) { console.error(err); return {}; } } -function setHashData(Data) { - window.location.hash = window.encodeURIComponent( - JSON.stringify({ ...getHashData(), ...Data }) - ); +function setHashData(data) { + const text = JSON.stringify({ ...getHashData(), ...data }); + const compressed = deflate(text, { level: 9 }); + window.location.hash = encodeURIComponent(fromByteArray(compressed)); } export default function PlaygroundPage() { diff --git a/yarn.lock b/yarn.lock index b1c89aa7..b4ed1289 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4344,7 +4344,7 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^18.0.1", "@types/react@^18.0.9": +"@types/react@*", "@types/react@^18.0.9": version "18.0.14" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.14.tgz#e016616ffff51dba01b04945610fe3671fdbe06d" integrity sha512-x4gGuASSiWmo0xjDLpm5mPb52syZHJx02VKbqUKdLmKtAwIh63XClGsiTI1K6DO5q7ox4xAsQrU+Gl3+gGXF9Q== @@ -5853,7 +5853,7 @@ base16@^1.0.0: resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70" integrity sha512-pNdYkNPiJUnEhnfXV56+sQy8+AaPcG3POZAUnwr4EeqCUZFz4u2PePbo3e5Gj4ziYPCWGUZT9RHisvJKnwFuBQ== -base64-js@^1.0.2: +base64-js@^1.0.2, base64-js@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a" integrity sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA== @@ -13082,6 +13082,11 @@ package-json@^6.3.0: registry-url "^5.0.0" semver "^6.2.0" +pako@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/pako/-/pako-2.0.4.tgz#6cebc4bbb0b6c73b0d5b8d7e8476e2b2fbea576d" + integrity sha512-v8tweI900AUkZN6heMU/4Uy4cXRc2AYNRggVmTR+dEncawDJgCdLMximOVA2p4qO57WMynangsfGRb5WD6L1Bg== + pako@~1.0.5: version "1.0.11" resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf" @@ -14791,7 +14796,7 @@ react-vega@^7.5.1: prop-types "^15.8.1" vega-embed "^6.5.1" -react@^18.0.0, react@^18.1.0: +react@^18.1.0: version "18.2.0" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==