[Feature]: Support interactive playground in docs(https://slash.page) by adding codesandbox

[manudeli]

Package Scope

If slash.page can provide more interactive playground in docs for who want to learn @toss/slash, more users will dive deeply to learn these libraries easily.

And It will make users better to understand what problem each libraries solved.

• [x] Add to an existing package
• [ ] New package

Package name: docs

Overview

Describe the solution you'd like

Add codesandbox like https://beta.reactjs.org

New version of React docs keynote, YouTube video

Additional context

[raon0211]

We actually have some interactive playgrounds like ClickArea or Stack; but I think we should add some more interactive examples.

[manudeli]

@raon0211 when I use Sandpack iin @toss/slash. I encounter difficulty of adding example because of difficult syntax

Beta version of react's docs have different files syntax of Sandpack component.

It is really easy to use autoformat by vscode because of their syntax. but when I try to use their syntax in docusaurus, I failed and then I found something new scripts in beta.reactjs.org's repo.

If @toss/slash want to make contributors can add examples using codesandbox, I think beta.reactjs.org's script(createFileMap) will be good solution

Can you support like this?

[Request Support]: So easy and auto formatting DX to add example using codesandbox

different syntax with @toss/slash docs

beta.reactjs.org

@toss/slash

[raon0211]

Yes that's right, we should definitely fix this. It will be on our plan.

[manudeli]

@minsoo-web Check this out please. You should see this problem to make interactive playground easily and rapidly

We from https://github.com/suspensive/react/pull/867

[minsoo-web]

@minsoo-web Check this out please. You should see this problem to make interactive playground easily and rapidly

We from https://github.com/suspensive/react/pull/867

I'd be happy to take on this issue. Thanks for the mention.