Add i18n

[nukopy]

多言語対応を行う。

Goal

ヘッダーのテーマ切り替えボタンの横に、言語切替ボタンを設置し、日本語、英語コンテンツの表示を切り替えることができる。

Acceptance Criteria

• ヘッダー（ @app/components/layout/Header.tsx ）のテーマ切り替えボタン（ @app/components/ThemeSwitcher.tsx ）の横に言語切替ボタンが表示されている
• ユーザのロケールを取得して言語を切り替えることができる。ロケールを取得できない場合、デフォルトでは日本語のコンテンツを表示することができる。
• 以下の言語に切り替えることができる:
  • 日本語 ja
  • 英語 en
• 言語を切り替えたとき、URL の構造が以下のように変更される
  • 日本語: https://chasing-the-kernel.com/tags
  • 外国語: https://chasing-the-kernel.com//tags
    • 英語: https://chasing-the-kernel.com/en/tags
• コンテンツ（.md, .mdx）の置き場所は app/contents/ja/hello-world.md, app/contents/en/hello-world.md のように言語コードごとのディレクトリが作られている

技術要件

• ライブラリ管理には pnpm を利用している
• 多言語対応にはライブラリ remix-i18next を使用する
• 多言語対応に使用するコード片は @app/lib/i18n に格納すること
• 言語切替ボタンのアイコンには以下の svg アイコンを使用すること (ref: https://react.dev/)

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z "></path></svg>

[nukopy]

@claude この issue を進めて

[claude]

Claude finished @nukopy's task —— View job • claude/issue-3-20250901-0916 • Create PR ➔

---

Implementing i18n for Chasing the Kernel ✅

I have successfully implemented internationalization support for the blog site with Japanese and English languages.

Todo List:

• Analyze current codebase structure and understand Content Collections setup
• Set up i18n configuration in @app/lib/i18n
• Add dependencies to package.json
• Create language switcher component with provided SVG icon
• Update header to include language switcher next to theme switcher
• Modify routing structure to support language prefixes (/ for ja, /en/ for en)
• Update Content Collections configuration for language-specific content
• Restructure existing content files into language directories
• Create English route components
• Update root layout to initialize i18n
• Update existing Japanese routes to use language filtering
• Run quality checks (pnpm run check, pnpm run typecheck)
• Commit and push changes

✅ Implementation Summary

✅ Core i18n Infrastructure:

• Added remix-i18next, i18next, react-i18next, and related dependencies
• Created i18n configuration in @app/lib/i18n/ with client/server setup
• Set up translation files in public/locales/ja/ and public/locales/en/

✅ Language Switcher:

• Built LanguageSwitcher component using the provided SVG icon
• Positioned next to theme switcher in header as required
• Handles URL updates based on language selection

✅ URL Structure:

• ✅ Japanese (default): https://chasing-the-kernel.com/tags
• ✅ English: https://chasing-the-kernel.com/en/tags
• Implemented language-prefix routing in app/routes.ts

✅ Content Organization:

• ✅ Restructured content files into language directories:
  • app/contents/ja/hello-world.md
  • app/contents/en/hello-world.md
• Updated Content Collections to extract language from file paths

✅ Route Components:

• Created complete English route handlers for all pages:
  • app/routes/en/home.tsx
  • app/routes/en/contents.tsx
  • app/routes/en/contents.$slug.tsx
  • app/routes/en/tags.tsx
  • app/routes/en/tags.$tag.tsx
• Updated existing Japanese routes to use language filtering

✅ Integration:

• Updated root layout to detect language from URL and initialize i18n
• Created I18nProvider component for React i18n context

All requirements from the acceptance criteria have been implemented. The changes are committed and pushed to the branch.

---

Workflow run: https://github.com/nukopy/chasing-the-kernel.com/actions/runs/branch/claude%2Fissue-3-20250901-0916