О проекте

Cайт о веб разработке. Перейти на сайт можно по этой ссылке. Сайт является самописным, исходный код сайта разрабатывается с помощью шаблонизатора Pug, препроцессора Sass и языка JavaScript, а статьи пишутся на Markdown. Для разработки и сборки сайта применяется собственный сборщик npm-for-frontend.

Самописный сайт позволяет глубже понять веб разработку, а всё, что здесь реализовано, не претендует на полноту и правильность.

Быстрый запуск

Чтобы запустить данный сайт на компьютере и использовать его для дальнейшей разработки у вас на компьютере должен быть установлен Node.js.

Клонируем проект к себе на компьютер. Для этого в терминале запустим следующую команду:

git clone https://github.com/injashkin/jinv.git new-project-name

где new-project-name - имя, которое вы хотите задать своему проекту.

Заходим в каталог проекта

cd new-project-name

Устанавливаем проект

npm i

Запускаем проект в режиме разработки

npm run dev

Будет запущен локальный сервер и автоматически откроется браузер на главной странице локального сайта. Если этого не произошло, то самостоятельно запустите браузер и введите в адресную строку http://localhost:3000/.

Откройте ваш любимый редактор кода и перейдите в каталог с проектом (в нашем случае это каталог new-project-name). Исходный код сайта расположен в каталоге src и всё, что здесь будет изменено, сразу после сохранения отобразится в открытом браузере. В каталоге content находятся статьи и изображения к этим статьям. Чтобы увидеть изменения после сохранения нужно полностью перезапускать проект.

После разработки делаем продакшн версию сайта

npm run build

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

|-content
|-docs
|-src
  |-assets
    |+fonts
    |+png
    |+svg
  |+components
  |+data
  |+images
  |+layouts
  |-pages
    |+error
    |-home
      |-images
        |+gallery
        |+slider
      index.js
      index.pug
      index.scss
|-static
.gitignore
options.json
package-lock.json
package.json
postcss.config.js
README.md
rollup.config.dev.js
rollup.config.js
scripts.js

• content - статьи в формате Markdown и файлы изображений к этим статьям
• docs - сборка проекта, которая является готовым сайтом. Именно, содержимое этого каталога нужно размещать на сервере
• src/components - компоненты, из которых собирается сайт
• src/assets/svg - файлы значков с расширением .svg. Из этих файлов собирается спрайт docs/svg/sprite.svg
• src/pages - шаблоны страниц
• src/pages/home - шаблон домашней страницы
• src/pages/home/images - каталог с изображениями, которые относятся к данной странице. Все изображения можно сортировать по тематическим каталогам, например: gallery, slider. При этот путь для всех файлов с изображениями не зависит, в какой тематический каталог будет сохранено изображение. Формат ссылки должен выглядеть так: "./images/имя_файла.расширение".
• static - здесь хранятся файлы и каталоги, которые должны быть размещены в корне сайта без какой-либо обработки, т. е. при сборке проекта все содержимое этого каталога копируется в каталог docs.

Используемые технологии

Значки

Основная часть значков на сайте являются изображениями SVG и упакованы в единый спрайт dist/svg/sprite.svg. Этот спрайт собирается с помощью пакета svg-sprite-generator из файлов .svg, которые расположены в каталоге src/assets/svg/.

С помощью модуля SVGO файлы извлекаются из каталога src/assets/svg, оптимизируются и помещаются в каталог dist/svg. Далее, из оптимизированных файлов с помощью модуля svg-sprite-generator создается спрайт dist/svg/sprite.svg. Данный механизм реализуется скриптом "watch:svg" либо "build:svg" в файле package.json

Файлы значков .svg взяты на Material Symbols and Icons - Google Fonts.

В проекте также возможно использовать значки Юникода.

Цвета

При подборе цветовой схемы руководствовался рекомендациями по цветовому контрасту и использовал оттуда Color Contrast Analyzer.

Логотип и фавиконки сайта

Логотип разработан в программе Inkscape. Были созданы файлы логотипа в формате SVG и PNG размером 512х512. Все остальные размеры PNG файлов получены с помощью сервиса Favicon.ico & App Icon Generator. Также, этот сервис генерирует значок favicon.ico, в котором упаковано пять размеров от 16х16 до 64х64, и генерирует необходимые линки для секции head файла HTML, а также создает файлы manifest.json и browserconfig.xml. В этом сервисе можно проверить правильность настроек и наличие иконок на сайте.

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

Для подсветки синтаксиса в примерах кода, приведенных в статьях, используется highlight.js. Наиболее полная документация по highlight.js приведена здесь.

Аналитика

На сайте используется Яндекс метрика. С помощью Lighthouse обнаружил, что Яндекс метрика сильно влияет на производительность мобильных устройств.