sudacode/metrics
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Simon Lecoq
2022-08-06 06:09:24 +02:00
committed by GitHub
parent 0937317aa7
commit 587ceecc84
13 changed files with 660 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
source/app/metrics/metadata.mjs
View File

@@ -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")))),
)
}

163
source/app/web/instance.mjs
View File

@@ -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} }")
Object.assign(requests, {
rest: (await rest.rateLimit.get()).data.rate,
graphql: {...limit, reset: new Date(limit.reset).getTime()},
})
const {resources} = (await api.rest.rateLimit.get()).data
Object.assign(requests, {rest: resources.core, graphql: resources.graphql, search: resources.search})
}
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,
rest,
...octokit,
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")))

13
source/app/web/settings.example.json generated
View File

@@ -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",

14
source/app/web/statics/app.js
View File

@@ -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)

56
source/app/web/statics/embed/app.js
View File

@@ -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
}
},
})
})()

102
source/app/web/statics/embed/index.html
View File

@@ -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>{{ 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>:</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">
<b>🖼️ Template</b>
<div class="category">
<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 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>
<div class="configuration plugins" v-if="plugins.list.length">
<b>🧩 Additional plugins</b>
<template v-for="(category, name) in plugins.categories" :key="category">
<div class="category" 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">
<b>🔧 Configure plugins</b>
<template v-for="(input, key) in configure">
<b v-if="typeof input === 'string'">{{ input }}</b>
<label v-else class="option">
<div class="category">
<details open>
<summary>Core</summary>
<div class="configuration plugins" v-if="plugins.base.length">
<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 class="configuration">
<details>
<summary><b>⚙️ Additional settings</b></summary>
<template v-for="{key, target} in [{key:'base', target:plugins.options}, {key:'core', target:config}]">
<template v-for="(input, key) in metadata[key]">
<label class="option">
</div>
<div class="configuration plugins" v-if="plugins.base.length">
<label>
<input type="checkbox" checked disabled>
<div class="name">⚙️ Rendering options</div>
</label>
<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="number" v-else-if="input.type === 'number'" v-model="target[key]" @change="mock" :min="input.min" :max="input.max">
<select v-else-if="input.type === 'select'" 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="config[key]" @change="mock" :min="input.min" :max="input.max">
<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>

12
source/app/web/statics/index.html
View File

@@ -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>

12
source/app/web/statics/insights/index.html
View File

@@ -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">

13
source/app/web/statics/insights/script.js
View File

@@ -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,

98
source/app/web/statics/oauth/index.html Normal file
View File

@@ -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>

26
source/app/web/statics/oauth/redirect.html Normal file
View File

@@ -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>

79
source/app/web/statics/oauth/script.js Normal file
View File

@@ -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,
},
})
})()

125
source/app/web/statics/style.css
View File

@@ -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 .not-available {
.configuration.plugins .name {
font-weight: 500;
}
.configuration.not-available {
color: var(--color-text-secondary);
}
.configuration details {
display: flex;
flex-direction: column;
.configuration.deprecated {
background-image: linear-gradient(var(--color-alert-warn-bg),var(--color-alert-info-bg));
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;