fix: align changelog viewer with spec

Author: beagleworks

package.json

@@ -15,6 +15,7 @@
     "fuse.js": "^7.1.0"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3"
   }

pnpm-lock.yaml

@@ -14,7 +14,7 @@ import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'node:fs';
 import { join, dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parseChangelog, type ParsedVersion, type Entry } from './parse-changelog.js';
-import { fetchReleases, fetchChangelogCommitDates, fetchNpmPublishDates, interpolateMissingDates } from './fetch-releases.js';
+import { fetchReleases, fetchNpmPublishDates, interpolateMissingDates } from './fetch-releases.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT_DIR = join(__dirname, '..');

scripts/generate-data.ts

@@ -12,6 +12,39 @@ export interface ParsedVersion {
   entries: Entry[];
 }
 
+function parseMarkdownTableRow(line: string): string[] {
+  const trimmed = line.trim();
+  if (!trimmed.startsWith('|')) return [];
+
+  const start = 1;
+  const end = trimmed.endsWith('|') ? trimmed.length - 1 : trimmed.length;
+
+  const cells: string[] = [];
+  let current = '';
+
+  for (let i = start; i < end; i++) {
+    const ch = trimmed[i];
+
+    // `\|` はセル内のパイプとして扱う
+    if (ch === '\\' && i + 1 < end && trimmed[i + 1] === '|') {
+      current += '|';
+      i++;
+      continue;
+    }
+
+    if (ch === '|') {
+      cells.push(current.trim());
+      current = '';
+      continue;
+    }
+
+    current += ch;
+  }
+
+  cells.push(current.trim());
+  return cells;
+}
+
 /**
  * CHANGELOGファイルをパースする
  * @param content CHANGELOGファイルの内容
@@ -55,12 +88,13 @@ export function parseChangelog(content: string): ParsedVersion[] {
 
     // テーブル行をパース
     if (inTable && line.startsWith('|') && currentVersion) {
-      const cells = line.split('|').map((cell) => cell.trim());
-      // cells[0] は空文字列、cells[1] が日本語、cells[2] が英語
-      if (cells.length >= 3 && cells[1] && cells[2]) {
+      const cells = parseMarkdownTableRow(line);
+      const ja = cells[0];
+      const en = cells[1];
+      if (ja && en) {
         currentEntries.push({
-          ja: cells[1],
-          en: cells[2],
+          ja,
+          en,
         });
       }
     }

scripts/parse-changelog.ts

@@ -38,27 +38,30 @@ function formatSafeHtml(text: string): string {
  * エントリの種類を判定してバッジクラスを返す
  * [VSCode] や Windows: などのプレフィックスは除外して動詞を認識する
  */
-function getEntryType(text: string): string {
+function getEntryType(enText: string, jaText: string): string {
   // [Tag] 形式と Tag: 形式のプレフィックスを除去
-  const cleanedText = text
+  const cleanedEn = enText
     .replace(/^\[.*?\]\s*/, '')    // [IDE], [VSCode] 等
-    .replace(/^[A-Za-z]+:\s*/, ''); // Bedrock:, Windows: 等
-  const lowerText = cleanedText.toLowerCase();
+    .replace(/^[A-Za-z][A-Za-z0-9-]*:\s*/, ''); // Bedrock:, Windows: 等
+  const cleanedJa = jaText
+    .replace(/^\[.*?\]\s*/, '')
+    .replace(/^[A-Za-z][A-Za-z0-9-]*:\s*/, '');
+  const lowerEn = cleanedEn.toLowerCase();
 
   // Added / Add
-  if (lowerText.startsWith('added') || lowerText.startsWith('add ') || cleanedText.startsWith('追加')) return 'added';
+  if (lowerEn.startsWith('added') || lowerEn.startsWith('add ') || cleanedJa.startsWith('追加')) return 'added';
   // Fixed / Fix / bugfixes
-  if (lowerText.startsWith('fixed') || lowerText.startsWith('fix ') || lowerText.includes('bugfix') || cleanedText.startsWith('修正')) return 'fixed';
+  if (lowerEn.startsWith('fixed') || lowerEn.startsWith('fix ') || lowerEn.includes('bugfix') || cleanedJa.startsWith('修正')) return 'fixed';
   // Changed / Change
-  if (lowerText.startsWith('changed') || lowerText.startsWith('change ') || cleanedText.startsWith('変更')) return 'changed';
+  if (lowerEn.startsWith('changed') || lowerEn.startsWith('change ') || cleanedJa.startsWith('変更')) return 'changed';
   // Improved / Improve
-  if (lowerText.startsWith('improved') || lowerText.startsWith('improve ') || cleanedText.startsWith('改善')) return 'improved';
+  if (lowerEn.startsWith('improved') || lowerEn.startsWith('improve ') || cleanedJa.startsWith('改善')) return 'improved';
   // Enabled / Enable
-  if (lowerText.startsWith('enabled') || lowerText.startsWith('enable ') || cleanedText.startsWith('有効化')) return 'added';
+  if (lowerEn.startsWith('enabled') || lowerEn.startsWith('enable ') || cleanedJa.startsWith('有効化')) return 'added';
   // Removed / Remove
-  if (lowerText.startsWith('removed') || lowerText.startsWith('remove ') || cleanedText.startsWith('削除')) return 'changed';
+  if (lowerEn.startsWith('removed') || lowerEn.startsWith('remove ') || cleanedJa.startsWith('削除')) return 'changed';
   // Deprecated / Deprecate
-  if (lowerText.startsWith('deprecated') || lowerText.startsWith('deprecate ') || cleanedText.startsWith('非推奨')) return 'changed';
+  if (lowerEn.startsWith('deprecated') || lowerEn.startsWith('deprecate ') || cleanedJa.startsWith('非推奨')) return 'changed';
   return 'other';
 }
 ---
@@ -82,7 +85,7 @@ function getEntryType(text: string): string {
       </thead>
       <tbody>
         {entries.map((entry) => {
-          const entryType = getEntryType(entry.en);
+          const entryType = getEntryType(entry.en, entry.ja);
           return (
             <tr class={`entry-row ${entryType}`} data-ja={entry.ja} data-en={entry.en}>
               <td class="entry-ja" set:html={formatSafeHtml(entry.ja)} />

src/components/VersionSection.astro

@@ -111,61 +111,62 @@ const generatedDate = new Date(generatedAt).toLocaleString('ja-JP', {
     includeMatches: true,
   });
 
-  // HTML特殊文字をエスケープ
   function escapeHtml(text: string): string {
-    const div = document.createElement('div');
-    div.textContent = text;
-    return div.innerHTML;
+    return text
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
   }
 
-  // バッククォートをcodeタグに変換（HTMLエスケープ後）
-  function formatCode(text: string): string {
-    const escaped = escapeHtml(text);
-    return escaped.replace(/`([^`]+)`/g, '<code>$1</code>');
+  // バッククォート内を <code> 表示（エスケープ後）
+  function renderWithCode(rawText: string): string {
+    return escapeHtml(rawText).replace(/`([^`]+)`/g, '<code>$1</code>');
   }
 
-  // ハイライト適用後にformatCodeを適用（code表示を維持）
-  function applyCodeFormatting(html: string): string {
-    // ハイライト用のspanタグを一時的に保護
-    const placeholders: string[] = [];
-    const protectedHtml = html.replace(/<span class="highlight">([^<]*)<\/span>/g, (match, content) => {
-      const idx = placeholders.length;
-      placeholders.push(match);
-      return `\x00HIGHLIGHT${idx}\x00`;
-    });
-
-    // バッククォートをcodeタグに変換
-    let result = protectedHtml.replace(/`([^`]+)`/g, '<code>$1</code>');
-
-    // ハイライトを復元
-    result = result.replace(/\x00HIGHLIGHT(\d+)\x00/g, (_, idx) => placeholders[parseInt(idx)]);
+  const HIGHLIGHT_START = '\uE000';
+  const HIGHLIGHT_END = '\uE001';
 
-    return result;
-  }
+  function renderHighlightedHtml(rawText: string, indices: ReadonlyArray<[number, number]>): string {
+    if (!indices || indices.length === 0) return renderWithCode(rawText);
 
-  // 検索結果をハイライト（code表示を維持）
-  function highlightText(element: HTMLElement, matches: Fuse.FuseResultMatch[] | undefined, key: string) {
-    if (!matches) return;
+    const sorted = [...indices].sort((a, b) => a[0] - b[0]);
+    const merged: Array<[number, number]> = [];
 
-    const match = matches.find((m) => m.key === key);
-    if (!match || !match.indices || match.indices.length === 0) return;
+    for (const [start, end] of sorted) {
+      const last = merged[merged.length - 1];
+      if (!last || start > last[1] + 1) {
+        merged.push([start, end]);
+      } else {
+        last[1] = Math.max(last[1], end);
+      }
+    }
 
-    const text = element.textContent || '';
-    let result = '';
+    let marked = '';
     let lastIndex = 0;
-
-    // インデックスをソートして処理
-    const sortedIndices = [...match.indices].sort((a, b) => a[0] - b[0]);
-
-    for (const [start, end] of sortedIndices) {
-      result += escapeHtml(text.slice(lastIndex, start));
-      result += `<span class="highlight">${escapeHtml(text.slice(start, end + 1))}</span>`;
+    for (const [start, end] of merged) {
+      marked += rawText.slice(lastIndex, start);
+      marked += HIGHLIGHT_START + rawText.slice(start, end + 1) + HIGHLIGHT_END;
       lastIndex = end + 1;
     }
-    result += escapeHtml(text.slice(lastIndex));
+    marked += rawText.slice(lastIndex);
 
-    // ハイライト後にformatCodeを適用してcode表示を維持
-    element.innerHTML = applyCodeFormatting(result);
+    let html = escapeHtml(marked).replace(/`([^`]+)`/g, '<code>$1</code>');
+    html = html.split(HIGHLIGHT_START).join('<span class="highlight">');
+    html = html.split(HIGHLIGHT_END).join('</span>');
+    return html;
+  }
+
+  function applyHighlight(
+    element: HTMLElement,
+    rawText: string,
+    matches: Fuse.FuseResultMatch[] | undefined,
+    key: 'ja' | 'en'
+  ) {
+    const match = matches?.find((m) => m.key === key);
+    const indices = match?.indices as ReadonlyArray<[number, number]> | undefined;
+    element.innerHTML = indices ? renderHighlightedHtml(rawText, indices) : renderWithCode(rawText);
   }
 
   // 検索を実行
@@ -186,8 +187,8 @@ const generatedDate = new Date(generatedAt).toLocaleString('ja-JP', {
           // ハイライトをリセット
           const jaCell = row.querySelector('.entry-ja') as HTMLElement;
           const enCell = row.querySelector('.entry-en') as HTMLElement;
-          if (jaCell) jaCell.innerHTML = formatCode((row as HTMLElement).dataset.ja || '');
-          if (enCell) enCell.innerHTML = formatCode((row as HTMLElement).dataset.en || '');
+          if (jaCell) jaCell.innerHTML = renderWithCode((row as HTMLElement).dataset.ja || '');
+          if (enCell) enCell.innerHTML = renderWithCode((row as HTMLElement).dataset.en || '');
         });
       });
       searchStats.hidden = true;
@@ -254,14 +255,12 @@ const generatedDate = new Date(generatedAt).toLocaleString('ja-JP', {
             const jaCell = row.querySelector('.entry-ja') as HTMLElement;
             const enCell = row.querySelector('.entry-en') as HTMLElement;
 
-            // まずテキストをリセット
-            if (jaCell) jaCell.innerHTML = formatCode((row as HTMLElement).dataset.ja || '');
-            if (enCell) enCell.innerHTML = formatCode((row as HTMLElement).dataset.en || '');
-
             // ハイライトを適用
             if (matchResult?.matches) {
-              if (jaCell) highlightText(jaCell, matchResult.matches, 'ja');
-              if (enCell) highlightText(enCell, matchResult.matches, 'en');
+              const rawJa = (row as HTMLElement).dataset.ja || '';
+              const rawEn = (row as HTMLElement).dataset.en || '';
+              if (jaCell) applyHighlight(jaCell, rawJa, matchResult.matches, 'ja');
+              if (enCell) applyHighlight(enCell, rawEn, matchResult.matches, 'en');
             }
           } else {
             row.classList.add('hidden');

src/pages/[year].astro

@@ -5,6 +5,7 @@
   "compilerOptions": {
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "types": ["node"]
   }
 }