If you want to help the project by contributing the code, you're welcome. Any improvements are very appreciated.
There are three main projects:
- pixelgrid - the main project that contains core functionality to build the grid and add it to a website layout. Distributed as an npm package.
- pixelgrid-browser - the project that contains UI for browser extensions (react/redux stack is used).
- pixel-grid.github.io - the repo that contains source code of pixelgrid.zwezdin.com website. If you found a typo on the website, feel free to contribute to this repo.
All active development is in
master branch used for released code only.
All codes based on Typescript. Please, don't try to skip it by using
To contribute your code use following approach:
- Fork and clone the repository
- Do all work in
developmentbranch. If necessary, create a new branch from
- Use NPM to manage the packages. Run
npm installto install packages for the appropriate project.
- Make your changes. If there are bugs or new functionality, create unit tests to cover it.
- Ensure that everything is still working by running
npm run lintand
npm run test.
- Format your code by running
npm run format.
- Commit and push your changes to the forked repo.
- Create a pull request into the main repo.
Follow the best practices while you working on your changes:
README.mdfile, if necessary. Mention in your PR that Wiki should be updated as well.
- Write an informative commit message.
- Do single thing per pull request. If you want to contribute a few features or bugfixes, create separate pull request for each.
- Do not update version in
package.json- it will be updated during publishing.
PixelGrid main package
There are test page inside the main project to test functionality on the fly. You can also use unit tests while working on the code.
To run and open test page, start
npm run start command. It will use Webpack Dev Server to serve the content of the page.
To produce a final bundle, use
npm run build command. Once it has done, the
dist folder will contain result package content.
PixelGrid browser extension
Browser extension based on React/Redux. To run it, use
npm run start command. It will open the UI, but adding the grid to the pack will not work in this mode.
To debug the browser extension, you'll need to create a package. Use the following commands to build it:
npm run package:chrometo build Chrome extension
npm run package:firefoxto build Firefox extension
npm run package:operato build Opera/Yandex browser extension
npm run package:edgeto build Edge extension
Once it's built, load to extension into the browser to debug it.