Add support for extras_css option (#238)

source/app/action/index.mjs

@@ -57,6 +57,7 @@
         //Load configuration
           const {conf, Plugins, Templates} = await setup({log:false, nosettings:true, community:{templates:core.getInput("setup_community_templates")}})
           const {metadata} = conf
+          conf.settings.extras = {default:true}
           info("Setup", "complete")
           info("Version", conf.package.version)
 

source/app/metrics/index.mjs

@@ -93,7 +93,7 @@
 
         //Rendering
           console.debug(`metrics/compute/${login} > render`)
-          let rendered = await ejs.render(image, {...data, s:imports.s, f:imports.format, style, fonts}, {views, async:true})
+          let rendered = await ejs.render(image, {...data, s:imports.s, f:imports.format, style:style+(conf.settings.extras?.css ?? conf.settings.extras?.default ? q["extras.css"] ?? "" : ""), fonts}, {views, async:true})
 
         //Additional transformations
           if (q["config.twemoji"])

source/app/web/settings.example.json

@@ -25,6 +25,10 @@
     "default": "classic",          "//": "Default template",
     "enabled": [],                 "//": "Enabled templates (empty to enable all)"
   },
+  "extras": {
+    "default": false,              "//": "Default extras state (advised to let 'false' unless in debug mode)",
+    "css": false,                  "//": "Allow use of 'extras.css' option"
+  },
   "plugins.default": false,        "//": "Default plugin state (advised to let 'false' unless in debug mode)",
   "plugins": {                     "//": "Global plugin configuration",
     <% for (const name of Object.keys(plugins).filter(v => !["base", "core"].includes(v))) { -%>

source/plugins/core/README.md

@@ -55,6 +55,25 @@ Some templates may accept additional custom options that you can pass through th
     query: '{"custom_colo r":"#FF0000"}'
 ```
 
+### 🎨 Custom CSS styling
+
+You can inject CSS rules using `extras_css` option.
+
+If you make heavy use of this option, consider using [community templates](/source/templates/community/README.md) instead.
+
+#### ℹ️ Examples workflows
+
+```yaml
+- uses: lowlighter/metrics@latest
+  with:
+    # ... other options
+    base: header
+    extras_css: |
+      h2 {
+        color: red;
+      }
+```
+
 ### 🌐 Set timezone
 
 By default, dates are based on Greenwich meridian (GMT/UTC).

source/plugins/core/metadata.yml

@@ -124,6 +124,17 @@ inputs:
     type: json
     default: "{}"
 
+  # Define additional CSS that will be injected in used template
+  # Example:
+  # config_extras_css: |
+  #   h2 {
+  #     color: red;
+  #   }
+  extras_css:
+    description: Extra CSS
+    type: string
+    default: ""
+
   # Timezone used by metrics
   # See https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
   config_timezone: