Make playground links shorter (#1516)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1516

Right now playground links are URL encoded base64 of the code content. This leads to some pretty long links.

Running a service, or needing to auth to some other service, seems like a lot more headache than it is worth, so this change instead tries to make the URLs a bit more reasonable.

One minor saving is that we're URL encoding base64, instead of just representing using the url-safe variant of base64. But we can get more savings, even in small examples, using compression. This adds a popular, small, library to do that.

Reviewed By: yungsters

Differential Revision: D52161884

fbshipit-source-id: 9f5d131f27e25a611501c2e3bf3907e83c2e3da1

website-next/package.json

@@ -21,6 +21,7 @@
     "@docusaurus/preset-classic": "3.0.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "lz-string": "^1.5.0",
     "nullthrows": "^1.1.1",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",

website-next/src/components/EditorToolbar.tsx

@@ -9,6 +9,7 @@
 
 import {useCallback, useEffect, useRef, useState} from 'react';
 import clsx from 'clsx';
+import lzString from 'lz-string';
 
 import CopyIcon from '../../static/img/copy.svg';
 import LinkIcon from '../../static/img/link.svg';
@@ -34,7 +35,7 @@ export default function EditorToolbar({
   const handleShare = useCallback(() => {
     navigator.clipboard.writeText(
       window.location.origin +
-        `/playground?code=${encodeURIComponent(btoa(code))}`,
+        `/playground?code=${lzString.compressToEncodedURIComponent(code)}`,
     );
   }, [code]);
 

website-next/src/pages/playground.tsx

@@ -7,6 +7,7 @@
 
 import Layout from '@theme/Layout';
 import {useLocation} from '@docusaurus/router';
+import lzString from 'lz-string';
 
 import Playground from '../components/Playground';
 
@@ -15,7 +16,9 @@ import styles from './playground.module.css';
 export default function PlaygroundPage(): JSX.Element {
   const params = new URLSearchParams(useLocation().search);
   const codeParam = params.get('code');
-  const code = codeParam ? atob(codeParam) : undefined;
+  const code = codeParam
+    ? lzString.decompressFromEncodedURIComponent(codeParam)
+    : undefined;
 
   return (
     // @ts-ignore missing prop for `wrapperClassName`

yarn.lock

@@ -7377,6 +7377,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lz-string@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
 make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"