@shirokuma-library/shirokuma-docs 0.1.0-alpha.5

package/portal/app/i18n/page.tsx

@@ -0,0 +1,339 @@
+import Link from "next/link";
+import {
+  Languages,
+  AppWindow,
+  ArrowRight,
+  FileText,
+  Key,
+  Percent,
+  BarChart3,
+  PieChart,
+  Globe2,
+  CheckCircle2,
+  AlertCircle,
+} from "lucide-react";
+import { loadI18n, loadApplications } from "@/lib/data-loader";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Badge } from "@/components/ui/badge";
+
+export const dynamic = "force-static";
+
+export default async function I18nPage() {
+  const [data, applications] = await Promise.all([
+    loadI18n(),
+    loadApplications(),
+  ]);
+
+  if (!data) {
+    return (
+      <div className="space-y-8">
+        <header>
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-green-500/10 p-2">
+              <Languages className="h-6 w-6 text-green-500" />
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight">i18n</h1>
+              <p className="mt-1 text-muted-foreground">
+                翻訳データがありません
+              </p>
+            </div>
+          </div>
+        </header>
+      </div>
+    );
+  }
+
+  // Calculate stats
+  const locales = data.locales || [];
+  const primaryLocale = data.primaryLocale || "ja";
+  const totalNamespaces = data.stats?.totalNamespaces || (data.namespaces || []).length;
+  const totalKeys = data.stats?.totalKeys || 0;
+  const coveragePercent = data.stats?.coveragePercent || 0;
+  const apps = data.apps || [];
+
+  // Calculate app stats
+  const appStats = apps.map((app) => {
+    const appNamespaces = (data.namespaces || []).filter((ns) => ns.app === app.id);
+    const keys = app.keyCount || appNamespaces.reduce((sum, ns) => sum + (ns.entries?.length || 0), 0);
+    const namespaces = app.namespaceCount || appNamespaces.length;
+    return { app, keys, namespaces };
+  });
+
+  // Namespace distribution by app for chart
+  const namespaceDistribution = appStats.map(({ app, namespaces }) => ({
+    name: app.name,
+    count: namespaces,
+    color: app.color === "blue" ? "bg-accent-blue" :
+           app.color === "green" ? "bg-accent-green" :
+           app.color === "purple" ? "bg-accent-purple" :
+           "bg-accent-yellow",
+  }));
+
+  const totalNamespacesInApps = namespaceDistribution.reduce((sum, d) => sum + d.count, 0);
+
+  // Key distribution by app for chart
+  const keyDistribution = appStats.map(({ app, keys }) => ({
+    name: app.name,
+    count: keys,
+    color: app.color === "blue" ? "bg-accent-blue" :
+           app.color === "green" ? "bg-accent-green" :
+           app.color === "purple" ? "bg-accent-purple" :
+           "bg-accent-yellow",
+  }));
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <header>
+        <div className="flex items-center gap-3">
+          <div className="rounded-lg bg-accent-green/10 p-2">
+            <Languages className="h-6 w-6 text-accent-green" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">i18n Dashboard</h1>
+            <p className="mt-1 text-muted-foreground">
+              翻訳カバレッジと言語リソースの全体統計
+            </p>
+          </div>
+        </div>
+      </header>
+
+      {/* Summary Stats */}
+      <div className="grid gap-4 md:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>対応言語</CardDescription>
+            <CardTitle className="text-3xl flex items-center gap-2">
+              <Globe2 className="h-6 w-6 text-accent-blue" />
+              {locales.length}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-1">
+              {locales.map((locale) => (
+                <Badge
+                  key={locale}
+                  variant={locale === primaryLocale ? "default" : "secondary"}
+                  className="text-xs"
+                >
+                  {locale.toUpperCase()}
+                  {locale === primaryLocale && " (primary)"}
+                </Badge>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>総キー数</CardDescription>
+            <CardTitle className="text-3xl flex items-center gap-2">
+              <Key className="h-6 w-6 text-accent-yellow" />
+              {totalKeys.toLocaleString()}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-xs text-muted-foreground">
+              翻訳キー（全言語共通）
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>名前空間</CardDescription>
+            <CardTitle className="text-3xl flex items-center gap-2">
+              <FileText className="h-6 w-6 text-accent-purple" />
+              {totalNamespaces}
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="text-xs text-muted-foreground">
+              翻訳ファイル数
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className={coveragePercent === 100 ? "border-green-500/50" : coveragePercent >= 80 ? "border-yellow-500/50" : "border-red-500/50"}>
+          <CardHeader className="pb-2">
+            <CardDescription>翻訳カバレッジ</CardDescription>
+            <CardTitle className="text-3xl flex items-center gap-2">
+              {coveragePercent === 100 ? (
+                <CheckCircle2 className="h-6 w-6 text-green-500" />
+              ) : (
+                <AlertCircle className={`h-6 w-6 ${coveragePercent >= 80 ? "text-yellow-500" : "text-red-500"}`} />
+              )}
+              {coveragePercent}%
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Progress value={coveragePercent} className="h-2" />
+            <p className="mt-1 text-xs text-muted-foreground">
+              {coveragePercent === 100 ? "全キー翻訳済み" : "未翻訳キーあり"}
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* App-specific Views */}
+      {applications && applications.apps.length > 0 && (
+        <section>
+          <div className="flex items-center gap-2 mb-4">
+            <AppWindow className="h-5 w-5 text-muted-foreground" />
+            <h2 className="text-lg font-semibold">アプリ別翻訳ダッシュボード</h2>
+          </div>
+          <div className="grid gap-4 sm:grid-cols-2">
+            {appStats.map(({ app, keys, namespaces }) => (
+              <Link
+                key={app.id}
+                href={`/apps/${app.id}/i18n`}
+                className="group rounded-lg border border-border bg-card p-5 transition-all hover:border-primary/50 hover:shadow-lg"
+              >
+                <div className="flex items-start justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="rounded-lg bg-muted p-2.5">
+                      <Languages className="h-5 w-5 text-muted-foreground group-hover:text-primary" />
+                    </div>
+                    <div>
+                      <h3 className="font-semibold group-hover:text-primary">{app.name}</h3>
+                      <p className="text-sm text-muted-foreground">
+                        翻訳リソースを表示
+                      </p>
+                    </div>
+                  </div>
+                  <ArrowRight className="h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" />
+                </div>
+                <div className="mt-4 flex items-center gap-4 text-sm text-muted-foreground">
+                  <span className="flex items-center gap-1.5">
+                    <FileText className="h-4 w-4 text-accent-purple" />
+                    {namespaces} namespaces
+                  </span>
+                  <span className="flex items-center gap-1.5">
+                    <Key className="h-4 w-4 text-accent-yellow" />
+                    {keys.toLocaleString()} keys
+                  </span>
+                </div>
+                <div className="mt-3 pt-3 border-t border-border">
+                  <div className="flex items-center justify-between text-xs text-muted-foreground">
+                    <span>キー占有率</span>
+                    <span>{totalKeys > 0 ? Math.round((keys / totalKeys) * 100) : 0}%</span>
+                  </div>
+                  <Progress value={totalKeys > 0 ? (keys / totalKeys) * 100 : 0} className="h-1.5 mt-1" />
+                </div>
+              </Link>
+            ))}
+          </div>
+        </section>
+      )}
+
+      {/* Two Column Layout for Charts */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        {/* Namespace Distribution */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <BarChart3 className="h-5 w-5 text-muted-foreground" />
+              <CardTitle>名前空間分布</CardTitle>
+            </div>
+            <CardDescription>
+              アプリ別の翻訳ファイル数
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {namespaceDistribution.map(({ name, count, color }) => {
+              const percentage = totalNamespacesInApps > 0 ? Math.round((count / totalNamespacesInApps) * 100) : 0;
+              return (
+                <div key={name} className="space-y-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <div className="flex items-center gap-2">
+                      <div className={`h-3 w-3 rounded ${color}`} />
+                      <span>{name}</span>
+                    </div>
+                    <span className="text-muted-foreground">{count} ({percentage}%)</span>
+                  </div>
+                  <Progress value={percentage} className="h-2" />
+                </div>
+              );
+            })}
+          </CardContent>
+        </Card>
+
+        {/* Key Distribution */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <PieChart className="h-5 w-5 text-muted-foreground" />
+              <CardTitle>キー分布</CardTitle>
+            </div>
+            <CardDescription>
+              アプリ別の翻訳キー数
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {keyDistribution.map(({ name, count, color }) => {
+              const percentage = totalKeys > 0 ? Math.round((count / totalKeys) * 100) : 0;
+              return (
+                <div key={name} className="space-y-1">
+                  <div className="flex items-center justify-between text-sm">
+                    <div className="flex items-center gap-2">
+                      <div className={`h-3 w-3 rounded ${color}`} />
+                      <span>{name}</span>
+                    </div>
+                    <span className="text-muted-foreground">{count.toLocaleString()} ({percentage}%)</span>
+                  </div>
+                  <Progress value={percentage} className="h-2" />
+                </div>
+              );
+            })}
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Locale Support Info */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Globe2 className="h-5 w-5 text-accent-blue" />
+            <CardTitle>言語サポート</CardTitle>
+          </div>
+          <CardDescription>
+            next-intl による多言語化設定
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <div className="rounded-lg bg-accent-blue/10 p-3">
+                <Languages className="h-6 w-6 text-accent-blue" />
+              </div>
+              <div>
+                <p className="text-2xl font-bold">{locales.length} 言語</p>
+                <div className="flex gap-2 mt-1">
+                  {locales.map((locale) => (
+                    <Badge
+                      key={locale}
+                      variant={locale === primaryLocale ? "default" : "outline"}
+                    >
+                      {locale.toUpperCase()}
+                    </Badge>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <div className="text-right text-sm text-muted-foreground">
+              <p>Primary: <span className="font-medium">{primaryLocale.toUpperCase()}</span></p>
+              <p className="text-xs">Cookie-based locale detection</p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Footer */}
+      <footer className="text-center text-sm text-muted-foreground">
+        <p>詳細な翻訳キー一覧はアプリ別ビューで確認できます</p>
+      </footer>
+    </div>
+  );
+}

package/portal/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata } from "next";
+import { GlobalHeader } from "@/components/layout/global-header";
+import { AppSidebar } from "@/components/layout/app-sidebar";
+import { SidebarProvider } from "@/lib/sidebar-context";
+import { LayoutContent } from "@/components/layout/layout-content";
+import { getProjectName, getSidebarNavData, loadSearchIndex } from "@/lib/data-loader";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Documentation Portal",
+  description: "Auto-generated documentation portal",
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const projectName = getProjectName();
+  const [navData, searchIndex] = await Promise.all([
+    getSidebarNavData(),
+    loadSearchIndex(),
+  ]);
+
+  return (
+    <html lang="ja">
+      <body className="min-h-screen bg-background antialiased">
+        <SidebarProvider>
+          <GlobalHeader projectName={projectName} navData={navData} searchIndex={searchIndex} />
+          <LayoutContent navData={navData}>
+            {children}
+          </LayoutContent>
+        </SidebarProvider>
+      </body>
+    </html>
+  );
+}

package/portal/app/overview/page.tsx

@@ -0,0 +1,65 @@
+import { AlertCircle, FileText } from "lucide-react";
+import { loadOverview } from "@/lib/data-loader";
+import { MarkdownContent } from "@/components/markdown-content";
+
+export const dynamic = "force-static";
+
+function EmptyState() {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg border border-border bg-card p-12 text-center">
+      <div className="rounded-full bg-muted p-3">
+        <AlertCircle className="h-6 w-6 text-muted-foreground" />
+      </div>
+      <h3 className="mt-4 text-lg font-semibold">概要ドキュメントがありません</h3>
+      <p className="mt-2 text-sm text-muted-foreground">
+        OVERVIEW.md または README.md が見つかりません。
+      </p>
+      <p className="mt-1 text-sm text-muted-foreground">
+        プロジェクトのルートまたは docs/ ディレクトリに配置してください。
+      </p>
+    </div>
+  );
+}
+
+export default async function OverviewPage() {
+  const overview = await loadOverview();
+
+  if (!overview) {
+    return (
+      <div className="space-y-6">
+        <header className="flex items-center gap-3">
+          <div className="rounded-lg bg-accent-blue/10 p-2">
+            <FileText className="h-6 w-6 text-accent-blue" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">概要</h1>
+            <p className="mt-1 text-muted-foreground">
+              プロジェクト概要ドキュメント
+            </p>
+          </div>
+        </header>
+        <EmptyState />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <header className="flex items-center gap-3">
+        <div className="rounded-lg bg-accent-blue/10 p-2">
+          <FileText className="h-6 w-6 text-accent-blue" />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">概要</h1>
+          <p className="mt-1 text-muted-foreground">
+            プロジェクト概要ドキュメント
+          </p>
+        </div>
+      </header>
+
+      {/* Markdown Content with Mermaid and Syntax Highlighting */}
+      <MarkdownContent content={overview.content} />
+    </div>
+  );
+}

package/portal/app/packages/[packageId]/page.tsx

@@ -0,0 +1,201 @@
+/**
+ * Package Details Page
+ *
+ * Shows details of a specific package including modules and exports.
+ *
+ * @screen PackageDetails
+ * @route /packages/[packageId]
+ */
+
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import {
+  Package,
+  Code2,
+  Braces,
+  FileType,
+  ChevronLeft,
+  Library,
+  FileCode,
+  Type,
+  Variable,
+} from "lucide-react";
+import { getPackage, getPackageList } from "@/lib/data-loader";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+interface PackageDetailPageProps {
+  params: Promise<{ packageId: string }>;
+}
+
+export default async function PackageDetailPage({ params }: PackageDetailPageProps) {
+  const { packageId } = await params;
+  const pkg = await getPackage(packageId);
+
+  if (!pkg) {
+    notFound();
+  }
+
+  // Group exports by kind
+  const getKindIcon = (kind: string) => {
+    switch (kind) {
+      case "function":
+        return <Braces className="h-3.5 w-3.5 text-accent-green" />;
+      case "type":
+      case "interface":
+        return <Type className="h-3.5 w-3.5 text-accent-yellow" />;
+      case "const":
+        return <Variable className="h-3.5 w-3.5 text-accent-blue" />;
+      case "class":
+        return <FileCode className="h-3.5 w-3.5 text-accent-purple" />;
+      default:
+        return <Code2 className="h-3.5 w-3.5 text-muted-foreground" />;
+    }
+  };
+
+  const getKindBadge = (kind: string) => {
+    const colors: Record<string, string> = {
+      function: "bg-accent-green/10 text-accent-green",
+      type: "bg-accent-yellow/10 text-accent-yellow",
+      interface: "bg-accent-yellow/10 text-accent-yellow",
+      const: "bg-accent-blue/10 text-accent-blue",
+      class: "bg-accent-purple/10 text-accent-purple",
+      enum: "bg-accent-orange/10 text-accent-orange",
+    };
+    return colors[kind] || "bg-muted text-muted-foreground";
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Breadcrumb */}
+      <nav className="flex items-center gap-2 text-sm text-muted-foreground">
+        <Link href="/packages" className="flex items-center gap-1 hover:text-foreground transition-colors">
+          <ChevronLeft className="h-4 w-4" />
+          Packages
+        </Link>
+        <span>/</span>
+        <span className="text-foreground">{pkg.name}</span>
+      </nav>
+
+      {/* Header */}
+      <header>
+        <div className="flex items-start gap-4">
+          <div className="rounded-lg bg-accent-purple/10 p-3">
+            <Library className="h-8 w-8 text-accent-purple" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold">{pkg.name}</h1>
+            <p className="text-muted-foreground font-mono text-sm">{pkg.prefix}</p>
+            {pkg.description && <p className="mt-2 text-muted-foreground">{pkg.description}</p>}
+          </div>
+        </div>
+      </header>
+
+      {/* Stats */}
+      <div className="grid gap-4 sm:grid-cols-4">
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-3">
+              <Code2 className="h-5 w-5 text-accent-blue" />
+              <div>
+                <div className="text-2xl font-bold">{pkg.stats.moduleCount}</div>
+                <div className="text-xs text-muted-foreground">Modules</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-3">
+              <Package className="h-5 w-5 text-accent-purple" />
+              <div>
+                <div className="text-2xl font-bold">{pkg.stats.exportCount}</div>
+                <div className="text-xs text-muted-foreground">Exports</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-3">
+              <Braces className="h-5 w-5 text-accent-green" />
+              <div>
+                <div className="text-2xl font-bold">{pkg.stats.functionCount}</div>
+                <div className="text-xs text-muted-foreground">Functions</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="pt-4">
+            <div className="flex items-center gap-3">
+              <FileType className="h-5 w-5 text-accent-yellow" />
+              <div>
+                <div className="text-2xl font-bold">{pkg.stats.typeCount}</div>
+                <div className="text-xs text-muted-foreground">Types</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Modules */}
+      <section>
+        <h2 className="text-lg font-semibold mb-4">Modules</h2>
+        <div className="space-y-4">
+          {pkg.modules.map((module) => (
+            <Card key={module.path}>
+              <CardHeader>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <CardTitle className="text-base font-mono">{module.name}</CardTitle>
+                    <CardDescription className="text-xs">{module.path}</CardDescription>
+                  </div>
+                  <Badge variant="secondary">{module.exports.length} exports</Badge>
+                </div>
+                {module.description && (
+                  <p className="text-sm text-muted-foreground mt-2">{module.description}</p>
+                )}
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2">
+                  {module.exports.map((exp) => (
+                    <div
+                      key={exp.name}
+                      className="flex items-start gap-3 p-2 rounded-md bg-muted/50 hover:bg-muted transition-colors"
+                    >
+                      {getKindIcon(exp.kind)}
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2">
+                          <span className="font-mono text-sm">{exp.name}</span>
+                          <Badge variant="outline" className={`text-xs ${getKindBadge(exp.kind)}`}>
+                            {exp.kind}
+                          </Badge>
+                        </div>
+                        {exp.description && (
+                          <p className="text-xs text-muted-foreground mt-1 truncate">
+                            {exp.description}
+                          </p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+/**
+ * Generate static params for package detail pages
+ */
+export async function generateStaticParams() {
+  const packages = await getPackageList();
+  return packages.map((pkg) => ({
+    packageId: pkg.name,
+  }));
+}