docs-i18n 0.1.0 → 0.2.1

package/src/admin/server/services/status.ts

@@ -0,0 +1,183 @@
+import { existsSync, readdirSync, readFileSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import type { DocsI18nConfig } from '../../../config';
+import { flattenSources } from '../../../config';
+import { TranslationCache } from '../../../core/cache';
+import { parseMdx } from '../../../core/parser';
+
+let _config: DocsI18nConfig;
+let _cache: TranslationCache | null = null;
+
+export function initStatus(config: DocsI18nConfig) {
+  _config = config;
+  _cache = null; // reset
+}
+
+export function getVersions(): string[] {
+  return flattenSources(_config).map((s) => s.versionKey);
+}
+
+export function getLangs(): string[] {
+  return _config.languages;
+}
+
+export function getCache(): TranslationCache {
+  if (!_cache) {
+    _cache = new TranslationCache(resolve(_config.cacheDir ?? '.cache'));
+  }
+  return _cache;
+}
+
+function getSourcePath(versionKey: string): string | null {
+  const source = flattenSources(_config).find((s) => s.versionKey === versionKey);
+  return source ? resolve(source.sourcePath) : null;
+}
+
+function walkFiles(dir: string): string[] {
+  const results: string[] = [];
+  if (!existsSync(dir)) return results;
+  const exts = (_config.include ?? ['**/*.mdx', '**/*.md']).map((p) => p.replace('**/*', ''));
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) results.push(...walkFiles(fullPath));
+    else if (exts.some((ext) => entry.name.endsWith(ext))) results.push(fullPath);
+  }
+  return results;
+}
+
+export function ensureScanned(version: string): void {
+  const cache = getCache();
+  const enDir = getSourcePath(version);
+  if (!enDir || !existsSync(enDir)) return;
+
+  const files = walkFiles(enDir);
+  const currentCount = cache.sourceCount(version);
+  if (currentCount >= files.length) return;
+
+  cache.clearSources('', version);
+  for (const file of files) {
+    const relPath = file.slice(enDir.length + 1);
+    const content = readFileSync(file, 'utf8');
+    const nodes = parseMdx(content);
+    for (const node of nodes) {
+      if (node.needsTranslation && node.md5) {
+        const line = content.substring(0, node.startOffset).split('\n').length;
+        cache.setSource(node.md5, node.rawText, node.type);
+        cache.updateSource('', node.md5, relPath, line, version);
+      }
+    }
+  }
+}
+
+export function rescan(version: string): number {
+  const cache = getCache();
+  const enDir = getSourcePath(version);
+  if (!enDir || !existsSync(enDir)) return 0;
+
+  const files = walkFiles(enDir);
+  cache.clearSources('', version);
+  for (const file of files) {
+    const relPath = file.slice(enDir.length + 1);
+    const content = readFileSync(file, 'utf8');
+    const nodes = parseMdx(content);
+    for (const node of nodes) {
+      if (node.needsTranslation && node.md5) {
+        const line = content.substring(0, node.startOffset).split('\n').length;
+        cache.setSource(node.md5, node.rawText, node.type);
+        cache.updateSource('', node.md5, relPath, line, version);
+      }
+    }
+  }
+  return files.length;
+}
+
+export function getOverview() {
+  const cache = getCache();
+  const versions = getVersions();
+  const langs = getLangs();
+
+  const result: Record<string, {
+    enFileCount: number;
+    langs: Record<string, {
+      sections: Record<string, any>;
+      totalFiles: number;
+      translatedFiles: number;
+      totalNodes: number;
+      translatedNodes: number;
+    }>;
+  }> = {};
+
+  for (const version of versions) {
+    ensureScanned(version);
+    const enDir = getSourcePath(version);
+    const enFileCount = enDir && existsSync(enDir) ? walkFiles(enDir).length : 0;
+
+    const langStats: (typeof result)[string]['langs'] = {};
+    for (const lang of langs) {
+      const sections = cache.sectionStats(version, lang);
+      let totalFiles = 0, translatedFiles = 0, totalNodes = 0, translatedNodes = 0;
+      const sectionMap: Record<string, any> = {};
+      for (const s of sections) {
+        sectionMap[s.section] = s;
+        totalFiles += s.totalFiles;
+        translatedFiles += s.translatedFiles;
+        totalNodes += s.totalNodes;
+        translatedNodes += s.translatedNodes;
+      }
+      langStats[lang] = { sections: sectionMap, totalFiles, translatedFiles, totalNodes, translatedNodes };
+    }
+    result[version] = { enFileCount, langs: langStats };
+  }
+  return result;
+}
+
+export function getFileCoverage(version: string, lang: string) {
+  ensureScanned(version);
+  return getCache().fileCoverage(version, lang);
+}
+
+export function getFileDetail(version: string, lang: string, file: string) {
+  ensureScanned(version);
+  return getCache().fileDetail(version, lang, file);
+}
+
+export interface FileBlock {
+  md5: string | null;
+  type: string;
+  source: string;
+  translation: string | null;
+}
+
+export function getFileBlocks(version: string, lang: string, file: string): FileBlock[] | null {
+  const enDir = getSourcePath(version);
+  if (!enDir) return null;
+
+  const enPath = join(enDir, file);
+  if (!existsSync(enPath)) return null;
+
+  const cache = getCache();
+  const content = readFileSync(enPath, 'utf8');
+  const nodes = parseMdx(content);
+  const blocks: FileBlock[] = [];
+  let lastEnd = 0;
+
+  for (const node of nodes) {
+    if (node.startOffset > lastEnd) {
+      const gap = content.substring(lastEnd, node.startOffset);
+      blocks.push({ md5: null, type: 'gap', source: gap, translation: null });
+    }
+    if (node.needsTranslation && node.md5) {
+      const translation = lang === 'en' ? null : (cache.get(lang, node.md5) ?? null);
+      blocks.push({ md5: node.md5, type: node.type, source: node.rawText, translation });
+    } else {
+      blocks.push({ md5: null, type: node.type, source: node.rawText, translation: null });
+    }
+    lastEnd = node.endOffset;
+  }
+
+  if (lastEnd < content.length) {
+    const tail = content.substring(lastEnd);
+    if (tail.trim()) blocks.push({ md5: null, type: 'gap', source: tail, translation: null });
+  }
+  return blocks;
+}

package/src/admin/ui/App.tsx

@@ -0,0 +1,326 @@
+import { useQuery } from '@tanstack/react-query';
+import { useCallback, useEffect, useState } from 'react';
+import { FileList } from './components/FileList';
+import { JobDialog } from './components/JobDialog';
+import { JobPanel } from './components/JobPanel';
+import { LangGrid } from './components/LangGrid';
+import { Preview } from './components/Preview';
+import { api } from './lib/api';
+
+type ViewMode = 'split' | 'en' | 'lang';
+type StatusFilter = 'all' | 'complete' | 'partial' | 'missing';
+type SectionFilter = 'all' | 'docs' | 'blog' | 'learn';
+
+// ── URL state helpers ──
+
+function readParams() {
+  const p = new URLSearchParams(window.location.search);
+  return {
+    version: p.get('v') || 'latest',
+    lang: p.get('lang') || null,
+    file: p.get('file') || null,
+    showFiles: p.get('files') !== '0',
+    view: (p.get('view') as ViewMode) || 'lang',
+    toc: p.get('toc') !== '0',
+    nodes: p.get('nodes') === '1',
+    status: (p.get('status') as StatusFilter) || 'all',
+    section: (p.get('section') as SectionFilter) || 'all',
+  };
+}
+
+function setParams(updates: Record<string, string | null>) {
+  const next = new URLSearchParams(window.location.search);
+  for (const [k, v] of Object.entries(updates)) {
+    if (v === null || v === '') next.delete(k);
+    else next.set(k, v);
+  }
+  const qs = next.toString();
+  window.history.replaceState(null, '', qs ? `?${qs}` : '/');
+}
+
+export function App() {
+  // bump to force re-read from URL
+  const [, rerender] = useState(0);
+  const bump = useCallback(() => rerender((n) => n + 1), []);
+
+  // Theme
+  const [theme, setThemeState] = useState(() => {
+    const saved = localStorage.getItem('theme');
+    return saved === 'light' ? 'light' : 'dark';
+  });
+  // Toast
+  const [toast, setToast] = useState<string | null>(null);
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = theme;
+  }, [theme]);
+
+  useEffect(() => {
+    if (!toast) return;
+    const t = setTimeout(() => setToast(null), 3000);
+    return () => clearTimeout(t);
+  }, [toast]);
+
+  const { version, lang, file, showFiles, view, toc, nodes, status, section } =
+    readParams();
+
+  // ── URL setters ──
+
+  const setVersion = useCallback(
+    (v: string) => {
+      setParams({
+        v: v === 'latest' ? null : v,
+        file: null,
+      });
+      bump();
+    },
+    [bump],
+  );
+
+  const setLang = useCallback(
+    (l: string | null) => {
+      setParams({ lang: l });
+      bump();
+    },
+    [bump],
+  );
+
+  const setFile = useCallback(
+    (f: string | null) => {
+      setParams({ file: f });
+      bump();
+    },
+    [bump],
+  );
+
+  const setShowFiles = useCallback(
+    (show: boolean) => {
+      setParams({ files: show ? null : '0' });
+      bump();
+    },
+    [bump],
+  );
+
+  const setView = useCallback(
+    (m: ViewMode) => {
+      setParams({ view: m === 'lang' ? null : m });
+      bump();
+    },
+    [bump],
+  );
+
+  const setNodes = useCallback(
+    (show: boolean) => {
+      setParams({ nodes: show ? '1' : null });
+      bump();
+    },
+    [bump],
+  );
+
+  const setToc = useCallback(
+    (show: boolean) => {
+      setParams({ toc: show ? null : '0' });
+      bump();
+    },
+    [bump],
+  );
+
+  const setStatusFilter = useCallback(
+    (s: StatusFilter) => {
+      setParams({ status: s === 'all' ? null : s });
+      bump();
+    },
+    [bump],
+  );
+
+  const setSectionFilter = useCallback(
+    (s: SectionFilter) => {
+      setParams({ section: s === 'all' ? null : s });
+      bump();
+    },
+    [bump],
+  );
+
+  // ── Non-URL state ──
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [showDialog, setShowDialog] = useState(false);
+  const [dialogFiles, setDialogFiles] = useState<string[] | undefined>();
+
+  // ── Queries ──
+  const { data: statusData } = useQuery({
+    queryKey: ['status'],
+    queryFn: api.status,
+  });
+
+  const { data: files } = useQuery({
+    queryKey: ['files', version, lang],
+    queryFn: () => api.fileCoverage(version, lang as string),
+    enabled: !!lang,
+  });
+
+  // ── Handlers ──
+  const handleSelectVersion = useCallback(
+    (v: string) => {
+      setVersion(v);
+      setSelected(new Set());
+    },
+    [setVersion],
+  );
+
+  const handleSelectLang = useCallback(
+    (l: string) => {
+      setLang(l);
+      setSelected(new Set());
+    },
+    [setLang],
+  );
+
+  const handleToggle = useCallback((f: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(f)) next.delete(f);
+      else next.add(f);
+      return next;
+    });
+  }, []);
+
+  const handleSelectAll = useCallback(
+    (fileList: string[]) => setSelected(new Set(fileList)),
+    [],
+  );
+
+  const handleClear = useCallback(() => setSelected(new Set()), []);
+
+  const handleTranslateSelected = useCallback(() => {
+    setDialogFiles([...selected]);
+    setShowDialog(true);
+  }, [selected]);
+
+  const handleNewJob = useCallback(() => {
+    setDialogFiles(undefined);
+    setShowDialog(true);
+  }, []);
+
+  if (!statusData) return <div className="loading">Loading...</div>;
+
+  return (
+    <>
+      <nav>
+        <h1>🌐 Translation Admin</h1>
+        <span className="spacer" />
+        <button type="button" className="btn" onClick={handleNewJob}>
+          + New Job
+        </button>
+        <button
+          type="button"
+          className="btn btn-icon"
+          onClick={() => {
+            const next = theme === 'light' ? 'dark' : 'light';
+            setThemeState(next);
+            localStorage.setItem('theme', next);
+          }}
+          title="Toggle theme"
+        >
+          {theme === 'light' ? '🌙' : '☀️'}
+        </button>
+      </nav>
+
+      <div className="container">
+        {/* Version tabs */}
+        <div className="tabs">
+          {statusData.versions.map((v) => (
+            <button
+              key={v}
+              type="button"
+              className={`tab${v === version ? ' active' : ''}`}
+              onClick={() => handleSelectVersion(v)}
+            >
+              {v}
+            </button>
+          ))}
+        </div>
+
+        {/* Language cards */}
+        <LangGrid
+          data={statusData}
+          version={version}
+          selectedLang={lang}
+          onSelect={handleSelectLang}
+        />
+
+        {/* Jobs */}
+        <JobPanel />
+
+        {/* File list + Preview */}
+        {lang && files && (
+          <>
+            <div className="file-panel-toolbar">
+              <button
+                type="button"
+                className={`btn btn-sm${showFiles ? ' active' : ''}`}
+                onClick={() => setShowFiles(!showFiles)}
+              >
+                {showFiles ? '◀ Hide files' : '▶ Show files'}
+              </button>
+              {file && <span className="file-panel-current">{file}</span>}
+            </div>
+            <div
+              className={`file-panel${!showFiles ? ' no-list' : ''}${!file ? ' no-preview' : ''}`}
+            >
+              {showFiles && (
+                <FileList
+                  files={files}
+                  lang={lang}
+                  activeFile={file}
+                  selected={selected}
+                  statusFilter={status}
+                  sectionFilter={section}
+                  onStatusFilter={setStatusFilter}
+                  onSectionFilter={setSectionFilter}
+                  onSelect={setFile}
+                  onToggle={handleToggle}
+                  onSelectAll={handleSelectAll}
+                  onClear={handleClear}
+                  onTranslateSelected={handleTranslateSelected}
+                />
+              )}
+              {file && (
+                <Preview
+                  version={version}
+                  lang={lang}
+                  file={file}
+                  viewMode={view}
+                  onViewMode={setView}
+                  showToc={toc}
+                  onToggleToc={() => setToc(!toc)}
+                  showNodes={nodes}
+                  onToggleNodes={() => setNodes(!nodes)}
+                  onClose={() => setFile(null)}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Toast */}
+      {toast && <div className="toast">{toast}</div>}
+
+      {/* Job dialog */}
+      {showDialog && (
+        <JobDialog
+          langs={statusData.langs}
+          versions={statusData.versions}
+          defaultLang={lang || undefined}
+          defaultVersion={version}
+          files={dialogFiles}
+          onClose={() => setShowDialog(false)}
+          onSuccess={(msg) => {
+            setShowDialog(false);
+            setToast(msg);
+          }}
+        />
+      )}
+    </>
+  );
+}