Fix svg height, add conversion options and options to use differents data from GitHub account (#35)

* Display all features on web instance but disable them when they're not enabled

* Resize dynamically SVG output and add support to convert images to jpeg/png

* Disable animations when computing height

* Add option to disable animations

* Add options to specify different data from used GitHub account

* Update tests

source/app/web/index.mjs

@@ -2,4 +2,4 @@
   import app from "./instance.mjs"
 
 //Start app
-  await app({mock:process.env.USE_MOCKED_DATA})
+  await app({mock:process.env.USE_MOCKED_DATA, nosettings:process.env.NO_SETTINGS})

source/app/web/instance.mjs

@@ -11,11 +11,12 @@
   import metrics from "../metrics.mjs"
 
 /** App */
-  export default async function ({mock = false} = {}) {
+  export default async function ({mock = false, nosettings = false} = {}) {
 
     //Load configuration settings
-      const {conf, Plugins, Templates} = await setup()
+      const {conf, Plugins, Templates} = await setup({nosettings})
       const {token, maxusers = 0, restricted = [], debug = false, cached = 30*60*1000, port = 3000, ratelimiter = null, plugins = null} = conf.settings
+      cache.placeholder = new Map()
 
     //Apply configuration mocking if needed
       if (mock) {
@@ -66,8 +67,8 @@
 
     //Base routes
       const limiter = ratelimit({max:debug ? Number.MAX_SAFE_INTEGER : 60, windowMs:60*1000})
-      const templates = [...new Set([conf.settings.templates.default, ...(conf.settings.templates.enabled.length ? Object.keys(Templates).filter(key => conf.settings.templates.enabled.includes(key)) : Object.keys(Templates))])]
-      const enabled = Object.entries(plugins).filter(([key, plugin]) => plugin.enabled).map(([key]) => key)
+      const templates =  Object.entries(Templates).map(([name]) => ({name, enabled:(conf.settings.templates.enabled.length ? conf.settings.templates.enabled.includes(name) : true) ?? false}))
+      const enabled = Object.entries(Plugins).map(([name]) => ({name, enabled:plugins[name].enabled ?? false}))
       const actions = {flush:new Map()}
       app.get("/", limiter, (req, res) => res.sendFile(`${conf.statics}/index.html`))
       app.get("/index.html", limiter, (req, res) => res.sendFile(`${conf.statics}/index.html`))
@@ -117,11 +118,20 @@
             return res.sendStatus(403)
           }
         //Read cached data if possible
-          if ((!debug)&&(cached)&&(cache.get(login))) {
-            res.header("Content-Type", "image/svg+xml")
-            res.send(cache.get(login))
-            return
-          }
+          //Placeholder
+            if ((login === "placeholder")&&(cache.placeholder.has(Object.keys(req.query).sort().join("-")))) {
+              const {rendered, mime} = cache.placeholder.get(Object.keys(req.query).sort().join("-"))
+              res.header("Content-Type", mime)
+              res.send(rendered)
+              return
+            }
+          //User cached
+            if ((!debug)&&(cached)&&(cache.get(login))) {
+              const {rendered, mime} = cache.get(login)
+              res.header("Content-Type", mime)
+              res.send(rendered)
+              return
+            }
         //Maximum simultaneous users
           if ((maxusers)&&(cache.size()+1 > maxusers)) {
             console.debug(`metrics/app/${login} > 503 (maximum users reached)`)
@@ -133,12 +143,19 @@
             //Render
               console.debug(`metrics/app/${login} > ${util.inspect(req.query, {depth:Infinity, maxStringLength:256})}`)
               const q = parse(req.query)
-              const rendered = await metrics({login, q}, {graphql, rest, plugins, conf, die:q["plugins.errors.fatal"] ?? false, verify:q["verify"] ?? false}, {Plugins, Templates})
+              const {rendered, mime} = await metrics({login, q}, {
+                graphql, rest, plugins, conf,
+                die:q["plugins.errors.fatal"] ?? false,
+                verify:q["verify"] ?? false,
+                convert:["jpeg", "png"].includes(q["config.output"]) ? q["config.output"] : null
+              }, {Plugins, Templates})
             //Cache
-              if ((!debug)&&(cached)&&(login !== "placeholder"))
-                cache.put(login, rendered, cached)
+              if (login === "placeholder")
+                cache.placeholder.set(Object.keys(req.query).sort().join("-"), rendered)
+              if ((!debug)&&(cached))
+                cache.put(login, {rendered, mime}, cached)
             //Send response
-              res.header("Content-Type", "image/svg+xml")
+              res.header("Content-Type", mime)
               res.send(rendered)
           }
         //Internal error
@@ -167,7 +184,7 @@
         `Cached time            │ ${cached} seconds`,
         `Rate limiter           │ ${ratelimiter ? util.inspect(ratelimiter, {depth:Infinity, maxStringLength:256}) : "(enabled)"}`,
         `Max simultaneous users │ ${maxusers ? `${maxusers} users` : "(unrestricted)"}`,
-        `Plugins enabled        │ ${enabled.join(", ")}`,
+        `Plugins enabled        │ ${enabled.map(({name}) => name).join(", ")}`,
         `Server ready !`
       ].join("\n")))
   }

source/app/web/statics/app.js

@@ -75,7 +75,7 @@
           },
           templates:{
             list:templates,
-            selected:url.get("template") || templates[0],
+            selected:url.get("template") || templates[0].name,
             loaded:{},
             placeholder:"",
             descriptions:{

source/app/web/statics/index.html

@@ -28,9 +28,9 @@
             <div class="step">
               <h2>2. Select a template</h2>
               <div class="templates">
-                <label v-for="template in templates.list" :key="template" v-show="templates.descriptions[template] !== '(hidden)'">
-                  <input type="radio" v-model="templates.selected" :value="template" @change="load" :disabled="generated.pending">
-                  {{ templates.descriptions[template] || template }}
+                <label v-for="template in templates.list" :key="template" v-show="templates.descriptions[template.name] !== '(hidden)'" :class="{'not-available':!template.enabled}" :title="!template.enabled ? 'This template is not enabled on web instance, use it with GitHub actions !' : ''">
+                  <input type="radio" v-model="templates.selected" :value="template.name" @change="load" :disabled="generated.pending">
+                  {{ templates.descriptions[template.name] || template.name }}
                 </label>
               </div>
               <template v-if="plugins.base.length">
@@ -45,12 +45,11 @@
               <template v-if="plugins.list.length">
                 <h3>2.2 Enable additional plugins</h3>
                 <div class="plugins">
-                  <label v-for="plugin in plugins.list" :key="plugin">
-                    <input type="checkbox" v-model="plugins.enabled[plugin]" @change="load" :disabled="generated.pending">
-                    {{ plugins.descriptions[plugin] || plugin }}
+                  <label v-for="plugin in plugins.list" :key="plugin" :class="{'not-available':!plugin.enabled}" :title="!plugin.enabled ? 'This plugin is not enabled on web instance, use it with GitHub actions !' : ''">
+                    <input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="load" :disabled="(!plugin.enabled)||(generated.pending)">
+                    {{ plugins.descriptions[plugin.name] || plugin.name }}
                   </label>
                 </div>
-                <i>*Additional plugins may be available when used as GitHub Action</i>
                 <template v-if="(plugins.enabled.tweets)||(plugins.enabled.music)||(plugins.enabled.pagespeed)||(plugins.enabled.languages)||(plugins.enabled.habits)||(plugins.enabled.posts)||(plugins.enabled.isocalendar)||(plugins.enabled.projects)||(plugins.enabled.topics)">
                   <h3>2.3 Configure additional plugins</h3>
                   <div class="options">
@@ -58,59 +57,59 @@
                       <h4>{{ plugins.descriptions.tweets }}</h4>
                       <label>
                         Number of tweets to display
-                        <input type="number" v-model="plugins.options['tweets.limit']" min="1" max="10" @change="load">
+                        <input type="number" v-model="plugins.options['tweets.limit']" min="1" max="10" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                     <div class="options-group" v-if="plugins.enabled.music">
                       <h4>{{ plugins.descriptions.music }}</h4>
                       <label>
                         Playlist embed link
-                        <input type="text" v-model="plugins.options['music.playlist']" placeholder="https://embed.music.apple.com/en/playlist/">
+                        <input type="text" v-model="plugins.options['music.playlist']" placeholder="https://embed.music.apple.com/en/playlist/" :disabled="generated.pending">
                       </label>
                       <label>
                         Number of tracks to display
-                        <input type="number" v-model="plugins.options['music.limit']" min="1" @change="load">
+                        <input type="number" v-model="plugins.options['music.limit']" min="1" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                     <div class="options-group" v-if="plugins.enabled.pagespeed">
                       <h4>{{ plugins.descriptions.pagespeed }}</h4>
                       <label>
                         Detailed PageSpeed report
-                        <input type="checkbox" v-model="plugins.options['pagespeed.detailed']" @change="load">
+                        <input type="checkbox" v-model="plugins.options['pagespeed.detailed']" @change="load" :disabled="generated.pending">
                       </label>
                       <label>
                         Include a website screenshot
-                        <input type="checkbox" v-model="plugins.options['pagespeed.screenshot']" @change="load">
+                        <input type="checkbox" v-model="plugins.options['pagespeed.screenshot']" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                     <div class="options-group" v-if="plugins.enabled.languages">
                       <h4>{{ plugins.descriptions.languages }}</h4>
                       <label>
                         Ignored languages (comma separated)
-                        <input type="text" v-model="plugins.options['languages.ignored']" @change="load">
+                        <input type="text" v-model="plugins.options['languages.ignored']" @change="load" :disabled="generated.pending">
                       </label>
                       <label>
                         Skipped repositories (comma separated)
-                        <input type="text" v-model="plugins.options['languages.skipped']" @change="load">
+                        <input type="text" v-model="plugins.options['languages.skipped']" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                     <div class="options-group" v-if="plugins.enabled.habits">
                       <h4>{{ plugins.descriptions.habits }}</h4>
                       <label>
                         Number of events for habits
-                        <input type="number" v-model="plugins.options['habits.from']" min="1" max="1000">
+                        <input type="number" v-model="plugins.options['habits.from']" min="1" max="1000" :disabled="generated.pending">
                       </label>
                       <label>
                         Number of days for habits
-                        <input type="number" v-model="plugins.options['habits.days']" min="1" max="30">
+                        <input type="number" v-model="plugins.options['habits.days']" min="1" max="30" :disabled="generated.pending">
                       </label>
                       <label>
                         Display tidbits
-                        <input type="checkbox" v-model="plugins.options['habits.facts']" @change="load">
+                        <input type="checkbox" v-model="plugins.options['habits.facts']" @change="load" :disabled="generated.pending">
                       </label>
                       <label>
                         Display activity charts
-                        <input type="checkbox" v-model="plugins.options['habits.charts']" @change="load">
+                        <input type="checkbox" v-model="plugins.options['habits.charts']" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                     <div class="options-group" v-if="plugins.enabled.posts">
@@ -123,14 +122,14 @@
                       </label>
                       <label>
                         Number of posts to display
-                        <input type="number" v-model="plugins.options['posts.limit']" min="1" @change="load">
+                        <input type="number" v-model="plugins.options['posts.limit']" min="1" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                     <div class="options-group" v-if="plugins.enabled.isocalendar">
                       <h4>{{ plugins.descriptions.isocalendar }}</h4>
                       <label>
                         Isocalendar duration
-                        <select v-model="plugins.options['isocalendar.duration']">
+                        <select v-model="plugins.options['isocalendar.duration']" :disabled="generated.pending">
                           <option value="half-year">Half year</option>
                           <option value="full-year">Full year</option>
                         </select>
@@ -140,14 +139,14 @@
                       <h4>{{ plugins.descriptions.topics }}</h4>
                       <label>
                         Topics display mode
-                        <select v-model="plugins.options['topics.mode']" @change="load">
+                        <select v-model="plugins.options['topics.mode']" @change="load" :disabled="generated.pending">
                           <option value="starred">Starred topics</option>
                           <option value="mastered">Known and mastered technologies</option>
                         </select>
                       </label>
                       <label>
                         Topics sorting
-                        <select v-model="plugins.options['topics.sort']">
+                        <select v-model="plugins.options['topics.sort']" :disabled="generated.pending">
                           <option value="starred">Recently starred by you</option>
                           <option value="stars">Most stars</option>
                           <option value="activity">Recent actity</option>
@@ -156,18 +155,18 @@
                       </label>
                       <label>
                         Number of topics to display
-                        <input type="number" v-model="plugins.options['topics.limit']" @change="load">
+                        <input type="number" v-model="plugins.options['topics.limit']" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                     <div class="options-group" v-if="plugins.enabled.projects">
                       <h4>{{ plugins.descriptions.projects }}</h4>
                       <label>
                         Number of projects to display
-                        <input type="number" v-model="plugins.options['projects.limit']" min="1" max="100" @change="load">
+                        <input type="number" v-model="plugins.options['projects.limit']" min="1" max="100" @change="load" :disabled="generated.pending">
                       </label>
                       <label>
                         Repositories projects to display (comma separated)
-                        <input type="text" v-model="plugins.options['projects.repositories']" @change="load">
+                        <input type="text" v-model="plugins.options['projects.repositories']" @change="load" :disabled="generated.pending">
                       </label>
                     </div>
                   </div>

source/app/web/statics/style.css

@@ -82,6 +82,9 @@
     transition: background-color .4s;
     cursor: pointer;
   }
+  .not-available {
+    opacity: .3;
+  }
 /* Generator */
   .generator {
     display: flex;