Update CONTRIBUTING.md

This commit is contained in:
lowlighter
2020-11-06 19:59:50 +01:00
parent 8d1b29b711
commit c488ae154d

View File

@@ -6,38 +6,38 @@ Nice ! Read the few sections below to understand how this project is structured.
### 👨‍💻 General informations ### 👨‍💻 General informations
#### Adding new metrics through GraphQL API, REST API or Third-Party service #### Adding new metrics and plugins through GraphQL API, REST API or Third-Party service
To use [GitHub GraphQL API](https://docs.github.com/en/graphql), update the GraphQL query from `templates/*/query.graphql`. When updating a single template, changes should be made through [GitHub GraphQL API](https://docs.github.com/en/graphql) by editing the GraphQL query from `templates/*/query.graphql`. Computed or formatting can be made in `templates/*/template.mjs`.
Raw queried data should be exposed in `data.user` whereas computed data should be in `data.computed`, and code should be updated through `templates/*/template.mjs`. Raw queried data should be exposed directly into `data.user`, whereas computed data should be stored in `data.computed`.
To use [GitHub Rest API](https://docs.github.com/en/rest) or a third-party service instead, create a new plugin in `src/plugins`. When making a new plugin, a new folder with its name must be created in `src/plugins`.
Plugins should be self-sufficient and re-exported from [src/plugins/index.mjs](https://github.com/lowlighter/metrics/blob/master/src/plugins/index.mjs), to be later included in the `//Plugins` section of `templates/*/template.mjs`. Plugins entry point `src/plugins/*/index.mjs` will have access to `{login, q, imports, data, computed, rest, graphql}`.
Data generated should be exposed in `data.computed.plugins[plugin]` where `plugin` is your plugin's name. It should be self-sufficient and independant from others plugins and used template.
Data generated should be exposed in `data.computed.plugins[plugin]` where `plugin` is the plugin's name.
#### Updating SVG templates #### Updating SVG templates
The SVG templates are located in `templates/*/image.svg` and include CSS from `templates/*/style.css`. The SVG templates are located in `templates/*/image.svg` and include CSS from `templates/*/style.css`.
It is rendered with [EJS](https://github.com/mde/ejs) so you can actually include variables (e.g. `<%= user.name %>`) and execute simple code, like control statements. It is rendered with [EJS](https://github.com/mde/ejs) so it is actually possible to include variables (e.g. `<%= user.name %>`) and execute simple code, like control statements.
It should handle plugins errors gracefully by displaying the error message. Plugins errors should be handled gracefully by displaying the error message.
#### Metrics server and GitHub action #### Metrics server and GitHub action
Most of the time, you won't need to edit these, unless you're integrating features directly tied to them. Unless when integrating new features directly tied to these, it is not needed to edit them when creating a new template or plugin.
Remember that SVG image is actually generated from `src/metrics.mjs`, independently from metrics server and GitHub action. Keep in mind that SVG image is actually generated from `src/metrics.mjs`, independently from the metrics server and GitHub action.
Metrics server code is located in `src/app.mjs` and instantiates an `express` server app, `octokit`s instances, middlewares (like rate-limiter) and routes. Metrics server code is located in `src/app.mjs` and instantiates an `express` server app, `octokit`s instances, middlewares (like rate-limiter) and routes.
GitHub action code is located in `action/index.mjs` and instantiates `octokit`s instances and retrieves action parameters. GitHub action code is located in `action/index.mjs` and instantiates `octokit`s instances and retrieves action parameters.
It then use directly `src/metrics.mjs` to generate the SVG image and commit them to user's repository. It then use directly `src/metrics.mjs` to generate the SVG image and commit them to user's repository.
You must run `npm run build` to rebuild the GitHub action.
#### Testing new features #### Testing new features
To test new features, setup a metrics server with a test token and `debug` mode enabled. To test new features, setup a metrics server with a test token and `debug` mode enabled.
This way you'll be able to rapidly test SVG renders with your browser. It allows fast prototyping and to rapidly test SVG renders in a browser.
### 🗂️ Project structure ### 🗂️ Project structure
@@ -62,8 +62,13 @@ This way you'll be able to rapidly test SVG renders with your browser.
* `action.yml` contains the GitHub action descriptor * `action.yml` contains the GitHub action descriptor
* `action/index.mjs` contains the GitHub action code * `action/index.mjs` contains the GitHub action code
* `action/dist/index.js` contains compiled the GitHub action code * `action/dist/index.js` contains compiled the GitHub action code (auto-generated)
* `utils/build.mjs` contains the GitHub action builder
#### Others
* `tests/metrics.mjs` contains tests
* `utils/build.mjs` allows to rebuild plugins and template indexes and GitHub action
### 📦 Used packages ### 📦 Used packages
@@ -91,6 +96,9 @@ This way you'll be able to rapidly test SVG renders with your browser.
* To scrap the web * To scrap the web
* [libxmljs/libxmljs](https://github.com/libxmljs/libxmljs) * [libxmljs/libxmljs](https://github.com/libxmljs/libxmljs)
* To test and verify SVG validity * To test and verify SVG validity
* [Marak/colors.js](https://github.com/Marak/colors.js)
* To print colors in console
### 🗛 Fonts ### 🗛 Fonts
@@ -105,5 +113,3 @@ This way you'll be able to rapidly test SVG renders with your browser.
6. Update your template 6. Update your template
- Include `<defs><style><%= fonts %></style></defs>` to your `templates/*/image.svg` - Include `<defs><style><%= fonts %></style></defs>` to your `templates/*/image.svg`
- Edit your `templates/*/style.css` to use yout new font - Edit your `templates/*/style.css` to use yout new font