Skip to content

Latest commit

 

History

History
38 lines (29 loc) · 2.44 KB

CONTRIBUTING.md

File metadata and controls

38 lines (29 loc) · 2.44 KB
Raw

How to contribute to Web Maker

Web Maker is written in Preact (JavaScript), CSS & HTML. It uses few open-source 3rd party JavaScript libraries for things like splitting panes, syntax highlighting etc.

Run Web Maker (web app) locally on your machine

  • Clone the repo git clone [email protected]:chinchang/web-maker.git.
  • Inside the repo, run yarn to install the dependencies.
  • Run yarn run dev

Run Web Maker (Chrome extension) locally on your machine

  • Follow all steps as listed above to run the web app.
  • Instead of yarn run dev, run yarn run build. This will take some time.
  • Now go to Chrome extension settings page chrome://extensions/.
  • Click on Load unpacked extension button.
  • Select the extension/ folder in the repo.
  • Done! You'll now have a Web Maker icon added in your browser's right-top area. Click that and you'll run your local copy of Web Maker.

Code changes

  • Before starting any code work, run yarn in the repo folder. This is required to install some git hooks which do linting & formatting.
  • Also, create a new branch out of master branch with the name as fix-{ISSUE_ID}-anything-more-here. For example, if you are working on issue #23 regarding implementing a mobile mode, your branch could be called fix-23-mobile-mode.
  • All source files are inside the src folder. Once you run yarn run dev, make code changes inside src/ folder and the changes appear automatically in the browser. Except when changes are done in style.css, that requires manual refresh in brower.
  • Once you are done, open a pull request here by selecting right branch: https://github.com/chinchang/web-maker/compare.

Project folder structure

  • docs/: Online documentation.
  • icons/: Icons for Chrome extension.
  • app/: Generated public directory for the web app. Should NOT be edited.
  • src/*.js: Mostly services/utilities are here. But some miscellaneous files are lying here that need cleanup.
  • src/components: Every (well mostly) in Web Maker is a component. Find them here.
  • src/lib: 3rd party code that are loaded conditionally in the app and thus are not part of either the final script.js or vendor.js.
  • src/lib/transpilers: Various transpilers to convert preprocessor code.
  • src/assets: Images are kept here.
  • src/templates: JSON files for all templates support inside Web Maker.
  • src/tests: Tests, right.