Skip to main content

ライブラリのサイトにCodeSandboxでPlaygroundを作る

· 3 min read

CleanShot20220208at225424@2x

https://docusaurus.io/ のサイトでPlaygroundというボタンがあるのでそこをクリックすると https://codesandbox.io/ へのリンクに飛ぶ。 CodeSandbox はGithubのレポジトリを下記のようなURLにすることで開いて npm run installnpm run startまでやってくれる。

https://codesandbox.io/embed/github/{{user}}/{{repository}}/tree/main/

さらにURLパラメータで ?module=%2Fsrc%2FDesigner.tsx とかをつけるとどのファイルを最初に開くかまでも設定してくれる。 これをやることでExampleなどをすぐに試すことができるのでちょいとどんなもんか試すには便利。

自分は https://github.com/pdfme/pdfme-playground のレポジトリに紐づけた下記のリンクをサイトに追加した https://codesandbox.io/embed/github/pdfme/pdfme-playground/tree/main/?module=%2Fsrc%2FDesigner.tsx

本日あったこと

今日はいつも通り朝は妻の英会話があり、その後昼過ぎに娘の予防接種。 それからスタバで作業をした。pdfmeの作業で、上記のPlayground件開発環境用のレポジトリの作成やcodesandboxの設定をしたり、 開発用ドキュメントを書いた。

明日もそれ系の作業がちょこっと残っているので進めるつもり。


あとはボビーワゴンの2段3トレイタイプを買った。(写真は2トレイタイプ) 妻が英会話中に窓際の椅子で作業したり、窓際は猫がいるので作業も楽しいし、光もあっていい感じだからあると良さそうだなと思って買った。

CleanShot20220208at230342@2x

いろいろ娘のものも収納できそうだしよさそう。

本日の作業

  • とりあえずのplayroundの実装
  • playgroundとしてreactのアプリを作る #1534
  • playgroundのリンクをサイトに貼る #1537
  • 開発ドキュメント #1528

明日の作業

  • playgroudのREADMEを編集する
  • サイトやREADMEにnpmへのアクセスを追加 #1524
  • pdfme/websiteビルドして公開
  • 8面テンプレートの管理ミス