feat(plugins/skyline): add plugin_skyline_settings (#1139)

source/plugins/skyline/examples.yml

@@ -12,3 +12,25 @@
     timeout: 1800000
     modes:
       - action
+
+- name: GitHub City
+  uses: lowlighter/metrics@latest
+  with:
+    filename: metrics.plugin.skyline.city.svg
+    token: NOT_NEEDED
+    base: ''
+    plugin_skyline: yes
+    plugin_skyline_year: 2020
+    plugin_skyline_frames: 6
+    plugin_skyline_quality: 1
+    plugin_skyline_settings: |
+      {
+        "url": "https://honzaap.github.io/GithubCity?name=${login}&year=${year}",
+        "ready": "[...document.querySelectorAll('.display-info span')].map(span => span.innerText).includes('${login}')",
+        "wait": 4,
+        "hide": ".github-corner, .footer-link, .buttons-options, .mobile-rotate, .display-info span:first-child"
+      }
+  test:
+    timeout: 1800000
+    modes:
+      - action

source/plugins/skyline/index.mjs

@@ -7,7 +7,7 @@ export default async function({login, q, imports, data, account}, {enabled = fal
       return null
 
     //Load inputs
-    let {year, frames, quality, compatibility} = imports.metadata.plugins.skyline.inputs({data, account, q})
+    let {year, frames, quality, compatibility, settings} = imports.metadata.plugins.skyline.inputs({data, account, q})
     if (Number.isNaN(year)) {
       year = new Date().getFullYear()
       console.debug(`metrics/compute/${login}/plugins > skyline > year set to ${year}`)
@@ -15,7 +15,10 @@ export default async function({login, q, imports, data, account}, {enabled = fal
     const width = 454 * (1 + data.large)
     const height = 284
 
-    //Start puppeteer and navigate to skyline.github.com
+    //Load settings (force default if extras is disabled)
+    const {url, ready, wait, hide} = imports.metadata.plugins.skyline.extras("settings", {extras, error: false}) ? settings : JSON.parse(imports.metadata.plugins.skyline.inputs.settings.default)
+
+    //Start puppeteer and navigate to skyline website
     console.debug(`metrics/compute/${login}/plugins > skyline > starting browser`)
     const browser = await imports.puppeteer.launch()
     console.debug(`metrics/compute/${login}/plugins > skyline > started ${await browser.version()}`)
@@ -23,12 +26,18 @@ export default async function({login, q, imports, data, account}, {enabled = fal
     await page.setViewport({width, height})
 
     //Load page
-    console.debug(`metrics/compute/${login}/plugins > skyline > loading skyline.github.com/${login}/${year}`)
-    await page.goto(`https://skyline.github.com/${login}/${year}`, {timeout: 90 * 1000})
+    if (!url)
+      throw {error:{message:"Skyline URL is not set"}}
+    console.debug(`metrics/compute/${login}/plugins > skyline > loading ${url.replaceAll("${login}", login).replaceAll("${year}", year)}`)
+    await page.goto(url.replaceAll("${login}", login).replaceAll("${year}", year), {timeout: 90 * 1000})
     console.debug(`metrics/compute/${login}/plugins > skyline > waiting for initial render`)
     const frame = page.mainFrame()
-    await page.waitForFunction('[...document.querySelectorAll("span")].map(span => span.innerText).includes("Share on Twitter")', {timeout: 90 * 1000})
-    await frame.evaluate(() => [...document.querySelectorAll("button, footer, a")].map(element => element.remove()))
+    if (ready)
+      await page.waitForFunction(ready.replaceAll("${login}", login).replaceAll("${year}", year), {timeout: 90 * 1000})
+    if ((wait)&&(wait > 0))
+      await new Promise(solve => setTimeout(solve, wait*1000))
+    if (hide)
+      await frame.evaluate(hide => [...document.querySelectorAll(hide)].map(element => element.style.display = "none"), hide)
 
     //Generate gif
     console.debug(`metrics/compute/${login}/plugins > skyline > generating frames`)

source/plugins/skyline/metadata.yml

@@ -58,3 +58,26 @@ inputs:
       Using this mode significantly increase file size as each frame is encoded separately
     type: boolean
     default: no
+
+  plugin_skyline_settings:
+    description: |
+      Advanced settings
+
+      Can be configured to use alternate skyline websites different from [skyline.github.com](https://skyline.github.com), such as [honzaap's GitHub City](https://github.com/honzaap/GitHubCity).
+
+      - `url`: Target URL (mandatory)
+      - `ready`: Readiness condition (A JS function that returns a boolean)
+      - `wait`: Time to wait after readiness condition is met (in seconds)
+      - `hide`: HTML elements to hide (A CSS selector)
+
+      For `url` and `ready` options, `${login}` and `${year}` will be respectively templated to user's login and specified year
+    type: json
+    default: |
+      {
+        "url": "https://skyline.github.com/${login}/${year}",
+        "ready": "[...document.querySelectorAll('span')].map(span => span.innerText).includes('Share on Twitter')",
+        "wait": 1,
+        "hide": "button, footer, a"
+      }
+    extras:
+      - metrics.run.puppeteer.user.js