From 9911330daa104d33ace3518ac5fd2f05db49f419 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:13:09 +0000 Subject: [PATCH 1/5] Initial plan From d0c4523f285e0807f73a678da69c8bd4527d6855 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:21:11 +0000 Subject: [PATCH 2/5] Add context to share dynamicMdContent and highlight current section in sidebar Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> --- app/[docs_id]/dynamicMdContext.tsx | 42 ++++++++++++++++++++++++++++++ app/[docs_id]/page.tsx | 19 ++++++++++---- app/[docs_id]/pageContent.tsx | 17 ++++-------- app/sidebar.tsx | 42 +++++++++++++++++++++++------- 4 files changed, 93 insertions(+), 27 deletions(-) create mode 100644 app/[docs_id]/dynamicMdContext.tsx diff --git a/app/[docs_id]/dynamicMdContext.tsx b/app/[docs_id]/dynamicMdContext.tsx new file mode 100644 index 0000000..05f0d80 --- /dev/null +++ b/app/[docs_id]/dynamicMdContext.tsx @@ -0,0 +1,42 @@ +"use client"; + +import { createContext, ReactNode, useContext, useState } from "react"; +import { DynamicMarkdownSection } from "./pageContent"; + +export interface IDynamicMdContext { + dynamicMdContent: DynamicMarkdownSection[]; + setDynamicMdContent: React.Dispatch>; +} + +const DynamicMdContext = createContext(null); + +export function useDynamicMdContext() { + const context = useContext(DynamicMdContext); + if (!context) { + throw new Error( + "useDynamicMdContext must be used within a DynamicMdProvider" + ); + } + return context; +} + +export function useDynamicMdContextOptional() { + return useContext(DynamicMdContext); +} + +export function DynamicMdProvider({ + children, + initialContent, +}: { + children: ReactNode; + initialContent: DynamicMarkdownSection[]; +}) { + const [dynamicMdContent, setDynamicMdContent] = + useState(initialContent); + + return ( + + {children} + + ); +} diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx index cf41646..ea79d08 100644 --- a/app/[docs_id]/page.tsx +++ b/app/[docs_id]/page.tsx @@ -6,6 +6,7 @@ import { MarkdownSection, splitMarkdown } from "./splitMarkdown"; import pyodideLock from "pyodide/pyodide-lock.json"; import { PageContent } from "./pageContent"; import { ChatHistoryProvider } from "./chatHistory"; +import { DynamicMdProvider } from "./dynamicMdContext"; import { getChat } from "@/lib/chatHistory"; export default async function Page({ @@ -52,13 +53,21 @@ export default async function Page({ const initialChatHistories = getChat(docs_id); + const initialDynamicMdContent = (await splitMdContent).map((section, i) => ({ + ...section, + inView: false, + sectionId: `${docs_id}-${i}`, + })); + return ( - + + + ); } diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx index 56cc6f6..be61488 100644 --- a/app/[docs_id]/pageContent.tsx +++ b/app/[docs_id]/pageContent.tsx @@ -5,6 +5,7 @@ import { MarkdownSection } from "./splitMarkdown"; import { ChatForm } from "./chatForm"; import { Heading, StyledMarkdown } from "./markdown"; import { useChatHistoryContext } from "./chatHistory"; +import { useDynamicMdContext } from "./dynamicMdContext"; import clsx from "clsx"; // MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる @@ -19,16 +20,8 @@ interface PageContentProps { docs_id: string; } export function PageContent(props: PageContentProps) { - const [dynamicMdContent, setDynamicMdContent] = useState< - DynamicMarkdownSection[] - >( - // useEffectで更新するのとは別に、SSRのための初期値 - props.splitMdContent.map((section, i) => ({ - ...section, - inView: false, - sectionId: `${props.docs_id}-${i}`, - })) - ); + const { dynamicMdContent, setDynamicMdContent } = useDynamicMdContext(); + useEffect(() => { // props.splitMdContentが変わったときにdynamicMdContentを更新 setDynamicMdContent( @@ -38,7 +31,7 @@ export function PageContent(props: PageContentProps) { sectionId: `${props.docs_id}-${i}`, })) ); - }, [props.splitMdContent, props.docs_id]); + }, [props.splitMdContent, props.docs_id, setDynamicMdContent]); const sectionRefs = useRef>([]); // sectionRefsの長さをsplitMdContentに合わせる @@ -65,7 +58,7 @@ export function PageContent(props: PageContentProps) { return () => { window.removeEventListener("scroll", handleScroll); }; - }, []); + }, [setDynamicMdContent]); const [isFormVisible, setIsFormVisible] = useState(false); diff --git a/app/sidebar.tsx b/app/sidebar.tsx index 1afa75b..0b636f0 100644 --- a/app/sidebar.tsx +++ b/app/sidebar.tsx @@ -6,6 +6,7 @@ import { splitMarkdown } from "./[docs_id]/splitMarkdown"; import { pagesList } from "./pagesList"; import { AccountMenu } from "./accountMenu"; import { ThemeToggle } from "./[docs_id]/themeToggle"; +import { useDynamicMdContextOptional } from "./[docs_id]/dynamicMdContext"; const fetcher: Fetcher = (url) => fetch(url).then((r) => r.text()); @@ -13,11 +14,23 @@ const fetcher: Fetcher = (url) => export function Sidebar() { const pathname = usePathname(); const docs_id = pathname.replace(/^\//, ""); - const { data, error, isLoading } = useSWR(`/docs/${docs_id}.md`, fetcher); + const dynamicMdContextValue = useDynamicMdContextOptional(); + + // コンテキストが利用可能な場合はそれを使用し、そうでない場合はフェッチする + const { data, error, isLoading } = useSWR( + dynamicMdContextValue ? null : `/docs/${docs_id}.md`, + fetcher + ); if (error) console.error("Sidebar fetch error:", error); - const splitmdcontent = splitMarkdown(data ?? ""); + // コンテキストがある場合はそれを使用、ない場合はフェッチしたデータを使用 + const splitmdcontent = dynamicMdContextValue?.dynamicMdContent ?? splitMarkdown(data ?? ""); + + // 現在表示中のセクション(最初にinViewがtrueのもの)を見つける + const currentSectionIndex = dynamicMdContextValue?.dynamicMdContent.findIndex( + (section) => section.inView + ) ?? -1; return (
{/* todo: 背景色ほんとにこれでいい? */} @@ -67,14 +80,23 @@ export function Sidebar() { {`${group.id}-${page.id}` === docs_id && !isLoading && (
    - {splitmdcontent.slice(1).map((section, idx) => ( -
  • - {section.title} -
  • - ))} + {splitmdcontent.slice(1).map((section, idx) => { + // idx + 1 は実際のsectionIndexに対応(slice(1)で最初を除外しているため) + const isCurrentSection = idx + 1 === currentSectionIndex; + return ( +
  • + + {section.title} + +
  • + ); + })}
)} From b1af976bd438a8d7b3ff6780a11773718c483d20 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 26 Oct 2025 18:51:34 +0000 Subject: [PATCH 3/5] Move DynamicMdProvider to layout.tsx for sidebar access Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> --- app/[docs_id]/dynamicMdContext.tsx | 4 +-- app/[docs_id]/page.tsx | 19 ++++---------- app/[docs_id]/pageContent.tsx | 41 ++++++++++++++++++++---------- app/layout.tsx | 39 +++++++++++++++------------- app/sidebar.tsx | 14 +++++----- 5 files changed, 62 insertions(+), 55 deletions(-) diff --git a/app/[docs_id]/dynamicMdContext.tsx b/app/[docs_id]/dynamicMdContext.tsx index 05f0d80..61a5765 100644 --- a/app/[docs_id]/dynamicMdContext.tsx +++ b/app/[docs_id]/dynamicMdContext.tsx @@ -26,13 +26,11 @@ export function useDynamicMdContextOptional() { export function DynamicMdProvider({ children, - initialContent, }: { children: ReactNode; - initialContent: DynamicMarkdownSection[]; }) { const [dynamicMdContent, setDynamicMdContent] = - useState(initialContent); + useState([]); return ( diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx index ea79d08..cf41646 100644 --- a/app/[docs_id]/page.tsx +++ b/app/[docs_id]/page.tsx @@ -6,7 +6,6 @@ import { MarkdownSection, splitMarkdown } from "./splitMarkdown"; import pyodideLock from "pyodide/pyodide-lock.json"; import { PageContent } from "./pageContent"; import { ChatHistoryProvider } from "./chatHistory"; -import { DynamicMdProvider } from "./dynamicMdContext"; import { getChat } from "@/lib/chatHistory"; export default async function Page({ @@ -53,21 +52,13 @@ export default async function Page({ const initialChatHistories = getChat(docs_id); - const initialDynamicMdContent = (await splitMdContent).map((section, i) => ({ - ...section, - inView: false, - sectionId: `${docs_id}-${i}`, - })); - return ( - - - + ); } diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx index be61488..8b75ffa 100644 --- a/app/[docs_id]/pageContent.tsx +++ b/app/[docs_id]/pageContent.tsx @@ -20,17 +20,28 @@ interface PageContentProps { docs_id: string; } export function PageContent(props: PageContentProps) { - const { dynamicMdContent, setDynamicMdContent } = useDynamicMdContext(); + const { setDynamicMdContent } = useDynamicMdContext(); + + // SSR用のローカルstate + const [localDynamicMdContent, setLocalDynamicMdContent] = useState< + DynamicMarkdownSection[] + >( + props.splitMdContent.map((section, i) => ({ + ...section, + inView: false, + sectionId: `${props.docs_id}-${i}`, + })) + ); useEffect(() => { - // props.splitMdContentが変わったときにdynamicMdContentを更新 - setDynamicMdContent( - props.splitMdContent.map((section, i) => ({ - ...section, - inView: false, - sectionId: `${props.docs_id}-${i}`, - })) - ); + // props.splitMdContentが変わったときにローカルstateとcontextの両方を更新 + const newContent = props.splitMdContent.map((section, i) => ({ + ...section, + inView: false, + sectionId: `${props.docs_id}-${i}`, + })); + setLocalDynamicMdContent(newContent); + setDynamicMdContent(newContent); }, [props.splitMdContent, props.docs_id, setDynamicMdContent]); const sectionRefs = useRef>([]); @@ -41,7 +52,7 @@ export function PageContent(props: PageContentProps) { useEffect(() => { const handleScroll = () => { - setDynamicMdContent((prevDynamicMdContent) => { + const updateContent = (prevDynamicMdContent: DynamicMarkdownSection[]) => { const dynMdContent = prevDynamicMdContent.slice(); // Reactの変更検知のために新しい配列を作成 for (let i = 0; i < sectionRefs.current.length; i++) { if (sectionRefs.current.at(i) && dynMdContent.at(i)) { @@ -51,7 +62,11 @@ export function PageContent(props: PageContentProps) { } } return dynMdContent; - }); + }; + + // ローカルstateとcontextの両方を更新 + setLocalDynamicMdContent(updateContent); + setDynamicMdContent(updateContent); }; window.addEventListener("scroll", handleScroll); handleScroll(); @@ -71,7 +86,7 @@ export function PageContent(props: PageContentProps) { gridTemplateColumns: `1fr auto`, }} > - {dynamicMdContent.map((section, index) => ( + {localDynamicMdContent.map((section, index) => ( <>
setIsFormVisible(false)} /> diff --git a/app/layout.tsx b/app/layout.tsx index 2589c54..a3e9ded 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -9,6 +9,7 @@ import { PyodideProvider } from "./terminal/python/pyodide"; import { WandboxProvider } from "./terminal/wandbox/wandbox"; import { EmbedContextProvider } from "./terminal/embedContext"; import { AutoAnonymousLogin } from "./accountMenu"; +import { DynamicMdProvider } from "./[docs_id]/dynamicMdContext"; export const metadata: Metadata = { title: "Create Next App", @@ -22,25 +23,27 @@ export default function RootLayout({ -
- -
- - - - {children} - - + +
+ +
+ + + + {children} + + +
+
+
-
-
-
+ ); diff --git a/app/sidebar.tsx b/app/sidebar.tsx index 0b636f0..f104dc7 100644 --- a/app/sidebar.tsx +++ b/app/sidebar.tsx @@ -6,7 +6,7 @@ import { splitMarkdown } from "./[docs_id]/splitMarkdown"; import { pagesList } from "./pagesList"; import { AccountMenu } from "./accountMenu"; import { ThemeToggle } from "./[docs_id]/themeToggle"; -import { useDynamicMdContextOptional } from "./[docs_id]/dynamicMdContext"; +import { useDynamicMdContext } from "./[docs_id]/dynamicMdContext"; const fetcher: Fetcher = (url) => fetch(url).then((r) => r.text()); @@ -14,23 +14,23 @@ const fetcher: Fetcher = (url) => export function Sidebar() { const pathname = usePathname(); const docs_id = pathname.replace(/^\//, ""); - const dynamicMdContextValue = useDynamicMdContextOptional(); + const { dynamicMdContent } = useDynamicMdContext(); - // コンテキストが利用可能な場合はそれを使用し、そうでない場合はフェッチする + // コンテキストが空の場合(まだページがロードされていない場合)はフェッチする const { data, error, isLoading } = useSWR( - dynamicMdContextValue ? null : `/docs/${docs_id}.md`, + dynamicMdContent.length === 0 ? `/docs/${docs_id}.md` : null, fetcher ); if (error) console.error("Sidebar fetch error:", error); // コンテキストがある場合はそれを使用、ない場合はフェッチしたデータを使用 - const splitmdcontent = dynamicMdContextValue?.dynamicMdContent ?? splitMarkdown(data ?? ""); + const splitmdcontent = dynamicMdContent.length > 0 ? dynamicMdContent : splitMarkdown(data ?? ""); // 現在表示中のセクション(最初にinViewがtrueのもの)を見つける - const currentSectionIndex = dynamicMdContextValue?.dynamicMdContent.findIndex( + const currentSectionIndex = dynamicMdContent.findIndex( (section) => section.inView - ) ?? -1; + ); return (
{/* todo: 背景色ほんとにこれでいい? */} From f0901926f7dc1493e093363a9e5196fae5486fbd Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Oct 2025 01:21:25 +0000 Subject: [PATCH 4/5] Remove unnecessary fetch from sidebar and clear context on page change Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> --- app/[docs_id]/pageContent.tsx | 5 +++++ app/sidebar.tsx | 20 ++------------------ 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx index 8b75ffa..f6e94c0 100644 --- a/app/[docs_id]/pageContent.tsx +++ b/app/[docs_id]/pageContent.tsx @@ -42,6 +42,11 @@ export function PageContent(props: PageContentProps) { })); setLocalDynamicMdContent(newContent); setDynamicMdContent(newContent); + + // クリーンアップ:コンポーネントがアンマウントされたらcontextをクリア + return () => { + setDynamicMdContent([]); + }; }, [props.splitMdContent, props.docs_id, setDynamicMdContent]); const sectionRefs = useRef>([]); diff --git a/app/sidebar.tsx b/app/sidebar.tsx index f104dc7..fe42327 100644 --- a/app/sidebar.tsx +++ b/app/sidebar.tsx @@ -1,32 +1,16 @@ "use client"; import Link from "next/link"; import { usePathname } from "next/navigation"; -import useSWR, { Fetcher } from "swr"; -import { splitMarkdown } from "./[docs_id]/splitMarkdown"; import { pagesList } from "./pagesList"; import { AccountMenu } from "./accountMenu"; import { ThemeToggle } from "./[docs_id]/themeToggle"; import { useDynamicMdContext } from "./[docs_id]/dynamicMdContext"; -const fetcher: Fetcher = (url) => - fetch(url).then((r) => r.text()); - export function Sidebar() { const pathname = usePathname(); const docs_id = pathname.replace(/^\//, ""); const { dynamicMdContent } = useDynamicMdContext(); - // コンテキストが空の場合(まだページがロードされていない場合)はフェッチする - const { data, error, isLoading } = useSWR( - dynamicMdContent.length === 0 ? `/docs/${docs_id}.md` : null, - fetcher - ); - - if (error) console.error("Sidebar fetch error:", error); - - // コンテキストがある場合はそれを使用、ない場合はフェッチしたデータを使用 - const splitmdcontent = dynamicMdContent.length > 0 ? dynamicMdContent : splitMarkdown(data ?? ""); - // 現在表示中のセクション(最初にinViewがtrueのもの)を見つける const currentSectionIndex = dynamicMdContent.findIndex( (section) => section.inView @@ -78,9 +62,9 @@ export function Sidebar() { {page.id}. {page.title} - {`${group.id}-${page.id}` === docs_id && !isLoading && ( + {`${group.id}-${page.id}` === docs_id && dynamicMdContent.length > 0 && (
    - {splitmdcontent.slice(1).map((section, idx) => { + {dynamicMdContent.slice(1).map((section, idx) => { // idx + 1 は実際のsectionIndexに対応(slice(1)で最初を除外しているため) const isCurrentSection = idx + 1 === currentSectionIndex; return ( From 4850b07df6099901037fe2bf9d9b8525ec11bf6a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 27 Oct 2025 01:41:07 +0000 Subject: [PATCH 5/5] =?UTF-8?q?Rename=20variables:=20dynamicMdContent?= =?UTF-8?q?=E2=86=92sidebarMdContent,=20localDynamicMdContent=E2=86=92dyna?= =?UTF-8?q?micMdContent?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> --- app/[docs_id]/dynamicMdContext.tsx | 26 +++++++++++++------------- app/[docs_id]/pageContent.tsx | 20 ++++++++++---------- app/layout.tsx | 6 +++--- app/sidebar.tsx | 10 +++++----- 4 files changed, 31 insertions(+), 31 deletions(-) diff --git a/app/[docs_id]/dynamicMdContext.tsx b/app/[docs_id]/dynamicMdContext.tsx index 61a5765..779ff4e 100644 --- a/app/[docs_id]/dynamicMdContext.tsx +++ b/app/[docs_id]/dynamicMdContext.tsx @@ -3,38 +3,38 @@ import { createContext, ReactNode, useContext, useState } from "react"; import { DynamicMarkdownSection } from "./pageContent"; -export interface IDynamicMdContext { - dynamicMdContent: DynamicMarkdownSection[]; - setDynamicMdContent: React.Dispatch>; +export interface ISidebarMdContext { + sidebarMdContent: DynamicMarkdownSection[]; + setSidebarMdContent: React.Dispatch>; } -const DynamicMdContext = createContext(null); +const SidebarMdContext = createContext(null); -export function useDynamicMdContext() { - const context = useContext(DynamicMdContext); +export function useSidebarMdContext() { + const context = useContext(SidebarMdContext); if (!context) { throw new Error( - "useDynamicMdContext must be used within a DynamicMdProvider" + "useSidebarMdContext must be used within a SidebarMdProvider" ); } return context; } -export function useDynamicMdContextOptional() { - return useContext(DynamicMdContext); +export function useSidebarMdContextOptional() { + return useContext(SidebarMdContext); } -export function DynamicMdProvider({ +export function SidebarMdProvider({ children, }: { children: ReactNode; }) { - const [dynamicMdContent, setDynamicMdContent] = + const [sidebarMdContent, setSidebarMdContent] = useState([]); return ( - + {children} - + ); } diff --git a/app/[docs_id]/pageContent.tsx b/app/[docs_id]/pageContent.tsx index f6e94c0..418a518 100644 --- a/app/[docs_id]/pageContent.tsx +++ b/app/[docs_id]/pageContent.tsx @@ -5,7 +5,7 @@ import { MarkdownSection } from "./splitMarkdown"; import { ChatForm } from "./chatForm"; import { Heading, StyledMarkdown } from "./markdown"; import { useChatHistoryContext } from "./chatHistory"; -import { useDynamicMdContext } from "./dynamicMdContext"; +import { useSidebarMdContext } from "./dynamicMdContext"; import clsx from "clsx"; // MarkdownSectionに追加で、ユーザーが今そのセクションを読んでいるかどうか、などの動的な情報を持たせる @@ -20,10 +20,10 @@ interface PageContentProps { docs_id: string; } export function PageContent(props: PageContentProps) { - const { setDynamicMdContent } = useDynamicMdContext(); + const { setSidebarMdContent } = useSidebarMdContext(); // SSR用のローカルstate - const [localDynamicMdContent, setLocalDynamicMdContent] = useState< + const [dynamicMdContent, setDynamicMdContent] = useState< DynamicMarkdownSection[] >( props.splitMdContent.map((section, i) => ({ @@ -40,14 +40,14 @@ export function PageContent(props: PageContentProps) { inView: false, sectionId: `${props.docs_id}-${i}`, })); - setLocalDynamicMdContent(newContent); setDynamicMdContent(newContent); + setSidebarMdContent(newContent); // クリーンアップ:コンポーネントがアンマウントされたらcontextをクリア return () => { - setDynamicMdContent([]); + setSidebarMdContent([]); }; - }, [props.splitMdContent, props.docs_id, setDynamicMdContent]); + }, [props.splitMdContent, props.docs_id, setSidebarMdContent]); const sectionRefs = useRef>([]); // sectionRefsの長さをsplitMdContentに合わせる @@ -70,15 +70,15 @@ export function PageContent(props: PageContentProps) { }; // ローカルstateとcontextの両方を更新 - setLocalDynamicMdContent(updateContent); setDynamicMdContent(updateContent); + setSidebarMdContent(updateContent); }; window.addEventListener("scroll", handleScroll); handleScroll(); return () => { window.removeEventListener("scroll", handleScroll); }; - }, [setDynamicMdContent]); + }, [setSidebarMdContent]); const [isFormVisible, setIsFormVisible] = useState(false); @@ -91,7 +91,7 @@ export function PageContent(props: PageContentProps) { gridTemplateColumns: `1fr auto`, }} > - {localDynamicMdContent.map((section, index) => ( + {dynamicMdContent.map((section, index) => ( <>
    setIsFormVisible(false)} /> diff --git a/app/layout.tsx b/app/layout.tsx index a3e9ded..59d2049 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -9,7 +9,7 @@ import { PyodideProvider } from "./terminal/python/pyodide"; import { WandboxProvider } from "./terminal/wandbox/wandbox"; import { EmbedContextProvider } from "./terminal/embedContext"; import { AutoAnonymousLogin } from "./accountMenu"; -import { DynamicMdProvider } from "./[docs_id]/dynamicMdContext"; +import { SidebarMdProvider } from "./[docs_id]/dynamicMdContext"; export const metadata: Metadata = { title: "Create Next App", @@ -23,7 +23,7 @@ export default function RootLayout({ - +
    @@ -43,7 +43,7 @@ export default function RootLayout({
    -
    + ); diff --git a/app/sidebar.tsx b/app/sidebar.tsx index fe42327..b95fda3 100644 --- a/app/sidebar.tsx +++ b/app/sidebar.tsx @@ -4,15 +4,15 @@ import { usePathname } from "next/navigation"; import { pagesList } from "./pagesList"; import { AccountMenu } from "./accountMenu"; import { ThemeToggle } from "./[docs_id]/themeToggle"; -import { useDynamicMdContext } from "./[docs_id]/dynamicMdContext"; +import { useSidebarMdContext } from "./[docs_id]/dynamicMdContext"; export function Sidebar() { const pathname = usePathname(); const docs_id = pathname.replace(/^\//, ""); - const { dynamicMdContent } = useDynamicMdContext(); + const { sidebarMdContent } = useSidebarMdContext(); // 現在表示中のセクション(最初にinViewがtrueのもの)を見つける - const currentSectionIndex = dynamicMdContent.findIndex( + const currentSectionIndex = sidebarMdContent.findIndex( (section) => section.inView ); return ( @@ -62,9 +62,9 @@ export function Sidebar() { {page.id}. {page.title} - {`${group.id}-${page.id}` === docs_id && dynamicMdContent.length > 0 && ( + {`${group.id}-${page.id}` === docs_id && sidebarMdContent.length > 0 && (
      - {dynamicMdContent.slice(1).map((section, idx) => { + {sidebarMdContent.slice(1).map((section, idx) => { // idx + 1 は実際のsectionIndexに対応(slice(1)で最初を除外しているため) const isCurrentSection = idx + 1 === currentSectionIndex; return (