feat(app/web): bypass metrics.api.github.overuse with OAuth (#1171)
This commit is contained in:
Simon Lecoq
GitHub
@@ -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)
|
||||
|
||||
@@ -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
|
||||
}
|
||||
},
|
||||
})
|
||||
})()
|
||||
|
||||
@@ -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,81 +65,103 @@
|
||||
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>
|
||||
<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 class="configuration plugins" v-if="plugins.list.length">
|
||||
<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 !' : ''">
|
||||
<input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="mock" :disabled="generated.pending">
|
||||
<div>{{ plugins.descriptions[plugin.name] || plugin.name }}</div>
|
||||
</label>
|
||||
</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">
|
||||
<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">
|
||||
<div class="category">
|
||||
<div class="configuration plugins" v-if="plugins.base.length">
|
||||
<label>
|
||||
<input type="checkbox" checked disabled>
|
||||
<div class="name">🖼️ Template</div>
|
||||
</label>
|
||||
</template>
|
||||
<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>
|
||||
|
||||
<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 class="category" v-for="(category, name) in plugins.categories" :key="category">
|
||||
<details open>
|
||||
<summary>{{ name }}</summary>
|
||||
<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 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="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="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="target[key]" @change="mock" :placeholder="input.placeholder">
|
||||
<input type="text" v-else v-model="plugins.options[key]" @change="mock" :placeholder="input.placeholder">
|
||||
</label>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
</template>
|
||||
</div>
|
||||
</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="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="config[key]" @change="mock" :placeholder="input.placeholder">
|
||||
</label>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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
98
source/app/web/statics/oauth/index.html
Normal 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&u=04310528dae43e631c6b4609aa352cc535d65aac&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
26
source/app/web/statics/oauth/redirect.html
Normal 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
79
source/app/web/statics/oauth/script.js
Normal 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,
|
||||
},
|
||||
})
|
||||
})()
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user