Merge remote-tracking branch 'origin/pagetransition' into pagetransition

Author: Tatsu723

.github/workflows/node.js.yml

@@ -33,6 +33,20 @@ jobs:
     - run: npm ci
     - run: npm run tsc
 
+  check-docs:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npm run checkDocs
+
   test-js-eval:
     runs-on: ubuntu-latest
     strategy:

.github/workflows/update-docs.yml

@@ -0,0 +1,37 @@
+name: Update Docs Revision And Database
+on:
+  push:
+    branches: [ "main" ]
+permissions:
+  contents: write
+jobs:
+  check-docs:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [22.x]
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm ci
+    - run: npx drizzle-kit migrate
+      env:
+        DATABASE_URL: ${{ secrets.DATABASE_URL }}
+    - run: npx tsx ./scripts/checkDocs.ts --write
+      env:
+        DATABASE_URL: ${{ secrets.DATABASE_URL }}
+    - name: Configure git for push
+      run: |
+        git remote set-url origin "https://github-actions:${GITHUB_TOKEN}@github.com/${{ github.repository }}"
+        git config user.name  "github-actions[bot]"
+        git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - name: Commit build output
+      run: |
+        git add .
+        git diff --staged --exit-code || (git commit -m "[ci] update revisions.yml" && git push origin main)
+        # The `||` ensures the commit and push only happen if there are changes (git diff exits with non-zero)

.gitignore

@@ -3,11 +3,9 @@
 /.open-next
 /cloudflare-env.d.ts
 
-# generated docs section file lists (regenerated by npm run generateSections)
-/public/docs/**/sections.yml
-
-# generated languages list (regenerated by npm run generateLanguages)
-/public/docs/languages.yml
+# generated docs section file lists (regenerated by npm run generateDocsMeta)
+/public/docs/**/sections.json
+/public/docs/languages.json
 
 # dependencies
 /node_modules

Dockerfile

@@ -21,7 +21,8 @@ COPY --from=dependencies /app/node_modules ./node_modules
 # Copy application source code
 COPY . .
 
-ENV NODE_ENV=production
+# Stop if documentation has any change that is not reflected to revisions.yml and database.
+RUN npx tsx ./scripts/checkDocs.ts --check-diff
 
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry

README.md

@@ -15,13 +15,24 @@ npx prisma dev
 ```
 を実行し、`t` キーを押して表示される DATABASE_URL をコピー
 
-ルートディレクトリに .env.local という名前のファイルを作成し、以下の内容を記述
+ルートディレクトリに .env または .env.local という名前のファイルを作成し、以下の内容を記述
 ```dotenv
 API_KEY=GeminiAPIキー
 BETTER_AUTH_URL=http://localhost:3000
 DATABASE_URL="postgres://... (prisma devの出力)"
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
 ```
 
+* `API_KEY` はGeminiのAPIキーを作成して設定します。未設定の場合チャットが使えません
+* `GITHUB_CLIENT_ID` `GITHUB_CLIENT_SECRET` はGitHub OAuthのクライアントIDとシークレットを設定します。未設定の場合「GitHubでログイン」が使えません。
+作り方については https://www.better-auth.com/docs/authentication/github を参照
+* `GOOGLE_CLIENT_ID` `GOOGLE_CLIENT_SECRET` はGoogle OAuthのクライアントIDとシークレットを設定します。未設定の場合「Googleでログイン」が使えません。
+作り方については https://www.better-auth.com/docs/authentication/google を参照 (GitHubのほうがかんたんかも)
+
+
 別のターミナルで、
 ```bash
 npx drizzle-kit migrate
@@ -43,23 +54,31 @@ npm run lint
 ```
 でコードをチェックします。出てくるwarningやerrorはできるだけ直しましょう。
 
+### データベースのスキーマ
+
 * データベースのスキーマ(./app/schema/hoge.ts)を編集した場合、 `npx drizzle-kit generate` でmigrationファイルを作成し、 `npx drizzle-kit migrate` でデータベースに反映します。
-    * また、mainにマージする際に本番環境のデータベースにもmigrateをする必要があります
+    * 本番環境のデータベースのmigrateはmainにpushされた際にGitHub Actionで実行されます
 * スキーマのファイルを追加した場合は app/lib/drizzle.ts でimportを追加する必要があります(たぶん)
 * `npx prisma dev` で立ち上げたデータベースは `npx prisma dev ls` でデータベース名の確認・ `npx prisma dev rm default` で削除ができるらしい
 
 ### 本番環境の場合
 
 上記の環境変数以外に、
-* BETTER_AUTH_SECRET に任意の文字列
-* GOOGLE_CLIENT_IDとGOOGLE_CLIENT_SECRETにGoogle OAuthのクライアントIDとシークレット https://www.better-auth.com/docs/authentication/google
-* GITHUB_CLIENT_IDとGITHUB_CLIENT_SECRETにGitHub OAuthのクライアントIDとシークレット https://www.better-auth.com/docs/authentication/github
+
+* `BETTER_AUTH_SECRET` に任意の文字列
+
+が必要です。
 
 現在は本番環境(my-code.utcode.net)はCoolifyでデプロイしています。
 Cloudflare Worker のビルドログとステータス表示が見れますが、そちらは使っていません。
 
 ## ドキュメント
 
+```bash
+npm run checkDocs
+```
+でドキュメントの読み込み時にエラーにならないか確認できます (index.ymlの間違いなど)
+
 * ドキュメントはセクション(見出し)ごとにわけ、 public/docs/言語id/ページid/並び替え用連番-セクション名.md に置く。
 * ページはディレクトリの名前によらず 言語id/index.yml に書かれている順で表示される。
 * セクションはセクションIDによらずファイル名順で表示される。
@@ -99,6 +118,8 @@ Cloudflare Worker のビルドログとステータス表示が見れますが
 * REPLのコード例は1セクションに最大1つまで。
     * コードエディターとコード実行ブロックはいくつでも置けます。
 * ページ0以外の各ページの最後はレベル2見出し「この章のまとめ」と、レベル3見出し「練習問題n」を置く
+* 編集したドキュメントにローカルの開発環境でアクセスする際は `npx tsx ./scripts/checkDocs.ts --write` でrevisions.ymlを更新してください。チャットを正しく動作させるために必要です。基本的には手動でこのファイルを編集する必要はありません。
+    * 本番環境ではドキュメントの変更がmainブランチにpushされた際に自動で更新されます。gitのコミットidを参照して更新するため、ローカルで更新したrevisions.ymlはpushしないでください。
 
 ### ベースとなるドキュメントの作り方
 
@@ -129,18 +150,17 @@ Cloudflare Worker のビルドログとステータス表示が見れますが
     - Canvasを使われた場合はやり直す。(Canvasはファイル名付きコードブロックで壊れる)
     - 太字がなぜか `**キーワード**` の代わりに `\*\*キーワード\*\*` となっている場合がある。 `\*\*` → `**` の置き換えで対応
     - 見出しの前に `-----` (水平線)が入る場合がある。my.code();は水平線の表示に対応しているが、消す方向で統一
-    - `言語名-repl` にはページ内で一意なIDを追加する (例: `言語名-repl:1`)
     - REPLの出力部分に書かれたコメントは消えるので修正する
         - ダメな例
         ````
-        ```js-repl:1
+        ```js-repl
         > console.log("Hello")
         Hello  // 文字列を表示する
         ```
         ````
         - 以下のようにすればok
         ````
-        ```js-repl:1
+        ```js-repl
         > console.log("Hello")  // 文字列を表示する
         Hello
 
@@ -150,7 +170,6 @@ Cloudflare Worker のビルドログとステータス表示が見れますが
         ```
         ````
     - 練習問題のファイル名は不都合がなければ `practice(章番号)_(問題番号).拡張子` で統一。空でもよいのでファイルコードブロックとexecコードブロックを置く
-- 1章にはたぶん練習問題要らない。
 
 ## markdown仕様
 

app/[lang]/[pageId]/chatForm.tsx

@@ -11,20 +11,15 @@ import { DynamicMarkdownSection } from "./pageContent";
 import { useEmbedContext } from "@/terminal/embedContext";
 import { useChatHistoryContext } from "./chatHistory";
 import { askAI } from "@/actions/chatActions";
+import { PagePath } from "@/lib/docs";
 
 interface ChatFormProps {
-  docs_id: string;
-  documentContent: string;
+  path: PagePath;
   sectionContent: DynamicMarkdownSection[];
   close: () => void;
 }
 
-export function ChatForm({
-  docs_id,
-  documentContent,
-  sectionContent,
-  close,
-}: ChatFormProps) {
+export function ChatForm({ path, sectionContent, close }: ChatFormProps) {
   // const [messages, updateChatHistory] = useChatHistory(sectionId);
   const [inputValue, setInputValue] = useState("");
   const [isLoading, setIsLoading] = useState(false);
@@ -80,9 +75,8 @@ export function ChatForm({
     // }
 
     const result = await askAI({
+      path,
       userQuestion,
-      docsId: docs_id,
-      documentContent,
       sectionContent,
       replOutputs,
       files,
@@ -94,7 +88,9 @@ export function ChatForm({
       console.log(result.error);
     } else {
       addChat(result.chat);
-      // TODO: chatIdが指す対象の回答にフォーカス
+      document.getElementById(result.chat.sectionId)?.scrollIntoView({
+        behavior: "smooth",
+      });
       setInputValue("");
       close();
     }

app/[lang]/[pageId]/chatHistory.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { ChatWithMessages, getChat } from "@/lib/chatHistory";
+import { PagePath } from "@/lib/docs";
 import {
   createContext,
   ReactNode,
@@ -28,11 +29,11 @@ export function useChatHistoryContext() {
 
 export function ChatHistoryProvider({
   children,
-  docs_id,
+  path,
   initialChatHistories,
 }: {
   children: ReactNode;
-  docs_id: string;
+  path: PagePath;
   initialChatHistories: ChatWithMessages[];
 }) {
   const [chatHistories, setChatHistories] =
@@ -43,7 +44,7 @@ export function ChatHistoryProvider({
   }, [initialChatHistories]);
   // その後、クライアント側で最新のchatHistoriesを改めて取得して更新する
   const { data: fetchedChatHistories } = useSWR<ChatWithMessages[]>(
-    docs_id,
+    path,
     getChat,
     {
       // リクエストは古くても構わないので1回でいい

app/[lang]/[pageId]/page.tsx

@@ -3,12 +3,17 @@ import { notFound } from "next/navigation";
 import { PageContent } from "./pageContent";
 import { ChatHistoryProvider } from "./chatHistory";
 import { getChatFromCache, initContext } from "@/lib/chatHistory";
-import { getMarkdownSections, getPagesList } from "@/lib/docs";
+import {
+  getMarkdownSections,
+  getPagesList,
+  LangId,
+  PageSlug,
+} from "@/lib/docs";
 
 export async function generateMetadata({
   params,
 }: {
-  params: Promise<{ lang: string; pageId: string }>;
+  params: Promise<{ lang: LangId; pageId: PageSlug }>;
 }): Promise<Metadata> {
   const { lang, pageId } = await params;
   const pagesList = await getPagesList();
@@ -28,7 +33,7 @@ export async function generateMetadata({
 export default async function Page({
   params,
 }: {
-  params: Promise<{ lang: string; pageId: string }>;
+  params: Promise<{ lang: LangId; pageId: PageSlug }>;
 }) {
   const { lang, pageId } = await params;
   const pagesList = await getPagesList();
@@ -41,28 +46,28 @@ export default async function Page({
   const nextPage = langEntry.pages[pageEntryIndex + 1];
 
   const docsId = `${lang}/${pageId}`;
+  // server componentなのでuseMemoいらない
+  const path = { lang: lang, page: pageId };
   const sections = await getMarkdownSections(lang, pageId);
 
-  // AI用のドキュメント全文（rawContentを結合）
-  const documentContent = sections.map((s) => s.rawContent).join("\n");
-
   const context = await initContext();
-  const initialChatHistories = await getChatFromCache(docsId, context);
+  const initialChatHistories = await getChatFromCache(path, context);
 
   return (
     <ChatHistoryProvider
       initialChatHistories={initialChatHistories}
-      docs_id={docsId}
+      path={path}
     >
       <PageContent
-        documentContent={documentContent}
         splitMdContent={sections}
+        langEntry={langEntry}
         pageEntry={pageEntry}
         docs_id={docsId}
         lang={lang}
         pageId={pageId}
         prevPage={prevPage}
         nextPage={nextPage}
+        path={path}
       />
     </ChatHistoryProvider>
   );