feat: サーバが出した画像エラーを目立たせるようにする

[0Delta]

画像の参照エラー等を、既存のエラーと同じ場所に出してあげることで UX を改善する。

内部的には zenn-cli/server で出力するタグに専用のクラスを追加し、それを zenn-model から全文検索で検出している。
将来的にクラスを増やすことで別メッセージを出力させるようにすることも可能。
2つのパッケージに同じ単語を入れなければならない暗黙的なルールができてしまう所は要検討か。

📑 Summary

プルリクエストに含む内容の簡潔な記述

Resolves zenn-dev/zenn-community#681

📋 Tasks

プルリクエストを作成いただく際、お手数ですが以下の内容についてご確認をお願いします。

• 📖 Contribution Guide を読んだ
• 👩‍💻 canary ブランチに対するプルリクエストである
• zenn-cli で実行して正しく動作しているか確認する
• 不要なコードが含まれていないか( コメントやログの消し忘れに注意 )
• XSS になるようなコードが含まれていないか
• モバイル端末での表示が考慮されているか
• Pull Request の内容は妥当か( 膨らみすぎてないか )

より詳しい内容は Pull Request Policy を参照してください。

[cm-dyoshikawa]

@0Delta PRを作成いただきありがとうございます！

お手数ですが、以下の手順でローカルサーバを起動し、今回の変更がわかるようにスクリーンショットを撮影して共有いただくことは可能でしょうか？ 🙏

---

共通のセットアップ

# プロジェクトルートで実行
pnpm i
pnpm run build

zenn-cliのセットアップ

cd packages/zenn-cli
cp .env.example .env
pnpm i
# ローカルサーバが起動、ブラウザから動作確認が可能
pnpm run dev

[0Delta]

以下の方法で確認しました。

# 複数パッケージを変更したので全体ビルド
pnpm i && pnpm build

# プレビュー
cd packages/zenn-cli
pnpm exec:zenn preview

# localhost:8000 で確認

画像にエラーがあった場合、ヘッダに以下のように出るようになります。

既存のエラーメッセージはそのまま表示させています。
これはどの画像がエラーになっているか非常にわかりやすいためです。

ですので、ヘッダーへの追記はものぐさな人向けの注意喚起という位置付けでエラー箇所への誘導を行なうような文言にしてあります。

[cm-dyoshikawa]

@0Delta

ありがとうございます！

チームで話し合いまして、本文中の画像エラーを画面上部にも表示するというアイデアは受け入れるつもりです。
コードについていくつかコメントしましたので、対応いただけますと幸いです。

[0Delta]

@cm-dyoshikawa 諸々修正したコミット作りました！
確認お願いします 🙇

[cm-dyoshikawa]

@0Delta マージしました！対応ありがとうございました！

当面はzenn-cliのcanaryバージョンでお使いいただけます。