Principles, Design Decisions, Code Insights, Recommendations

“У володінні ~~Porsche~~ Relivator є багато непрактичних речей. Але всі вони компенсуються враженнями від водіння. Він справді унікальний. Ламборджині ~~Lamborghini~~ create-t3-app та Феррарі ~~Ferrari~~ Vercel Store наближаються до нього. І вони більш потужні в певних випадках, але вони не керуються так, як ~~Porsche~~ Relivator”. © ~~Кевін О’Лірі~~ @blefnk

*Ми постійно вдосконалюємо цей розділ. Будь ласка, вносьте свої пропозиції!

Наш стартап має на меті стати багатим ресурсом для розробників на всіх етапах їхньої подорожі. У блоках коментарів та спеціальних розділах в кінці окремих файлів ви знайдете цінні поради та роз’яснення з широкого спектру тем. Внесок у покращення цих освітніх самородків дуже заохочується!

Принципи (W.I.P.):

Принцип Преттера щодо досвіду розробника (джерело): “У результаті ви отримуєте багато червоних хвилястих ліній у редакторі, які починають дратувати. Prettier повинен змусити вас забути про форматування - а не показувати його в обличчя!”
Кожен файл і компонент слід створювати свідомо, використовуючи принципи KISS/DRY/SOLID/YAGNI з певним почуттям інтелекту і з думкою про продуктивність.
Ми повинні думати про проект, як про планету зі своїми континентами, країнами, містами, кімнатами, особами, організаціями і т.д.

Розширені змінні оточення:** Розширені змінні оточення:*

Файл .env.example містить всі основні змінні для повнофункціонального веб-сайту, призначеного для початківців. Однак, якщо вам потрібні розширені конфігурації, ви можете змінити будь-яке значення у файлі .env за потреби.

Про папку плагінів:** Про папку плагінів:*

Ця тека містить додаткові плагіни для Relivator. Розроблені @blefnk та іншими учасниками, ці плагіни розширюють функціональність і надають додаткові можливості. Якщо ви вважаєте, що певні плагіни не є корисними для проекту, не соромтеся видаляти відповідні теки.

Функція над константою для компонентів:

Ми рекомендуємо використовувати ключове слово function замість const при визначенні React-компонентів. Використання function часто покращує трасування стеку, що полегшує налагодження. Крім того, це робить семантику коду більш явною, тим самим полегшуючи іншим розробникам розуміння намірів.

Особисті рекомендації:

Ми рекомендуємо регулярно очищати кеш браузера і видаляти папку .next для забезпечення оптимальної продуктивності і функціональності.

Наразі ми не використовуємо Contentlayer через його нестабільну роботу з Windows. Тому ми вивчаємо можливості його використання в конфігураційному файлі .env. В майбутньому ми плануємо розробити власне рішення для написання контенту. Інтеграція із зовнішніми провайдерами, такими як Sanity, також може стати майбутньою функцією, з відповідними опціями ввімкнення/вимкнення.

ПРИМІТКА зі сторінки Contentlayer Issues Page: Contentlayer погано працює з next.config.mjs, тому вам потрібно мати next.config.js. Інші бібліотеки також можуть вимагати цього. Якщо ви впевнені, що вам потрібен .mjs і не плануєте використовувати Contentlayer, перейменуйте його.

Конфігурація проекту:

У файлі rc/app.ts містяться основні конфігурації для зміни вмісту та налаштувань веб-сайту, що дозволяє вам

Керувати вмістом, представленим на веб-сайті.
Налаштовувати різні параметри, наприклад, деактивувати перемикач тем.
Керувати загальною інформацією на сайті.

Налаштувати цей файл відповідно до вимог.

Автентифікація:

Налаштування автентифікації дуже просте.

Ви можете налаштувати доступні для Clerk провайдери входу в систему у файлі src/app.ts.

Будь ласка, пам’ятайте, що Clerk повноцінно працює зі сторонніми сервісами, такими як “Google PageSpeed Insight”, лише за умови використання доменних і живих ключів.

*Цей розділ буде реалізовано найближчим часом.

Конфігурація скриптів: Тип скриптів:

У файлі tsconfig.json ви можете встановити параметри для компілятора TypeScript. Ви можете навести курсор на кожну опцію, щоб отримати додаткову інформацію. Підказка: Ви також можете натиснути Shift+пробіл, щоб отримати автозавершення. Щоб дізнатися більше, зверніться до офіційної документації TypeScript: @дивіться https://typescriptlang.org/docs/handbook/tsconfig-json @дивіться https://totaltypescript.com/tsconfig-cheat-sheet.

Next.js має вбудовану підтримку TypeScript за допомогою плагіна нижче. Але якщо ви використовуєте bun run build, він зупиняється на першій же помилці типу. Тому ви можете використовувати bun typecheck для перевірки всіх попереджень/помилок одразу.

Конфіг включає плагін Atomic CSS в атрибуті style. Статичні стилі з підтримкою тем, адаптивних варіантів і без інтеграції з бандлерами, безпечні за типом. @див. https://github.com/tokenami/tokenami#readme.

Ви можете увімкнути сувору перевірку типів у MDX-файлах, встановивши mdx.checkMdx у true.

Ці параметри, наведені нижче, може бути небезпечно встановлювати у значення false, коли ви поступово переходите до повної безпеки типів.

{
  "alwaysStrict": true,
  "noImplicitAny": false,
  "strict": true,
  "strictNullChecks": true,
  "strictPropertyInitialization": true,
  "verbatimModuleSyntax": true
}

Як розгорнути проект:

Будь ласка, ознайомтеся з розділом Як встановити та розпочати роботу перед початком розгортання.

Зверніться до посібників з розгортання для Vercel, Netlify та Docker для отримання більш детальної інформації. Проект було протестовано лише на Vercel; будь ласка, повідомте нас, якщо у вас виникнуть проблеми з іншими сервісами розгортання.

Стилістика, система дизайну, компоненти інтерфейсу користувача:

TODO: Реалізувати систему дизайну та керівництво по стилю.

За замовчуванням цей проект включає компоненти з різних бібліотек, а також нестилізовані shadcn/ui компоненти. Shadcn/ui навіть дозволяє генерувати нові компоненти інтерфейсу користувача за допомогою свого CLI (де “кнопкою” може бути будь-який елемент інтерфейсу користувача Shadcn): bunx shadcn-ui@latest add button.

W.I.P. - Використовуйте bun css для відстеження токенів CSS відповідно до системи дизайну проекту. Очікується, що для цієї концепції будуть використані Tokenami та Figma. Для отримання додаткової інформації зверніться до пунктів #33 та #90 дорожньої карти Relivator.

Сумісність з менеджером пакунків:

У Relivator вже можна використовувати деякі фантастичні можливості [bun](https://bun .sh). Для початку ми рекомендуємо використовувати pnpm. Повну підтримку та сумісність bun буде надано, щойно Reliverse досягне повної подібності до Relivator у Relivator. Розширення розділу незабаром.

Рекомендовані речі для вивчення:

*Більше навчальних ресурсів можна знайти у файлах цього репозиторію.