Add config_display option to support regular and large renders (lowlighter#310)

Author: lowlighter

source/app/metrics/index.mjs

@@ -26,7 +26,7 @@ export default async function metrics({login, q}, {graphql, rest, plugins, conf,
     //Initialization
     const pending = []
     const {queries} = conf
-    const data = {animated:true, base:{}, config:{}, errors:[], plugins:{}, computed:{}}
+    const data = {animated:true, large:false, base:{}, config:{}, errors:[], plugins:{}, computed:{}}
     const imports = {
       plugins:Plugins,
       templates:Templates,

source/app/web/statics/app.placeholder.js

@@ -51,9 +51,11 @@
         return await ejs.render(partial, data, { async: true, rmWhitespace: true })
       },
       //Meta-data
-      meta: { version: set.version, author: "lowlighter" },
+      meta: { version: set.version, author: "lowlighter", generated:new Date().toGMTString().replace(/GMT$/g, "").trim() },
       //Animated
       animated: false,
+      //Display size
+      large: set.config.display === "large",
       //Config
       config: set.config,
       //Base elements

source/plugins/contributors/index.mjs

@@ -33,7 +33,7 @@ export default async function({login, q, imports, data, rest, graphql, queries,
           console.debug(`metrics/compute/${login}/plugins > contributors > no more page to load`)
           break
         }
-        commits.push(...loaded)
+        commits.push(...loaded.filter(commit => commit?.author?.login))
       }
       catch (error) {
         if (/Git Repository is empty/.test(error))

source/plugins/core/README.md

@@ -140,6 +140,21 @@ It may increase filesize since it replace unicode characters by SVG images.
     config_twemoji: yes
 ```
 
+### ↔️ Controlling display size
+
+Some templates like `classic` and `repositories` support different output display size:
+- `regular` (default) will render a medium-sized image, which is suitable for both desktop and mobile displays and is preferable when using data-intensive metrics (since text may be scaled down on small devices)
+- `large` will render a large-sized image, which may be more suitable for some plugins (like displaying topics icons,  repository contributors, etc.)
+
+#### ℹ️ Examples workflows
+
+```yaml
+- uses: lowlighter/metrics@latest
+  with:
+    # ... other options
+    config_display: large
+```
+
 ### 🎞️ SVG CSS Animations
 
 As rendered metrics use HTML and CSS, some templates have animations.

source/plugins/core/index.mjs

@@ -6,7 +6,7 @@
 //Setup
 export default async function({login, q}, {conf, data, rest, graphql, plugins, queries, account, convert, template}, {pending, imports}) {
   //Load inputs
-  const {"config.animations":animations, "config.timezone":_timezone, "debug.flags":dflags} = imports.metadata.plugins.core.inputs({data, account, q})
+  const {"config.animations":animations, "config.display":display, "config.timezone":_timezone, "debug.flags":dflags} = imports.metadata.plugins.core.inputs({data, account, q})
   imports.metadata.templates[template].check({q, account, format:convert})
 
   //Init
@@ -29,6 +29,9 @@ export default async function({login, q}, {conf, data, rest, graphql, plugins, q
     }
   }
 
+  //Display
+  data.large = display === "large"
+
   //Animations
   data.animated = animations
   console.debug(`metrics/compute/${login} > animations ${data.animated ? "enabled" : "disabled"}`)

source/plugins/core/metadata.yml

@@ -167,6 +167,15 @@ inputs:
     type: boolean
     default: yes
 
+  # Render display width
+  config_display:
+    description: Render display width
+    type: string
+    default: regular
+    values:
+      - regular  # 480px width
+      - large    # 960px width (may not be supported by all templates)
+
   # Enable SVG CSS animations
   config_animations:
     description: SVG CSS animations

source/plugins/licenses/index.mjs

@@ -57,7 +57,7 @@ export default async function({login, q, imports, data, graphql, queries, accoun
       //Spawn licensed process
       console.debug(`metrics/compute/${login}/plugins > licenses > running licensed`)
       JSON.parse(await imports.run("licensed list --format=json --licenses", {cwd:path})).apps
-        .map(({sources}) => sources?.flatMap(source => source.dependencies.map(({dependency, license}) => {
+        .map(({sources}) => sources?.flatMap(source => source.dependencies?.map(({dependency, license}) => {
               used[license] = (used[license] ?? 0) + 1
               result.dependencies.push(dependency)
               result.known += (license in licenses)

source/plugins/screenshot/index.mjs

@@ -28,7 +28,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
     }, selector)
     console.debug(`metrics/compute/${login}/plugins > screenshot > coordinates ${JSON.stringify(clip)}`)
     const [buffer] = await imports.record({page, ...clip, frames:1, background})
-    const screenshot = await (await imports.jimp.read(Buffer.from(buffer.split(",").pop(), "base64"))).resize(Math.min(454, clip.width), imports.jimp.AUTO)
+    const screenshot = await (await imports.jimp.read(Buffer.from(buffer.split(",").pop(), "base64"))).resize(Math.min(454 * (1 + data.large), clip.width), imports.jimp.AUTO)
     await browser.close()
 
     //Results

source/plugins/skyline/index.mjs

@@ -12,7 +12,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       year = new Date().getFullYear()
       console.debug(`metrics/compute/${login}/plugins > skyline > year set to ${year}`)
     }
-    const width = 454
+    const width = 454 * (1 + data.large)
     const height = 284
 
     //Start puppeteer and navigate to skyline.github.com

source/plugins/stargazers/index.mjs

@@ -31,7 +31,7 @@ export default async function({login, graphql, data, imports, q, queries, accoun
     console.debug(`metrics/compute/${login}/plugins > stargazers > loaded ${dates.length} stargazers in total`)
 
     //Compute stargazers increments
-    const days = 14
+    const days = 14 * (1 + data.large/2)
     const increments = {dates:Object.fromEntries([...new Array(days).fill(null).map((_, i) => [new Date(Date.now() - i * 24 * 60 * 60 * 1000).toISOString().slice(0, 10), 0]).reverse()]), max:NaN, min:NaN}
     dates
       .map(date => date.toISOString().slice(0, 10))