画面内のセクションを取得する機能を追加

Author: na-trium-144

app/[docs_id]/page.tsx

@@ -5,6 +5,7 @@ import { join } from "node:path";
 import { MarkdownSection, splitMarkdown } from "./splitMarkdown";
 import { Section } from "./section";
 import pyodideLock from "pyodide/pyodide-lock.json";
+import { PageContent } from "./pageContent";
 
 export default async function Page({
   params,
@@ -45,14 +46,7 @@ export default async function Page({
 
   return (
     <div className="p-4">
-      {splitMdContent.map((section, index) => {
-        const sectionId = `${docs_id}-${index}`;
-        return (
-          <div key={index} id={`${index}`}>
-            <Section section={section} sectionId={sectionId} />
-          </div>
-        );
-      })}
+      <PageContent splitMdContent={splitMdContent} docs_id={docs_id} />
     </div>
   );
 }

app/[docs_id]/pageContent.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Section } from "./section";
+import { MarkdownSection } from "./splitMarkdown";
+
+interface PageContentProps {
+  splitMdContent: MarkdownSection[];
+  docs_id: string;
+}
+export function PageContent(props: PageContentProps) {
+  // 各セクションが画面内にあるかどうかを調べる
+  const [sectionInView, setSectionInView] = useState<boolean[]>([]);
+  const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
+  // sectionRefsの長さをsplitMdContentに合わせる
+  while (sectionRefs.current.length < props.splitMdContent.length) {
+    sectionRefs.current.push(null);
+  }
+  sectionRefs.current = sectionRefs.current.slice(
+    0,
+    props.splitMdContent.length
+  );
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const newSectionInView = sectionRefs.current.map((sectionRef) => {
+        if (sectionRef) {
+          const rect = sectionRef.getBoundingClientRect();
+          return rect.top < window.innerHeight && rect.bottom >= 0;
+        }
+        return false;
+      });
+      setSectionInView(newSectionInView);
+    };
+    window.addEventListener("scroll", handleScroll);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  return props.splitMdContent.map((section, index) => {
+    const sectionId = `${props.docs_id}-${index}`;
+    return (
+      <div
+        key={index}
+        id={`${index}`}  // 目次からaタグで飛ぶために必要
+        ref={(el) => {
+          sectionRefs.current[index] = el;
+        }}
+      >
+        <Section section={section} sectionId={sectionId} />
+      </div>
+    );
+  });
+}