daisyuiのtooltipでtermを実装

Author: na-trium-144

app/(docs)/@docs/[lang]/[pageId]/page.tsx

@@ -10,6 +10,7 @@ import {
 import {
   getMarkdownSections,
   getPagesListForLang,
+  getTermDefinitions,
   LangId,
   PagePath,
   PageSlug,
@@ -18,6 +19,7 @@ import { cacheLife, cacheTag } from "next/cache";
 import { isCloudflare } from "@/lib/detectCloudflare";
 import { DocsAutoRedirect } from "./autoRedirect";
 import { dateReviver } from "@/lib/dateReviver";
+import { TermDefinitionProvider } from "@/markdown/term";
 
 export async function generateMetadata({
   params,
@@ -60,17 +62,21 @@ export default async function Page({
   const context = await initContext();
   const chatHistories = await getChatFromCache(path, context.userId);
 
+  const termDefinitions = await getTermDefinitions(lang);
+
   return (
     <>
-      <PageContent
-        chatHistories={chatHistories}
-        splitMdContent={sections}
-        langEntry={langEntry}
-        pageEntry={pageEntry}
-        prevPage={prevPage}
-        nextPage={nextPage}
-        path={path}
-      />
+      <TermDefinitionProvider termDefinitions={termDefinitions} lang={lang}>
+        <PageContent
+          chatHistories={chatHistories}
+          splitMdContent={sections}
+          langEntry={langEntry}
+          pageEntry={pageEntry}
+          prevPage={prevPage}
+          nextPage={nextPage}
+          path={path}
+        />
+      </TermDefinitionProvider>
       <DocsAutoRedirect path={path} />
     </>
   );

app/lib/docs.ts

@@ -398,6 +398,7 @@ export async function getTermDefinitions(
     }
     const terms: TermDefinition[] = [];
     const langEntry = await getPagesListForLang(langId);
+    const headingRegex = /^#+(.*)$/m;
     const codeBlockRegex = /^(`{3,})(.*)\n([\s\S]*?)\n^\1/gm;
     for (const page of langEntry.pages) {
       const sections = await getMarkdownSections(langId, page.slug);
@@ -408,10 +409,9 @@ export async function getTermDefinitions(
             page: page.slug,
             id: section.id,
             title: section.title,
-            rawContentWithoutCode: section.rawContent.replace(
-              codeBlockRegex,
-              ""
-            ),
+            rawContentWithoutCode: section.rawContent
+              .replace(codeBlockRegex, "")
+              .replace(headingRegex, ""),
           });
         }
       }

app/markdown/term.tsx

@@ -1,49 +1,71 @@
-import { JSX } from "react";
+"use client";
+
+import { createContext, JSX, ReactNode, useContext } from "react";
 import { ExtraProps } from "react-markdown";
 import { onlyText } from "react-children-utilities";
+import { LangId, TermDefinition } from "@/lib/docs";
+import Link from "next/link";
+import { StyledMarkdown } from "./markdown";
+
+const TermDefinitionContext = createContext<{
+  lang: LangId;
+  termDefinitions: TermDefinition[];
+} | null>(null);
+export function TermDefinitionProvider({
+  lang,
+  termDefinitions,
+  children,
+}: {
+  lang: LangId;
+  termDefinitions: TermDefinition[];
+  children: ReactNode;
+}) {
+  return (
+    <TermDefinitionContext.Provider value={{ lang, termDefinitions }}>
+      {children}
+    </TermDefinitionContext.Provider>
+  );
+}
 
 /**
  * https://github.com/ut-code/utcode-learn/blob/main/src/components/Term/index.tsx をもとに独自実装
  * Copyright (c) 2023 ut.code();
  */
 export default function Term(props: JSX.IntrinsicElements["q"] & ExtraProps) {
-  // 動作確認用
-  return <>[{props.children} → term:{onlyText(props.children)}]</>;
+  // termDefinitionの取得がasync関数であり、clientコンポーネントから直接取得できないので、
+  // @docs/lang/pageId/page.tsx で取得したものをcontextに渡してそれを取得する
+  const { lang, termDefinitions } = useContext(TermDefinitionContext) ?? {};
+
+  if (!termDefinitions) {
+    return props.children;
+  }
 
-  // const term = props.id
-  //   ? terms.find((term) => term.id === props.id)
-  //   : terms.find(
-  //       (term) =>
-  //         term.name === onlyText(props.children) ||
-  //         term.aliases.includes(onlyText(props.children)),
-  //     );
-  // if (!term)
-  // throw new Error(
-  //   `${props.id ? props.id : onlyText(props.children)}という用語は定義されていません`,
-  // );
+  const termText = onlyText(props.children);
+  const term = termDefinitions.find((t) => t.term.includes(termText));
+  if (!term) {
+    console.error(`'${termText}'という用語は定義されていません`);
+    return props.children;
+  }
 
-  // const wrap = (content: JSX.Element) => {
+  // [{props.children} → term:{onlyText(props.children)}]
 
-  //   return (
-  //     <Tippy
-  //       theme="material"
-  //       interactive={shouldLinkToReferencePage}
-  //       appendTo={window.document.body}
-  //       content={
-  //         <div className={styles.tooltipContent}>
-  //           <header className={styles.tooltipContentHeader}>{term.name}</header>
-  //           <div>{term.definition}</div>
-  //           {shouldLinkToReferencePage && (
-  //             <Link className={styles.tooltipLink} to={term.referencePage}>
-  //               <span>{referencePageTitle} へ</span>
-  //               <MdArrowForward size="1.2rem" />
-  //             </Link>
-  //           )}
-  //         </div>
-  //       }
-  //     >
-  //       {content}
-  //     </Tippy>
-  //   );
-  // };
+  return (
+    <span className="tooltip tooltip-primary">
+      <span className="tooltip-content bg-primary-content/60 border border-primary text-base-content backdrop-blur-xs">
+        <span className="breadcrumbs text-info text-center text-base wrap-none mb-4">
+          <ul className="">
+            <li>{term.page}</li>
+            <li>{term.title}</li>
+          </ul>
+        </span>
+        <StyledMarkdown content={term.rawContentWithoutCode} />
+      </span>
+      <Link
+        href={`/${lang}/${term.page}#${term.id}`}
+        className="link link-info decoration-dotted underline-offset-[0.2rem]"
+      >
+        {props.children}
+      </Link>
+    </span>
+  );
 }