feat: multiple playground choices (#5207)

* poc of using netlify functions for playground redirections

* push

* cleanup

* restore files

* fix netlify functions?

* fix netlify functions?

* implement serverless functions for playgrounds with persistent cookie

* move new.docusaurus.io to monorepo packages

* move new.docusaurus.io to monorepo packages

* lockfile

* push

* catch-all redirect

* Translate/Interpolate: add better error message if not used correctly

* Add /docs/playground page

* Add some additional doc

website/src/components/Playground/index.js

@@ -0,0 +1,81 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React from 'react';
+import Translate from '@docusaurus/Translate';
+import Link from '@docusaurus/Link';
+import Image from '@theme/IdealImage';
+import clsx from 'clsx';
+
+const Playgrounds = [
+  {
+    name: '📦 CodeSandbox',
+    image: require('@site/static/img/playgrounds/codesandbox.png'),
+    url: 'https://new.docusaurus.io/codesandbox',
+    description: (
+      <Translate id="playground.codesandbox.description">
+        CodeSandbox is a popular playground solution. Runs Docusaurus in a
+        remote Docker container.
+      </Translate>
+    ),
+  },
+  {
+    name: '⚡ StackBlitz 🆕',
+    image: require('@site/static/img/playgrounds/stackblitz.png'),
+    url: 'https://new.docusaurus.io/stackblitz',
+    description: (
+      <Translate
+        id="playground.stackblitz.description"
+        values={{
+          webContainersLink: (
+            <Link target="https://blog.stackblitz.com/posts/introducing-webcontainers/">
+              WebContainers
+            </Link>
+          ),
+        }}>
+        {
+          'StackBlitz uses a novel {webContainersLink} technology to run Docusaurus directly in your browser.'
+        }
+      </Translate>
+    ),
+  },
+];
+
+function PlaygroundCard({name, image, url, description}) {
+  return (
+    <div className="col col--6 margin-bottom--lg">
+      <div className={clsx('card')}>
+        <div className={clsx('card__image')}>
+          <Link to={url}>
+            <Image img={image} alt={`${name}'s image`} />
+          </Link>
+        </div>
+        <div className="card__body">
+          <h3>{name}</h3>
+          <p>{description}</p>
+        </div>
+        <div className="card__footer">
+          <div className="button-group button-group--block">
+            <Link className="button button--secondary" to={url}>
+              <Translate id="playground.tryItButton">Try it now!</Translate>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function PlaygroundCardsRow() {
+  return (
+    <div className="row">
+      {Playgrounds.map((playground) => (
+        <PlaygroundCard key={playground.name} {...playground} />
+      ))}
+    </div>
+  );
+}