Melior Web

Демонстрирую здесь свои навыки в Web разработке + делюсь опытом

• Собственный UI Kit
• Серверный рендеринг и AppRouter
• Архитектурная методология Feature-Sliced Design
• 🤍🖤 Темная и светлая тема
• Полная типизация проекта
• 🚦 Скрипты для упрощения жизни
• Настроены CI/CD и Deploy на Vercel
• ⚙️ Всё аккуратно сконфигурировано в config
• Обработка mdx файлов для статей
• Задачи ведутся в Jira

---

⠀

Продемонстрировать свои навыки, это не про «усложнить проект»... (всевозможные самописные утилиты, хуки, размазывание не переиспользуемого функционала по всей архитектуре, тесты на всё подряд).
Настоящее мастерство находится в простоте ^-^

⠀

📋✏️ Общие правила проекта

Архитектура

• Необходимо оставлять комментарии к сложному функционалу;
• Папки с компонентами, как и сами компоненты, должны быть в PascalCase. Утилиты, моки, типы и т.п. в kebab-case;
• Наименование .module.scss должно начинаться с маленькой буквы, а компонента .tsx с большой;
• Серверные компоненты и типы экспортируем как обычно, через index.ts. Клиентские компоненты ('use client') экспортируем через client.ts;
• Наименование типов. Данные получаемые с сервера: Response. Данные отправляемые на сервер: Payload.

Git

• feature - Добавление нового функционала;
• fix - Исправление какой-либо программной ошибки;
• refactor - Изменения в коде, не исправляющие ошибок и не добавляющие новый функционал;
• test - Добавление новых тестов или исправление существующих;
• core - Любые другие изменения.

Пример названия ветки: feature/MLR-777-short-description. Пример сообщения коммита: MLR-777 | Short description

SCSS

• [custom-rules/restrict-apply] @apply запрещено использовать;
• [custom-rules/scss-import-name] Импорт стилей из .module.scss нужно называть styles.

Tailwind

• Добавлять пользовательские цвета нужно в /config/hero-ui/themes.
• Использовать переменную цвета нужно строго через theme('colors.default.{50-900}'). Через var(--color-default-{50-900}) использовать запрещено!
• Tailwind можно использовать только в shared/ui и в .module.scss. Везде пишем стили ручками, но в идеале обходится без стилей вообще! Всё должны покрывать компоненты из UI

---

⠀

🎬📃 Скрипты

• yarn dev - Локальный запуск в режиме разработки с hot-reload
• yarn build - Сборка проекта для production
• yarn start - Запуск предварительно собранного проекта в production-режиме
• yarn storybook - Запуск Storybook
• yarn lint:ts - Проверка tslint
• yarn lint:es - Проверка eslint
• yarn lint:es:fix - Авто-исправление eslint
• yarn lint:fsd - Проверка архитектурных нарушений FSD
• yarn lint:style - Проверка stylelint
• yarn lint:style:fix - Авто-исправление stylelint
• yarn lint:all - Проверка всех линтеров
• yarn script:tgs - Скрипт конвертирования .tgs в .json (описание)
• yarn script:tgs:clear - Очистить конвертированные файлы

---

⠀

📂⚡️ Архитектура проекта

Проект написан в соответствии с архитектурной методологией Feature-Sliced Design и AppRouter Next.js 15.

• app - AppRouter + @core;
• widgets - Большие, автономные блоки функциональности или пользовательского интерфейса;
• features - Повторно используемые реализации целых функций продукта;
• entities - Бизнес сущности;
• shared - Многократно-переиспользуемые компоненты и функции.

---

⠀

Реализованный функционал

Реализация MDX:

• src/app/articles/[category]/[name]/page.tsx - layout для mdx файлов статей;
• src/app/articles/[category]/page.tsx - страница отображения статей из категории;
• getMdx() - получение metadata и контента из mdx;
• getArticle(category, name) - получение проекта по категории и имени;
• getArticleListByCategory(category) - получение всех статей в выбранной категории;
• getArticlesList() - получение всех категорий и статей;
• mdx-components.tsx - настройка отображения mdx;
• MDXRemote - общая настройка MDXRemote;
• rehypeExtractCodeProps - самописный rehype-плагин для чтения пар ключ-значение в коде.

Вывод mdx страниц и метаданных происходит за счёт преобразования его через gray-matter. Рендер mdx через MDXRemote next-mdx-remote/rsc для серверного рендеринга (смотреть MDXRemote)