Podster

Last project in Axbit Group

Посмотреть проект - https://hellsgor.github.io/podster/

---

1. Клонирование репозитория
2. Версионность
3. Работа с npm
4. Файловая структура
5. Alias'ы
6. Советы и правила

---

Клонирование репозитория

git clone -b main git@github.com:hellsgor/podster.git

Версионность

• node js - v.20.9.0
• npm - 10.1.0

Работа с npm

• установка пакетов - npm i;
• запуск dev-сервера - npm start;
• сборка билда dev - npm run dev;
• сборка билда prod - npm run build;
• predeploy - npm run build,
• deploy - gh-pages -d build;

Файловая структура

• src/
  • assets/
    • favicon/ - фавиконки;
    • fonts/ - шрифты;
    • icons/ - иконки;
    • image/ - изображения;
    • pug/
      • mixins - для pug-миксинов
    • styles/ - основные файлы стилей;
  • components/ - компоненты;
    • common/ - компоненты обязательные для всех страниц;
  • layouts/ - шаблоны страниц;
  • libs/ - для хранения библиотек;
  • pages/ - страницы;
    • main/ - файлы главной страницы;
    • ui-kit/ - файлы страницы UI-Kit;
  • ui-kit/ - микро-компоненты (кнопки, чек-боксы, инпуты и пр.);
  • utils/ - части js-кода используемые в проекте вынесены в отдельную папку, например, отправка или валидация полей формы, маски и пр.

Alias'ы

• Img - './src/assets/image/';
• Icons - './src/assets/icons/';
• Fonts - './src/assets/fonts/';
• Components - './src/components/';
• Layouts - './src/layouts/';
• UIKit - './src/ui-kit/';
• Styles - './src/assets/styles/';
• Libs - './src/libs/' (на момент публикации не используется);
• NodeModules - './node_modules/';
• Utils - './src/utils/';
• Mixins - './src/assets/pug/mixins/';
• Moc - './src/moc/';
• Constants - ''./src/constants/''

Советы и правила

• файлы ".gitkeep" следует удалить если в папке-родителе появятся файлы проекта. Файлы ".gitkeep" требуются исключительно для сохранения файловой структуры в git;
• каждой новой странице после копирования кода pug и scss-файлов:
  • в pug изменить:
    • значение переменной header если это необходимо (хедер нужен /не нужен);
    • значение переменной footer если это необходимо (футер нужен /не нужен);
    • значение переменной pageClassName (назначить правильный класс тегу для управления страницей);