Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Implement Sandpack component for interactive examples in documentation #338

Merged
merged 3 commits into from
Aug 6, 2024

Conversation

kangju2000
Copy link
Contributor

I add a Sandpack component that lets users try out code directly in the documentation using CodeSandbox.

In this PR, it's only applied to the chunk function. If merged, I hope to gradually add it throughout the docs, making them easier for users to understand.

This feature is already reflected in the official documentation for es-hangul(toss/es-hangul#200) and suspensive(toss/suspensive#963).

I'm also attaching the issue that was raised in slash toss/slash#191

2024-08-03.7.55.34.mov
light mode dark mode
스크린샷 2024-08-03 오후 7 57 55 스크린샷 2024-08-03 오후 7 58 04

How to use

In the markdown file, write it like this

::: sandpack

```ts index.ts
import { chunk } from 'es-toolkit/array';

console.log(chunk([1, 2, 3, 4, 5], 2));

:::

For more detailed instructions on how to write this, please refer to vitepress-plugin-sandpack document.

Copy link

vercel bot commented Aug 3, 2024

@kangju2000 is attempting to deploy a commit to the Toss Team on Vercel.

A member of the Team first needs to authorize it.

@codecov-commenter
Copy link

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.50%. Comparing base (f715a73) to head (8218b85).

Additional details and impacted files

Impacted file tree graph

@@           Coverage Diff           @@
##             main     #338   +/-   ##
=======================================
  Coverage   99.50%   99.50%           
=======================================
  Files         149      149           
  Lines        1000     1000           
  Branches      238      238           
=======================================
  Hits          995      995           
  Misses          5        5           

@raon0211
Copy link
Collaborator

raon0211 commented Aug 3, 2024

Wow! This actually looks really great. Let me look into this by tomorrow.

Copy link
Collaborator

@raon0211 raon0211 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@raon0211 raon0211 merged commit db79ff3 into toss:main Aug 6, 2024
6 of 7 checks passed
raon0211 added a commit that referenced this pull request Aug 9, 2024
Revert "docs: Implement Sandpack component for interactive examples in documentation (#338)"

This reverts commit db79ff3.
@raon0211
Copy link
Collaborator

raon0211 commented Aug 9, 2024

Seems that it currently breaks the build of our docs. We temporarily reverted the change, but I will try to look into it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants