feat(app/web): bypass metrics.api.github.overuse with OAuth (#1171)

source/app/metrics/metadata.mjs

@@ -104,6 +104,9 @@ metadata.plugin = async function({__plugins, __templates, name, logger}) {
     if ((meta.category === "github") && (!meta.disclaimer))
       meta.disclaimer = "This plugin is not affiliated, associated, authorized, endorsed by, or in any way officially connected with [GitHub](https://github.com).\nAll product and company names are trademarks™ or registered® trademarks of their respective holders."
 
+    //Deprecation
+    meta.deprecated = !!meta?.deprecation
+
     //Inputs parser
     {
       meta.inputs = function({data: {user = null} = {}, q, account}, defaults = {}) {
@@ -345,30 +348,30 @@ metadata.plugin = async function({__plugins, __templates, name, logger}) {
     //Web metadata
     {
       meta.web = Object.fromEntries(
-        Object.entries(inputs).map(([key, {type, description: text, example, default: defaulted, min = 0, max = 9999, values}]) => [
+        Object.entries(inputs).map(([key, {type, description: text, example, default: defaulted, min = 0, max = 9999, values, extras}]) => [
           //Format key
           metadata.to.query(key),
           //Value descriptor
           (() => {
             switch (type) {
               case "boolean":
-                return {text, type: "boolean", defaulted: /^(?:[Tt]rue|[Oo]n|[Yy]es|1)$/.test(defaulted) ? true : /^(?:[Ff]alse|[Oo]ff|[Nn]o|0)$/.test(defaulted) ? false : defaulted}
+                return {text, type: "boolean", defaulted: /^(?:[Tt]rue|[Oo]n|[Yy]es|1)$/.test(defaulted) ? true : /^(?:[Ff]alse|[Oo]ff|[Nn]o|0)$/.test(defaulted) ? false : defaulted, extras}
               case "number":
-                return {text, type: "number", min, max, defaulted}
+                return {text, type: "number", min, max, defaulted, extras}
               case "array":
-                return {text, type: "text", placeholder: example ?? defaulted, defaulted}
+                return {text, type: "text", placeholder: example ?? defaulted, defaulted, extras}
               case "string": {
                 if (Array.isArray(values))
                   return {text, type: "select", values, defaulted}
-                return {text, type: "text", placeholder: example ?? defaulted, defaulted}
+                return {text, type: "text", placeholder: example ?? defaulted, defaulted, extras}
               }
               case "json":
-                return {text, type: "text", placeholder: example ?? defaulted, defaulted}
+                return {text, type: "text", placeholder: example ?? defaulted, defaulted, extras}
               default:
                 return null
             }
           })(),
-        ]).filter(([key, value]) => (value) && (key !== name)),
+        ]).filter(([key, value]) => (value)&&(!((name === "base")&&(key === "repositories")))),
       )
     }
 

source/app/web/instance.mjs

@@ -6,10 +6,13 @@ import express from "express"
 import ratelimit from "express-rate-limit"
 import cache from "memory-cache"
 import util from "util"
+import url from "url"
+import axios from "axios"
 import mocks from "../../../tests/mocks/index.mjs"
 import metrics from "../metrics/index.mjs"
 import presets from "../metrics/presets.mjs"
 import setup from "../metrics/setup.mjs"
+import crypto from "crypto"
 
 /**App */
 export default async function({sandbox = false} = {}) {
@@ -55,7 +58,20 @@ export default async function({sandbox = false} = {}) {
   //Apply mocking if needed
   if (mock)
     Object.assign(api, await mocks(api))
-  const {graphql, rest} = api
+  //Custom user octokits sessions
+  const authenticated = new Map()
+  const uapi = session => {
+    if (!/^[a-f0-9]+$/i.test(`${session}`))
+      return null
+    if (authenticated.has(session)) {
+      const {login, token} = authenticated.get(session)
+      console.debug(`metrics/app/session/${login} > authenticated with session ${session.substring(0, 6)}, using custom octokit`)
+      return {login, graphql: octokit.graphql.defaults({headers: {authorization: `token ${token}`}}), rest: new OctokitRest.Octokit({auth: token})}
+    }
+    else if (session)
+      console.debug(`metrics/app/session > unknown session ${session.substring(0, 6)}, using default octokit`)
+    return null
+  }
 
   //Setup server
   const app = express()
@@ -87,22 +103,19 @@ export default async function({sandbox = false} = {}) {
   const limiter = ratelimit({max: debug ? Number.MAX_SAFE_INTEGER : 60, windowMs: 60 * 1000, headers: false})
   const metadata = Object.fromEntries(
     Object.entries(conf.metadata.plugins)
-      .map(([key, value]) => [key, Object.fromEntries(Object.entries(value).filter(([key]) => ["name", "icon", "category", "web", "supports", "scopes"].includes(key)))])
+      .map(([key, value]) => [key, Object.fromEntries(Object.entries(value).filter(([key]) => ["name", "icon", "category", "web", "supports", "scopes", "deprecated"].includes(key)))])
       .map(([key, value]) => [key, key === "core" ? {...value, web: Object.fromEntries(Object.entries(value.web).filter(([key]) => /^config[.]/.test(key)).map(([key, value]) => [key.replace(/^config[.]/, ""), value]))} : value]),
   )
-  const enabled = Object.entries(metadata).filter(([_name, {category}]) => category !== "core").map(([name]) => ({name, category: metadata[name]?.category ?? "community", enabled: plugins[name]?.enabled ?? false}))
+  const enabled = Object.entries(metadata).filter(([_name, {category}]) => category !== "core").map(([name]) => ({name, category: metadata[name]?.category ?? "community", deprecated: metadata[name]?.deprecated ?? false, enabled: plugins[name]?.enabled ?? false}))
   const templates = Object.entries(Templates).map(([name]) => ({name, enabled: (conf.settings.templates.enabled.length ? conf.settings.templates.enabled.includes(name) : true) ?? false}))
   const actions = {flush: new Map()}
-  const requests = {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}}
+  const requests = {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}, search: {limit: 0, used: 0, remaining: 0, reset: NaN}}
   let _requests_refresh = false
   if (!conf.settings.notoken) {
     const refresh = async () => {
       try {
-        const {limit} = await graphql("{ limit:rateLimit {limit remaining reset:resetAt used} }")
+        const {resources} = (await api.rest.rateLimit.get()).data
-        Object.assign(requests, {
+        Object.assign(requests, {rest: resources.core, graphql: resources.graphql, search: resources.search})
-          rest: (await rest.rateLimit.get()).data.rate,
-          graphql: {...limit, reset: new Date(limit.reset).getTime()},
-        })
       }
       catch {
         console.debug("metrics/app > failed to update remaining requests")
@@ -130,8 +143,16 @@ export default async function({sandbox = false} = {}) {
   app.get("/.templates/:template", limiter, (req, res) => req.params.template in conf.templates ? res.status(200).json(conf.templates[req.params.template]) : res.sendStatus(404))
   for (const template in conf.templates)
     app.use(`/.templates/${template}/partials`, express.static(`${conf.paths.templates}/${template}/partials`))
-  //Modes
+  //Modes and extras
   app.get("/.modes", limiter, (req, res) => res.status(200).json(conf.settings.modes))
+  app.get("/.extras", limiter, async (req, res) => {
+    if ((authenticated.has(req.headers["x-metrics-session"]))&&(conf.settings.extras?.logged)) {
+      if (conf.settings.extras?.features !== true)
+        return res.status(200).json([...conf.settings.extras.features, ...conf.settings.extras.logged])
+    }
+    res.status(200).json(conf.settings.extras?.features ?? conf.settings?.extras?.default ?? false)
+  })
+  app.get("/.extras.logged", limiter, async (req, res) => res.status(200).json(conf.settings.extras?.logged ?? []))
   //Styles
   app.get("/.css/style.css", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/style.css`))
   app.get("/.css/style.vars.css", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/style.vars.css`))
@@ -152,7 +173,18 @@ export default async function({sandbox = false} = {}) {
   app.get("/.js/clipboard.min.js", limiter, (req, res) => res.sendFile(`${conf.paths.node_modules}/clipboard/dist/clipboard.min.js`))
   //Meta
   app.get("/.version", limiter, (req, res) => res.status(200).send(conf.package.version))
-  app.get("/.requests", limiter, (req, res) => res.status(200).json(requests))
+  app.get("/.requests", limiter, async (req, res) => {
+    try {
+      const custom = uapi(req.headers["x-metrics-session"])
+      if (custom) {
+        const {data:{resources}} = await custom.rest.rateLimit.get()
+        if (resources)
+          return res.status(200).json({rest:resources.core, graphql:resources.graphql, search:resources.search, login:custom.login})
+      }
+    }
+    catch {} //eslint-disable-line no-empty
+    return res.status(200).json(requests)
+  })
   app.get("/.hosted", limiter, (req, res) => res.status(200).json(conf.settings.hosted || null))
   //Cache
   app.get("/.uncache", limiter, (req, res) => {
@@ -172,6 +204,84 @@ export default async function({sandbox = false} = {}) {
     }
   })
 
+  //OAuth
+  if (conf.settings.oauth) {
+    console.debug("metrics/app/oauth > enabled")
+    const states = new Map()
+    app.get("/.oauth/", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/oauth/index.html`))
+    app.get("/.oauth/index.html", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/oauth/index.html`))
+    app.get("/.oauth/script.js", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/oauth/script.js`))
+    app.get("/.oauth/authenticate", (req, res) => {
+      //Create a state to protect against cross-site request forgery attacks
+      const state = crypto.randomBytes(64).toString("hex")
+      const scopes = new url.URLSearchParams(req.query).get("scopes")
+      const from = new url.URLSearchParams(req.query).get("scopes")
+      states.set(state, {from, scopes})
+      console.debug(`metrics/app/oauth > request ${state}`)
+      //OAuth through GitHub
+      return res.redirect(`https://github.com/login/oauth/authorize?${new url.URLSearchParams({
+        client_id:conf.settings.oauth.id,
+        state,
+        redirect_uri:`${conf.settings.oauth.url}/.oauth/authorize`,
+        allow_signup:false,
+        scope:scopes,
+      })}`)
+    })
+    app.get("/.oauth/authorize", async (req, res) => {
+      //Check state
+      const {code, state} = req.query
+      if ((!state)||(!states.has(state))) {
+        console.debug("metrics/app/oauth > 400 (invalid state)")
+        return res.status(400).send("Bad request: invalid state")
+      }
+      //OAuth
+      try {
+        //Authorize user
+        console.debug("metrics/app/oauth > authorization")
+        const {data} = await axios.post("https://github.com/login/oauth/access_token", `${new url.URLSearchParams({
+          client_id:conf.settings.oauth.id,
+          client_secret:conf.settings.oauth.secret,
+          code,
+        })}`)
+        const token = new url.URLSearchParams(data).get("access_token")
+        //Validate user
+        const {data:{login}} = await axios.get("https://api.github.com/user", {headers:{Authorization:`token ${token}`}})
+        console.debug(`metrics/app/oauth > authorization success for ${login}`)
+        const session = crypto.randomBytes(128).toString("hex")
+        authenticated.set(session, {login, token})
+        console.debug(`metrics/app/oauth > created session ${session.substring(0, 6)}`)
+        //Redirect user back
+        const {from} = states.get(state)
+        return res.redirect(`/.oauth/redirect?${new url.URLSearchParams({to:from, session})}`)
+      }
+      catch {
+        console.debug("metrics/app/oauth > authorization failed")
+        return res.status(401).send("Unauthorized: oauth failed")
+      }
+      finally {
+        states.delete(state)
+      }
+    })
+    app.get("/.oauth/revoke/:session", limiter, async (req, res) => {
+      const session = req.params.session?.replace(/[\n\r]/g, "")
+      if (authenticated.has(session)) {
+        const {token} = authenticated.get(session)
+        try {
+          console.log(await axios.delete(`https://api.github.com/applications/${conf.settings.oauth.id}/grant`, {auth:{username:conf.settings.oauth.id, password:conf.settings.oauth.secret}, headers:{Accept:"application/vnd.github+json"}, data:{access_token:token}}))
+          authenticated.delete(session)
+          console.debug(`metrics/app/oauth > deleted session ${session.substring(0, 6)}`)
+          return res.redirect("/.oauth")
+        }
+        catch {} //eslint-disable-line no-empty
+      }
+      return res.status(400).send("Bad request: invalid session")
+    })
+    app.get("/.oauth/redirect", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/oauth/redirect.html`))
+    app.get("/.oauth/enabled", limiter, (req, res) => res.json(true))
+  }
+  else
+    app.get("/.oauth/enabled", limiter, (req, res) => res.json(false))
+
   //Pending requests
   const pending = new Map()
 
@@ -236,7 +346,7 @@ export default async function({sandbox = false} = {}) {
         }
         ;(async () => {
           try {
-            const json = await metrics.insights({login}, {graphql, rest, conf, callbacks}, {Plugins, Templates})
+            const json = await metrics.insights({login}, {...api, ...uapi(req.headers["x-metrics-session"]), conf, callbacks}, {Plugins, Templates})
             //Cache
             cache.put(`insights.${login}`, json)
             if ((!debug) && (cached)) {
@@ -289,12 +399,14 @@ export default async function({sandbox = false} = {}) {
     app.get("/.js/embed/app.js", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/embed/app.js`))
     app.get("/.js/embed/app.placeholder.js", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/embed/app.placeholder.js`))
     //App routes
-    app.get("/:login/:repository?", ...middlewares, async (req, res) => {
+    app.get("/:login/:repository?", ...middlewares, async (req, res, next) => {
       //Request params
       const login = req.params.login?.replace(/[\n\r]/g, "")
       const repository = req.params.repository?.replace(/[\n\r]/g, "")
       let solve = null
       //Check username
+      if ((login.startsWith("."))||(login.includes("/")))
+        return next()
       if (!/^[-\w]+$/i.test(login)) {
         console.debug(`metrics/app/${login} > 400 (invalid username)`)
         return res.status(400).send("Bad request: username seems invalid")
@@ -335,19 +447,28 @@ export default async function({sandbox = false} = {}) {
 
       //Compute rendering
       try {
-        //Render
+        //Prepare settings
         const q = req.query
         console.debug(`metrics/app/${login} > ${util.inspect(q, {depth: Infinity, maxStringLength: 256})}`)
-        if ((q["config.presets"]) && ((conf.settings.extras?.features?.includes("metrics.setup.community.presets")) || (conf.settings.extras?.features === true) || (conf.settings.extras?.default))) {
+        const octokit = {...api, ...uapi(req.headers["x-metrics-session"])}
+        let uconf = conf
+        if ((octokit.login)&&(conf.settings.extras?.logged)&&(uconf.settings.extras?.features !== true)) {
+          console.debug(`metrics/app/${login} > session is authenticated, adding additional permissions ${conf.settings.extras.logged}`)
+          uconf = {...conf, settings:{...conf.settings, extras:{...conf.settings.extras}}}
+          uconf.settings.extras.features = uconf.settings.extras.features ?? []
+          uconf.settings.extras.features.push(...conf.settings.extras.logged)
+        }
+        //Preset
+        if ((q["config.presets"]) && ((uconf.settings.extras?.features?.includes("metrics.setup.community.presets")) || (uconf.settings.extras?.features === true) || (uconf.settings.extras?.default))) {
           console.debug(`metrics/app/${login} > presets have been specified, loading them`)
           Object.assign(q, await presets(q["config.presets"]))
         }
-        const convert = conf.settings.outputs.includes(q["config.output"]) ? q["config.output"] : conf.settings.outputs[0]
+        //Render
+        const convert = uconf.settings.outputs.includes(q["config.output"]) ? q["config.output"] : uconf.settings.outputs[0]
         const {rendered, mime} = await metrics({login, q}, {
-          graphql,
+          ...octokit,
-          rest,
           plugins,
-          conf,
+          conf:uconf,
           die: q["plugins.errors.fatal"] ?? false,
           verify: q.verify ?? false,
           convert: convert !== "auto" ? convert : null,
@@ -441,9 +562,11 @@ export default async function({sandbox = false} = {}) {
       "── Content ────────────────────────────────────────────────────────",
       `Plugins enabled           │ ${enabled.map(({name}) => name).join(", ")}`,
       `Templates enabled         │ ${templates.filter(({enabled}) => enabled).map(({name}) => name).join(", ")}`,
+      "── OAuth ──────────────────────────────────────────────────────────",
+      `Client id                 │ ${conf.settings.oauth?.id ?? "(none)"}`,
       "── Extras ─────────────────────────────────────────────────────────",
       `Default                   │ ${conf.settings.extras?.default ?? false}`,
-      `Features                  │ ${conf.settings.extras?.features ?? "(none)"}`,
+      `Features                  │ ${Array.isArray(conf.settings.extras?.features) ? conf.settings.extras.features?.length ? conf.settings.extras?.features : "(none)" : "(default)"}`,
       "───────────────────────────────────────────────────────────────────",
       "Server ready !",
     ].join("\n")))

source/app/web/settings.example.json

@@ -20,6 +20,11 @@
     "by": "",                           "//": "Web instance host (displayed in footer)",
     "link": "",                         "//": "Web instance host link (displayed in footer)"
   },
+  "oauth":{
+    "id": null,                         "//": "GitHub OAUTH client id",
+    "secret": null,                     "//": "GitHub OAUTH client secret",
+    "url":"https://example.com",        "//": "GitHub OAUTH callback url (must be the same as the web instance host)"
+  },
   "control":{
     "token": null,                      "//": "Control token (can be used by external services to perform actions on instance, such as stopping it for redeploys)"
   },
@@ -32,7 +37,6 @@
   },
   "extras": {
     "default": false,                   "//": "Default extras state (advised to let 'false' unless in debug mode)",
-    "presets": false,                   "//": "Allow use of 'config.presets' option",
     "features": false,                  "//": "Enable extra features (advised to let 'false' on web instances), see below for supported features",
                                         "//": "________________________________________________________________________",
                                         "//": "metrics.setup.community.templates | Allow community templates download",
@@ -47,7 +51,12 @@
                                         "//": "metrics.run.puppeteer.scrapping   | Allow to run puppeteer to scrape data",
                                         "//": "metrics.run.puppeteer.user.css    | Allow to run CSS by user during puppeteer render",
                                         "//": "metrics.run.puppeteer.user.js     | Allow to run JavaScript by user during puppeteer render",
-                                        "//": "metrics.npm.optional.*            | Allow use of specified dependency"
+                                        "//": "metrics.npm.optional.*            | Allow use of specified dependency",
+                                        "//": "________________________________________________________________________",
+                                        "//": "Additional extra features when user is logged with GitHub",
+    "logged": [
+      "metrics.api.github.overuse"
+    ]
   },
   "plugins.default": false,             "//": "Default plugin state (advised to let 'false' unless in debug mode)",
   "plugins": {                          "//": "Global plugin configuration",

source/app/web/statics/app.js

@@ -7,6 +7,8 @@
       //Interpolate config from browser
       try {
         this.palette = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+        if (localStorage.getItem("session.metrics"))
+          axios.defaults.headers.common["x-metrics-session"] = localStorage.getItem("session.metrics")
       }
       catch (error) {}
       //Init
@@ -31,6 +33,11 @@
           const {data: modes} = await axios.get("/.modes")
           this.modes = modes
         })(),
+        //OAuth
+        (async () => {
+          const {data: enabled} = await axios.get("/.oauth/enabled")
+          this.oauth = enabled
+        })(),
       ])
     },
     //Watchers
@@ -49,12 +56,17 @@
       user1: "",
       user2: "",
       palette: "light",
-      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}},
+      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}, search: {limit: 0, used: 0, remaining: 0, reset: NaN}},
       hosted: null,
       modes: [],
+      oauth: false,
     },
     //Computed data
     computed: {
+      //URL parameters
+      params() {
+        return new URLSearchParams({from:location.href})
+      },
       //Is in preview mode
       preview() {
         return /-preview$/.test(this.version)

source/app/web/statics/embed/app.js

@@ -12,6 +12,8 @@
       try {
         this.config.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
         this.palette = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+        if (localStorage.getItem("session.metrics"))
+          axios.defaults.headers.common["x-metrics-session"] = localStorage.getItem("session.metrics")
       }
       catch (error) {}
       //Init
@@ -41,6 +43,11 @@
           this.plugins.base = base
           this.plugins.enabled.base = Object.fromEntries(base.map(key => [key, true]))
         })(),
+        //Extras
+        (async () => {
+          const {data: extras} = await axios.get("/.extras")
+          this.extras = extras
+        })(),
         //Version
         (async () => {
           const {data: version} = await axios.get("/.version")
@@ -51,6 +58,11 @@
           const {data: hosted} = await axios.get("/.hosted")
           this.hosted = hosted
         })(),
+        //OAuth
+        (async () => {
+          const {data: enabled} = await axios.get("/.oauth/enabled")
+          this.oauth = enabled
+        })(),
       ])
       //Generate placeholder
       this.mock({timeout: 200})
@@ -89,11 +101,13 @@
       tab: "overview",
       palette: "light",
       clipboard: null,
-      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}},
+      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}, search: {limit: 0, used: 0, remaining: 0, reset: NaN}},
       cached: new Map(),
       config: Object.fromEntries(Object.entries(metadata.core.web).map(([key, {defaulted}]) => [key, defaulted])),
       metadata: Object.fromEntries(Object.entries(metadata).map(([key, {web}]) => [key, web])),
       hosted: null,
+      extras: false,
+      oauth: false,
       docs: {
         overview: {
           link: "https://github.com/lowlighter/metrics#-documentation",
@@ -154,9 +168,19 @@
     },
     //Computed data
     computed: {
+      //URL parameters
+      params() {
+        return new URLSearchParams({from:location.href})
+      },
       //Unusable plugins
       unusable() {
-        return this.plugins.list.filter(({name}) => this.plugins.enabled[name]).filter(({enabled}) => !enabled).map(({name}) => name)
+        const plugins = Object.entries(this.plugins.enabled).filter(([key, value]) => (value == true)&&(!this.supports(this.plugins.options.descriptions[key]))).map(([key]) => key)
+        const options = this.edited.filter(option => !this.supports(this.plugins.options.descriptions[option]))
+        return [...plugins, ...options].sort()
+      },
+      //Edited plugins options
+      edited() {
+        return Object.keys(this.plugins.enabled).flatMap(plugin => Object.keys(this.options({name:plugin})).filter(key => this.plugins.options[key] !== metadata[plugin]?.web[key]?.defaulted))
       },
       //User's avatar
       avatar() {
@@ -246,19 +270,6 @@
           ].sort(),
         ].join("\n")
       },
-      //Configurable plugins
-      configure() {
-        //Check enabled plugins
-        const enabled = Object.entries(this.plugins.enabled).filter(([key, value]) => (value) && (key !== "base")).map(([key, value]) => key)
-        const filter = new RegExp(`^(?:${enabled.join("|")})[.]`)
-        //Search related options
-        const entries = Object.entries(this.plugins.options.descriptions).filter(([key, value]) => (filter.test(key)) && (!(key in metadata.base.web)))
-        entries.push(...enabled.map(key => [key, this.plugins.descriptions[key]]))
-        entries.sort((a, b) => a[0].localeCompare(b[0]))
-        //Return object
-        const configure = Object.fromEntries(entries)
-        return Object.keys(configure).length ? configure : null
-      },
       //Is in preview mode
       preview() {
         return /-preview$/.test(this.version)
@@ -327,6 +338,21 @@
           catch {}
         }
       },
+      //Get available options from plugin
+      options({name}) {
+        return Object.fromEntries(Object.entries(this.plugins.options.descriptions).filter(([key]) => ((key.startsWith(`${name}.`))||(key === name)) && (!(key in metadata.base.web))))
+      },
+      //Check if option is supported
+      supports(option) {
+        if (!option)
+          return false
+        const {extras:required = null} = option
+        if (!Array.isArray(required))
+          return true
+        if (!Array.isArray(this.extras))
+          return this.extras
+        return required.filter(permission => !this.extras.includes(permission)).length === 0
+      }
     },
   })
 })()

source/app/web/statics/embed/index.html

@@ -20,6 +20,16 @@
         <header :class="{beta}">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
           <a href="/">Metrics Embed {{ version }}</a>
+          <div class="grow"></div>
+          <a class="oauth-github" :href="`/.oauth?${params}`" v-if="oauth">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+            <template v-if="requests.login">
+              Signed in as {{ requests.login }}
+            </template>
+            <template v-else>
+              Sign in with GitHub
+            </template>
+          </a>
         </header>
 
         <div class="ui top">
@@ -55,54 +65,73 @@
                 Generate your metrics!
               </template>
             </button>
-            <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests:</small>
+            <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests<span v-if="requests.login"> for {{ requests.login }}</span>:</small>
-            <small>{{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL</small>
+            <small>{{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL / {{ requests.search.remaining }} search</small>
             <small class="warning" v-if="preview">
               Metrics are rendered by <a href="https://metrics.lecoq.io/">metrics.lecoq.io</a> in preview mode.
               Any backend editions won't be reflected but client-side rendering can still be tested.
             </small>
             <div class="warning" v-if="unusable.length">
-              The following plugins are not available on this web instance: {{ unusable.join(", ") }}
+              The following plugins options are not available on this web instance: {{ unusable.join(", ") }}
             </div>
             <div class="warning" v-if="(!requests.rest.remaining)||(!requests.graphql.remaining)">
               This web instance has run out of GitHub API requests.
               Please wait until {{ rlreset }} to generate metrics again.
             </div>
 
-            <div class="configuration">
+            <div class="category">
-              <b>🖼️ Template</b>
+              <div class="configuration plugins" v-if="plugins.base.length">
+                <label>
+                  <input type="checkbox" checked disabled>
+                  <div class="name">🖼️ Template</div>
+                </label>
+                <div class="options">
                   <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 this web instance, use GitHub actions instead!' : ''">
                     <input type="radio" v-model="templates.selected" :value="template.name" @change="mock" :disabled="generated.pending">
                     {{ templates.descriptions[template.name] || template.name }}
                   </label>
                 </div>
-
+              </div>
-            <div class="configuration" v-if="plugins.base.length">
-              <b>🗃️ Base content</b>
-              <label v-for="part in plugins.base" :key="part">
-                <input type="checkbox" v-model="plugins.enabled.base[part]" @change="mock" :disabled="generated.pending">
-                <span>{{ plugins.descriptions[`base.${part}`] || `base.${part}` }}</span>
-              </label>
             </div>
 
-            <div class="configuration plugins" v-if="plugins.list.length">
+            <div class="category" v-for="(category, name) in plugins.categories" :key="category">
-              <b>🧩 Additional plugins</b>
-              <template v-for="(category, name) in plugins.categories" :key="category">
               <details open>
                 <summary>{{ name }}</summary>
-                  <label v-for="plugin in category" :class="{'not-available':!plugin.enabled}" :title="!plugin.enabled ? 'This plugin is not enabled on web instance, use it with GitHub actions !' : ''">
+                <div v-for="plugin in category" class="configuration plugins" :class="{'not-available':(!plugin.enabled)||(!supports(options(plugin)[plugin.name])), deprecated:plugin.deprecated}" :title="!plugin.enabled ? 'This plugin is not enabled on web instance, use it with GitHub actions !' : plugin.deprecated ? 'This plugin is deprecated and should not be used anymore' : ''">
+                  <label>
                     <input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="mock" :disabled="generated.pending">
-                    <div>{{ plugins.descriptions[plugin.name] || plugin.name }}</div>
+                    <div class="name">{{ plugins.descriptions[plugin.name] || plugin.name }}</div>
                   </label>
+                  <div class="options">
+                    <label v-for="(input, key) in options(plugin)" v-if="(plugins.enabled[plugin.name])&&(key !== plugin.name)" class="option" :class="{unsupported:!supports(input)}" :title="!supports(input) ? 'This option is not enabled on web instance, use it with GitHub actions !' : ''">
+                      <i>{{ input.text.split("\n")[0] }}</i>
+                      <input type="checkbox" v-if="input.type === 'boolean'" v-model="plugins.options[key]" @change="mock">
+                      <input type="number" v-else-if="input.type === 'number'" v-model="plugins.options[key]" @change="mock" :min="input.min" :max="input.max">
+                      <select v-else-if="input.type === 'select'" v-model="plugins.options[key]" @change="mock">
+                        <option v-for="value in input.values" :value="value">{{ value }}</option>
+                      </select>
+                      <input type="text" v-else v-model="plugins.options[key]" @change="mock" :placeholder="input.placeholder">
+                    </label>
+                  </div>
+                </div>
               </details>
-              </template>
             </div>
 
-            <div class="configuration" v-if="configure">
+            <div class="category">
-              <b>🔧 Configure plugins</b>
+              <details open>
-              <template v-for="(input, key) in configure">
+                <summary>Core</summary>
-                <b v-if="typeof input === 'string'">{{ input }}</b>
+                <div class="configuration plugins" v-if="plugins.base.length">
-                <label v-else class="option">
+                  <label>
+                    <input type="checkbox" checked disabled>
+                    <div class="name">🗃️ Base content</div>
+                  </label>
+                  <div class="options">
+                    <label v-for="part in plugins.base" :key="part" class="option">
+                      <i>{{ plugins.descriptions[`base.${part}`] || `base.${part}` }}</i>
+                      <input type="checkbox" v-model="plugins.enabled.base[part]" @change="mock" :disabled="generated.pending">
+                    </label>
+                    <template v-for="(input, key) in metadata.base" v-if="key !== 'base'">
+                      <label class="option">
                         <i>{{ input.text.split("\n")[0] }}</i>
                         <input type="checkbox" v-if="input.type === 'boolean'" v-model="plugins.options[key]" @change="mock">
                         <input type="number" v-else-if="input.type === 'number'" v-model="plugins.options[key]" @change="mock" :min="input.min" :max="input.max">
@@ -113,23 +142,26 @@
                       </label>
                     </template>
                   </div>
-
+                </div>
-            <div class="configuration">
+                <div class="configuration plugins" v-if="plugins.base.length">
-              <details>
+                  <label>
-                <summary><b>⚙️ Additional settings</b></summary>
+                    <input type="checkbox" checked disabled>
-                <template v-for="{key, target} in [{key:'base', target:plugins.options}, {key:'core', target:config}]">
+                    <div class="name">⚙️ Rendering options</div>
-                  <template v-for="(input, key) in metadata[key]">
+                  </label>
-                    <label class="option">
+                  <div class="options">
+                    <template v-for="(input, key) in metadata.core">
+                      <label class="option" :class="{unsupported:!supports(input)}" :title="!supports(input) ? 'This option is not enabled on web instance, use it with GitHub actions !' : ''">
                         <i>{{ input.text.split("\n")[0] }}</i>
-                      <input type="checkbox" v-if="input.type === 'boolean'" v-model="target[key]" @change="mock">
+                        <input type="checkbox" v-if="input.type === 'boolean'" v-model="config[key]" @change="mock">
-                      <input type="number" v-else-if="input.type === 'number'" v-model="target[key]" @change="mock" :min="input.min" :max="input.max">
+                        <input type="number" v-else-if="input.type === 'number'" v-model="config[key]" @change="mock" :min="input.min" :max="input.max">
-                      <select v-else-if="input.type === 'select'" v-model="target[key]" @change="mock">
+                        <select v-else-if="input.type === 'select'" v-model="config[key]" @change="mock">
                           <option v-for="value in input.values" :value="value">{{ value }}</option>
                         </select>
-                      <input type="text" v-else v-model="target[key]" @change="mock" :placeholder="input.placeholder">
+                        <input type="text" v-else v-model="config[key]" @change="mock" :placeholder="input.placeholder">
                       </label>
                     </template>
-                </template>
+                  </div>
+                </div>
               </details>
             </div>
 

source/app/web/statics/index.html

@@ -19,6 +19,16 @@
         <header :class="{beta}">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
           <a href="/">Metrics {{ version }}</a>
+          <div class="grow"></div>
+          <a class="oauth-github" :href="`/.oauth?${params}`" v-if="oauth">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+            <template v-if="requests.login">
+              Signed in as {{ requests.login }}
+            </template>
+            <template v-else>
+              Sign in with GitHub
+            </template>
+          </a>
         </header>
 
         <section class="container" v-if="modes.includes('embed')">
@@ -72,7 +82,7 @@
                 This web instance has run out of GitHub API requests.
                 Please wait until {{ rlreset }} to generate metrics again.
               </div>
-              <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL</small>
+              <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests<span v-if="requests.login"> for {{ requests.login }}</span>: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL / {{ requests.search.remaining }} search</small>
               <small>Send feedback on <a href="https://github.com/lowlighter/metrics/discussions" target="_blank">GitHub discussions</a>!</small>
             </div>
           </div>

source/app/web/statics/insights/index.html

@@ -20,6 +20,16 @@
         <header v-if="!embed" :class="{beta}">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
           <a href="/">Metrics Insights {{ version }}</a>
+          <div class="grow"></div>
+          <a class="oauth-github" :href="`/.oauth?${params}`" v-if="oauth">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+            <template v-if="requests.login">
+              Signed in as {{ requests.login }}
+            </template>
+            <template v-else>
+              Sign in with GitHub
+            </template>
+          </a>
         </header>
 
         <div class="loading-bar" v-if="(progress > 0)&&(1 > progress)">
@@ -33,7 +43,7 @@
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"></path></svg>
                 Search a GitHub user
               </h2>
-              <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL</small>
+              <small :class="{'error-text':(!requests.rest.remaining)||(!requests.graphql.remaining)}">Remaining GitHub requests<span v-if="requests.login"> for {{ requests.login }}</span>: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL / {{ requests.search.remaining }} search</small>
               <small>Send feedback on <a href="https://github.com/lowlighter/metrics/discussions/229" target="_blank">GitHub discussions</a>!</small>
             </div>
             <div class="inputs">

source/app/web/statics/insights/script.js

@@ -7,6 +7,8 @@
       //Palette
       try {
         this.palette = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+        if (localStorage.getItem("session.metrics"))
+          axios.defaults.headers.common["x-metrics-session"] = localStorage.getItem("session.metrics")
       }
       catch (error) {}
       //Embed
@@ -44,6 +46,11 @@
           const {data: hosted} = await axios.get("/.hosted")
           this.hosted = hosted
         })(),
+        //OAuth
+        (async () => {
+          const {data: enabled} = await axios.get("/.oauth/enabled")
+          this.oauth = enabled
+        })(),
       ])
     },
     //Watchers
@@ -155,6 +162,9 @@
     },
     //Computed properties
     computed: {
+      params() {
+        return new URLSearchParams({from:location.href})
+      },
       stats() {
         return this.metrics?.rendered.user ?? null
       },
@@ -246,10 +256,11 @@
       embed: false,
       localstorage: false,
       searchable: false,
-      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}},
+      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}, search: {limit: 0, used: 0, remaining: 0, reset: NaN}},
       palette: "light",
       metrics: null,
       pending: false,
+      oauth: false,
       error: null,
       config: {},
       progress: 0,

source/app/web/statics/oauth/index.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Metrics</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="An image generator with 20+ metrics about your GitHub account such as activity, community, repositories, coding habits, website performances, music played, starred topics, etc. that you can put on your profile or elsewhere !">
+    <meta name="author" content="lowlighter">
+    <meta property="og:image" content="/.opengraph.png">
+    <link rel="icon" href="/.favicon.png">
+    <link rel="stylesheet" href="/.css/style.vars.css?v=3.27">
+    <link rel="stylesheet" href="/.css/style.css?v=3.27">
+    <link rel="stylesheet" href="/insights/.statics/style.css?v=3.27">
+  </head>
+  <body>
+    <!-- Vue app -->
+    <main :class="[palette]">
+      <template>
+
+        <header :class="{beta}">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+          <a href="/">Metrics Insights {{ version }}</a>
+        </header>
+
+        <section class="container center">
+          <div class="badges-oauth">
+            <div class="badge-oauth">
+              <img width="50" height="50" src="https://avatars.githubusercontent.com/oa/1961997?s=100&amp;u=04310528dae43e631c6b4609aa352cc535d65aac&amp;v=4" alt="">
+            </div>
+            <div class="border"></div>
+            <div style="border-radius: 50%; width:32px; height:32px; background-color: var(--color-label-success-text)">
+              <svg height="16" width="16" viewBox="0 0 16 16" version="1.1" style="margin: 8px">
+                <path fill="#fff" fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
+              </svg>
+            </div>
+            <div class="border"></div>
+            <div class="badge-oauth">
+              <svg height="100%" width="100%" viewBox="0 0 16 16" version="1.1">
+                <path fill="var(--color-text-primary)" fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
+              </svg>
+            </div>
+          </div>
+          <p>
+            Signing in with your GitHub account lets you use this web instance with your own API requests quota.
+          </p>
+          <template v-if="extras.length">
+              The following extra features permissions will be granted when logged with your GitHub account:
+            <ul>
+              <li v-for="extra in extras"><code>{{ extra }}</code></li>
+            </ul>
+          </template>
+        </section>
+
+        <template>
+          <section class="container center oauth">
+            <template v-if="!requests.login">
+              <a class="oauth-github" :href="`/.oauth/authenticate?${params}`">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+                Sign in with GitHub
+              </a>
+              <div class="oauth-scopes">
+                <label v-for="scope in ['read:org', 'read:user', 'read:packages']">
+                  <input type="checkbox" :value="scope" v-model="scopes"> <code>{{ scope }}</code>
+                </label>
+              </div>
+              <small>
+                While no scope is required, you can chose to grant additional scopes which may be required by some plugins options.
+                For security reasons, <a href="https://github.com/lowlighter/metrics">metrics</a> will only ask for <b>read-only access</b> to your account.
+              </small>
+            </template>
+            <template v-else>
+              <a class="oauth-github disabled" href="#">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="currentColor" fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
+                Signed in as {{ requests.login }}
+              </a>
+              <a :href="`/.oauth/revoke/${session}`">
+                <button class="oauth-revoke">Revoke authorization</button>
+              </a>
+            </template>
+          </section>
+        </template>
+
+        <footer>
+          <a href="https://github.com/lowlighter/metrics">Repository</a>
+          <a href="https://github.com/lowlighter/metrics/blob/master/LICENSE">License</a>
+          <a href="https://github.com/marketplace/actions/metrics-embed">GitHub Action</a>
+          <span v-if="hosted">Hosted with ❤️ by <a :href="hosted.link">{{ hosted.by }}</a></span>
+        </footer>
+
+      </template>
+    </main>
+
+    <!-- Scripts -->
+    <script src="/.js/axios.min.js"></script>
+    <script src="/.js/vue.min.js"></script>
+    <script src="/.oauth/script.js?v=3.27"></script>
+  </body>
+</html>

source/app/web/statics/oauth/redirect.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Metrics</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="An image generator with 20+ metrics about your GitHub account such as activity, community, repositories, coding habits, website performances, music played, starred topics, etc. that you can put on your profile or elsewhere !">
+    <meta name="author" content="lowlighter">
+    <meta property="og:image" content="/.opengraph.png">
+    <link rel="icon" href="/.favicon.png">
+  </head>
+  <body>
+    Redirecting...
+    <script>
+      const query = new URLSearchParams(location.search)
+      const session = query.get("session")
+      if (session)
+        localStorage.setItem("session.metrics", session)
+      const to = query.get("to")
+      if (to)
+        window.location.href = to
+      else
+        window.location.href = "/.oauth"
+    </script>
+  </body>
+</html>

source/app/web/statics/oauth/script.js

@@ -0,0 +1,79 @@
+;(async function() {
+  //App
+  return new Vue({
+    //Initialization
+    el: "main",
+    async mounted() {
+      //Palette
+      try {
+        this.palette = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
+        if (localStorage.getItem("session.metrics")) {
+          this.session = localStorage.getItem("session.metrics")
+          axios.defaults.headers.common["x-metrics-session"] = localStorage.getItem("session.metrics")
+        }
+      }
+      catch (error) {}
+      //Init
+      await Promise.all([
+        //GitHub limit tracker
+        (async () => {
+          const {data: requests} = await axios.get("/.requests")
+          this.requests = requests
+        })(),
+        //Version
+        (async () => {
+          const {data: version} = await axios.get("/.version")
+          this.version = `v${version}`
+        })(),
+        //Hosted
+        (async () => {
+          const {data: hosted} = await axios.get("/.hosted")
+          this.hosted = hosted
+        })(),
+        //OAuth
+        (async () => {
+          const {data: enabled} = await axios.get("/.oauth/enabled")
+          this.oauth = enabled
+        })(),
+        //OAuth
+        (async () => {
+          const {data: extras} = await axios.get("/.extras.logged")
+          this.extras = extras
+        })(),
+      ])
+    },
+    //Watchers
+    watch: {
+      palette: {
+        immediate: true,
+        handler(current, previous) {
+          document.querySelector("body").classList.remove(previous)
+          document.querySelector("body").classList.add(current)
+        },
+      },
+    },
+    //Computed properties
+    computed: {
+      params() {
+        return new URLSearchParams({from:new URLSearchParams(location.search).get("from"), scopes:this.scopes.join(" ")})
+      },
+      preview() {
+        return /-preview$/.test(this.version)
+      },
+      beta() {
+        return /-beta$/.test(this.version)
+      },
+    },
+    //Data initialization
+    data: {
+      version: "",
+      hosted: null,
+      requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}, search: {limit: 0, used: 0, remaining: 0, reset: NaN}},
+      palette: "light",
+      oauth: false,
+      scopes:[],
+      extras: [],
+      session: null,
+    },
+  })
+})()

source/app/web/statics/style.css

@@ -46,6 +46,10 @@
     font-size: 1.5rem;
   }
 
+  header .grow {
+    flex-grow: 1;
+  }
+
 /* Interface */
   .ui {
     display: flex;
@@ -128,11 +132,22 @@
   }
 
   .configuration {
+    background-image: linear-gradient(var(--color-alert-info-bg),var(--color-alert-info-bg));
+    color: var(--color-alert-info-text);
+    border: 1px solid var(--color-alert-info-border);
+    border-radius: 6px;
+    margin-top: .5rem;
     display: flex;
     flex-direction: column;
-    padding-top: 1rem;
+  }
-    margin: 1rem .5rem 0;
+
-    border-top: 1px solid var(--color-border-primary);
+  .configuration .options:not(:empty) {
+    margin-top: .25rem;
+    border-top: 1px solid var(--color-alert-info-border);
+  }
+
+  .configuration.plugins {
+    width: 100%;
   }
 
   .configuration.plugins label {
@@ -140,16 +155,32 @@
     align-items: flex-start;
   }
 
+  .configuration.plugins .name {
+    font-weight: 500;
+  }
+
   .configuration.not-available {
     color: var(--color-text-secondary);
   }
 
-  .configuration details {
+  .configuration.deprecated {
-    display: flex;
+    background-image: linear-gradient(var(--color-alert-warn-bg),var(--color-alert-info-bg));
-    flex-direction: column;
+    color: var(--color-alert-warn-text);
+    border: 1px solid var(--color-alert-warn-border);
+    opacity: .8;
   }
 
-  .configuration summary {
+  .configuration .not-available.deprecated {
+    display: none;
+  }
+
+  .category details {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .category summary {
     font-weight: bold;
     text-transform: capitalize;
   }
@@ -157,6 +188,20 @@
   .option {
     display: flex;
     flex-direction: column;
+    padding: .25rem;
+    overflow: hidden;
+  }
+
+  .option input[type=text], .option input[type=number], .option select {
+    width: 100%;
+  }
+
+  .option.unsupported {
+    background-image: linear-gradient(var(--color-bg-secondary),var(--color-bg-tertiary));
+    color: var(--color-text-secondary);
+    border-top: 1px solid var(--color-border-secondary);
+    border-bottom: 1px solid var(--color-border-secondary);
+    opacity: .8;
   }
 
 /* Preview */
@@ -211,7 +256,6 @@
   }
   label:hover {
     background-color: var(--color-input-contrast-bg);
-    border-radius: 6px;
   }
 
   input[type=text], input[type=number], select {
@@ -260,6 +304,32 @@
     outline: none;
   }
 
+  .oauth-github {
+    color: var(--color-btn-primary-text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: .4rem .6rem;
+    border-radius: 6px;
+    font-weight: 500;
+    background-color: var(--color-input-bg);
+    border: 1px solid var(--color-input-border);
+    cursor: pointer;
+    font-size: 1rem;
+  }
+  .oauth-github.disabled {
+    opacity: .5;
+    pointer-events: none;
+  }
+  .oauth-github:hover {
+    text-decoration: none;
+  }
+  .oauth-github svg {
+    height: 1rem;
+    width: 1rem;
+    margin-right: .5rem;
+  }
+
 /* Links */
   a, a:hover, a:visited {
     color: var(--color-text-link);
@@ -386,6 +456,43 @@
     margin-bottom: 1rem;
   }
 
+/* */
+  .badges-oauth {
+    display: flex;
+    align-items: center ;
+  }
+  .badges-oauth .border {
+    width: 4rem;
+    border: 3px dashed var(--color-border-secondary);
+  }
+  .badge-oauth {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    box-shadow: var(--color-shadow-medium);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #0D1117;
+  }
+  .oauth-scopes {
+    display: flex;
+  }
+  .oauth-scopes label {
+    margin: .5rem;
+  }
+  .oauth-revoke {
+    color: var(--color-text-danger);
+    background-color: var(--color-bg-danger);
+    border-color: var(--color-border-danger);
+    cursor: pointer;
+  }
+  .oauth small {
+    font-size: .8rem;
+    color: var(--color-text-secondary);
+    max-width: 80%;
+  }
+
 /* Search */
   .search {
     display: flex;