Made playground its own page

packages/website/docs/Playground.mdx

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

packages/website/docusaurus.config.js

@@ -79,12 +79,7 @@ const config = {
             label: "Documentation",
           },
           { to: "/blog", label: "Blog", position: "left" },
-          {
-            type: "doc",
-            docId: "Playground",
-            label: "Playground",
-            position: "left",
-          },
+          { to: "/playground", label: "Playground", position: "left" },
           {
             href: "https://github.com/QURIresearch/squiggle",
             label: "GitHub",

packages/website/sidebars.js

@@ -20,11 +20,6 @@ const sidebars = {
       id: "Introduction",
       label: "Introduction",
     },
-    {
-      type: "doc",
-      id: "Playground",
-      label: "Playground",
-    },
     {
       type: "category",
       label: "Features",

packages/website/src/pages/playground.js

@@ -0,0 +1,20 @@
+import React from "react";
+import Layout from "@theme/Layout";
+import { SquigglePlayground } from "../components/SquigglePlayground";
+
+export default function PlaygroundPage() {
+  return (
+    <Layout title="Playground" description="Squiggle Playground">
+      <div
+        style={{
+          maxWidth: 2000,
+          paddingTop: "3em",
+          margin: "0 auto",
+        }}
+      >
+        <h2> Squiggle Playground </h2>
+        <SquigglePlayground initialSquiggleString="normal(0,1)" />
+      </div>
+    </Layout>
+  );
+}