[] Add custom 404 page, language fallback banner, and feedback widget to docs site

docs/__tests__/components/FeedbackWidget.test.tsx

@@ -0,0 +1,59 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { FeedbackWidget } from "../../components/FeedbackWidget";
+
+describe("FeedbackWidget", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("posts helpful feedback and shows a thank-you message", async () => {
+    const user = userEvent.setup();
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      status: 202,
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    render(
+      <FeedbackWidget path="/docs/getting-started" version="latest" />,
+    );
+
+    await user.click(screen.getByRole("button", { name: "役に立った" }));
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalledWith("/api/docs/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          path: "/docs/getting-started",
+          helpful: true,
+          version: "latest",
+        }),
+      });
+    });
+
+    expect(
+      screen.getByText("ごフィードバックありがとうございます。"),
+    ).toBeInTheDocument();
+  });
+
+  it("does not show error UI when fetch fails", async () => {
+    const user = userEvent.setup();
+    vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new Error("network")));
+
+    render(<FeedbackWidget path="/docs/getting-started" version="latest" />);
+
+    await user.click(screen.getByRole("button", { name: "役に立った" }));
+
+    await waitFor(() => {
+      expect(global.fetch).toHaveBeenCalled();
+    });
+
+    expect(screen.queryByText(/error/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/エラー/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: "役に立った" }),
+    ).toBeInTheDocument();
+  });
+});

docs/__tests__/components/UntranslatedBanner.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { UntranslatedBanner } from "../../components/UntranslatedBanner";
+
+describe("UntranslatedBanner", () => {
+  it("shows banner for en locale on ja-only pages and hides it when dismissed", async () => {
+    const user = userEvent.setup();
+
+    render(<UntranslatedBanner locale="en" pageLang="ja" />);
+
+    expect(
+      screen.getByText("このページはまだ日本語のみ提供されています。"),
+    ).toBeInTheDocument();
+
+    await user.click(screen.getByRole("button", { name: "閉じる" }));
+
+    expect(
+      screen.queryByText("このページはまだ日本語のみ提供されています。"),
+    ).not.toBeInTheDocument();
+  });
+});

docs/__tests__/pages/not-found.test.ts

@@ -0,0 +1,17 @@
+// @vitest-environment node
+
+import { readFileSync } from "fs";
+import { join } from "path";
+import { describe, expect, it } from "vitest";
+
+describe("404 page", () => {
+  it("includes title frontmatter and a link back to the docs home", () => {
+    const content = readFileSync(
+      join(__dirname, "../../pages/404.mdx"),
+      "utf-8",
+    );
+
+    expect(content).toMatch(/title:\s*ページが見つかりません/);
+    expect(content).toMatch(/\]\(\/docs[^)]*\)/);
+  });
+});

docs/components/FeedbackWidget.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+
+type FeedbackWidgetProps = {
+  path: string;
+  version?: string;
+};
+
+export function FeedbackWidget({
+  path,
+  version = "latest",
+}: FeedbackWidgetProps) {
+  const [submitted, setSubmitted] = useState(false);
+  const [pending, setPending] = useState(false);
+
+  async function submitFeedback(helpful: boolean) {
+    if (pending || submitted) {
+      return;
+    }
+
+    setPending(true);
+
+    try {
+      const response = await fetch("/api/docs/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path, helpful, version }),
+      });
+
+      if (response.ok) {
+        setSubmitted(true);
+      }
+    } catch {
+      // Fail silently when the feedback endpoint is unavailable.
+    } finally {
+      setPending(false);
+    }
+  }
+
+  if (submitted) {
+    return (
+      <div
+        aria-label="ドキュメントフィードバック"
+        style={{ marginTop: "32px", paddingTop: "16px" }}
+      >
+        <p style={{ color: "#166534", margin: 0 }}>
+          ごフィードバックありがとうございます。
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      aria-label="ドキュメントフィードバック"
+      style={{
+        borderTop: "1px solid #e5e7eb",
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px",
+        marginTop: "32px",
+        paddingTop: "16px",
+      }}
+    >
+      <span style={{ marginRight: "8px" }}>このページは役に立ちましたか？</span>
+      <button
+        type="button"
+        disabled={pending}
+        onClick={() => submitFeedback(true)}
+        style={{
+          backgroundColor: "#16a34a",
+          border: "none",
+          borderRadius: "6px",
+          color: "#ffffff",
+          cursor: pending ? "not-allowed" : "pointer",
+          opacity: pending ? 0.7 : 1,
+          padding: "6px 12px",
+        }}
+      >
+        役に立った
+      </button>
+      <button
+        type="button"
+        disabled={pending}
+        onClick={() => submitFeedback(false)}
+        style={{
+          backgroundColor: "#ffffff",
+          border: "1px solid #d1d5db",
+          borderRadius: "6px",
+          color: "#374151",
+          cursor: pending ? "not-allowed" : "pointer",
+          opacity: pending ? 0.7 : 1,
+          padding: "6px 12px",
+        }}
+      >
+        役に立たなかった
+      </button>
+    </div>
+  );
+}

docs/components/UntranslatedBanner.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+
+type UntranslatedBannerProps = {
+  locale?: string;
+  pageLang?: string;
+};
+
+export function UntranslatedBanner({
+  locale,
+  pageLang,
+}: UntranslatedBannerProps) {
+  const [dismissed, setDismissed] = useState(false);
+
+  if (dismissed || locale !== "en" || pageLang !== "ja") {
+    return null;
+  }
+
+  return (
+    <div
+      role="status"
+      style={{
+        backgroundColor: "#fef9c3",
+        border: "1px solid #fde047",
+        borderRadius: "6px",
+        color: "#713f12",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "12px",
+        marginBottom: "16px",
+        padding: "12px 16px",
+      }}
+    >
+      <span>このページはまだ日本語のみ提供されています。</span>
+      <button
+        type="button"
+        aria-label="閉じる"
+        onClick={() => setDismissed(true)}
+        style={{
+          background: "transparent",
+          border: "none",
+          color: "#713f12",
+          cursor: "pointer",
+          fontSize: "18px",
+          lineHeight: 1,
+          padding: "0 4px",
+        }}
+      >
+        ×
+      </button>
+    </div>
+  );
+}

docs/pages/404.mdx

@@ -0,0 +1,11 @@
+---
+title: ページが見つかりません
+---
+
+# ページが見つかりません
+
+お探しのページは存在しないか、移動した可能性があります。
+
+[ドキュメントのトップページへ戻る](/docs)
+
+サイト内検索を使って、目的のページを探すこともできます。

docs/theme.config.tsx

@@ -1,10 +1,35 @@
 import type { DocsThemeConfig } from 'nextra-theme-docs';
+import { useConfig } from 'nextra-theme-docs';
+import { usePathname } from 'next/navigation';
+import { useRouter } from 'next/router';
+import type { ReactNode } from 'react';
 import Search from './components/Search';
 import { DocHeader } from './components/DocHeader';
 import { EditPageLink } from './components/EditPageLink';
+import { FeedbackWidget } from './components/FeedbackWidget';
+import { UntranslatedBanner } from './components/UntranslatedBanner';
+
+function DocsMain({ children }: { children: ReactNode }) {
+  const { frontMatter } = useConfig();
+  const pathname = usePathname();
+  const { locale } = useRouter();
+  const pageLang =
+    typeof frontMatter.lang === 'string' ? frontMatter.lang : undefined;
+  const version =
+    typeof frontMatter.version === 'string' ? frontMatter.version : 'latest';
+
+  return (
+    <>
+      <UntranslatedBanner locale={locale} pageLang={pageLang} />
+      {children}
+      <FeedbackWidget path={pathname ?? ''} version={version} />
+    </>
+  );
+}
 
 const config: DocsThemeConfig = {
   logo: <span>open-git</span>,
+  main: DocsMain,
   docsRepositoryBase: 'https://github.com/Corevice/open-git/blob/main/docs',
   search: {
     component: Search,