馬可無序プロジェクトのバナー設置

[Copilot]

Add the Makamujo AI-VTuber project banner (https://www.nahcnuj.work/makamujo/banner.png) across the site with two distinct clickable zones using an HTML image map.

New component: MakamujoBanner

• NicoNico badge (coords 105,67,306,87 within the 320×100px image) → https://live.nicovideo.jp/watch/user/14171889
• Rest of banner (default area) → https://www.nahcnuj.work/makamujo/index.html

Placements

• Top page (routes/index.tsx) — before <LinkRow>
• Sub-index pages (diary, works, essays) — after <h1> (banner included directly in route content)
• Article pages (Article.tsx) — rendered before the optional <h2>他の記事</h2> section, but not on sub-index pages (/index.html) since those already include the banner in their own content

Google Analytics event tracking

Clicking either banner area fires a GA4 event before navigation:

• NicoNico badge → event name click_makamujo_nicovideo
• Rest of banner → event name click_makamujo_landing

Navigation is delayed until the GA beacon is confirmed sent, or at most 500 ms, whichever comes first. Implemented in app/lib/makamujoBannerTracker.ts using the same injectable-dependency pattern as setupAdControl / setupScrollDepthTracking, and wired up in app/client.ts.

Tests

Added tests/e2e/makamujo-banner.test.ts with Playwright E2E click-navigation tests:

• Clicking the NicoNico badge — clicks at (205, 77) (center of rect 105,67,306,87) in a real Chromium browser, asserts navigation to https://live.nicovideo.jp/watch/user/14171889, and asserts the click_makamujo_nicovideo GA event was fired
• Clicking outside the badge — clicks at (50, 30), asserts navigation to https://www.nahcnuj.work/makamujo/index.html, and asserts the click_makamujo_landing GA event was fired

The tests start the Vite dev server, open a real Chromium browser, navigate to the home page, click at exact image coordinates, intercept the outgoing navigation request to assert the correct target URL, and capture the dev-mode console.log('[gtag]', ...) output to assert the correct GA event name — all without loading third-party sites.

Added app/lib/makamujoBannerTracker.test.ts with 13 unit tests covering correct event names, event_callback-driven navigation, 500 ms timeout fallback, no-double-navigation, preventDefault call, and edge cases.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>馬可無序プロジェクトのバナー設置</issue_title>
<issue_description>以下のAI-VTuber馬可無序プロジェクトのバナー画像を設置してください。

• 「ニコニコ生放送で配信中」のバッジ部分は番組視聴ページ https://live.nicovideo.jp/watch/user/14171889 へ
• それ以外の部分はランディングページ https://www.nahcnuj.work/makamujo/index.html へ

遷移するようにしてください。

設置場所

• トップページ: LinkRow の前
• 下層インデックスページ: 大見出しの後
• 下層記事ページ:「他の記事」見出しの前</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes 馬可無序プロジェクトのバナー設置 #629

---

📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.

[nahcnuj]

以下の観点でE2Eテストを追加してください。

• バッジの部分をクリックしたら番組視聴ページへ遷移する
• それ以外の部分をクリックしたらランディングページへ遷移する

[Copilot]

以下の観点でE2Eテストを追加してください。

• バッジの部分をクリックしたら番組視聴ページへ遷移する...

Added in 67c6b6f as tests/e2e/makamujo-banner.test.ts. The tests use Playwright + Chromium to load the real home page, click on the banner image at specific coordinates, and assert the intercepted navigation URL:

• Click at center of badge rect (205, 77) → https://live.nicovideo.jp/watch/user/14171889
• Click outside the badge (50, 30) → https://www.nahcnuj.work/makamujo/index.html

[nahcnuj]

@copilot
Fix E2E test failure

[Copilot]

@copilot
Fix E2E test failure

Fixed in 0ed037f. The CI e2e job was missing the Playwright browser installation step — the Chromium binary wasn't present in the runner environment. Added npx playwright install --with-deps chromium to .github/workflows/ci.yml before the npm run test:e2e step.

[nahcnuj]

@copilot
Fix E2E test failure

[Copilot]

@copilot
Fix E2E test failure

Fixed in 5148f9e. The afterAll hook was timing out at the default 10s limit — the browser close + SIGTERM/SIGKILL dev-server teardown (5s grace period) could exceed that. Added a 30s timeout to afterAll, matching the pattern of the 60s beforeAll.

[nahcnuj]

@copilot
まだE2Eテストが失敗しています。
当該テストを再現し、成功することを確認してからコミットしてください。

[Copilot]

@copilot
まだE2Eテストが失敗しています。
当該テストを再現し、成功することを確認してからコミットしてください。

Fixed in a9e6423. Root cause: npm run dev spawns a child shell which spawns Vite. When only the npm process was killed (SIGTERM/SIGKILL), Vite became an orphan and kept the stdio pipes open — Node.js only emits the close event after both the process exits and the stdio streams close, so the promise never resolved within 30s.

Fix: spawn with detached: true to put npm in a new process group, then use process.kill(-pid, 'SIGTERM/SIGKILL') to signal the entire group (npm + sh + Vite). Verified locally: all 9 tests pass and total duration dropped from ~40s to ~7.5s.

[nahcnuj]

@copilot
バッジがクリックされた時にGoogle Analyticsにイベントを送信するようにしてください。
送信するイベント名は番組視聴ページの部分かランディングページの部分かで分けてください。
イベント送信のために遷移を最大500ミリ秒まで遅延させることを許可します。

[Copilot]

@copilot
バッジがクリックされた時にGoogle Analyticsにイベントを送信するようにしてください。
送信するイベント名は番組視聴ページの...

Done in ce7108e. Here's what was added:

• app/components/MakamujoBanner.tsx: added data-gtag-event="click_makamujo_nicovideo" on the NicoNico badge area and data-gtag-event="click_makamujo_landing" on the rest-of-banner area.
• app/lib/makamujoBannerTracker.ts: new setupMakamujoBannerTracking function (same injectable-dependency pattern as setupAdControl) — intercepts clicks, fires gtag('event', eventName, { event_callback, event_timeout: 500 }), then opens the link once the beacon is confirmed sent or 500 ms have elapsed (whichever is first).
• app/client.ts: wires the above up with the real browser globals.
• app/lib/makamujoBannerTracker.test.ts: 13 unit tests covering correct event names, callback-driven navigation, 500 ms timeout fallback, no-double-navigation, and edge cases.

[nahcnuj]

@copilot
E2Eテストでも click_makamujo_nicovideo, click_makamujo_landing の送信を確認できると良さそうです！

[Copilot]

@copilot
E2Eテストでも click_makamujo_nicovideo, click_makamujo_landing の送信を確認できると良さそうです！

Done in c95903c. clickBannerAt now also captures the dev-mode console.log('[gtag]', 'event', eventName, ...) output by listening to page.on('console') and extracting the event name via JSHandle.jsonValue(). Both the navigation URL and the GA event name are awaited in parallel, then asserted in each test case:

• Clicking the badge → gtagEventName === 'click_makamujo_nicovideo'
• Clicking outside the badge → gtagEventName === 'click_makamujo_landing'