Fumadocs

Fumadocs — это фреймворк для документации, который помогает разработчикам создавать профессиональные сайты документации с использованием React и Next.js. В отличие от традиционных инструментов для документации, он предоставляет полный контроль над содержанием и дизайном, автоматически обрабатывая сложные части.

Он поддерживает написание контента в Markdown и MDX, что означает, что вы можете использовать простое форматирование текста или добавлять интерактивные React-компоненты. Фреймворк включает встроенный поиск, подсветку синтаксиса и красивые предустановленные темы. Он также работает с любым источником контента, будь то файлы, база данных или система управления контентом.

Fumadocs построен на трёх компонентах: слой контента для управления документацией, основная библиотека для таких функций, как поиск, и библиотека UI для красивых компонентов. Вы можете использовать только то, что вам нужно.

Начать работу с Fumadocs просто. Вот шаги:

• Установите фреймворк, выполнив команду npm create fumadocs-app в терминале. При появлении запроса выберите предпочитаемый React-фреймворк и источник контента.

• Напишите ваш контент в MDX-файлах внутри папки docs. Используйте простой синтаксис Markdown с возможностью добавлять React-компоненты для интерактивных элементов.

• Настройте внешний вид с помощью Tailwind CSS. Вы можете менять цвета, макеты и стили, чтобы соответствовать вашему бренду, без необходимости изучать новую систему.

• Добавьте функцию поиска, подключив Orama или Algolia всего несколькими строками кода. Фреймворк автоматически позаботится обо всем остальном.

• Используйте CLI-инструмент для добавления интерактивных компонентов, таких как вкладки, выделения и блоки кода, с помощью команды npx @fumadocs/cli add.

• Разверните ваш сайт на Vercel, Netlify или любом хостинге, поддерживающем приложения Next.js.

• Бесплатный и открытый фреймворк

• Работает с Next.js, React Router и другими фреймворками React

• Пишите контент в Markdown и MDX

• Встроенный поиск с поддержкой Orama и Algolia

• Генератор документации OpenAPI

• Интеграция TypeScript Twoslash

• Красивые заранее разработанные UI-компоненты

• Инструмент командной строки для простой настройки

• Подсветка синтаксиса с Shiki

• Высокая настраиваемость с Tailwind CSS