Shareable url

Author: pomber

playground/package.json

@@ -11,6 +11,7 @@
     "@code-hike/mdx": "^0.5.1",
     "@mdx-js/mdx": "^2.1.1",
     "@monaco-editor/react": "^4.4.5",
+    "lz-string": "^1.4.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-error-boundary": "^3.1.4"

playground/src/app.jsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { Editor } from "./editor";
+import { readHash, writeHash } from "./hash";
 import { Preview } from "./preview";
 
 const defaultCode = `
@@ -14,15 +15,22 @@ print("This is Code Hike")
 
 `;
 
-const defaultInput = {
-  mdx: defaultCode,
-  css: ".preview-container { border: 1px solid blue; }",
-  config: { lineNumbers: false, showCopyButton: false },
-};
-
 function App() {
+  const defaultInput = React.useMemo(() => {
+    return (
+      readHash() || {
+        mdx: defaultCode,
+        css: ".preview-container { border: 1px solid blue; }",
+        config: { lineNumbers: false, showCopyButton: false },
+      }
+    );
+  }, []);
   const [input, setInput] = useState(defaultInput);
 
+  React.useEffect(() => {
+    writeHash(input);
+  }, [input]);
+
   return (
     <div className="app">
       <header>

playground/src/hash.js

@@ -0,0 +1,27 @@
+import LZString from "lz-string";
+
+export function toHash(input) {
+  return LZString.compressToEncodedURIComponent(JSON.stringify(input));
+}
+
+export function fromHash(hash) {
+  return JSON.parse(LZString.decompressFromEncodedURIComponent(hash));
+}
+
+export function writeHash(input) {
+  const hash = toHash(input);
+  window.location.hash = hash;
+}
+
+export function readHash() {
+  const hash = document.location.hash.slice(1);
+  if (!hash) {
+    return null;
+  }
+
+  try {
+    return fromHash(hash);
+  } catch {
+    return {};
+  }
+}