Merge branch 'master' of https://github.com/lowlighter/metrics

README.md

@@ -19,7 +19,7 @@ Generate metrics that can be embedded everywhere, including your GitHub profile
   </tr>
   <tr>
     <th colspan="2" align="center">
-      <h3><a href="/README.md#-plugins">🧩 Customizable with 38 plugins and 235 options!</a></h3>
+      <h3><a href="/README.md#-plugins">🧩 Customizable with 38 plugins and 236 options!</a></h3>
     </th>
   </tr>
   <tr>

settings.example.json

@@ -28,6 +28,7 @@
   "extras": {
     "default": false,              "//": "Default extras state (advised to let 'false' unless in debug mode)",
     "css": false,                  "//": "Allow use of 'extras.css' option",
+    "js": false,                   "//": "Allow use of 'extras.js' option",
     "features": false,             "//": "Enable extra features (advised to let 'false' on web instances)"
   },
   "plugins.default": false,        "//": "Default plugin state (advised to let 'false' unless in debug mode)",

source/app/metrics/utils.mjs

@@ -435,41 +435,45 @@ export const svg = {
     console.debug("metrics/svg/resize > resizing svg")
     let height, resized, width
     try {
-      ({resized, width, height} = await page.evaluate(async (padding, js) => {
+      ({resized, width, height} = await page.evaluate(
-        //Execute user JavaScript if provided
+        async (padding, js) => {
-        if (js) {
+          //Execute user JavaScript if provided
-          try {
+          if (js) {
-            console.debug(`metrics/svg/resize > executing ${js}`)
+            try {
-            await new Function("document", `return (async () => {${js}})()`)(document) //eslint-disable-line no-new-func
+              console.debug(`metrics/svg/resize > executing ${js}`)
-            console.debug("metrics/svg/resize > successfully executed user javascript")
+              await new Function("document", `return (async () => {${js}})()`)(document) //eslint-disable-line no-new-func
+              console.debug("metrics/svg/resize > successfully executed user javascript")
+            }
+            catch (error) {
+              console.debug(`an error occured while evaluating user js: ${error}`)
+            }
           }
-          catch (error) {
+          //Disable animations
-            console.debug(`an error occured while evaluating user js: ${error}`)
+          const animated = !document.querySelector("svg").classList.contains("no-animations")
-          }
+          if (animated)
-        }
+            document.querySelector("svg").classList.add("no-animations")
-        //Disable animations
+          console.debug(`animations are ${animated ? "enabled" : "disabled"}`)
-        const animated = !document.querySelector("svg").classList.contains("no-animations")
+          await new Promise(solve => setTimeout(solve, 2400))
-        if (animated)
+          //Get bounds and resize
-          document.querySelector("svg").classList.add("no-animations")
+          let {y:height, width} = document.querySelector("svg #metrics-end").getBoundingClientRect()
-        console.debug(`animations are ${animated ? "enabled" : "disabled"}`)
+          console.debug(`bounds width=${width}, height=${height}`)
-        await new Promise(solve => setTimeout(solve, 2400))
+          height = Math.ceil(height * padding.height + padding.absolute.height)
-        //Get bounds and resize
+          width = Math.ceil(width * padding.width + padding.absolute.width)
-        let {y:height, width} = document.querySelector("svg #metrics-end").getBoundingClientRect()
+          console.debug(`bounds after applying padding width=${width} (*${padding.width}+${padding.absolute.width}), height=${height} (*${padding.height}+${padding.absolute.height})`)
-        console.debug(`bounds width=${width}, height=${height}`)
+          //Resize svg
-        height = Math.ceil(height * padding.height + padding.absolute.height)
+          if (document.querySelector("svg").getAttribute("height") === "auto")
-        width = Math.ceil(width * padding.width + padding.absolute.width)
+            console.debug('skipped height resizing because it was set to "auto"')
-        console.debug(`bounds after applying padding width=${width} (*${padding.width}+${padding.absolute.width}), height=${height} (*${padding.height}+${padding.absolute.height})`)
+          else
-        //Resize svg
+            document.querySelector("svg").setAttribute("height", height)
-        if (document.querySelector("svg").getAttribute("height") === "auto")
+          //Enable animations
-          console.debug('skipped height resizing because it was set to "auto"')
+          if (animated)
-        else
+            document.querySelector("svg").classList.remove("no-animations")
-          document.querySelector("svg").setAttribute("height", height)
+          //Result
-        //Enable animations
+          return {resized:new XMLSerializer().serializeToString(document.querySelector("svg")), height, width}
-        if (animated)
+        },
-          document.querySelector("svg").classList.remove("no-animations")
+        padding,
-        //Result
+        js,
-        return {resized:new XMLSerializer().serializeToString(document.querySelector("svg")), height, width}
+      ))
-      }, padding, js))
     }
     catch (error) {
       console.error(error)

source/plugins/core/README.md

@@ -557,6 +557,21 @@ Useful to avoid creating a new template just to tweak some styling</p>
   <tr>
     <td nowrap="nowrap">🌐 Web instances must configure <code>settings.json</code><br>
 <b>type:</b> <code>string</code>
+<br></td>
+  </tr>
+  <tr>
+    <td nowrap="nowrap"><code>extras_js</code></td>
+    <td rowspan="2"><p>Extra JavaScript</p>
+<p>Custom JavaScript that will be executed during puppeteer rendering.
+Useful to avoid creating a new template just to tweak some content.</p>
+<p>Note that is it executed within puppeteer context and <strong>not</strong> <em>metrics</em> context.
+It is run after transformations and optimizations, but just before resizing.</p>
+<img width="900" height="1" alt=""></td>
+  </tr>
+  <tr>
+    <td nowrap="nowrap">✨ On <code>master</code>/<code>main</code><br>
+🌐 Web instances must configure <code>settings.json</code><br>
+<b>type:</b> <code>string</code>
 <br></td>
   </tr>
   <tr>

tests/ci.test.js

@@ -19,7 +19,7 @@ describe("Check files editions (checkout your files if needed)", () => {
       ".github/workflows/examples.yml",
       ".github/readme/partials/documentation/compatibility.md",
     ])("%s", async file => expect((await diff()).includes(file)).toBe(false)))
-  if (!["lowlighter"].includes(process.env.PR_AUTHOR))
+  if (!["lowlighter"].includes(process.env.PR_AUTHOR)) {
     describe("Repository level files were not modified", () =>
       void test.each([
         ".github/config/*",
@@ -39,6 +39,7 @@ describe("Check files editions (checkout your files if needed)", () => {
         "source/app/mocks/.eslintrc.yml",
         "vercel.json",
       ])("%s", async file => expect((await diff()).filter(edited => new RegExp(`^${file.replace(/[.]/g, "[.]").replace(/[*]/g, "[\\s\\S]*")}$`).test(edited)).length).toBe(0)))
+  }
 })
 
 //Templates editions

tests/mocks/index.mjs

@@ -1,7 +1,7 @@
 //Imports
+import faker from "@faker-js/faker"
 import fs from "fs/promises"
 import axios from "axios"
-import faker from "@faker-js/faker"
 import paths from "path"
 import rss from "rss-parser"
 import urls from "url"