3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-04 11:52:39 +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
Download patch file Download diff file Expand all files Collapse all files

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>