docs: add TypeScript playgrounds to docusaurus.new + Playground page (#8723)

admin/new.docusaurus.io/functionUtils/playgroundUtils.ts

@@ -12,13 +12,15 @@ const CookieName = 'DocusaurusPlaygroundName';
 const PlaygroundConfigs = {
   codesandbox:
     'https://codesandbox.io/p/sandbox/github/facebook/docusaurus/tree/main/examples/classic?file=%2FREADME.md',
+  'codesandbox-ts':
+    'https://codesandbox.io/p/sandbox/github/facebook/docusaurus/tree/main/examples/classic-typescript?file=%2FREADME.md',
 
-  // Not updated
-  // stackblitz: 'https://stackblitz.com/fork/docusaurus',
   // Slow to load
   // stackblitz: 'https://stackblitz.com/github/facebook/docusaurus/tree/main/examples/classic',
   // Dedicated branch: faster load
   stackblitz: 'https://stackblitz.com/github/facebook/docusaurus/tree/starter',
+  'stackblitz-ts':
+    'https://stackblitz.com/github/facebook/docusaurus/tree/main/examples/classic-typescript',
 };
 
 const PlaygroundDocumentationUrl = 'https://docusaurus.io/docs/playground';

admin/new.docusaurus.io/functions/codesandbox-ts.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 {createPlaygroundResponse} from '../functionUtils/playgroundUtils';
+import type {Handler} from '@netlify/functions';
+
+export const handler: Handler = () =>
+  Promise.resolve(createPlaygroundResponse('codesandbox-ts'));

admin/new.docusaurus.io/functions/stackblitz-ts.ts

@@ -0,0 +1,12 @@
+/**
+ * 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 {createPlaygroundResponse} from '../functionUtils/playgroundUtils';
+import type {Handler} from '@netlify/functions';
+
+export const handler: Handler = () =>
+  Promise.resolve(createPlaygroundResponse('stackblitz-ts'));

website/src/components/Playground/index.tsx

@@ -19,6 +19,7 @@ const Playgrounds = [
     name: '📦 CodeSandbox',
     image: require('@site/static/img/playgrounds/codesandbox.png'),
     url: 'https://docusaurus.new/codesandbox',
+    urlTS: 'https://docusaurus.new/codesandbox-ts',
     description: (
       <Translate id="playground.codesandbox.description">
         CodeSandbox is an online code editor and development environment that
@@ -31,6 +32,7 @@ const Playgrounds = [
     name: '⚡ StackBlitz 🆕',
     image: require('@site/static/img/playgrounds/stackblitz.png'),
     url: 'https://docusaurus.new/stackblitz',
+    urlTS: 'https://docusaurus.new/stackblitz-ts',
     description: (
       <Translate
         id="playground.stackblitz.description"
@@ -53,10 +55,11 @@ interface Props {
   name: string;
   image: string;
   url: string;
+  urlTS: string;
   description: JSX.Element;
 }
 
-function PlaygroundCard({name, image, url, description}: Props) {
+function PlaygroundCard({name, image, url, urlTS, description}: Props) {
   return (
     <div className="col col--6 margin-bottom--lg">
       <div className={clsx('card')}>
@@ -70,9 +73,17 @@ function PlaygroundCard({name, image, url, description}: Props) {
           <p>{description}</p>
         </div>
         <div className="card__footer">
+          <div style={{textAlign: 'center'}}>
+            <b>
+              <Translate id="playground.tryItButton">Try it now!</Translate>
+            </b>
+          </div>
           <div className="button-group button-group--block">
             <Link className="button button--secondary" to={url}>
-              <Translate id="playground.tryItButton">Try it now!</Translate>
+              JavaScript
+            </Link>
+            <Link className="button button--secondary" to={urlTS}>
+              TypeScript
             </Link>
           </div>
         </div>