mirror of
https://github.com/chinchang/web-maker.git
synced 2025-01-16 20:08:15 +01:00
39 lines
2.4 KiB
Markdown
39 lines
2.4 KiB
Markdown
## 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 git@github.com: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/](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](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.
|