Provide official TypeScript playgrounds in Documents

[tats-u]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Description

I want to create TypeScript playgrounds on CodeSandbox or StackbBitz to reproduce issues on TypeScript, but there seems to be no one found.
The documents should clarify whether Docusaurus recommend to modify non-TypeScript starter by following the https://docusaurus.io/docs/typescript-support instruction or not.

This affects on a sentence of the bug template:

I have tried creating a repro with https://new.docusaurus.io/.

Self-service

• I'd be willing to address this documentation request myself.

[slorber]

I want to create TypeScript playgrounds on CodeSandbox or StackbBitz to reproduce issues on TypeScript, but there seems to be no one found.

We can open any Docusaurus example project in both playgrounds easily with URLs. Is this what you are looking for?

• https://stackblitz.com/github/facebook/docusaurus/tree/main/examples/classic-typescript
• https://codesandbox.io/p/sandbox/github/facebook/docusaurus/tree/main/examples/classic-typescript

Do you want these links to appear on that page? https://docusaurus.io/docs/playground
That makes sense to me.

Not sure how to present the UI though, maybe CodeSandbox: JS / TS + StackBlitz: JS / TS.

I don't like having too many options and text on this page: we should optimize for a very fast low-friction decision tree for users looking to give Docusaurus a try.

---

The documents should clarify whether Docusaurus recommend to modify non-TypeScript starter by following the docusaurus.io/docs/typescript-support instruction or not.

Not sure to understand what you mean here 😅 Which section should contain which extra text? Can you roughly draft the text we should add here?

---

Note these playgrounds usually have their own "shortcuts": for example StackBlitz permit to easily open any GitHub URL in StackBlitz by pretending pr.new to a GitHub URL:
https://pr.new/github.com/facebook/docusaurus/tree/main/examples/classic-typescript

That's probably out of the scope of Docusaurus to document that, but still good to know it exists ;)

[tats-u]

@slorber

Is this what you are looking for?
Do you want these links to appear on that page?

Exactly. Bingo.

Also, I'd be happy if you provide:

• https://docusaurus.new/ts
• https://docusaurus.new/codesandbox-ts
• https://docusaurus.new/stackblitz-ts

Which section should contain which extra text? Can you roughly draft the text we should add here?

Candidate:

# 1

Add URLs below

Choose one of the available options below.

□ □ (current links for JS)

If you prefer TypeScript, use the following options instead:

□ □ (above URLs)

# 2

Use tabs

Choose one of the available options below.

JavaScript TypeScript
￣￣￣￣
□ □ (current links for JS)

[slorber]

Thanks

I'd prefer to use directly visible buttons rather than less visible links inside tabs. A playground should be accessible in a single click IMHO

We already use buttons:

Also, I'd be happy if you provide:

• docusaurus.new/ts
• docusaurus.new/codesandbox-ts
• docusaurus.new/stackblitz-ts

We can provide that for sure, but how do you plan to use these URLs exactly?

[tats-u]

[/-]ts suffix is easy to remember and type, isn't it?
These URLs can be easily used to be not only directly typed but also linked from that page.

Do you want a appearance like this if you don't want to use tab?

[slorber]

Did this in #8723

Not a perfect design but probably good enough. If someone wants to improve please open another PR

[tats-u]

@slorber

Not a perfect design

I think so too because it is the best one in those without custom style sheets.

In the honest I wanted to get it done by myself a little but have to show my appreciation to you because you got it done on behalf of me.
Thank you so much.

[slorber]

NP

I did it myself because our Netlify serverless function stuff needed here is not really documented and it would have required explaining all this. Now if you want to improve the UX/design of this page even more, feel free to work on that ;)