diff --git a/README.md b/README.md
index 0bd0f038..aa3f3358 100644
--- a/README.md
+++ b/README.md
@@ -87,6 +87,9 @@ jobs:
# Name of SVG image output
filename: github-metrics.svg
+ # Template to use (see src/templates to get a list of supported templates)
+ template: classic
+
# Enable Google PageSpeed metrics for account attached website
# See https://developers.google.com/speed/docs/insights/v5/get-started for more informations
plugin_pagespeed: no
@@ -230,6 +233,14 @@ Open and edit `settings.json` to configure your instance using a text editor of
//Intended for easier development and disabled by default
"debug":false,
+ //Template configuration
+ "templates":{
+ //Default template
+ "default":"classic",
+ //Enabled template. Leave empty to enable all defined templates
+ "enabled":[],
+ },
+
//Plugins configuration
"plugins":{
//Google PageSpeed plugin
@@ -322,6 +333,7 @@ systemctl status github_metrics
⚠️ HTTP errors code
The following errors code can be encountered if on a server instance :
+* `400 Bad request` : Query is invalid (e.g. unsupported template)
* `403 Forbidden` : User is not allowed in `restricted` users list
* `404 Not found` : GitHub API did not found the requested user
* `429 Too many requests` : Thrown when rate limiter is trigerred
@@ -514,10 +526,13 @@ Add the following to your workflow :
#### Metrics generator
+* `src/setup.mjs` contains the configuration setup
* `src/metrics.mjs` contains the metrics renderer
-* `src/query.graphql` is the GraphQL query sent to GitHub GraphQL API
-* `src/style.css` contains the style used by the generated SVG image
-* `src/template.svg` contains the template used by the generated SVG image
+* `src/templates/*` contains templates files
+* `src/templates/*/image.svg` contains the template used by the generated SVG image
+* `src/templates/*/query.graphql` is the GraphQL query sent to GitHub GraphQL API
+* `src/templates/*/style.css` contains the style used by the generated SVG image
+* `src/templates/*/template.mjs` contains the code which prepares data for rendering
* `src/plugins/*` contains the source code of metrics plugins
#### Metrics server instance
@@ -527,6 +542,7 @@ Add the following to your workflow :
#### GitHub action
+* `action.yml` contains the GitHub action descriptor
* `action/index.mjs` contains the GitHub action code
* `action/dist/index.js` contains compiled the GitHub action code
* `utils/build.mjs` contains the GitHub action builder
@@ -541,18 +557,18 @@ Read the few sections below to get started with project structure.
#### Adding new metrics 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 `src/query.graphql`.
-Raw queried data should be exposed in `data.user` whereas computed data should be in `data.computed`, and code should be updated through `src/metrics.mjs`.
+To use [GitHub GraphQL API](https://docs.github.com/en/graphql), update the GraphQL query from `templates/*/query.graphql`.
+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`.
To use [GitHub Rest API](https://docs.github.com/en/rest) or a third-party service instead, create a new plugin 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 `src/metrics.mjs`.
+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`.
Data generated should be exposed in `data.computed.plugins[plugin]` where `plugin` is your plugin's name.
#### Updating the SVG template
-The SVG template is located in `src/template.svg` and include the CSS from `src/style.css`.
+The SVG template is located in `templates/*/image.svg` and include the CSS from `templates/*/style.css`.
-It's actually a long JavaScript template string, so you can actually include variables (e.g. `` `${data.user.name}` ``) and execute inline code, like ternary conditions (e.g. `` `${computed.plugins.plugin ? `