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

package/portal/components/layout/global-header.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Book, Layers, Database, CheckCircle, Menu, Bot } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import { AppSidebar, type SidebarNavData } from "./app-sidebar";
+import { SearchButton } from "@/components/search-dialog";
+import type { SearchIndex } from "@/lib/search";
+
+interface GlobalHeaderProps {
+  projectName: string;
+  navData: SidebarNavData;
+  searchIndex: SearchIndex | null;
+}
+
+function getNavItems(navData: SidebarNavData) {
+  const items = [
+    { href: "/", label: "トップ", icon: Book },
+    { href: "/feature-map", label: "機能マップ", icon: Layers },
+    { href: "/db-schema", label: "DBスキーマ", icon: Database },
+    { href: "/test-cases", label: "テスト", icon: CheckCircle },
+  ];
+
+  // Add API apps from configuration (MCP, REST, etc.)
+  if (navData.applications?.apps) {
+    for (const app of navData.applications.apps) {
+      if (app.type === "api") {
+        const toolsSection = app.sections.find(s => s.type === "tools");
+        if (toolsSection?.available !== false) {
+          items.push({
+            href: `/apps/${app.id}/tools`,
+            label: app.name,
+            icon: Bot,
+          });
+        }
+      }
+    }
+  }
+
+  return items;
+}
+
+export function GlobalHeader({ projectName, navData, searchIndex }: GlobalHeaderProps) {
+  const pathname = usePathname();
+  const navItems = getNavItems(navData);
+
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-border bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60">
+      <div className="flex h-14 items-center px-4">
+        {/* Mobile Menu */}
+        <Sheet>
+          <SheetTrigger asChild>
+            <Button variant="ghost" size="icon" className="mr-2 lg:hidden">
+              <Menu className="h-5 w-5" />
+              <span className="sr-only">メニューを開く</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left" className="w-72 p-0">
+            <SheetHeader className="border-b border-border px-4 py-3">
+              <SheetTitle className="text-left text-sm font-semibold">
+                {projectName} Docs
+              </SheetTitle>
+            </SheetHeader>
+            <AppSidebar navData={navData} className="h-[calc(100vh-57px)] border-0" />
+          </SheetContent>
+        </Sheet>
+
+        {/* Logo */}
+        <Link href="/" className="mr-6 flex items-center gap-2">
+          <Book className="h-5 w-5 text-primary" />
+          <span className="font-semibold">{projectName} Docs</span>
+        </Link>
+
+        {/* Navigation - hidden on mobile since we have sidebar */}
+        <nav className="hidden md:flex items-center gap-1">
+          {navItems.map((item) => {
+            const Icon = item.icon;
+            const isActive =
+              item.href === "/"
+                ? pathname === "/"
+                : pathname.startsWith(item.href);
+
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-primary/10 text-primary"
+                    : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+
+        {/* Search */}
+        <div className="ml-auto flex items-center gap-2">
+          <SearchButton searchIndex={searchIndex} />
+        </div>
+      </div>
+    </header>
+  );
+}

package/portal/components/layout/layout-content.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { PanelLeftOpen } from "lucide-react";
+import { AppSidebar, type SidebarNavData } from "@/components/layout/app-sidebar";
+import { useSidebar } from "@/lib/sidebar-context";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+interface LayoutContentProps {
+  navData: SidebarNavData;
+  children: React.ReactNode;
+}
+
+export function LayoutContent({ navData, children }: LayoutContentProps) {
+  const { isCollapsed, hideExpandButton, skipAnimation, expand } = useSidebar();
+
+  return (
+    <div className="flex">
+      {/* Desktop Sidebar */}
+      <AppSidebar
+        navData={navData}
+        className={cn(
+          "hidden lg:flex h-[calc(100vh-57px)] sticky top-[57px]",
+          !skipAnimation && "transition-all duration-300",
+          isCollapsed ? "w-0 overflow-hidden border-r-0" : "w-64"
+        )}
+      />
+
+      {/* Expand button (shows when sidebar is collapsed, unless explicitly hidden) */}
+      {isCollapsed && !hideExpandButton && (
+        <div className="hidden lg:block fixed left-2 top-[70px] z-40">
+          <Button
+            variant="outline"
+            size="icon"
+            className="h-8 w-8 bg-background shadow-md"
+            onClick={expand}
+            title="サイドバーを開く"
+          >
+            <PanelLeftOpen className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+
+      {/* Main Content */}
+      <main className="flex-1 min-w-0 px-4 py-8 lg:px-8">{children}</main>
+    </div>
+  );
+}

package/portal/components/markdown-content.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { MermaidDiagram } from "./mermaid-diagram";
+import { CodeBlock } from "./code-block";
+
+interface MarkdownContentProps {
+  content: string;
+  className?: string;
+}
+
+export function MarkdownContent({ content, className }: MarkdownContentProps) {
+  return (
+    <article className={`prose prose-neutral dark:prose-invert max-w-none ${className || ""}`}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        components={{
+          // Custom table styling
+          table: ({ children }) => (
+            <div className="overflow-x-auto my-4">
+              <table className="min-w-full border-collapse border border-border">
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-muted">{children}</thead>
+          ),
+          th: ({ children }) => (
+            <th className="border border-border px-4 py-2 text-left font-semibold">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="border border-border px-4 py-2">{children}</td>
+          ),
+          // Custom code block styling with Mermaid and syntax highlighting
+          pre: ({ children }) => {
+            // Just pass through - the code component handles the rendering
+            return <>{children}</>;
+          },
+          code: ({ className, children, ...props }) => {
+            const match = /language-(\w+)/.exec(className || "");
+            const language = match ? match[1] : undefined;
+            const codeString = String(children).replace(/\n$/, "");
+
+            // Check if this is an inline code block (no language specified and short)
+            const isInline = !className && !codeString.includes("\n");
+
+            if (isInline) {
+              return (
+                <code className="rounded bg-muted px-1.5 py-0.5 text-sm font-mono" {...props}>
+                  {children}
+                </code>
+              );
+            }
+
+            // Handle Mermaid diagrams
+            if (language === "mermaid") {
+              return <MermaidDiagram chart={codeString} />;
+            }
+
+            // Handle other code blocks with syntax highlighting
+            return <CodeBlock code={codeString} language={language} />;
+          },
+          // Custom heading styling with anchors
+          h1: ({ children }) => (
+            <h1 className="text-3xl font-bold tracking-tight mt-8 mb-4 first:mt-0">
+              {children}
+            </h1>
+          ),
+          h2: ({ children }) => (
+            <h2 className="text-2xl font-semibold tracking-tight mt-8 mb-4 border-b border-border pb-2">
+              {children}
+            </h2>
+          ),
+          h3: ({ children }) => (
+            <h3 className="text-xl font-semibold mt-6 mb-3">{children}</h3>
+          ),
+          h4: ({ children }) => (
+            <h4 className="text-lg font-semibold mt-4 mb-2">{children}</h4>
+          ),
+          // Custom link styling
+          a: ({ href, children }) => (
+            <a
+              href={href}
+              className="text-primary hover:underline"
+              target={href?.startsWith("http") ? "_blank" : undefined}
+              rel={href?.startsWith("http") ? "noopener noreferrer" : undefined}
+            >
+              {children}
+            </a>
+          ),
+          // Custom list styling
+          ul: ({ children }) => (
+            <ul className="list-disc list-inside space-y-1 my-4">{children}</ul>
+          ),
+          ol: ({ children }) => (
+            <ol className="list-decimal list-inside space-y-1 my-4">{children}</ol>
+          ),
+          // Horizontal rule
+          hr: () => <hr className="my-8 border-border" />,
+          // Blockquote
+          blockquote: ({ children }) => (
+            <blockquote className="border-l-4 border-primary/50 pl-4 italic my-4 text-muted-foreground">
+              {children}
+            </blockquote>
+          ),
+          // Paragraph
+          p: ({ children }) => (
+            <p className="my-4 leading-7">{children}</p>
+          ),
+        }}
+      >
+        {content}
+      </ReactMarkdown>
+    </article>
+  );
+}

package/portal/components/mermaid-diagram.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import mermaid from "mermaid";
+
+interface MermaidDiagramProps {
+  chart: string;
+  className?: string;
+}
+
+// Initialize mermaid with dark mode support and link handling
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "dark",
+  securityLevel: "loose",
+  fontFamily: "ui-sans-serif, system-ui, sans-serif",
+  themeVariables: {
+    // Dark theme colors
+    primaryColor: "#3b82f6",
+    primaryTextColor: "#fafafa",
+    primaryBorderColor: "#3b82f6",
+    lineColor: "#6b7280",
+    secondaryColor: "#262626",
+    tertiaryColor: "#1e1e1e",
+    // Node colors
+    nodeBorder: "#3b82f6",
+    nodeTextColor: "#fafafa",
+    // Background
+    background: "#141414",
+    mainBkg: "#1e1e1e",
+    // Clickable node styling
+    clusterBkg: "#262626",
+    clusterBorder: "#3b82f6",
+  },
+  flowchart: {
+    htmlLabels: true,
+    curve: "basis",
+  },
+});
+
+export function MermaidDiagram({ chart, className }: MermaidDiagramProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = useState<string>("");
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const renderDiagram = async () => {
+      if (!containerRef.current) return;
+
+      try {
+        // Generate unique ID for this diagram
+        const id = `mermaid-${Math.random().toString(36).substring(2, 11)}`;
+        const { svg } = await mermaid.render(id, chart);
+        setSvg(svg);
+        setError(null);
+      } catch (err) {
+        console.error("Mermaid rendering error:", err);
+        setError(err instanceof Error ? err.message : "Failed to render diagram");
+      }
+    };
+
+    renderDiagram();
+  }, [chart]);
+
+  if (error) {
+    return (
+      <div className="my-4 rounded-lg border border-destructive/50 bg-destructive/10 p-4">
+        <p className="text-sm text-destructive">Diagram rendering error: {error}</p>
+        <pre className="mt-2 overflow-x-auto rounded bg-muted p-2 text-xs">
+          <code>{chart}</code>
+        </pre>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={`my-4 flex justify-center overflow-x-auto rounded-lg bg-card p-4 ${className || ""}`}
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+}