Add screenshot plugin (#217)

source/plugins/screenshot/README.md

@@ -0,0 +1,26 @@
+### 📸 Website screenshot
+
+The *screenshot* plugin lets you take a screenshot from any website.
+It can be restricted with a [CSS selector](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) or you can take a full page.
+
+<table>
+  <td align="center">
+    <img src="https://github.com/lowlighter/lowlighter/blob/master/metrics.plugin.screenshot.svg">
+    <img width="900" height="1" alt="">
+  </td>
+</table>
+
+#### ℹ️ Examples workflows
+
+[➡️ Available options for this plugin](metadata.yml)
+
+```yaml
+- uses: lowlighter/metrics@latest
+  with:
+    # ... other options
+    plugin_screenshot: yes
+    plugin_screenshot_title: XKCD of the day  # Section title
+    plugin_screenshot_url: https://xkcd.com   # Website url
+    plugin_screenshot_selector: "#comic img"  # CSS selector to take into screenshot
+    plugin_screenshot_background: no          # Remove page background
+```

source/plugins/screenshot/index.mjs

@@ -0,0 +1,42 @@
+//Setup
+  export default async function({login, q, imports, data, account}, {enabled = false} = {}) {
+    //Plugin execution
+      try {
+        //Check if plugin is enabled and requirements are met
+          if ((!enabled)||(!q.screenshot))
+            return null
+
+        //Load inputs
+          let {url, selector, title, background} = imports.metadata.plugins.screenshot.inputs({data, account, q})
+          if (!url)
+            throw {error:{message:"An url is required"}}
+
+        //Start puppeteer and navigate to page
+          console.debug(`metrics/compute/${login}/plugins > screenshot > starting browser`)
+          const browser = await imports.puppeteer.launch()
+          console.debug(`metrics/compute/${login}/plugins > screenshot > started ${await browser.version()}`)
+          const page = await browser.newPage()
+          await page.setViewport({width:600, height:600})
+          console.debug(`metrics/compute/${login}/plugins > screenshot > loading ${url}`)
+          await page.goto(url)
+
+        //Screenshot
+          await page.waitForSelector(selector)
+          const clip = await page.evaluate(selector => {
+            const {x, y, width, height} = document.querySelector(selector).getBoundingClientRect()
+            return {x, y, width, height}
+          }, selector)
+          const [buffer] = await imports.record({page, ...clip, frames:1, background})
+          const screenshot = await (await imports.jimp.read(Buffer.from(buffer.split(",").pop(), "base64"))).resize(454, imports.jimp.AUTO)
+          await browser.close()
+
+        //Results
+          return {image:await screenshot.getBase64Async("image/png"), title, height:screenshot.bitmap.height, width:screenshot.bitmap.width}
+      }
+    //Handle errors
+      catch (error) {
+        if (error.error?.message)
+          throw error
+        throw {title:"Screenshot error", error:{message:"An error occured", instance:error}}
+      }
+  }

source/plugins/screenshot/metadata.yml

@@ -0,0 +1,39 @@
+name: "📸 Website screenshot"
+cost: N/A
+categorie: other
+index: 2
+supports:
+  - user
+  - organization
+  - repository
+inputs:
+
+  # Enable or disable plugin
+  plugin_screenshot:
+    description: Display a screenshot of any website
+    type: boolean
+    default: no
+
+  # Screenshot title caption
+  plugin_screenshot_title:
+    description: Screenshot title caption
+    type: string
+    default: Screenshot
+
+  # Website to take screenshot
+  plugin_screenshot_url:
+    description: Website to take screenshot
+    type: string
+    default: ""
+
+  # Selector to take in screenshot
+  plugin_screenshot_selector:
+    description: Selector to take in screenshot
+    type: string
+    default: body
+
+  # Display or remove default page background
+  plugin_screenshot_background:
+    description: Display or remove default page background
+    type: boolean
+    default: yes

source/plugins/screenshot/tests.yml

@@ -0,0 +1,12 @@
+- name: Screenshot plugin (default)
+  uses: lowlighter/metrics@latest
+  with:
+    token: NOT_NEEDED
+    plugin_screenshot: yes
+    plugin_screenshot_url: https://github.com
+    plugin_screenshot_title: Test
+    plugin_screenshot_selector: body
+    plugin_screenshot_background: no
+  timeout: 1800000
+  modes:
+    - action

source/templates/classic/partials/_.json

@@ -26,5 +26,6 @@
   "skyline",
   "stackoverflow",
   "stock",
-  "achievements"
+  "achievements",
+  "screenshot"
 ]

source/templates/classic/partials/screenshot.ejs

@@ -0,0 +1,20 @@
+<% if (plugins.screenshot) { %>
+  <section>
+    <h2 class="field">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M15 3H7c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h14c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM6 5H2V4h4v1zm4.5 7C8.56 12 7 10.44 7 8.5S8.56 5 10.5 5 14 6.56 14 8.5 12.44 12 10.5 12zM13 8.5c0 1.38-1.13 2.5-2.5 2.5S8 9.87 8 8.5 9.13 6 10.5 6 13 7.13 13 8.5z"></path></svg>
+      <%= plugins.screenshot.title %>
+    </h2>
+    <div class="row">
+      <section class="row center">
+        <% if (plugins.screenshot.error) { %>
+          <div class="field error">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.343 13.657A8 8 0 1113.657 2.343 8 8 0 012.343 13.657zM6.03 4.97a.75.75 0 00-1.06 1.06L6.94 8 4.97 9.97a.75.75 0 101.06 1.06L8 9.06l1.97 1.97a.75.75 0 101.06-1.06L9.06 8l1.97-1.97a.75.75 0 10-1.06-1.06L8 6.94 6.03 4.97z"></path></svg>
+            <%= plugins.screenshot.error.message %>
+          </div>
+        <% } else { %>
+          <img class="screenshot autosize" src="<%= plugins.screenshot.image %>" height="<%= plugins.screenshot.height %>" width="<%= plugins.screenshot.width %>" alt=""/>
+        <% } %>
+      </section>
+    </div>
+  </section>
+<% } %>

source/templates/classic/style.css

@@ -932,6 +932,12 @@
     stroke: rgba(127, 127, 127, 0.4) !important;
   }
 
+/* Autosize */
+  .autosize {
+    width: auto;
+    height: auto;
+  }
+
 /* Fade animation */
   .af {
     opacity: 0;