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`