3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 02:08:36 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Sébastien Lorber 2023-03-02 17:07:29 +01:00 • committed by GitHub
parent e78a6a6610
commit 62aba771df
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
admin/new.docusaurus.io/functionUtils/playgroundUtils.ts
View file

@ -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';

12
admin/new.docusaurus.io/functions/codesandbox-ts.ts Normal file
View file

@ -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'));

12
admin/new.docusaurus.io/functions/stackblitz-ts.ts Normal file
View file

@ -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'));

15
website/src/components/Playground/index.tsx
View file

@ -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>