{"id":20196921,"url":"https://github.com/efiand/pixelperfect-tool","last_synced_at":"2025-09-10T23:33:33.315Z","repository":{"id":43121556,"uuid":"447147496","full_name":"efiand/pixelperfect-tool","owner":"efiand","description":"Pixel perfect tool for development mode.","archived":false,"fork":false,"pushed_at":"2024-11-04T10:13:44.000Z","size":263,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-24T09:38:34.904Z","etag":null,"topics":["npm-package","nuxt-module","pixelperfect","portfolio-project","vanilla-js"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/pixelperfect-tool","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/efiand.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-12T09:08:45.000Z","updated_at":"2024-11-04T09:13:20.000Z","dependencies_parsed_at":"2023-11-15T10:33:53.998Z","dependency_job_id":"2f037c06-3960-4d71-a956-87f59549c118","html_url":"https://github.com/efiand/pixelperfect-tool","commit_stats":{"total_commits":14,"total_committers":2,"mean_commits":7.0,"dds":0.0714285714285714,"last_synced_commit":"81f2879df6f466feb0e49b485ab3b304ed3677ed"},"previous_names":["efiand/pixelperfect","efiand/pineglade-pp"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efiand%2Fpixelperfect-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efiand%2Fpixelperfect-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efiand%2Fpixelperfect-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/efiand%2Fpixelperfect-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/efiand","download_url":"https://codeload.github.com/efiand/pixelperfect-tool/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248200923,"owners_count":21064003,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["npm-package","nuxt-module","pixelperfect","portfolio-project","vanilla-js"],"created_at":"2024-11-14T04:26:38.914Z","updated_at":"2025-04-10T10:45:07.772Z","avatar_url":"https://github.com/efiand.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# pixelperfect-tool [![npm version](https://img.shields.io/npm/v/pixelperfect-tool.svg)](https://www.npmjs.com/package/pixelperfect-tool)\n\nМодуль для накладывания скриншотов макетов поверх верстаемых страниц.\nПозволяет:\n\n- автоматически переключать скриншоты для проверки pixelperfect (далее – PP) при переходе между страницами и сменами адаптивных брейкпоинтов,\n- смещать скриншоты, переключать режим инверсии,\n- сохранять состояние между перезагрузками страницы и сеансами перезапуска сборки.\n\n[История версий.](https://github.com/efiand/pixelperfect/blob/main/CHANGELOG.md#pixelperfect-changelog)\n\n## Горячие клавиши\n\nРаботают, когда фокус на `\u003cbody\u003e`. Результат настроек сохраняется в localStorage.\n\n- `P` – переключение всей функциональности (по умолчанию выключен). При отключении остальные хоткеи не действуют.\n- `I` – режим инверсии макетов. По умолчанию включен.\n- `R` – при включенном модуле очищает localStorage от данных по смещениям изображений и перезагружает страницу.\n- `ArrowUp`, `ArrowDown`, `ArrowLeft`, `ArrowRight` – смещают положение изображения. Настройки сохраняются для каждой страницы и каждого брейкпоинта на ней.\n\n## Прямое подключение скрипта\n\n```html\n\u003cscript\u003e\n  window.pixelperfect = {\n    breakpoints: [320, 768, 1260, 1380, 1600],\n    folder: \"img/pixelperfect\",\n  };\n\u003c/script\u003e\n\u003cscript\n  src=\"https://efiand.github.io/pixelperfect-tool/pixelperfect.min.js\"\n  defer\n\u003e\u003c/script\u003e\n```\n\nОтсутствие в production-режиме изображений PP и кода подключения скрипта – настраивается разработчиком отдельно исходя из возможностей его сборки.\n\n## Подключение модуля\n\nУстановка: `npm i -DE pixelperfect-tool`.\n\nМодуль инициализирует библиотеку только один раз независимо от количества вызовов.\n\n### Добавление в систему сборки как есть\n\n```js\nwindow.pixelperfect = {\n  breakpoints: [320, 768, 1260, 1380, 1600],\n  folder: \"img/pixelperfect\",\n};\n\nexport * from \"pixelperfect-tool/loader.js\";\n```\n\n### Использование лоадера\n\n```js\nimport loadPixelperfect from \"pixelperfect-tool\";\n\nloadPixelperfect({\n  breakpoints: [320, 768, 1260, 1380, 1600],\n  folder: \"img/pixelperfect\",\n});\n```\n\n### Vue-компонент\n\nRenderless-компонент с возможностью добавления опций.\n\n```html\n\u003ctemplate\u003e\n  \u003cpixelperfect-tool :options=\"pixelperfectOptions\" /\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\" setup\u003e\n  import type { PixelperfectOptions } from \"pixelperfect-tool\";\n  import PixelperfectTool from \"pixelperfect-tool/vue\";\n\n  const pixelperfectOptions: PixelperfectOptions = {\n    breakpoints: [320, 768, 1260, 1380, 1600],\n    folder: \"img/pixelperfect\",\n  };\n\u003c/script\u003e\n```\n\n### Nuxt-модуль\n\nПредоставляет вышеупомянутый vue-компонент `PixelperfectTool`, инициализирующий библиотеку на клиентской стороне только в dev-режиме.\n\nПодключение модуля в `nuxt.config.ts`:\n\n```js\nexport default defineNuxtConfig({\n  modules: [\"pixelperfect-tool/nuxt\"],\n\n  // Кастомный путь к изображениям, чтобы они не попадали в билд\n  nitro: {\n    ...(process.env.NODE_ENV === \"development\"\n      ? {\n          publicAssets: [\n            {\n              baseURL: \"pixelperfect\", // доступен в браузере как /pixelperfect\n              dir: \"dev/pixelperfect\", // путь относительно @/server/\n            },\n          ],\n        }\n      : {}),\n  },\n});\n```\n\nИспользование в приложении отличается только отсутствием необходимости импортировать компонент.\n\n## Настройки\n\nПередаются через объект `window.pixelperfect`. Все настройки опциональны, и если дефолтные подходят, то необходимости создавать объект нет.\n\n- `page` – по умолчанию это URL загруженной страницы от корня (не включая корневой слэш и концевой `.html`, если он там есть). Например, для страницы `/about.html` значение будет `'about'`. Для главной страницы (`/`) – значение по умолчанию `'index'`.\n- `breakpoints` – числовой массив ширин макетов (порядок произвольный). При первичной загрузке с определенной шириной окна или при ресайзе происходит смена картинки на подходящую для текущей ширины. Значение по умолчанию – `[320, 768, 1240]`. Если текущая ширина экрана меньше минимального брейкпоинта, фоновое изображение отключается.\n- `folder` – имя каталога (относительно корня проекта), где лежат изображения. Значение по умолчанию – `'pixelperfect'`.\n- `ext` – расширение изображений. По умолчанию – `'jpg'`.\n- `selector` – CSS-селектор элемента, с которым связан функционал. Значение по умолчанию – `'body'`.\n\n## Изображения\n\nФормат путей к фоновым изображениям макетов (значения Настроек) – `/\u003cfolder\u003e/\u003cpage\u003e-\u003cbreakpoint\u003e.\u003cext\u003e`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fefiand%2Fpixelperfect-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fefiand%2Fpixelperfect-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fefiand%2Fpixelperfect-tool/lists"}