Add tests and optimization/compression for rendered metrics

2020-10-13 14:00:48 +02:00
parent 1b738d11d2
commit 39404a9acf
10 changed files with 1055 additions and 32 deletions
--- a/src/app.mjs
+++ b/src/app.mjs
@@ -7,6 +7,7 @@
  import cache from "memory-cache"
  import ratelimit from "express-rate-limit"
  import metrics from "./metrics.mjs"
+  import compression from "compression"

 //Load svg template, style and query
  async function load() {
@@ -28,6 +29,7 @@

    //Setup server
      const app = express()
+      app.use(compression())
      const middlewares = []
    //Rate limiter middleware
      if (ratelimiter) {
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -5,9 +5,10 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A SVG image generator which includes activity, community and repositories metrics about your GitHub account that you can includes on your profile">
    <meta name="author" content="lowlighter">
+    <link rel="icon" href="data:,">
  </head>
  <body>
-    
+
    <h1><a href="https://github.com/lowlighter/metrics">GitHub metrics</a></h1>

    <label>
@@ -24,9 +25,11 @@
      <br>
      <div class="code">
        ![<span class="md-alt">GitHub metrics</span>](https://metrics.lecoq.io/my-github-user)
-      </div>  
+      </div>
+      <br>
+      And for even more metrics, setup this <a href="https://github.com/marketplace/actions/github-metrics-as-svg-image">GitHub action</a> on your repository !
    </aside>
-    
+
    <script>
      window.onload = function () {
        //User updater
@@ -40,11 +43,11 @@
              document.querySelector("#metrics .generated").style.opacity = 0
              document.querySelector("aside").style.opacity = 0
            //Update github user
-              document.querySelector(".code").innerText = `![GitHub metrics](https://metrics.lecoq.io/${user})`
+              document.querySelector(".code").innerHTML = `![<span class="md-alt">GitHub metrics</span>](https://metrics.lecoq.io/${user})`
              document.querySelector("#user-repo").href = `https://github.com/${user}/${user}`
              document.querySelectorAll(".user").forEach(node => node.innerText = user)
            //Update metrics
-              if (event.key === "Enter") 
+              if (event.key === "Enter")
                metrics(user)
              else
                timeout = setTimeout(() => metrics(user), 2000)
--- a/src/metrics.mjs
+++ b/src/metrics.mjs
@@ -1,5 +1,6 @@
 //Imports
  import imgb64 from "image-to-base64"
+  import SVGO from "svgo"
  import Plugins from "./plugins/index.mjs"

 //Setup
@@ -78,9 +79,19 @@
        //Wait for pending promises
          await Promise.all(pending)

-        //Eval rendering and return
+        //Eval rendering
          console.debug(`metrics/metrics/${login} > computed`)
-          return eval(`\`${template}\``)
+          const templated = eval(`\`${template}\``)
+          console.debug(`metrics/metrics/${login} > templated`)
+
+        //Optimize rendering
+          const svgo = new SVGO({plugins:[{cleanupAttrs:true}, {inlineStyles:false}]})
+          const {data:optimized} = await svgo.optimize(templated)
+          console.debug(`metrics/metrics/${login} > optimized`)
+
+        //Result
+          const rendered = optimized
+          return rendered
      }
    //Internal error
      catch (error) { throw (((Array.isArray(error.errors))&&(error.errors[0].type === "NOT_FOUND")) ? new Error("user not found") : error) }
--- a/src/plugins/traffic/index.mjs
+++ b/src/plugins/traffic/index.mjs
@@ -30,7 +30,7 @@
            computed.plugins.traffic = {views}
            console.debug(`metrics/plugins/traffic/${login} > ${JSON.stringify(computed.plugins.traffic)}`)
            solve()
-        } 
+        }
        catch (error) {
          //Thrown when token has unsufficient permissions
            if (error.status === 403) {
--- a/src/template.svg
+++ b/src/template.svg
@@ -255,7 +255,7 @@
            </div>
          </section>
        </div>
-      ` : ` 
+      ` : `
        <section>
          <div class="row fill-width">
            <section class="categories">