Merge pull request #224 from ut-code/utcodelearn-term

ut.code(); LearnのremarkTermを実装し、キーワードのポップアップ・リンク

Author: na-trium-144

.gitignore

@@ -5,6 +5,7 @@
 
 # documentation
 /public/docs/**/sections.*
+/public/docs/**/termDefinitions.*
 /public/docs/languages.*
 /public/docs/revisions-dev.yml
 /public/docs/commits-dev.yml

README.md

@@ -101,6 +101,10 @@ Cloudflare Worker のビルドログとステータス表示が見れますが
       - このセクションに関連する、想定される質問例。
       # question: 自体を省略すると、GitHub ActionがGeminiを呼び出して質問例を生成しpushします。
       # 質問例が不要な場合は question: [] にしてください。
+    term:
+      - キーワード
+      - きーわーど
+      # 他のページで [[キーワード]] と書いた場合に、このセクションの内容がポップアップで表示される。
     ```
 * コード例はそれが配置されているセクションの内容と関連するようにする。
     ````md
@@ -185,7 +189,38 @@ Cloudflare Worker のビルドログとステータス表示が見れますが
         ````
     - 練習問題のファイル名は不都合がなければ `practice(章番号)_(問題番号).拡張子` で統一。空でもよいのでファイルコードブロックとexecコードブロックを置く
 
-## markdown仕様
+### Alert
+
+GitHubのalert記法の、`NOTE` `TIP` `WARNING` `CAUTION` が使えます。
+`IMPORTANT` はwarningに置き換えられます。
+
+```
+> [!NOTE]  
+> Highlights information that users should take into account, even when skimming.
+```
+
+### 内部リンク
+
+```
+[[用語]]
+```
+と書くと、`term: - 用語` が定義されている別のセクションへのリンクになり、ポップアップでその内容も表示されます。
+
+markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほげふが` へのリンクになり、表示は「<ins>ほげ**ふが**</ins>」になります。ただし `**[[ふが]]**` はリンクの色が優先されるのに対し `[[**ふが**]]` は強調の色が優先されます。
+
+```
+[[./1-foo]]
+[[./1]]
+```
+と書くと、同じ言語のページID `1-foo` またはindex `1` (ページのindexはindex.ymlの記述順で0-based) へのリンクになり、表示は「<ins>第1章</ins>」になります
+
+```
+[[./prev]]
+[[./next]]
+```
+と書くと、同じ言語の前のページ・次のページへのリンクになり、表示は「<ins>第1章</ins>」(実際の章番号)になります
+
+### コード実行環境仕様
 
 実行環境の説明は ./packages/runtime/README.md を参照
 

app/(docs)/@chat/chat/[chatId]/chatArea.tsx

@@ -4,9 +4,10 @@ import { ChatAreaStateUpdater } from "@/(docs)/chatAreaState";
 import { useStreamingChatContext } from "@/(docs)/streamingChatContext";
 import { deleteChatAction } from "@/actions/deleteChat";
 import { ChatWithMessages } from "@/lib/chatHistory";
-import { LanguageEntry, MarkdownSection, PageEntry } from "@/lib/docs";
+import { LangId, MarkdownSection, PageSlug } from "@/lib/docs";
 import { Heading } from "@/markdown/heading";
 import { StyledMarkdown } from "@/markdown/markdown";
+import { usePagesListForLang } from "@/pagesListContext";
 import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -70,12 +71,15 @@ export function ChatAreaContainer(props: {
 interface Props {
   chatId: string;
   chatData: ChatWithMessages;
-  targetLang: LanguageEntry | undefined;
-  targetPage: PageEntry | undefined;
+  langId: LangId;
+  pageSlug: PageSlug;
   targetSection: MarkdownSection | undefined;
 }
 export function ChatAreaContent(props: Props) {
-  const { chatId, chatData, targetLang, targetPage, targetSection } = props;
+  const { chatId, chatData, langId, pageSlug, targetSection } = props;
+
+  const langEntry = usePagesListForLang(langId);
+  const pageEntry = langEntry?.pages.find((p) => p.slug === pageSlug);
 
   const messagesAndDiffs = [
     ...chatData.messages.map((msg) => ({ type: "message" as const, ...msg })),
@@ -97,13 +101,13 @@ export function ChatAreaContent(props: Props) {
       <div className="flex-none breadcrumbs text-sm">
         <ul className="flex-wrap">
           <li>
-            <Link href={`/${targetLang?.id}/${targetLang?.pages[0].slug}`}>
-              {targetLang?.name}
+            <Link href={`/${langId}/${langEntry?.pages[0].slug}`}>
+              {langEntry?.name}
             </Link>
           </li>
           <li>
             <Link href={`/${chatData.section.pagePath}`}>
-              {targetPage?.index}. {targetPage?.name}
+              {pageEntry?.index}. {pageEntry?.name}
             </Link>
           </li>
           <li>

app/(docs)/@chat/chat/[chatId]/page.tsx

@@ -4,7 +4,11 @@ import {
   getChatOne,
   initContext,
 } from "@/lib/chatHistory";
-import { getMarkdownSections, getPagesList } from "@/lib/docs";
+import {
+  getMarkdownSections,
+  LangId,
+  PageSlug,
+} from "@/lib/docs";
 import { ChatAreaContainer, ChatAreaContent } from "./chatArea";
 import { cacheLife, cacheTag } from "next/cache";
 import { isCloudflare } from "@/lib/detectCloudflare";
@@ -29,26 +33,20 @@ export default async function ChatPage({
     );
   }
 
-  const pagesList = await getPagesList();
-  const targetLang = pagesList.find(
-    (lang) => lang.id === chatData.section.pagePath.split("/")[0]
-  );
-  const targetPage = targetLang?.pages.find(
-    (page) => page.slug === chatData.section.pagePath.split("/")[1]
-  );
-  const sections =
-    targetLang && targetPage
-      ? await getMarkdownSections(targetLang.id, targetPage.slug)
-      : [];
+  const [langId, pageSlug] = chatData.section.pagePath.split("/") as [
+    LangId,
+    PageSlug,
+  ];
+  const sections = await getMarkdownSections(langId, pageSlug);
   const targetSection = sections.find((sec) => sec.id === chatData.sectionId);
 
   return (
     <ChatAreaContainer chatId={chatId}>
       <ChatAreaContent
         chatId={chatId}
         chatData={chatData}
-        targetLang={targetLang}
-        targetPage={targetPage}
+        langId={langId}
+        pageSlug={pageSlug}
         targetSection={targetSection}
       />
     </ChatAreaContainer>

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

@@ -9,7 +9,8 @@ import {
 } from "@/lib/chatHistory";
 import {
   getMarkdownSections,
-  getPagesList,
+  getPagesListForLang,
+  getTermDefinitions,
   LangId,
   PagePath,
   PageSlug,
@@ -18,15 +19,15 @@ 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,
 }: {
   params: Promise<{ lang: LangId; pageId: PageSlug }>;
 }): Promise<Metadata> {
   const { lang, pageId } = await params;
-  const pagesList = await getPagesList();
-  const langEntry = pagesList.find((l) => l.id === lang);
+  const langEntry = await getPagesListForLang(lang);
   const pageEntry = langEntry?.pages.find((p) => p.slug === pageId);
   if (!langEntry || !pageEntry) notFound();
 
@@ -45,15 +46,6 @@ export default async function Page({
   params: Promise<{ lang: LangId; pageId: PageSlug }>;
 }) {
   const { lang, pageId } = await params;
-  const pagesList = await getPagesList();
-  const langEntry = pagesList.find((l) => l.id === lang);
-  const pageEntryIndex =
-    langEntry?.pages.findIndex((p) => p.slug === pageId) ?? -1;
-  const pageEntry = langEntry?.pages[pageEntryIndex];
-  if (!langEntry || !pageEntry) notFound();
-
-  const prevPage = langEntry.pages[pageEntryIndex - 1];
-  const nextPage = langEntry.pages[pageEntryIndex + 1];
 
   // server componentなのでuseMemoいらない
   const path = { lang: lang, page: pageId };
@@ -62,17 +54,23 @@ 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}
+        page={pageId}
+      >
+        <PageContent
+          chatHistories={chatHistories}
+          splitMdContent={sections}
+          langId={lang}
+          pageSlug={pageId}
+          path={path}
+        />
+      </TermDefinitionProvider>
       <DocsAutoRedirect path={path} />
     </>
   );

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

@@ -8,32 +8,38 @@ import clsx from "clsx";
 import { PageTransition } from "./pageTransition";
 import {
   DynamicMarkdownSection,
-  LanguageEntry,
+  LangId,
   MarkdownSection,
-  PageEntry,
   PagePath,
+  PageSlug,
   SectionId,
 } from "@/lib/docs";
 import { Heading } from "@/markdown/heading";
 import Link from "next/link";
 import { useChatId } from "@/(docs)/chatAreaState";
 import { ChatWithMessages } from "@/lib/chatHistory";
+import { usePagesListForLang } from "@/pagesListContext";
 
 interface PageContentProps {
   splitMdContent: MarkdownSection[];
-  langEntry: LanguageEntry;
-  pageEntry: PageEntry;
-  prevPage?: PageEntry;
-  nextPage?: PageEntry;
+  langId: LangId;
+  pageSlug: PageSlug;
   path: PagePath;
   chatHistories: ChatWithMessages[];
 }
 export function PageContent(props: PageContentProps) {
   const { setSidebarMdContent } = useSidebarMdContext();
-  const { splitMdContent, pageEntry, path, chatHistories } = props;
+  const { splitMdContent, langId, pageSlug, path, chatHistories } = props;
+
+  const langEntry = usePagesListForLang(langId);
+  const pageEntryIndex =
+    langEntry?.pages.findIndex((p) => p.slug === pageSlug) ?? -1;
+  const pageEntry = langEntry?.pages[pageEntryIndex];
+  const prevPage = langEntry?.pages[pageEntryIndex - 1];
+  const nextPage = langEntry?.pages[pageEntryIndex + 1];
 
   const [sectionInView, setSectionInView] = useState<boolean[]>([]);
-  const sectionRefs = useRef<Array<HTMLDivElement | null>>([]);
+  const sectionRefs = useRef<Array<HTMLElement | null>>([]);
   useEffect(() => {
     const handleScroll = () => {
       setSectionInView((sectionInView) => {
@@ -143,12 +149,12 @@ export function PageContent(props: PageContentProps) {
         }}
       >
         <Heading className="max-w-docs" level={1}>
-          第{pageEntry.index}章: {pageEntry.title}
+          第{pageEntry?.index}章: {pageEntry?.title}
         </Heading>
         <div />
         {dynamicMdContent.map((section, index) => (
           <Fragment key={section.id}>
-            <div
+            <section
               className="min-w-1/2 max-w-docs text-justify"
               id={section.id} // 目次からaタグで飛ぶために必要
               ref={(el) => {
@@ -159,8 +165,9 @@ export function PageContent(props: PageContentProps) {
               <StyledMarkdown
                 content={section.replacedContent}
                 replacedRange={section.replacedRange}
+                interactive
               />
-            </div>
+            </section>
             <div>
               <ChatListForSection
                 sectionId={section.id}
@@ -172,8 +179,8 @@ export function PageContent(props: PageContentProps) {
         ))}
         <PageTransition
           lang={path.lang}
-          prevPage={props.prevPage}
-          nextPage={props.nextPage}
+          prevPage={prevPage}
+          nextPage={nextPage}
         />
         <div />
       </div>
@@ -183,7 +190,7 @@ export function PageContent(props: PageContentProps) {
         <div className="fixed bottom-4 right-4 left-4 has-sidebar:left-[calc(var(--container-sidebar)+1rem)] z-40">
           <ChatForm
             path={path}
-            langName={props.langEntry.name}
+            langName={langEntry?.name ?? ""}
             sectionContent={dynamicMdContent}
             close={() => setIsFormVisible(false)}
           />

app/api/chat/route.ts

@@ -9,7 +9,7 @@ import {
 import {
   DynamicMarkdownSectionSchema,
   getMarkdownSections,
-  getPagesList,
+  getPagesListForLang,
   introSectionId,
   PagePathSchema,
   SectionId,
@@ -57,8 +57,7 @@ export async function POST(request: NextRequest) {
     execResults,
   } = parseResult.data;
 
-  const pagesList = await getPagesList();
-  const langEntry = pagesList.find((lang) => lang.id === path.lang);
+  const langEntry = await getPagesListForLang(path.lang);
   const langName = langEntry?.name ?? path.lang;
   let targetPath = path;
   let targetSectionContent = sectionContent;