Skip to content

KennyNobody/polosatik

Repository files navigation

Название проекта: Polosatik

📝 Описание: Исходный проект для разработки статического сайта

Установка

  1. Клонируйте репозиторий:

    git clone https://github.com/KennyNobody/polosatik.git
  2. Установите зависимости:

    npm install

Доступные скрипты

В директории проекта доступны следующие скрипты:

  • Development server (сервер разработки):

    npm run dev

    Эта команда запускает сервер разработки с помощью Webpack. Сайт будет доступен по адресу http://localhost:3000. Сервер автоматически перезагружает страницу при внесении изменений в код.

  • Сборка для продакшена:

    npm run build:prod

    Эта команда собирает проект для продакшена. Оптимизированные и минифицированные файлы будут сгенерированы в директории dist.

  • Сборка для разработки:

    npm run build:dev

    Эта команда собирает проект для разработки. Сгенерированные файлы будут находиться в директории dist.

Анализ кода

В проекте включены скрипты для анализа TypeScript и SCSS файлов:

  • Linting TypeScript файлов:

    npm run lint:ts

    Используйте эту команду для анализа TypeScript файлов с помощью ESLint.

  • Исправление проблем TypeScript:

    npm run lint:ts:fix

    Эта команда автоматически исправит распространенные проблемы TypeScript.

  • Linting SCSS файлов:

    npm run lint:scss

    Используйте эту команду для анализа SCSS файлов с помощью Stylelint.

  • Исправление проблем SCSS:

    npm run link:scss:fix

    Эта команда автоматически исправит распространенные проблемы SCSS.

Структура проекта

  • HTML страницы:

    Файлы HTML, размещенные в папке src/main/pages, автоматически включаются в проект в качестве страниц.

  • Виджеты:

    Файлы HTML, размещенные в папке src/main/widgets, могут быть вставлены на страницы с помощью следующей директивы:

    <%= htmlWebpackPlugin.options.widgets.{filename} %>

    Замените {filename} на фактическое имя файла с виджетом HTML.

Небольшое руководство по вёрстке

  • Пути к файлам:

    Пути к изображениям или другим файлам указываются в том формате, который будет при сборке. Если файл расположен в src/main/shared/images/404.webp, то в HTML указываем путь как, ./assets/iamges/404.webp

  • Архитектура:

    В проекте используется "обрезанный" вариант Архитектуры FSD

🔗 Репозиторий: Polosatik

🏠 Домашняя страница: Polosatik