draftlint は CodeSandbox 上でも動かすことができます。aspida-mock を利用してデモ用データを用意してあるので 、CMS やデプロイ先を確保しなくともコンテンツ(HTML 本文)の編集を試すこともできます。
Container Sandbox の作成
CodeSandbox へ Sign In した後に、以下の手順で draftlint のソースを元に Container Sandbox を作成します。
- [hankei6km / draftlint] 左のリンクをクリックすると GitHub リポジトリーから Sandbox が作成されます。
- 少し待つと Fork ボタンが表示されるのでクリックします。
- しばらく待つとブラウザーペインに draftlint のホーム画面が表示されます。
疑似的なプレビューモード
Codesandbox で動作させた場合、標準では「プレビューモードを試してみる」と同等のページが登録されています。ブラウザーペインをスクロールさせると表示されます。
HTML 本文の編集
以下の手順で文章を編集できます。
- 上記手順で作成した Sandbox の
docs/try-it.htmlをエディターで編集します(CMS のエディターとは異なりソースコードを直接編集するので HTML の文法には注意してください) - ブラウザーペインのリロードボタンをクリックします(オートリロードは行われません)
CMS との連携
上記のような HTML ソースを編集するのではなく「CMS 付属のエディターで試したい」というような場合、少し手間はかかりますが microCMS と連携させることも可能です。詳しくは「microCMS で試す」を参照してください。
その他
CodeSandbox 上でルールをカスタマイズした場合、「ソースコードは他のユーザーから閲覧できる状態」となるので注意してください(allowlist に追加した単語等が見えてしまいます)。