Add comprehensive UI redesign with dark mode, pagination, and search functionality

[myoshi2891]

ページネーションの表示制御の微調整と、タブ切り替え時の検索フィルタ・クリアロジックの改善

[netlify]

✅ Deploy Preview for algorithm-datastructures-math-studies ready!

Name	Link
🔨 Latest commit	18cdc11
🔍 Latest deploy log	https://app.netlify.com/projects/algorithm-datastructures-math-studies/deploys/69980b5c278e9e00091e74b0
😎 Deploy Preview	https://deploy-preview-278--algorithm-datastructures-math-studies.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Warning

Rate limit exceeded

@github-actions[bot] has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 18 minutes and 30 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📝 Walkthrough

Walkthrough

generate_index.py が静的インデックス生成を大幅に拡張し、ローカルベンダー資産のコピー／マッピング、カテゴリ別カウントとアイコン挿入、日本語テンプレート（Lab デザイン）への書き換え、ダーク/ライト切替、タブナビ、検索、クライアント側ページネーション、タイムスタンプ埋め込みを追加しました。

Changes

Cohort / File(s)	Summary
コア生成ロジック generate_index.py	index 生成フローを拡張：vendored asset マッピングと public/vendor へのコピー、カテゴリ別 total_count / domain_count 計算、タイトル取得の try/except フォールバックを追加。公開 API シグネチャは不変。
埋め込み HTML/CSS/JS テンプレート generate_index.py（テンプレート内の HTML/CSS/JS 部分）	日本語（lang="ja"）の新テンプレート導入。フォント、テーマ変数、カテゴリ別アイコン、ヘッダの合計数表示、UTC タイムスタンプ挿入を追加。スタイル（Outfit, JetBrains Mono）とカードベースのレスポンシブデザインを実装。
クライアント機能（インタラクション） generate_index.py（スクリプト セクション）	タブ切替（data-category ベース）、デバウンス付き検索、タブ別絞り込みと found-count、クライアントページネーション（ITEMS_PER_PAGE、省略表示、Prev/Next）、ページネーション制御、アニメーション、ダーク/ライト切替（localStorage 永続化）を追加。
エラーハンドリング / セーフガード generate_index.py	HTML タイトル取得の try/except でファイル名を代替使用する堅牢化と、HTML 生成時のエスケープを明示的に適用。
ドキュメント追加 CLAUDE.md	generate_index.py 実行スニペット／インデックス生成手順（「インデックスページ生成」）とブラウザテスト（Playwright MCP）に関する記述を追加。

Sequence Diagram(s)

sequenceDiagram
  participant Gen as generate_index.py
  participant FS as Filesystem (public/, repo)
  participant Browser as Browser (index.html)
  participant User as ユーザー

  Gen->>FS: vendored assets を public/vendor にコピー、index.html を生成
  FS->>Browser: 生成された index.html を配信（静的ファイル）
  User->>Browser: ページ読み込み
  Browser->>Browser: 初期レンダリング（タブ, カウント, タイムスタンプ）
  User->>Browser: タブ切替 / 検索入力 / ページ操作 / テーマ切替
  Browser->>Browser: フィルタリング・ページネーション・localStorage 保存

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 分

Possibly related PRs

• Add comprehensive UI redesign with dark mode, pagination, and search functionality #278 — 同一ファイル (generate_index.py) と UI 再設計（カテゴリアイコン、ページネーション、検索、テーマ等）を実装しており、差分が重なる可能性が高い。
• Add index.html and maintenance scripts #275 — index 生成ロジック（タイトル抽出、カテゴリマッピング、index.html 出力）に関する大規模変更を含み、ロジックの競合や重複が想定される。

詩

🐰✨ インデックス畑でひと跳ね
タブが光り、アイコンが踊るよ
検索で見つけた小道しるべ
ページめくれば昼夜を選べる
わたしのコードに小さな春が咲いたよ 🌱

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	プルリクエストの説明が提供されていません。	プルリクエストの説明を追加して、変更の動機、実装の詳細、テスト方法などの重要な情報を記載してください。

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	タイトルはプルリクエストの主要な変更内容を正確に反映しており、ダークモード、ページネーション、検索機能の追加というUIの包括的なリデザインを明確に要約しています。
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 5

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

generate_index.py (1)

78-104: ⚠️ Potential issue | 🟠 Major

/vendor/... のルート相対パスは、ネストされたHTMLファイルの参照を壊します

rewrite_html_content() が生成する置換先 /vendor/... は、公開ディレクトリ内のすべてのHTMLファイル（154+のネストされたファイルを含む）に対して共通の絶対パスを使用しています。これにより以下のシナリオで参照が破損します：

• GitHub Pages のサブパス配信（https://<user>.github.io/<repo>/）
• ファイルの深さが異なる場合の相対参照（例：public/Algorithm/Backtracking/leetcode/39. Combination Sum/Claude/README.html など）
• file:// プロトコルでの直接開き（OSのルートを指してしまう）

各HTMLファイルの出力位置に応じて、vendorディレクトリへの相対パスを動的に計算する必要があります。

修正案（各HTMLファイルから vendor への相対パスを計算して置換）

-    def rewrite_html_content(self, content: str) -> str:
+    def rewrite_html_content(self, content: str, vendor_prefix: str) -> str:
         """Replaces CDN links with local vendor links."""
         replacements = [
             # React
-            ('https://unpkg.com/react@18/umd/react.development.js', '/vendor/react/react.development.js'),
+            ('https://unpkg.com/react@18/umd/react.development.js', f'{vendor_prefix}/react/react.development.js'),
             ...
         ]

呼び出し元（136-145行目付近）：

-                        modified_content = self.rewrite_html_content(content)
+                        vendor_prefix = os.path.relpath(
+                            os.path.join(output_dir, "vendor"),
+                            os.path.dirname(dest_path),
+                        ).replace(os.sep, "/")
+                        modified_content = self.rewrite_html_content(content, vendor_prefix)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@generate_index.py` around lines 78 - 104, The replace targets in
rewrite_html_content use absolute "/vendor/..." paths which break nested HTML
(GitHub Pages subpaths, file://, differing depths); change rewrite_html_content
to accept the HTML file's output path (e.g., output_path or html_relpath) or a
computed vendor_relative_base and compute a relative vendor prefix (like "../"
repeated based on output file depth) then replace vendor URLs with
vendor_relative_base + "vendor/..." instead of "/vendor/..."; update the
caller(s) that generate each HTML (where rewrite_html_content is invoked) to
pass the file's output location so the function can compute correct relative
links.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@generate_index.py`:
- Around line 182-851: The large html_template string in generate_index.py
(variable html_template) should be moved to an external template file (e.g.,
index_template.html) and loaded at runtime; replace the inlined html_template
with code that reads the file and performs safe placeholder substitution (use
Python's str.format_map with a dict or preferably use the standard library's
string.Template or Jinja2 to avoid accidental unescaped braces), update
references to {total_count}, {tabs}, {all_files}, {tab_contents}, {timestamp}
accordingly, remove the embedded doubled braces trick by letting the template
engine handle literal braces, and finally run ruff and black on the Python
changes before merge to satisfy formatting/lint guidelines.
- Around line 169-180: The subtitle currently hardcodes "across 6 domains" while
total_count is computed dynamically; compute domain_count from the categories
list you actually render (e.g., len(sorted_categories) or len([c for c in
sorted_categories if you include it]) ) and pass that domain_count into the
template instead of the fixed 6; update the code around
category_icons/total_count/current_time to compute domain_count from
sorted_categories (or structure keys if that better matches rendering) and
ensure the template rendering calls use this domain_count variable wherever
"across 6 domains" is generated (also replace other occurrences noted at lines
~595-602 and ~875-881).
- Around line 860-871: The HTML is inserting unescaped title and path (from
get_html_title()/title and path) into item_html and tabs_html, allowing markup
injection; fix by HTML-escaping display values before interpolation: call
html.escape on title and on the displayed path (but keep href using the
url-encoded encoded_path) and use the escaped variables in the f-strings that
build tabs_html/file_list_html; ensure html is imported and replace uses of raw
title/path in the string building (e.g., where item_html is constructed and the
tab label) with the escaped versions.
- Around line 739-763: openTab clears the search input but only calls
clearSearchFilter(categoryName) for the destination tab, leaving any
data-search-hidden flags on the previous tab and causing cards to remain hidden
when returning; fix by locating the previously active tab before hiding tabs
(e.g. via document.querySelector('.tab-content.active') or iterate all
'.tab-content' elements) and call clearSearchFilter with that previous tab's id
(or call clearSearchFilter for every tab) in addition to calling it for the
destination tab, making sure to perform this after resetting the input and
before renderPage(categoryName); reference openTab, clearSearchFilter,
currentPages, renderPage, and data-search-hidden.
- Around line 678-690: In renderPaginationControls, avoid leaving an empty
.pagination container when totalPages <= 1: before creating or after clearing
the container, if totalPages <= 1 remove any existing container (using the
container variable or tab.querySelector('.pagination')) and return immediately;
alternatively check totalPages <= 1 at the top and delete the existing
.pagination then return—update the logic in renderPaginationControls
(referencing tabId, container, totalPages, currentPage) to ensure no empty
container remains.

---

Outside diff comments:
In `@generate_index.py`:
- Around line 78-104: The replace targets in rewrite_html_content use absolute
"/vendor/..." paths which break nested HTML (GitHub Pages subpaths, file://,
differing depths); change rewrite_html_content to accept the HTML file's output
path (e.g., output_path or html_relpath) or a computed vendor_relative_base and
compute a relative vendor prefix (like "../" repeated based on output file
depth) then replace vendor URLs with vendor_relative_base + "vendor/..." instead
of "/vendor/..."; update the caller(s) that generate each HTML (where
rewrite_html_content is invoked) to pass the file's output location so the
function can compute correct relative links.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

巨大な html_template を Python 文字列に直書きしており、保守と差分レビューが難しい

この規模のHTML/CSS/JSを .format() 前提で {{ }} だらけにする構造は、将来的にテンプレ修正時の事故（未エスケープ { による KeyError 等）を誘発しやすいです。テンプレートを別ファイルへ分離し、Python 側は「読み込み＋プレースホルダ置換」に寄せるのを推奨します。

また、Python 部分はマージ前に ruff/black を通して整形・lint しておくと安全です。As per coding guidelines, "Use Python's ruff and black for code formatting and linting".

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@generate_index.py` around lines 182 - 851, The large html_template string in
generate_index.py (variable html_template) should be moved to an external
template file (e.g., index_template.html) and loaded at runtime; replace the
inlined html_template with code that reads the file and performs safe
placeholder substitution (use Python's str.format_map with a dict or preferably
use the standard library's string.Template or Jinja2 to avoid accidental
unescaped braces), update references to {total_count}, {tabs}, {all_files},
{tab_contents}, {timestamp} accordingly, remove the embedded doubled braces
trick by letting the template engine handle literal braces, and finally run ruff
and black on the Python changes before merge to satisfy formatting/lint
guidelines.

[coderabbitai]

Note

Docstrings generation - SUCCESS
Generated docstrings for this pull request at #280

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)

generate_index.py (3)

55-58: 🧹 Nitpick | 🔵 Trivial

インデントが不揃いです（ruff / black で検出される問題）。

Line 56-58 はインデントにスペースが1つ余分に入っています（Line 40, 97 の # コメントも同様）。コーディングガイドラインに従い、マージ前に ruff / black を実行してください。

As per coding guidelines, "Use Python's ruff and black for code formatting and linting".

♻️ 修正案

         for src in prism_plugins:
-             if os.path.exists(src):
-                 rel_path = os.path.relpath(src, "node_modules/prismjs")
-                 file_map[src] = f"prismjs/{rel_path}"
+            if os.path.exists(src):
+                rel_path = os.path.relpath(src, "node_modules/prismjs")
+                file_map[src] = f"prismjs/{rel_path}"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@generate_index.py` around lines 55 - 58, Fix inconsistent indentation around
the prism_plugins loop: align the for-statement block so the lines using
os.path.exists(src), rel_path = os.path.relpath(...), and file_map[src] =
f"prismjs/{rel_path}" have the same indentation level as the for line; also
correct the mismatched leading space on the nearby inline '#' comments (the ones
above and below this block) to match project style, then run ruff/black to
autoformat and ensure no remaining spacing issues.

---

151-167: ⚠️ Potential issue | 🟡 Minor

get_html_title が try-except ブロックの外にあり、エンコーディングエラー時にスクリプト全体がクラッシュします。

Line 143-154 の try-except はファイル読み書きのエラーをキャッチしますが、Line 166 の get_html_title(filepath) はその外にあります。Line 151 でエンコーディングエラーが発生しフォールバックコピーされた場合、同じファイルに対する get_html_title も同様に失敗し、ループ全体が中断します。

🛡️ 修正案

                 except Exception as e:
                     print(f"Error processing {filepath}: {e}")
                     # Fallback copy if encoding/read fails (unlikely given check)
                     shutil.copy2(filepath, dest_path)

                 # Indexing Logic
                 parts = rel_path.split(os.sep)
                 if len(parts) > 1:
                     category = parts[0]
                 else:
                     category = "Uncategorized"

                 if category.startswith('.'):
                     continue

-                title = self.get_html_title(filepath)
+                try:
+                    title = self.get_html_title(filepath)
+                except Exception:
+                    title = os.path.basename(filepath)
                 structure[category].append((title, rel_path))

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@generate_index.py` around lines 151 - 167, get_html_title(filepath) is called
outside the try-except that handles read/encoding failures, so an encoding or
parse error there can crash the loop; wrap the title extraction in its own safe
block (or move it inside the existing except/try) so failures are handled
gracefully: call get_html_title(filepath) inside the try that reads the file or
add a small try-except around get_html_title in the loop, on failure set a
sensible fallback title (e.g., filename or "Untitled") and then append (title,
rel_path) to structure[category]; ensure the code still respects the existing
category skip (category.startswith('.')) and that structure is updated only
after a successful or fallback title is determined.

---

11-17: 🧹 Nitpick | 🔵 Trivial

ファイルの二重読み込みを回避可能です。

generate_index 内（Line 143-144）で既にファイル内容を読み込んでいますが、get_html_title (Line 12) で同じファイルを再度読み込んでいます。content を引数として渡せば不要な I/O を削減できます。

♻️ リファクタ案

-    def get_html_title(self, filepath: str) -> str:
-        with open(filepath, 'r', encoding='utf-8') as f:
-            content = f.read()
-            match = re.search(r'<title>(.*?)</title>', content, re.IGNORECASE | re.DOTALL)
-            if match:
-                return html.unescape(match.group(1).strip())
-            return os.path.basename(filepath)
+    def get_html_title(self, filepath: str, content: str = "") -> str:
+        if not content:
+            with open(filepath, 'r', encoding='utf-8') as f:
+                content = f.read()
+        match = re.search(r'<title>(.*?)</title>', content, re.IGNORECASE | re.DOTALL)
+        if match:
+            return html.unescape(match.group(1).strip())
+        return os.path.basename(filepath)

呼び出し側（generate_index 内）:

title = self.get_html_title(filepath, content=content)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@generate_index.py` around lines 11 - 17, get_html_title is re-opening files
already read in generate_index; modify get_html_title to accept an optional
content: str parameter (e.g., def get_html_title(self, filepath: str, content:
Optional[str]=None)) and only open/read filepath when content is None, then
update the generate_index call to pass the already-read content (title =
self.get_html_title(filepath, content=content)); ensure other callers of
get_html_title are updated or still work with the new optional parameter and
keep the existing return behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@generate_index.py`:
- Around line 55-58: Fix inconsistent indentation around the prism_plugins loop:
align the for-statement block so the lines using os.path.exists(src), rel_path =
os.path.relpath(...), and file_map[src] = f"prismjs/{rel_path}" have the same
indentation level as the for line; also correct the mismatched leading space on
the nearby inline '#' comments (the ones above and below this block) to match
project style, then run ruff/black to autoformat and ensure no remaining spacing
issues.
- Around line 151-167: get_html_title(filepath) is called outside the try-except
that handles read/encoding failures, so an encoding or parse error there can
crash the loop; wrap the title extraction in its own safe block (or move it
inside the existing except/try) so failures are handled gracefully: call
get_html_title(filepath) inside the try that reads the file or add a small
try-except around get_html_title in the loop, on failure set a sensible fallback
title (e.g., filename or "Untitled") and then append (title, rel_path) to
structure[category]; ensure the code still respects the existing category skip
(category.startswith('.')) and that structure is updated only after a successful
or fallback title is determined.
- Around line 11-17: get_html_title is re-opening files already read in
generate_index; modify get_html_title to accept an optional content: str
parameter (e.g., def get_html_title(self, filepath: str, content:
Optional[str]=None)) and only open/read filepath when content is None, then
update the generate_index call to pass the already-read content (title =
self.get_html_title(filepath, content=content)); ensure other callers of
get_html_title are updated or still work with the new optional parameter and
keep the existing return behavior.

---

Duplicate comments:
In `@generate_index.py`:
- Around line 865-878: The category value is being interpolated directly into
the onclick JS string and title/path are not HTML-escaped; fix by importing json
at the top and using json.dumps(category) (or an equivalent JS-string escaper)
when building the onclick argument for openTab to ensure a JS-safe string, and
wrap title and path with html.escape before inserting into item_html and
file_list_html; update the string building locations that produce tabs_html,
item_html, all_files_html and tab_contents_html to use the escaped values
(reference symbols: category, title, path, tabs_html, file_list_html,
tab_contents_html, openTab).
- Around line 187-188: The large HTML string assigned to html_template in
generate_index.py should be moved into an external template file and loaded at
runtime to improve maintainability; replace the inline html_template with code
that reads a separate .html (or .j2) file and render it via a template engine
(e.g., Jinja2) using safe lookup (e.g., Jinja2's default values or the get
filter) to avoid KeyError from heavy use of {{ }} placeholders; update the
variable name/reference (html_template) to call the loader/renderer and ensure
tests or callers (where html_template is used) now receive the rendered string
instead of the inline literal.
- Around line 758-764: The current code only calls
clearSearchFilter(categoryName) for the destination tab, leaving the source
tab's data-search-hidden flags set; update the logic so that when clearing the
search input you also clear any data-search-hidden state on the other tab(s).
Concretely, after clearing the input and UI bits (the code that touches
'searchInput', 'searchClear', 'searchCount'), either invoke clearSearchFilter
for the previous/other category in addition to the current categoryName or query
and remove the data-search-hidden attribute from all card elements (selector
matching the per-category cards) so no tab retains hidden cards; reference
clearSearchFilter, categoryName and the data-search-hidden attribute to locate
where to change the DOM-clearing behavior.
- Line 606: The subtitle currently hardcodes "6 domains" in the template string
("{total_count} interactive lessons across 6 domains"); change it to use a
dynamic domain count (e.g., a variable like domain_count or
len(domains)/len(categories) computed where total_count is computed) so the
rendered string becomes "{total_count} interactive lessons across {domain_count}
domains" (and ensure the variable used is in scope where the template is built
and pluralization remains correct).
- Around line 683-694: renderPaginationControls currently creates (and clears) a
.pagination container before checking totalPages <= 1, leaving an empty
container and layout gap; change the logic in renderPaginationControls(tabId,
totalPages, currentPage) so that you either (a) check totalPages <= 1 before
creating/appending the container, or (b) if you must create it first, remove the
container from the tab (tab.removeChild(container) or container.remove()) and
return when totalPages <= 1; target the container variable and the tab element
in that function to ensure no empty .pagination element remains.

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

generate_index.py (1)

142-167: ⚠️ Potential issue | 🟠 Major

get_html_title が try-except の外にあり、エンコードエラーでスクリプト全体がクラッシュする

except ブランチで shutil.copy2 によるフォールバックコピーが完了した後、同じファイルを encoding='utf-8' で再オープンする get_html_title（Line 166）が呼ばれます。非 UTF-8 の HTML ファイルがあると同じ UnicodeDecodeError が発生し、以降のすべての処理が中断されます。

🐛 修正案 — フォールバック時は basename を使用

             except Exception as e:
                 print(f"Error processing {filepath}: {e}")
                 shutil.copy2(filepath, dest_path)

             # Indexing Logic
             parts = rel_path.split(os.sep)
             if len(parts) > 1:
                 category = parts[0]
             else:
                 category = "Uncategorized"

             if category.startswith('.'):
                 continue

-            title = self.get_html_title(filepath)
+            try:
+                title = self.get_html_title(filepath)
+            except Exception:
+                title = os.path.basename(filepath)
             structure[category].append((title, rel_path))

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@generate_index.py` around lines 142 - 167, The code calls
get_html_title(filepath) outside the file-read try/except so a
UnicodeDecodeError in non-UTF8 files can crash the script; change the flow to
determine title after the read/fallback and protect it: call get_html_title on
the successfully written file (dest_path) inside the try/except or wrap
get_html_title(...) in its own try/except and fall back to
os.path.basename(filepath) (or similar) when title extraction fails, ensuring
structure[category].append((title, rel_path)) always receives a safe title.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@generate_index.py`:
- Around line 612-614: The search <input> element with id "searchInput" (class
"search-input") lacks an accessible name; add an aria-label attribute (e.g.,
aria-label="Search problems") to that <input> so screen readers can announce its
purpose (do not rely on placeholder text); update the element definition where
id="searchInput" is defined to include the aria-label string.
- Around line 739-744: applyStaggerAnimation currently forces a synchronous
reflow per item because each iteration reads item.offsetHeight; change the
implementation to avoid per-item layout reads by batching the layout read and
using requestAnimationFrame or toggling a CSS class: first loop to set/reset
animation styles without reading layout, perform a single layout read (e.g.,
read container.offsetHeight) inside requestAnimationFrame or before the second
pass, then in a second loop apply item.style.animationDelay (or add a stagger
CSS class) so you only trigger at most one reflow rather than one per item;
target symbols: applyStaggerAnimation, item.offsetHeight,
item.style.animationDelay.
- Around line 195-197: HTML currently includes Google Fonts <link> tags which
leaves font loading CDN-dependent; copy Outfit and JetBrains Mono font files
into vendor/fonts/, add `@font-face` declarations in your main CSS (or a new
vendor/fonts.css) pointing to those local files, update generate_index.py to
inject a local <link rel="stylesheet" href="vendor/fonts.css"> instead of the
Google Fonts URLs (replace the three <link> lines), and if CDN usage was
intentional, document that decision in CLAUDE.md noting the trade-offs for
offline/CI environments.
- Around line 874-886: The category string is injected into HTML and JS without
escaping (used in tabs_html onclick, tab_contents_html id, and displayed text),
so escape it before embedding: call html.escape(category, quote=True) (use a
variable like safe_category) when inserting into id attributes and into the
visible text, and avoid breaking the onclick JS by either using a data-category
attribute (e.g., data-category="{safe_category}") and letting openTab read
event.currentTarget.dataset.category, or if keeping inline onclick, pass an
already JS-escaped value (escape single quotes/backslashes) so openTab(event,
...) cannot be broken; update uses in tabs_html, tab_contents_html, and any
onclick occurrences accordingly.

---

Outside diff comments:
In `@generate_index.py`:
- Around line 142-167: The code calls get_html_title(filepath) outside the
file-read try/except so a UnicodeDecodeError in non-UTF8 files can crash the
script; change the flow to determine title after the read/fallback and protect
it: call get_html_title on the successfully written file (dest_path) inside the
try/except or wrap get_html_title(...) in its own try/except and fall back to
os.path.basename(filepath) (or similar) when title extraction fails, ensuring
structure[category].append((title, rel_path)) always receives a safe title.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Google Fonts のみ CDN 依存が残り、ローカルベンダー方針と不整合

React/Babel/Tailwind/PrismJS/FontAwesome はすべてローカルベンダーへコピーしているのに、Outfit と JetBrains Mono だけ Google Fonts CDN に依存しています。ネットワーク接続がない環境（CI や GitHub Pages のオフラインプレビュー等）では fonts が読み込まれず、フォールバックフォントで表示されます。フォントファイルも vendor/fonts/ にコピーし、@font-face でセルフホストするか、または意図的な CDN 依存として CLAUDE.md に明記することを推奨します。

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@generate_index.py` around lines 195 - 197, HTML currently includes Google
Fonts <link> tags which leaves font loading CDN-dependent; copy Outfit and
JetBrains Mono font files into vendor/fonts/, add `@font-face` declarations in
your main CSS (or a new vendor/fonts.css) pointing to those local files, update
generate_index.py to inject a local <link rel="stylesheet"
href="vendor/fonts.css"> instead of the Google Fonts URLs (replace the three
<link> lines), and if CDN usage was intentional, document that decision in
CLAUDE.md noting the trade-offs for offline/CI environments.