# 設定

サイト全体の設定は、プロジェクトのルートにある`onedocs.config.ts`に記述します。エクスポートしたオブジェクトを`DocsLayout`、`HomePage`、`createMetadata`に渡すと、それぞれが読み込みます。コンテンツの場所はここではなく`source.config.ts`で設定します（[はじめに](https://onedocs.inline0.dev/ja/docs/getting-started)を参照）。

## 基本設定

```ts title="onedocs.config.ts"
import { defineConfig } from "onedocs/config";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",
});
```

これが最小限の設定です。それ以外はすべて任意です。

## 完全な例

機能アイコンはReact要素なので、これを使う設定ファイルは`.tsx`ファイルにする必要があります。

```tsx title="onedocs.config.tsx"
import { defineConfig } from "onedocs/config";
import { Rocket, Zap } from "lucide-react";

export default defineConfig({
  title: "My Project",
  description: "Documentation for My Project",

  // Logo (string or light/dark variants)
  logo: "/logo.svg",
  // logo: { light: "/logo-light.svg", dark: "/logo-dark.svg" },

  // Favicon (string or light/dark variants), used by createMetadata
  icon: "/icon.png",

  // Navigation bar
  nav: {
    links: [
      { label: "Blog", href: "/blog" },
      { label: "Changelog", href: "/changelog" },
    ],
    github: "username/repo",
  },

  // Homepage
  homepage: {
    hero: {
      title: "My Project",
      description: "Documentation that ships with the code",
      cta: { label: "Get Started", href: "/docs" },
    },
    features: [
      {
        title: "Fast",
        description: "Static pages built by Next.js",
        icon: <Zap className="size-5 text-fd-primary" />,
      },
      {
        title: "Simple",
        description: "Write markdown, get docs",
        icon: <Rocket className="size-5 text-fd-primary" />,
      },
    ],
  },

  // Homepage footer
  footer: {
    links: [{ label: "License", href: "https://github.com/username/repo/blob/main/LICENSE" }],
  },
});
```

## オプション

### title（必須）

サイト名です。`logo`が設定されていない場合はナビゲーションバーに表示され、`createMetadata`ではデフォルトのページタイトルと`%s | Title`テンプレートで使われます。ホームページではヒーローのタイトルとフッターの著作権表示にも使われます。

```ts
title: "My Project"
```

### 説明

短い説明文です。`createMetadata`がメタディスクリプションに使い、`homepage.hero.description`が設定されていない場合はホームページのヒーロータイトルの下に表示します。

```ts
description: "Documentation for My Project"
```

### ロゴ

ナビゲーションバーのタイトルを置き換えます。単一のパス、またはライト用とダーク用の画像を指定できます。画像の高さは24 pxで、代替テキストには`title`を使います。

```ts
// Single logo
logo: "/logo.svg"

// Light/dark mode
logo: {
  light: "/logo-light.svg",
  dark: "/logo-dark.svg"
}
```

### アイコン

`createMetadata`で設定するファビコンです。ライト用とダーク用の画像は`prefers-color-scheme`メディアクエリで配信されます。

```ts
icon: "/icon.png"

// Light/dark mode
icon: {
  light: "/icon-light.png",
  dark: "/icon-dark.png"
}
```

### ナビゲーション

`DocsLayout`と`HomePage`で使うナビゲーションバーの設定です。

```ts
nav: {
  // Extra links in the navbar
  links: [
    { label: "Blog", href: "/blog" },
    { label: "API", href: "/api" },
  ],

  // GitHub repo as "owner/name" (adds an icon link to https://github.com/owner/name)
  github: "username/repo",
}
```

### ホームページ

`HomePage`が描画するヒーローと機能グリッドです。

```tsx
homepage: {
  hero: {
    title: "My Project",        // Defaults to config.title
    description: "Description", // Defaults to config.description
    cta: {
      label: "Get Started",     // Default: "Get Started"
      href: "/docs",            // Default: "/docs"
    },
  },
  features: [
    {
      title: "Feature 1",
      description: "Description of feature 1",
      icon: <Rocket className="size-5" />, // Optional React element
    },
  ],
}
```

`icon`は指定したとおりに描画されるため、`lucide-react`アイコンなどの要素を渡します。`"rocket"`のような文字列はテキストとして表示されます。

デフォルトのヒーローの一部を置き換えるオプションが、ほかに2つあります。

- `hero.left`を使うと、タイトル、説明、インストール用ブロック、ボタンを独自のコンテンツに置き換えられます。Reactノード、またはノードを返す関数を指定します。
- `hero.right`はヒーローの右半分に表示されます。`lg`ブレークポイント未満では非表示になります。

### フッター

`HomePage`フッターの著作権表示の横に置くリンクとソーシャルアイコンです。どちらも新しいタブで開きます。

```tsx
// import { GitHubIcon } from "onedocs";
footer: {
  links: [{ label: "Privacy", href: "/privacy" }],
  socials: [
    { label: "GitHub", href: "https://github.com/username/repo", icon: <GitHubIcon /> },
  ],
}
```

各ソーシャルリンクでは、アクセス可能な名前として`label`を使います。

## まだ効果のないオプション

`OnedocsConfig`は`docs`、`theme`、`i18n`の型も定義し、`defineConfig`は`docs.dir`と`theme.darkMode`のデフォルト値を設定しますが、これらを読み込むOnedocsのコードはありません（[#2](https://github.com/inline0/onedocs/issues/2)）。設定しても何も変わりません。

- `docs.dir`：コンテンツフォルダーは、`source.config.ts`で`defineDocs`に渡す`dir`です。
- `theme.primaryColor`と`theme.darkMode`：色はCSSプリセットが読み込むFumadocsのUIテーマから取得し、ライトモードとダークモードはFumadocs UIの`RootProvider`から取得します。
- `i18n`：Onedocsは多言語に対応していません。

## TypeScript

`defineConfig`ヘルパーを使うと、完全な自動補完が利用できます。

```ts
import { defineConfig, type OnedocsConfig } from "onedocs/config";

const config: OnedocsConfig = {
  title: "My Project",
};

export default defineConfig(config);
```

`defineConfig`は渡したオブジェクトに加え、上記の未使用の`docs`と`theme`のデフォルト値も返します。