Include a playground in the squiggle website

packages/components/src/components/SquigglePlayground.tsx

@@ -33,12 +33,12 @@ function FieldFloat(Props: FieldFloatProps) {
 }
 
 interface Props {
-  initialSquiggleString: string;
+  initialSquiggleString?: string;
 }
 
-let SquigglePlayground: FC<Props> = (props) => {
+let SquigglePlayground: FC<Props> = ({initialSquiggleString=""}: Props) => {
   let [squiggleString, setSquiggleString] = useState(
-    props.initialSquiggleString
+    initialSquiggleString
   );
   let [sampleCount, setSampleCount] = useState(1000);
   let [outputXYPoints, setOutputXYPoints] = useState(1000);

packages/website/docs/Playground.mdx

@@ -0,0 +1,7 @@
+---
+sidebar_position: 2
+---
+
+import { SquigglePlayground } from '../src/components/SquigglePlayground'
+
+<SquigglePlayground initialSquiggleString="normal(0,1)"/>

packages/website/docusaurus.config.js

@@ -74,9 +74,10 @@ const config = {
           },
           {to: '/blog', label: 'Blog', position: 'left'},
           {
-            href: 'https://playground.squiggle-language.com/dist-builder',
+            type: 'doc',
+            docId: 'Playground',
             label: 'Playground',
-            position: 'left',
+            position: 'left'
           },
           {
             href: 'https://github.com/QURIresearch/squiggle',

packages/website/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@docusaurus/core": "2.0.0-beta.18",
     "@docusaurus/preset-classic": "2.0.0-beta.18",
+    "@quri/squiggle-components": "0.1.8",
     "clsx": "^1.1.1",
     "prism-react-renderer": "^1.2.1",
     "react": "^18.0.0",

packages/website/src/components/SquigglePlayground.jsx

@@ -0,0 +1,13 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export function SquigglePlayground(props) {
+  return (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => {
+        const LibComponent =
+          require('@quri/squiggle-components').SquigglePlayground;
+        return <LibComponent {...props} />;
+      }}
+    </BrowserOnly>
+  );
+}

yarn.lock

@@ -4025,7 +4025,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.9.19", "@types/react@^17.0.43", "@types/react@^18.0.1":
+"@types/react@*":
   version "17.0.44"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
   integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
@@ -4034,6 +4034,24 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^16.9.19":
+  version "16.14.24"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.24.tgz#f2c5e9fa78f83f769884b83defcf7924b9eb5c82"
+  integrity sha512-e7U2WC8XQP/xfR7bwhOhNFZKPTfW1ph+MiqtudKb8tSV8RyCsovQx2sNVtKoOryjxFKpHPPC/yNiGfdeVM5Gyw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/react@^18.0.1":
+  version "18.0.1"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.0.1.tgz#1b2e02fb7613212518733946e49fb963dfc66e19"
+  integrity sha512-VnWlrVgG0dYt+NqlfMI0yUYb8Rdl4XUROyH+c6gq/iFCiZ805Vi//26UW38DHnxQkbDhnrIWTBiy6oKZqL11cw==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"