Highlight current section in sidebar table of contents #79

Copilot · 2025-10-26T18:13:09Z

Plan: Highlight Current Section in Sidebar

Create a new Context to share dynamicMdContent from pageContent.tsx to sidebar.tsx
Update pageContent.tsx to provide the context with dynamicMdContent
Update sidebar.tsx to consume the context and remove its own markdown fetching
Update sidebar.tsx to make the current section (first inView: true) bold
Move DynamicMdProvider to layout.tsx so Sidebar can access it
Update pageContent to manage both local state (for SSR) and context state
Remove unnecessary fetch from sidebar (context provides data)
Clear context when page changes to prevent stale data
Rename for clarity: context uses sidebarMdContent, page uses dynamicMdContent

Summary

This PR implements highlighting of the current section in the sidebar table of contents as requested in the issue.

Implementation Details

1. Created `dynamicMdContext.tsx`

A new React context that shares DynamicMarkdownSection[] data between components:

Provider initializes with empty array (populated when a docs page loads)
Provides sidebarMdContent state and its setter for sharing with sidebar
Includes both required and optional context hooks

2. Updated `layout.tsx`

Wraps entire app with SidebarMdProvider so Sidebar has access
Provider is now at root level, accessible to both page content and sidebar

3. Updated `pageContent.tsx`

Manages both local state (dynamicMdContent for SSR and page rendering) and context state (sidebarMdContent for sidebar)
Updates both states when content changes or user scrolls
Local state ensures proper SSR rendering
Context state enables sidebar to access current section info
Cleanup effect clears context when component unmounts, preventing stale data when switching pages

4. Updated `page.tsx`

Removed provider wrapper (now in layout.tsx)
Simplified to just wrap with ChatHistoryProvider

5. Updated `sidebar.tsx`

Uses required context hook (always available since provider is in layout)
Removed SWR fetch - no longer needed as context provides the data
Displays TOC only when sidebarMdContent.length > 0 (page is loaded)
Finds the first section with inView: true as the current section
Applies font-bold class to highlight the current section in the table of contents

Naming

sidebarMdContent: Content shared via context for sidebar display
dynamicMdContent: Local state in pageContent for page rendering and SSR

Testing

✅ TypeScript compilation passes
✅ ESLint passes (only pre-existing warnings remain)
✅ Build succeeds

Original prompt

This section details on the original issue you should resolve

<issue_title>目次で現在いるセクションをマーキング</issue_title>
<issue_description></issue_description>

<agent_instructions>ドキュメントのセクションがユーザーの画面内に入っているかどうかが app/[docs_id]/pageContent.tsx 内で dynamicMdContent.inView で取得できます。
これをContextとかを経由してsidebar.tsxに渡して、sidebarで表示している見出しのリストの中で現在ユーザーが読んでいる場所を太字にし目立たせてください。現在ユーザーが読んでいる場所はinViewがtrueである最初のセクションとします
また、sidebarの中で /docs/${docs_id}.md をフェッチして得られる splitmdcontent とpageContent.tsx内の splitMdContent, dynamicMdContent は同じものなので、contextでdynamicMdContent を渡す場合sidebar側でのフェッチは不要になりそうです</agent_instructions>

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

Fixes 目次で現在いるセクションをマーキング #46

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

…n sidebar Co-authored-by: na-trium-144 <[email protected]>

cloudflare-workers-and-pages · 2025-10-26T18:21:26Z

Deploying with Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Preview URL	Updated (UTC)
✅ Deployment successful! View logs	my-code	`4850b07`	Commit Preview URL Branch Preview URL	Oct 27 2025, 01:44 AM

na-trium-144 · 2025-10-26T18:43:48Z

@copilot sidebarはapp/layout.tsxから呼び出されるので、[docs_id]/page.tsxにProviderを置いても使えません。外側のlayout.tsxにProviderをおく必要があります。
layout.tsxからはdocs_idは取得できないので、context内のmdcontentの初期値は[]でよいです。pageContent.tsxではSSR用の初期値入りのuseStateで管理するdynamicMdContentと別に追加でcontextのdynamicMdContentをセットすることになると思います。

Co-authored-by: na-trium-144 <[email protected]>

Copilot · 2025-10-26T18:51:47Z

@copilot sidebarはapp/layout.tsxから呼び出されるので、[docs_id]/page.tsxにProviderを置いても使えません。外側のlayout.tsxにProviderをおく必要があります。
layout....

Fixed in b1af976. Moved DynamicMdProvider to layout.tsx with empty initial array. pageContent.tsx now manages both local state (for SSR) and updates the context separately as you suggested.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

sparrow.cloudflare.com
- Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/.npm/_npx/32026684e21afda6/node_modules/wrangler/wrangler-dist/cli.js types --env-interface CloudflareEnv cloudflare-env.d.ts (dns block)
workers.cloudflare.com
- Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/.npm/_npx/32026684e21afda6/node_modules/wrangler/wrangler-dist/cli.js types --env-interface CloudflareEnv cloudflare-env.d.ts (dns block)
- Triggering command: node /home/REDACTED/.npm/_npx/8b377f6eec906bc4/node_modules/.bin/next build (dns block)
- Triggering command: node ./node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

na-trium-144 · 2025-10-27T01:14:17Z

app/sidebar.tsx

+  // コンテキストが空の場合（まだページがロードされていない場合）はフェッチする
+  const { data, error, isLoading } = useSWR(
+    dynamicMdContent.length === 0 ? `/docs/${docs_id}.md` : null,
+    fetcher
+  );


@copilot ページがロードされる時間とこれをfetchする時間はほぼ変わらないので、このfetchは要らないです

Fixed in f090192. Removed the SWR fetch - sidebar now only uses context data.

na-trium-144 · 2025-10-27T01:15:03Z

app/[docs_id]/dynamicMdContext.tsx

@copilot ページを切り替えた際に前のページのdynamicMdContentが残ってしまっています。

Fixed in f090192. Added cleanup effect that clears context when PageContent unmounts.

Co-authored-by: na-trium-144 <[email protected]>

Copilot · 2025-10-27T01:22:16Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

sparrow.cloudflare.com
- Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/.npm/_npx/32026684e21afda6/node_modules/wrangler/wrangler-dist/cli.js types --env-interface CloudflareEnv cloudflare-env.d.ts (dns block)
workers.cloudflare.com
- Triggering command: /usr/local/bin/node --no-warnings --experimental-vm-modules /home/REDACTED/.npm/_npx/32026684e21afda6/node_modules/wrangler/wrangler-dist/cli.js types --env-interface CloudflareEnv cloudflare-env.d.ts (dns block)
- Triggering command: node /home/REDACTED/.npm/_npx/4c97cb624cf636f1/node_modules/.bin/next lint (dns block)
- Triggering command: node /home/REDACTED/work/my-code/my-code/node_modules/.bin/next build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

na-trium-144 · 2025-10-27T01:34:59Z

@copilot dynamicMdContent→sidebarMdContent、localDynamicMdContent→dynamicMdContentに名前変更して

…ntent→dynamicMdContent Co-authored-by: na-trium-144 <[email protected]>

Copilot · 2025-10-27T01:41:20Z

@copilot dynamicMdContent→sidebarMdContent、localDynamicMdContent→dynamicMdContentに名前変更して

Fixed in 4850b07. Renamed all variables and context:

Context: DynamicMdContext → SidebarMdContext, dynamicMdContent → sidebarMdContent
PageContent: localDynamicMdContent → dynamicMdContent

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

workers.cloudflare.com
- Triggering command: node /home/REDACTED/.npm/_npx/4c97cb624cf636f1/node_modules/.bin/next lint (dns block)
- Triggering command: node /home/REDACTED/work/my-code/my-code/node_modules/.bin/next build (dns block)
- Triggering command: /usr/local/bin/node /home/REDACTED/work/my-code/my-code/node_modules/next/dist/compiled/jest-worker/processChild.js (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Copilot AI self-assigned this Oct 26, 2025

Initial plan

9911330

Copilot AI assigned na-trium-144 Oct 26, 2025

Copilot started work on behalf of na-trium-144 October 26, 2025 18:13 View session

Add context to share dynamicMdContent and highlight current section i…

d0c4523

…n sidebar Co-authored-by: na-trium-144 <[email protected]>

Copilot AI changed the title ~~[WIP] Add marking of current section in sidebar~~ Highlight current section in sidebar table of contents Oct 26, 2025

Copilot finished work on behalf of na-trium-144 October 26, 2025 18:25

Copilot AI requested a review from na-trium-144 October 26, 2025 18:25

Copilot started work on behalf of na-trium-144 October 26, 2025 18:44 View session

Move DynamicMdProvider to layout.tsx for sidebar access

b1af976

Co-authored-by: na-trium-144 <[email protected]>

Copilot finished work on behalf of na-trium-144 October 26, 2025 18:52

na-trium-144 reviewed Oct 27, 2025

View reviewed changes

Copilot started work on behalf of na-trium-144 October 27, 2025 01:15 View session

Remove unnecessary fetch from sidebar and clear context on page change

f090192

Co-authored-by: na-trium-144 <[email protected]>

Copilot AI requested a review from na-trium-144 October 27, 2025 01:22

Copilot finished work on behalf of na-trium-144 October 27, 2025 01:22

Copilot started work on behalf of na-trium-144 October 27, 2025 01:35 View session

Rename variables: dynamicMdContent→sidebarMdContent, localDynamicMdCo…

4850b07

…ntent→dynamicMdContent Co-authored-by: na-trium-144 <[email protected]>

Copilot finished work on behalf of na-trium-144 October 27, 2025 01:42

na-trium-144 marked this pull request as ready for review October 27, 2025 01:44

na-trium-144 merged commit d20552b into main Oct 27, 2025
5 checks passed

na-trium-144 deleted the copilot/mark-current-section-in-sidebar branch October 27, 2025 01:44

Highlight current section in sidebar table of contents #79

Highlight current section in sidebar table of contents #79

Uh oh!

Conversation

Copilot AI commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Plan: Highlight Current Section in Sidebar

Summary

Implementation Details

1. Created dynamicMdContext.tsx

2. Updated layout.tsx

3. Updated pageContent.tsx

4. Updated page.tsx

5. Updated sidebar.tsx

Naming

Testing

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

Uh oh!

cloudflare-workers-and-pages bot commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying with Cloudflare Workers

Uh oh!

na-trium-144 commented Oct 26, 2025

Uh oh!

Copilot AI commented Oct 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

na-trium-144 Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

na-trium-144 Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 27, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Oct 27, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

na-trium-144 commented Oct 27, 2025

Uh oh!

Copilot AI commented Oct 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Oct 26, 2025 •

edited

Loading

1. Created `dynamicMdContext.tsx`

2. Updated `layout.tsx`

3. Updated `pageContent.tsx`

4. Updated `page.tsx`

5. Updated `sidebar.tsx`

cloudflare-workers-and-pages bot commented Oct 26, 2025 •

edited

Loading

Copilot AI commented Oct 26, 2025 •

edited

Loading

Copilot AI commented Oct 27, 2025 •

edited

Loading