Version 1.9 (#6)

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
 <summary>⚠️ HTTP errors code</summary>
 
 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 ? `<div>${computed.plugins.plugin.data}</div>` : ""}` ``) which are useful for conditional statements.
+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.
 
 #### Metrics server and GitHub action
 
@@ -584,6 +600,8 @@ This way you'll be able to rapidly test SVG renders with your browser.
   * To apply rate limiting on server and avoid spams and hitting GitHub API's own rate limit
 * [octokit/graphql.js](https://github.com/octokit/graphql.js/) and [octokit/rest.js](https://github.com/octokit/rest.js)
   * To perform request to GitHub GraphQL API and GitHub REST API
+* [mde/ejs](https://github.com/mde/ejs)
+  * To render SVG images
 * [ptarjan/node-cache](https://github.com/ptarjan/node-cache)
   * To cache generated content
 * [renanbastos93/image-to-base64](https://github.com/renanbastos93/image-to-base64)