From 1ad3c3d1e7948a9c2a58dc91175d83177bac4ff6 Mon Sep 17 00:00:00 2001 From: na-trium-144 <100704180+na-trium-144@users.noreply.github.com> Date: Sat, 29 Aug 2026 07:43:46 +0000 Subject: [PATCH] =?UTF-8?q?format=E3=82=92=E5=85=A8=E3=83=87=E3=82=A3?= =?UTF-8?q?=E3=83=AC=E3=82=AF=E3=83=88=E3=83=AA=E5=AF=BE=E8=B1=A1=E3=81=AB?= =?UTF-8?q?=E3=81=97=E3=80=81ci=E3=81=A7=E3=81=AE=E3=83=81=E3=82=A7?= =?UTF-8?q?=E3=83=83=E3=82=AF=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .github/workflows/jseval-tests.yml | 20 +- .github/workflows/node.js.yml | 81 +++--- .github/workflows/question-example.yml | 4 +- .github/workflows/runtime-tests.yml | 20 +- .github/workflows/update-docs.yml | 52 ++-- .prettierignore | 3 + README.md | 265 ++++++++++-------- app/(docs)/@chat/chat/[chatId]/chatArea.tsx | 11 +- app/(docs)/@chat/chat/[chatId]/page.tsx | 6 +- app/(docs)/@docs/[lang]/[pageId]/chatForm.tsx | 14 +- app/(docs)/@docs/[lang]/[pageId]/page.tsx | 1 - .../@docs/[lang]/[pageId]/pageTransition.tsx | 22 +- app/(docs)/useSendChat.ts | 20 +- app/about/ai/page.tsx | 3 +- app/api/chat/regenerate-section/route.ts | 17 +- app/layout.tsx | 40 +-- app/lib/chatGenerator.ts | 5 +- app/lib/chatHistory.ts | 26 +- app/lib/gemini.ts | 24 +- app/markdown/markdown.tsx | 2 +- app/markdown/remarkTerm.ts | 2 +- app/navbar.tsx | 21 +- app/schema/auth.ts | 6 +- app/schema/chat.ts | 5 +- app/terminal/editor.tsx | 5 +- app/terminal/embedContext.tsx | 6 +- open-next.config.ts | 2 +- package.json | 2 +- packages/jsEval/tests/console.spec.ts | 6 +- packages/runtime/README.md | 48 ++-- packages/runtime/src/typescript/runtime.tsx | 101 +++---- packages/runtime/src/wandbox/api.ts | 40 +-- packages/runtime/src/wandbox/runtime.tsx | 9 +- packages/runtime/src/worker/jsEval.ts | 7 +- packages/runtime/src/worker/pyodide.ts | 7 +- packages/runtime/src/worker/ruby.ts | 7 +- packages/runtime/src/worker/ruby.worker.ts | 14 +- packages/runtime/src/worker/runtime.tsx | 32 +-- tests/chatHistory.test.ts | 5 +- tsconfig.json | 22 +- 40 files changed, 535 insertions(+), 448 deletions(-) create mode 100644 .prettierignore diff --git a/.github/workflows/jseval-tests.yml b/.github/workflows/jseval-tests.yml index 1464dda8..e6954c61 100644 --- a/.github/workflows/jseval-tests.yml +++ b/.github/workflows/jseval-tests.yml @@ -2,8 +2,8 @@ name: jsEval Tests CI on: pull_request: paths: - - 'packages/jsEval/**' - - '.github/workflows/jseval-tests.yml' + - "packages/jsEval/**" + - ".github/workflows/jseval-tests.yml" jobs: test-js-eval: runs-on: ubuntu-latest @@ -11,11 +11,11 @@ jobs: matrix: node-version: [22.x] steps: - - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v6 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: 'pnpm' - - run: pnpm install --frozen-lockfile - - run: pnpm run --filter @my-code/js-eval test + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm install --frozen-lockfile + - run: pnpm run --filter @my-code/js-eval test diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 0b27ffec..c7db8c1f 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -1,24 +1,39 @@ name: Node.js CI on: pull_request: - branches: [ "main" ] + branches: ["main"] permissions: contents: read jobs: + format: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [22.x] + steps: + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm install --frozen-lockfile + - run: pnpm exec prettier --check . + lint: runs-on: ubuntu-latest strategy: matrix: node-version: [22.x] steps: - - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v6 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: 'pnpm' - - run: pnpm install --frozen-lockfile - - run: pnpm run lint + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm install --frozen-lockfile + - run: pnpm run lint types: runs-on: ubuntu-latest @@ -26,14 +41,14 @@ jobs: matrix: node-version: [22.x] steps: - - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v6 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: 'pnpm' - - run: pnpm install --frozen-lockfile - - run: pnpm run tsc + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm install --frozen-lockfile + - run: pnpm run tsc test: runs-on: ubuntu-latest @@ -41,14 +56,14 @@ jobs: matrix: node-version: [22.x] steps: - - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v6 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: 'pnpm' - - run: pnpm install --frozen-lockfile - - run: pnpm run test + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm install --frozen-lockfile + - run: pnpm run test check-docs: runs-on: ubuntu-latest @@ -56,11 +71,11 @@ jobs: matrix: node-version: [22.x] steps: - - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v6 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: 'pnpm' - - run: pnpm ci - - run: pnpm exec tsx ./scripts/checkDocs.ts + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm ci + - run: pnpm exec tsx ./scripts/checkDocs.ts diff --git a/.github/workflows/question-example.yml b/.github/workflows/question-example.yml index 576857c9..3a6869e5 100644 --- a/.github/workflows/question-example.yml +++ b/.github/workflows/question-example.yml @@ -2,7 +2,7 @@ name: Generate Question Examples on: pull_request: - branches: [ "main" ] + branches: ["main"] # paths: # - 'public/docs/**' @@ -21,7 +21,7 @@ jobs: - uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} - cache: 'pnpm' + cache: "pnpm" - run: pnpm install --frozen-lockfile - run: pnpm exec tsx ./scripts/questionExample.ts 4 diff --git a/.github/workflows/runtime-tests.yml b/.github/workflows/runtime-tests.yml index ae94c842..fd68c45b 100644 --- a/.github/workflows/runtime-tests.yml +++ b/.github/workflows/runtime-tests.yml @@ -2,8 +2,8 @@ name: Runtime Tests CI on: pull_request: paths: - - 'packages/runtime/**' - - '.github/workflows/runtime-tests.yml' + - "packages/runtime/**" + - ".github/workflows/runtime-tests.yml" jobs: test-runtime: runs-on: ubuntu-latest @@ -11,11 +11,11 @@ jobs: matrix: node-version: [22.x] steps: - - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v6 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: 'pnpm' - - run: pnpm install --frozen-lockfile - - run: pnpm run --filter @my-code/runtime test + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm install --frozen-lockfile + - run: pnpm run --filter @my-code/runtime test diff --git a/.github/workflows/update-docs.yml b/.github/workflows/update-docs.yml index 5b74df96..0debead5 100644 --- a/.github/workflows/update-docs.yml +++ b/.github/workflows/update-docs.yml @@ -1,7 +1,7 @@ name: Update Docs Revision And Database on: push: - branches: [ "main" ] + branches: ["main"] permissions: contents: write concurrency: @@ -14,28 +14,28 @@ jobs: matrix: node-version: [22.x] steps: - - uses: actions/checkout@v4 - - uses: pnpm/action-setup@v6 - - uses: actions/setup-node@v4 - with: - node-version: ${{ matrix.node-version }} - cache: 'pnpm' - - run: pnpm install --frozen-lockfile - - run: pnpm exec drizzle-kit migrate - env: - DATABASE_URL: ${{ secrets.DATABASE_URL }} - - run: pnpm exec 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) + - uses: actions/checkout@v4 + - uses: pnpm/action-setup@v6 + - uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: "pnpm" + - run: pnpm install --frozen-lockfile + - run: pnpm exec drizzle-kit migrate + env: + DATABASE_URL: ${{ secrets.DATABASE_URL }} + - run: pnpm exec 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) diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..2da62c4b --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +/public/docs/ +/drizzle/meta/ +pnpm-* diff --git a/README.md b/README.md index 622b16a0..c350f300 100644 --- a/README.md +++ b/README.md @@ -15,9 +15,11 @@ pnpm install --frozen-lockfile ```bash pnpm exec prisma dev ``` + を実行し、`t` キーを押して表示される DATABASE_URL をコピー ルートディレクトリに .env または .env.local という名前のファイルを作成し、以下の内容を記述 + ```dotenv API_KEY=GeminiAPIキー OPENROUTER_API_KEY=OpenRouterAPIキー @@ -35,54 +37,59 @@ SENTRY_AUTH_TOKEN= SENTRY_DSN= ``` -* チャット用にGeminiのAPIキーまたはOpenRouterのAPIキーのいずれかが必要です。未設定の場合チャットが使えません - * OpenRouterを使う場合は使用するモデルをセミコロン区切りで `OPENROUTER_MODEL` に設定してください (エラー時に2番目以降にフォールバックします) - * 両方設定されている場合はOpenRouterが使われます -* `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のほうがかんたんかも) - +- チャット用にGeminiのAPIキーまたはOpenRouterのAPIキーのいずれかが必要です。未設定の場合チャットが使えません + - OpenRouterを使う場合は使用するモデルをセミコロン区切りで `OPENROUTER_MODEL` に設定してください (エラー時に2番目以降にフォールバックします) + - 両方設定されている場合はOpenRouterが使われます +- `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 pnpm run db-migrate ``` + でデータベースを初期化 ```bash pnpm run db-docs ``` + でデータベースにドキュメントのページ情報を挿入します。 (public/docs/以下にmarkdownを追加・削除したら再度実行する必要があります) ```bash pnpm run dev ``` + [http://localhost:3000](http://localhost:3000) で開きます。 ```bash pnpm run format ``` + でコードを整形します。 ```bash pnpm run lint ``` + でコードをチェックします。出てくるwarningやerrorはできるだけ直しましょう。 ### データベースのスキーマ -* データベースのスキーマ(./app/schema/hoge.ts)を編集した場合、 `pnpm run db-generate` (`pnpm exec drizzle-kit generate`) でmigrationファイルを作成し、 `pnpm run db-migrate` (`pnpm exec drizzle-kit migrate`) でデータベースに反映します。 - * 本番環境のデータベースのmigrateはmainにpushされた際にGitHub Actionで実行されます -* スキーマのファイルを追加した場合は app/lib/drizzle.ts でimportを追加する必要があります(たぶん) -* `pnpm exec prisma dev` で立ち上げたデータベースは `pnpm exec prisma dev ls` でデータベース名の確認・ `pnpm exec prisma dev rm default` で削除ができるらしい +- データベースのスキーマ(./app/schema/hoge.ts)を編集した場合、 `pnpm run db-generate` (`pnpm exec drizzle-kit generate`) でmigrationファイルを作成し、 `pnpm run db-migrate` (`pnpm exec drizzle-kit migrate`) でデータベースに反映します。 + - 本番環境のデータベースのmigrateはmainにpushされた際にGitHub Actionで実行されます +- スキーマのファイルを追加した場合は app/lib/drizzle.ts でimportを追加する必要があります(たぶん) +- `pnpm exec prisma dev` で立ち上げたデータベースは `pnpm exec prisma dev ls` でデータベース名の確認・ `pnpm exec prisma dev rm default` で削除ができるらしい ### 本番環境の場合 上記の環境変数以外に、 -* `BETTER_AUTH_SECRET` に任意の文字列 +- `BETTER_AUTH_SECRET` に任意の文字列 が必要です。 @@ -91,105 +98,122 @@ Cloudflare Worker のビルドログとステータス表示が見れますが ## ドキュメント -* ドキュメントはセクション(見出し)ごとにわけ、 public/docs/言語id/ページid/並び替え用連番-セクション名.md に置く。 -* ページはディレクトリの名前によらず 言語id/index.yml に書かれている順で表示される。 -* セクションはセクションIDによらずファイル名順で表示される。 -* 各セクションのfrontmatter (各ページ最初のセクション(-intro.md)を除く) - ```yml - id: 一意なセクションID。ファイル名・ディレクトリ名と一致していなくても良い。バックエンドがこのセクションIDで識別するので、一度コミットしたら変更不可(ファイル名は何度変えても良い) - title: セクションタイトルと同じものをmd記法を使わずに書いた文字列 - level: セクションの見出しレベル(2〜6が使用可) - question: - - このセクションに関連する、想定される質問例。 - # question: 自体を省略すると、GitHub ActionがGeminiを呼び出して質問例を生成しpushします。 - # 質問例が不要な場合は question: [] にしてください。 - term: - - キーワード - - きーわーど - # 他のページで [[キーワード]] と書いた場合に、このセクションの内容がポップアップで表示される。 - ``` -* コード例はそれが配置されているセクションの内容と関連するようにする。 - ````md - ## 制御構文 - ### if - if文の説明… - ### switch - switch文の説明… - - ifとswitch共通の注意事項... → ## 制御構文 に移す - ``` - ifとswitchを使ったコード例… → 2つのコード例に分割する - (分割が難しい(かつ説明が短い)場合は、1つのセクションで全部説明してコード例を載せるのでもよい) - ``` - ```` -* コード例や注意事項などを不必要に独立したセクションにするのは避ける - ````md - ## hoge - hogeの説明… - ### hogeの使用場面 →この見出しいらない - **hogeの使用場面** はok - - 説明 - - 説明 - ### hogeの使用例 →この見出しいらない - ``` - hogeを使ったコード例… - ``` - ```` -* REPLのコード例は1セクションに最大1つまで。 - * コードエディターとコード実行ブロックはいくつでも置けます。 -* ページ0以外の各ページの最後はレベル2見出し「この章のまとめ」と、レベル3見出し「練習問題n」を置く -* 編集したドキュメントにローカルの開発環境でアクセスする際は `pnpm run db-docs` を実行してください。これにより `public/docs/revisions-dev.yml` が更新・作成され、チャットが正しく動作するようになります。 - * 本番環境用の `revisions.yml` は、main ブランチに push された際に GitHub Action によって自動的に更新されます。 +- ドキュメントはセクション(見出し)ごとにわけ、 public/docs/言語id/ページid/並び替え用連番-セクション名.md に置く。 +- ページはディレクトリの名前によらず 言語id/index.yml に書かれている順で表示される。 +- セクションはセクションIDによらずファイル名順で表示される。 +- 各セクションのfrontmatter (各ページ最初のセクション(-intro.md)を除く) + ```yml + id: 一意なセクションID。ファイル名・ディレクトリ名と一致していなくても良い。バックエンドがこのセクションIDで識別するので、一度コミットしたら変更不可(ファイル名は何度変えても良い) + title: セクションタイトルと同じものをmd記法を使わずに書いた文字列 + level: セクションの見出しレベル(2〜6が使用可) + question: + - このセクションに関連する、想定される質問例。 + # question: 自体を省略すると、GitHub ActionがGeminiを呼び出して質問例を生成しpushします。 + # 質問例が不要な場合は question: [] にしてください。 + term: + - キーワード + - きーわーど + # 他のページで [[キーワード]] と書いた場合に、このセクションの内容がポップアップで表示される。 + ``` +- コード例はそれが配置されているセクションの内容と関連するようにする。 + + ````md + ## 制御構文 + + ### if + + if文の説明… + + ### switch + + switch文の説明… + + ifとswitch共通の注意事項... → ## 制御構文 に移す + + ``` + ifとswitchを使ったコード例… → 2つのコード例に分割する + (分割が難しい(かつ説明が短い)場合は、1つのセクションで全部説明してコード例を載せるのでもよい) + ``` + ```` + +- コード例や注意事項などを不必要に独立したセクションにするのは避ける + + ````md + ## hoge + + hogeの説明… + + ### hogeの使用場面 →この見出しいらない + + **hogeの使用場面** はok + + - 説明 + - 説明 + + ### hogeの使用例 →この見出しいらない + + ``` + hogeを使ったコード例… + ``` + ```` + +- REPLのコード例は1セクションに最大1つまで。 + - コードエディターとコード実行ブロックはいくつでも置けます。 +- ページ0以外の各ページの最後はレベル2見出し「この章のまとめ」と、レベル3見出し「練習問題n」を置く +- 編集したドキュメントにローカルの開発環境でアクセスする際は `pnpm run db-docs` を実行してください。これにより `public/docs/revisions-dev.yml` が更新・作成され、チャットが正しく動作するようになります。 + - 本番環境用の `revisions.yml` は、main ブランチに push された際に GitHub Action によって自動的に更新されます。 ### ベースとなるドキュメントの作り方 - web版の ~~Gemini2.5Pro~~ Gemini3Pro を用いる。 - 以下のプロンプトで章立てを考えさせる - > `n`章前後から構成される`言語名`のチュートリアルを書こうと思います。章立てを考えてください。`言語名`以外の言語でのプログラミングはある程度やったことがある人を対象にします。 - > + > `n`章前後から構成される`言語名`のチュートリアルを書こうと思います。章立てを考えてください。`言語名`以外の言語でのプログラミングはある程度やったことがある人を対象にします。 - nを8, 10, 12, 15 など変えて何回か出力させ、それを統合していい感じの章立てを決める - 実際にドキュメントを書かせる - > 以下の内容で`言語名`チュートリアルの第`n`章を書いてください。他の言語でのプログラミングは経験がある人を対象にします。 - > タイトルにはレベル1の見出し(#), それ以降の見出しにはレベル2以下(##)を使用してください。 - > canvasは使わずに出力してください。 - > REPLで動作可能なコード例はスクリプトではなくREPLの実行例として書いてください。 - > コード例はREPLの実行例では \`\`\``言語名`-repl 、ソースファイルの場合は \`\`\``言語名`:ファイル名`.拡張子` ではじまるコードブロックで示してください。ファイル名は被らないようにしてください。 - > また、ファイルの場合は \`\`\``言語名`-exec:ファイル名`.拡張子` のコードブロック内に実行結果例を記載してください。 - > また、最後には この章のまとめ セクションと、練習問題を2つほど書いてください。練習問題はこの章で学んだ内容を活用してコードを書かせるものにしてください。 - > - > 全体の構成 - > `1. hoge` - > `2. fuga` - > `3. piyo` - > `4. ...` - > - > `第n章: 第n章のタイトル` - > `第n章内の見出し・内容の概要…` - > + > 以下の内容で`言語名`チュートリアルの第`n`章を書いてください。他の言語でのプログラミングは経験がある人を対象にします。 + > タイトルにはレベル1の見出し(#), それ以降の見出しにはレベル2以下(##)を使用してください。 + > canvasは使わずに出力してください。 + > REPLで動作可能なコード例はスクリプトではなくREPLの実行例として書いてください。 + > コード例はREPLの実行例では \`\`\``言語名`-repl 、ソースファイルの場合は \`\`\``言語名`:ファイル名`.拡張子` ではじまるコードブロックで示してください。ファイル名は被らないようにしてください。 + > また、ファイルの場合は \`\`\``言語名`-exec:ファイル名`.拡張子` のコードブロック内に実行結果例を記載してください。 + > また、最後には この章のまとめ セクションと、練習問題を2つほど書いてください。練習問題はこの章で学んだ内容を活用してコードを書かせるものにしてください。 + > + > 全体の構成 + > `1. hoge` + > `2. fuga` + > `3. piyo` + > `4. ...` + > + > `第n章: 第n章のタイトル` + > `第n章内の見出し・内容の概要…` - Gemini出力の調整 - - Canvasを使われた場合はやり直す。(Canvasはファイル名付きコードブロックで壊れる) - - 太字がなぜか `**キーワード**` の代わりに `\*\*キーワード\*\*` となっている場合がある。 `\*\*` → `**` の置き換えで対応 - - 見出しの前に `-----` (水平線)が入る場合がある。my.code();は水平線の表示に対応しているが、消す方向で統一 - - REPLの出力部分に書かれたコメントは消えるので修正する - - ダメな例 - ```` - ```js-repl - > console.log("Hello") - Hello // 文字列を表示する - ``` - ```` - - 以下のようにすればok - ```` - ```js-repl - > console.log("Hello") // 文字列を表示する - Hello - - > // 文字列を表示する - > console.log("Hello") - Hello - ``` - ```` - - 練習問題のファイル名は不都合がなければ `practice(章番号)_(問題番号).拡張子` で統一。空でもよいのでファイルコードブロックとexecコードブロックを置く + - Canvasを使われた場合はやり直す。(Canvasはファイル名付きコードブロックで壊れる) + - 太字がなぜか `**キーワード**` の代わりに `\*\*キーワード\*\*` となっている場合がある。 `\*\*` → `**` の置き換えで対応 + - 見出しの前に `-----` (水平線)が入る場合がある。my.code();は水平線の表示に対応しているが、消す方向で統一 + - REPLの出力部分に書かれたコメントは消えるので修正する + - ダメな例 + + ```` + ```js-repl + > console.log("Hello") + Hello // 文字列を表示する + ``` + ```` + + - 以下のようにすればok + + ```` + ```js-repl + > console.log("Hello") // 文字列を表示する + Hello + + > // 文字列を表示する + > console.log("Hello") + Hello + ``` + ```` + + - 練習問題のファイル名は不都合がなければ `practice(章番号)_(問題番号).拡張子` で統一。空でもよいのでファイルコードブロックとexecコードブロックを置く ### Alert @@ -197,7 +221,7 @@ GitHubのalert記法の、`NOTE` `TIP` `WARNING` `CAUTION` が使えます。 `IMPORTANT` はwarningに置き換えられます。 ``` -> [!NOTE] +> [!NOTE] > Highlights information that users should take into account, even when skimming. ``` @@ -206,6 +230,7 @@ GitHubのalert記法の、`NOTE` `TIP` `WARNING` `CAUTION` が使えます。 ``` [[用語]] ``` + と書くと、`term: - 用語` が定義されている別のセクションへのリンクになり、ポップアップでその内容も表示されます。 markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほげふが` へのリンクになり、表示は「ほげ**ふが**」になります。ただし `**[[ふが]]**` はリンクの色が優先されるのに対し `[[**ふが**]]` は強調の色が優先されます。 @@ -214,12 +239,14 @@ markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほ [[./1-foo]] [[./1]] ``` + と書くと、同じ言語のページID `1-foo` またはindex `1` (ページのindexはindex.ymlの記述順で0-based) へのリンクになり、表示は「第1章」になります ``` [[./prev]] [[./next]] ``` + と書くと、同じ言語の前のページ・次のページへのリンクになり、表示は「第1章」(実際の章番号)になります ### コード実行環境仕様 @@ -234,7 +261,8 @@ markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほ ```` でターミナルを埋め込む。 -* 実行結果はEmbedContextにも送られ、チャットフォームが参照できる + +- 実行結果はEmbedContextにも送られ、チャットフォームが参照できる ```` ```言語名:ファイル名 @@ -243,12 +271,13 @@ markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほ ```` でテキストエディターを埋め込む。 -* app/terminal/editor.tsx内で `import "ace-builds/src-min-noconflict/mode-言語名";` を追加し、packages/runtime/src/languages.tsにも追加すればその言語に対応した色付けがされる。 - * importできる言語の一覧は https://github.com/ajaxorg/ace-builds/tree/master/src-noconflict -* 編集した内容は app/terminal/file.tsx のFileContextで管理される。 - * 編集中のコードはFileContextに即時送られる - * FileContextが書き換えられたら即時すべてのエディターに反映される -* 編集したファイルの一覧はEmbedContextにも送られ、チャットフォームが参照できる + +- app/terminal/editor.tsx内で `import "ace-builds/src-min-noconflict/mode-言語名";` を追加し、packages/runtime/src/languages.tsにも追加すればその言語に対応した色付けがされる。 + - importできる言語の一覧は https://github.com/ajaxorg/ace-builds/tree/master/src-noconflict +- 編集した内容は app/terminal/file.tsx のFileContextで管理される。 + - 編集中のコードはFileContextに即時送られる + - FileContextが書き換えられたら即時すべてのエディターに反映される +- 編集したファイルの一覧はEmbedContextにも送られ、チャットフォームが参照できる ```` ```言語名-readonly:ファイル名 @@ -265,19 +294,19 @@ markdown書式も利用可能です。 `[[ほげ**ふが**]]` は `term: - ほ ```` で実行ボタンを表示する -* 実行ボタンを押した際にFileContextからファイルを読み、実行し、結果を表示する -* 実行結果はEmbedContextにも送られ、チャットフォームが参照できる +- 実行ボタンを押した際にFileContextからファイルを読み、実行し、結果を表示する +- 実行結果はEmbedContextにも送られ、チャットフォームが参照できる ## 技術スタック・ドキュメント・メモ - [Next.js](https://nextjs.org/docs) - - 検索する際は「App Router」を含めることで古い記事に惑わされることが少なくなります。 + - 検索する際は「App Router」を含めることで古い記事に惑わされることが少なくなります。 - [OpenNext](https://opennext.js.org/cloudflare) - [DaisyUI](https://daisyui.com/docs/use/) / [Tailwind CSS](https://tailwindcss.com/docs) - - buttonやinputやメニューなどの基本的なコンポーネントのデザインはDaisyUIにあるものを使うと楽です - - 細かくスタイルを調整したい場合はTailwind CSSを使います (CSS直接指定(`style={{...}}`)よりもちょっと楽に書ける) - - よくわからなかったらstyle直接指定でも良い + - buttonやinputやメニューなどの基本的なコンポーネントのデザインはDaisyUIにあるものを使うと楽です + - 細かくスタイルを調整したい場合はTailwind CSSを使います (CSS直接指定(`style={{...}}`)よりもちょっと楽に書ける) + - よくわからなかったらstyle直接指定でも良い - [SWR](https://swr.vercel.app/ja) - [react-markdown](https://www.npmjs.com/package/react-markdown) - REPL・実行結果表示: [xterm.js](https://xtermjs.org/) diff --git a/app/(docs)/@chat/chat/[chatId]/chatArea.tsx b/app/(docs)/@chat/chat/[chatId]/chatArea.tsx index 2e1d6af6..4cd3a01f 100644 --- a/app/(docs)/@chat/chat/[chatId]/chatArea.tsx +++ b/app/(docs)/@chat/chat/[chatId]/chatArea.tsx @@ -5,7 +5,12 @@ import { useStreamingChatContext } from "@/(docs)/streamingChatContext"; import { useSendChat } from "@/(docs)/useSendChat"; import { deleteChatAction } from "@/actions/deleteChat"; import { ChatWithMessages } from "@/lib/chatHistory"; -import { DynamicMarkdownSection, LangId, MarkdownSection, PageSlug } from "@/lib/docs"; +import { + DynamicMarkdownSection, + LangId, + MarkdownSection, + PageSlug, +} from "@/lib/docs"; import { Heading } from "@/markdown/heading"; import { StyledMarkdown } from "@/markdown/markdown"; import { usePagesListForLang } from "@/pagesListContext"; @@ -147,7 +152,9 @@ export function ChatAreaContent(props: Props) { {targetSection?.title && targetSection.title !== "sandbox" && (