[WIP] Integrate implementations from PR #54 and PR #55

[Copilot]

• Analyze PR Implement Giscus lazy-load with IntersectionObserver and reposition comments section #54 and PR Implement lazy-loading for Giscus comments with site-matching styles #55 implementations
• Reset branch to develop base commit and create feature/giscus-lazy-style branch
• Implement integrated solution in build-blog.js with lazy-loading Giscus comments
• Update blog.css with improved comment section styles
• Update locales.js with comment section strings
• Move comment section position (above recommend/related sections)
• Run build and verify changes work correctly
• Run code review and security checks

Original prompt

目的:

• PR Implement Giscus lazy-load with IntersectionObserver and reposition comments section #54 と PR Implement lazy-loading for Giscus comments with site-matching styles #55 の実装が重複して作成されているため、両者を比較して最良の実装を統合し、develop ブランチへマージ準備ができる単一の Pull Request を作成する。

要件:

1. ベースブランチ: develop
2. 新規ブランチ名: feature/giscus-lazy-style
3. 両PRの良い点を統合した最終実装を作ること。統合の具体方針:
   • build-blog.js: コメントスニペットは記事テンプレート内に直接 <script> を埋め込まず、プレースホルダ
     を出力する実装に統一。
   • data 属性の命名は data-repo, data-repo-id, data-category, data-category-id, data-mapping, data-theme とし、escapeHtml による安全化を行う。
   • createHtml テンプレート内でコメント領域の挿入位置を記事本文の外（関連記事／おすすめの上）に配置。
   • head に assets/css/giscus-comments.css をリンクし、body の最後に assets/js/giscus-loader.js を defer で追加する。
   • client loader 名は giscus-loader.js を採用し、IntersectionObserver を使って遅延読み込みを行う（フォールバックで即時読み込み）。loader は placeholder の data-* を script 要素にコピーして giscus を初期化する。
   • スタイルファイルは assets/css/giscus-comments.css として追加し、.post-comments/.giscus/.giscus-frame に対するカード風スタイル、レスポンシブ、ダークモードに対応。
   • locales: missing keys を補完（comments_title、related_title など）。存在する翻訳キー名の差異があれば最も既存コードに合わせる。
4. テスト手順を PR の説明に記載すること（環境変数付きのローカルビルド、DOM の確認、loader の動作確認、CSS の見た目確認）。
5. .env.example を更新して必要な GISCUS 環境変数を追記する。
6. PR のタイトル: feat(giscus): lazy-load comments + styles, move comments section

追加指示:

• 既存の2つの draft PR (Implement Giscus lazy-load with IntersectionObserver and reposition comments section #54, Implement lazy-loading for Giscus comments with site-matching styles #55) の差分を評価して、機能が重複している箇所は統合し、片方の優れた実装（例: JSON data 属性 vs multiple data-*）を選択して最終実装に反映してください。
• CI や CSP に関する注意事項を PR 説明に明記すること。
• 追加コミットはわかりやすい単位で作成し、PR を draft で作成し、ユーザーのレビューを待つ状態にしてください。

期待される成果物:

• feature/giscus-lazy-style ブランチに統合実装をコミット
• develop に向けた Draft PR を1つ作成（PR 内容にテスト手順・環境変数・CSP 注意点を記載）

依頼者: BreadMotion (会話内リクエスト)

注: 既にリポジトリに PR #54 と PR #55 の draft が存在します。これらをベースに比較・統合して新しい PR を作成してください。

This pull request was created as a result of the following prompt from Copilot chat.

目的:

• PR Implement Giscus lazy-load with IntersectionObserver and reposition comments section #54 と PR Implement lazy-loading for Giscus comments with site-matching styles #55 の実装が重複して作成されているため、両者を比較して最良の実装を統合し、develop ブランチへマージ準備ができる単一の Pull Request を作成する。

要件:

1. ベースブランチ: develop
2. 新規ブランチ名: feature/giscus-lazy-style
3. 両PRの良い点を統合した最終実装を作ること。統合の具体方針:
   • build-blog.js: コメントスニペットは記事テンプレート内に直接 <script> を埋め込まず、プレースホルダ
     を出力する実装に統一。
   • data 属性の命名は data-repo, data-repo-id, data-category, data-category-id, data-mapping, data-theme とし、escapeHtml による安全化を行う。
   • createHtml テンプレート内でコメント領域の挿入位置を記事本文の外（関連記事／おすすめの上）に配置。
   • head に assets/css/giscus-comments.css をリンクし、body の最後に assets/js/giscus-loader.js を defer で追加する。
   • client loader 名は giscus-loader.js を採用し、IntersectionObserver を使って遅延読み込みを行う（フォールバックで即時読み込み）。loader は placeholder の data-* を script 要素にコピーして giscus を初期化する。
   • スタイルファイルは assets/css/giscus-comments.css として追加し、.post-comments/.giscus/.giscus-frame に対するカード風スタイル、レスポンシブ、ダークモードに対応。
   • locales: missing keys を補完（comments_title、related_title など）。存在する翻訳キー名の差異があれば最も既存コードに合わせる。
4. テスト手順を PR の説明に記載すること（環境変数付きのローカルビルド、DOM の確認、loader の動作確認、CSS の見た目確認）。
5. .env.example を更新して必要な GISCUS 環境変数を追記する。
6. PR のタイトル: feat(giscus): lazy-load comments + styles, move comments section

追加指示:

• 既存の2つの draft PR (Implement Giscus lazy-load with IntersectionObserver and reposition comments section #54, Implement lazy-loading for Giscus comments with site-matching styles #55) の差分を評価して、機能が重複している箇所は統合し、片方の優れた実装（例: JSON data 属性 vs multiple data-*）を選択して最終実装に反映してください。
• CI や CSP に関する注意事項を PR 説明に明記すること。
• 追加コミットはわかりやすい単位で作成し、PR を draft で作成し、ユーザーのレビューを待つ状態にしてください。

期待される成果物:

• feature/giscus-lazy-style ブランチに統合実装をコミット
• develop に向けた Draft PR を1つ作成（PR 内容にテスト手順・環境変数・CSP 注意点を記載）

依頼者: BreadMotion (会話内リクエスト)

注: 既にリポジトリに PR #54 と PR #55 の draft が存在します。これらをベースに比較・統合して新しい PR を作成してください。

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.