Добавить продукт

Как создать новый продукт портала — отдельный пункт выпадающего списка со своими разделами.

Продукт — верхний уровень навигации. Каждый продукт становится отдельным пунктом выпадающего списка над боковым меню, а под ним отображаются только его разделы и страницы.

Создать каталог продукта

Имя каталога попадает в публичный URL — латиница, kebab-case.

content/docs/payment-gateway/

Описать продукт в meta.json

Признак "root": true — то, что превращает каталог в пункт выпадающего списка.

content/docs/payment-gateway/meta.json

{
  "title": "Payment Gateway",
  "description": "Платежный шлюз: подключение, API и эксплуатация",
  "icon": "CreditCard",
  "root": true,
  "pages": ["index", "getting-started", "api", "operations"]
}

Поле	Назначение
`title`	Название в выпадающем списке и в заголовке бокового меню.
`description`	Пояснение под названием в выпадающем списке.
`icon`	Имя иконки Lucide в PascalCase.
`root`	Обязательно `true` — иначе каталог станет обычным разделом.
`pages`	Порядок разделов и страниц внутри продукта.

Создать обзорную страницу

content/docs/payment-gateway/index.mdx

---
title: Payment Gateway
description: Платежный шлюз — назначение, состав и порядок подключения.
icon: CreditCard
---

Краткое описание продукта и карточки его разделов.

<Cards>
  <Card
    href="/docs/payment-gateway/getting-started"
    title="Быстрый старт"
    description="Подключение и первый платеж."
  />
</Cards>

Добавить продукт в корневой meta.json

content/docs/meta.json

{
  "title": "Документация",
  "pages": ["index", "doc-portal", "payment-gateway"]
}

Порядок элементов определяет порядок продуктов в выпадающем списке.

Добавить карточку на главную страницу

Выпадающий список строится из каталогов автоматически, а карточки на главной странице берутся из конфигурации — это отдельный источник.

lib/portal.config.ts

products: [
  {
    slug: 'doc-portal',
    title: 'Doc-Portal',
    description: 'Шаблон портала документации...',
    icon: 'BookMarked',
  },
  {
    slug: 'payment-gateway',
    title: 'Payment Gateway',
    description: 'Платежный шлюз: подключение, API и эксплуатация.',
    icon: 'CreditCard',
  },
],

slug должен совпадать с именем каталога, icon — с иконкой из meta.json, чтобы карточка и пункт списка выглядели согласованно.

Наполнить разделы

Далее — по инструкции Добавить раздел и страницу.

Проверить

pnpm types:check

pnpm build

Убедитесь, что продукт появился в выпадающем списке, а его разделы — в боковом меню.

Итоговая структура

meta.json

index.mdx

meta.json

index.mdx

Частая ошибка

Забытый "root": true — каталог отображается как обычный раздел внутри предыдущего продукта и не появляется в выпадающем списке.

On this page