refactor(app/web): new features (#1124) [skip ci]
This commit is contained in:
Simon Lecoq
GitHub
@@ -1,8 +1,4 @@
|
||||
;(async function() {
|
||||
//Init
|
||||
const {data: metadata} = await axios.get("/.plugins.metadata")
|
||||
delete metadata.core.web.output
|
||||
delete metadata.core.web.twemojis
|
||||
//App
|
||||
return new Vue({
|
||||
//Initialization
|
||||
@@ -62,7 +58,6 @@
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
components: {Prism: PrismComponent},
|
||||
//Watchers
|
||||
watch: {
|
||||
tab: {
|
||||
@@ -86,244 +81,20 @@
|
||||
data: {
|
||||
version: "",
|
||||
user: "",
|
||||
mode: "metrics",
|
||||
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}},
|
||||
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,
|
||||
docs: {
|
||||
overview: {
|
||||
link: "https://github.com/lowlighter/metrics#-documentation",
|
||||
name: "Complete documentation",
|
||||
},
|
||||
markdown: {
|
||||
link: "https://github.com/lowlighter/metrics/blob/master/.github/readme/partials/documentation/setup/shared.md",
|
||||
name: "Setup using the shared instance",
|
||||
},
|
||||
action: {
|
||||
link: "https://github.com/lowlighter/metrics/blob/master/.github/readme/partials/documentation/setup/action.md",
|
||||
name: "Setup using GitHub Action on a profile repository",
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
base: {},
|
||||
list: [],
|
||||
categories: [],
|
||||
enabled: {},
|
||||
descriptions: {
|
||||
base: "🗃️ Base content",
|
||||
"base.header": "Header",
|
||||
"base.activity": "Account activity",
|
||||
"base.community": "Community stats",
|
||||
"base.repositories": "Repositories metrics",
|
||||
"base.metadata": "Metadata",
|
||||
...Object.fromEntries(Object.entries(metadata).map(([key, {name}]) => [key, name])),
|
||||
},
|
||||
options: {
|
||||
descriptions: {...(Object.assign({}, ...Object.entries(metadata).flatMap(([key, {web}]) => web)))},
|
||||
...(Object.fromEntries(
|
||||
Object.entries(
|
||||
Object.assign({}, ...Object.entries(metadata).flatMap(([key, {web}]) => web)),
|
||||
)
|
||||
.map(([key, {defaulted}]) => [key, defaulted]),
|
||||
)),
|
||||
},
|
||||
},
|
||||
templates: {
|
||||
list: [],
|
||||
selected: "classic",
|
||||
placeholder: {
|
||||
timeout: null,
|
||||
image: "",
|
||||
},
|
||||
descriptions: {
|
||||
classic: "Classic template",
|
||||
terminal: "Terminal template",
|
||||
markdown: "(hidden)",
|
||||
repository: "(hidden)",
|
||||
},
|
||||
},
|
||||
generated: {
|
||||
pending: false,
|
||||
content: "",
|
||||
error: false,
|
||||
},
|
||||
},
|
||||
//Computed data
|
||||
computed: {
|
||||
//Unusable plugins
|
||||
unusable() {
|
||||
return this.plugins.list.filter(({name}) => this.plugins.enabled[name]).filter(({enabled}) => !enabled).map(({name}) => name)
|
||||
},
|
||||
//User's avatar
|
||||
avatar() {
|
||||
return this.generated.content ? `https://github.com/${this.user}.png` : null
|
||||
},
|
||||
//User's repository
|
||||
repo() {
|
||||
return `https://github.com/${this.user}/${this.user}`
|
||||
},
|
||||
//Endpoint to use for computed metrics
|
||||
url() {
|
||||
//Plugins enabled
|
||||
const plugins = Object.entries(this.plugins.enabled)
|
||||
.flatMap(([key, value]) => key === "base" ? Object.entries(value).map(([key, value]) => [`base.${key}`, value]) : [[key, value]])
|
||||
.filter(([key, value]) => /^base[.]\w+$/.test(key) ? !value : value)
|
||||
.map(([key, value]) => `${key}=${+value}`)
|
||||
//Plugins options
|
||||
const options = Object.entries(this.plugins.options)
|
||||
.filter(([key, value]) => `${value}`.length)
|
||||
.filter(([key, value]) => this.plugins.enabled[key.split(".")[0]])
|
||||
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
|
||||
//Base options
|
||||
const base = Object.entries(this.plugins.options).filter(([key, value]) => (key in metadata.base.web) && (value !== metadata.base.web[key]?.defaulted)).map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
|
||||
//Config
|
||||
const config = Object.entries(this.config).filter(([key, value]) => (value) && (value !== metadata.core.web[key]?.defaulted)).map(([key, value]) => `config.${key}=${encodeURIComponent(value)}`)
|
||||
//Template
|
||||
const template = (this.templates.selected !== this.templates.list[0]) ? [`template=${this.templates.selected}`] : []
|
||||
//Generated url
|
||||
const params = [...template, ...base, ...plugins, ...options, ...config].join("&")
|
||||
return `${window.location.protocol}//${window.location.host}/${this.user}${params.length ? `?${params}` : ""}`
|
||||
},
|
||||
//Embedded generated code
|
||||
embed() {
|
||||
return ``
|
||||
},
|
||||
//Token scopes
|
||||
scopes() {
|
||||
return new Set([
|
||||
...Object.entries(this.plugins.enabled).filter(([key, value]) => (key !== "base") && (value)).flatMap(([key]) => metadata[key].scopes),
|
||||
...(Object.entries(this.plugins.enabled.base).filter(([key, value]) => value).length ? metadata.base.scopes : []),
|
||||
])
|
||||
},
|
||||
//GitHub action auto-generated code
|
||||
action() {
|
||||
return [
|
||||
`# Visit https://github.com/lowlighter/metrics/blob/master/action.yml for full reference`,
|
||||
`name: Metrics`,
|
||||
`on:`,
|
||||
` # Schedule updates (each hour)`,
|
||||
` schedule: [{cron: "0 * * * *"}]`,
|
||||
` # Lines below let you run workflow manually and on each commit`,
|
||||
` workflow_dispatch:`,
|
||||
` push: {branches: ["master", "main"]}`,
|
||||
`jobs:`,
|
||||
` github-metrics:`,
|
||||
` runs-on: ubuntu-latest`,
|
||||
` permissions:`,
|
||||
` contents: write`,
|
||||
` steps:`,
|
||||
` - uses: lowlighter/metrics@latest`,
|
||||
` with:`,
|
||||
...(this.scopes.size
|
||||
? [
|
||||
` # Your GitHub token`,
|
||||
` # The following scopes are required:`,
|
||||
...[...this.scopes].map(scope => ` # - ${scope}${scope === "public_access" ? " (default scope)" : ""}`),
|
||||
` # The following additional scopes may be required:`,
|
||||
` # - read:org (for organization related metrics)`,
|
||||
` # - read:user (for user related data)`,
|
||||
` # - read:packages (for some packages related data)`,
|
||||
` # - repo (optional, if you want to include private repositories)`,
|
||||
]
|
||||
: [
|
||||
` # Current configuration doesn't require a GitHub token`,
|
||||
]),
|
||||
` token: ${this.scopes.size ? `${"$"}{{ secrets.METRICS_TOKEN }}` : "NOT_NEEDED"}`,
|
||||
``,
|
||||
` # Options`,
|
||||
` user: ${this.user}`,
|
||||
` template: ${this.templates.selected}`,
|
||||
` base: ${Object.entries(this.plugins.enabled.base).filter(([key, value]) => value).map(([key]) => key).join(", ") || '""'}`,
|
||||
...[
|
||||
...Object.entries(this.plugins.options).filter(([key, value]) => (key in metadata.base.web) && (value !== metadata.base.web[key]?.defaulted)).map(([key, value]) => ` ${key.replace(/[.]/g, "_")}: ${typeof value === "boolean" ? {true: "yes", false: "no"}[value] : value}`),
|
||||
...Object.entries(this.plugins.enabled).filter(([key, value]) => (key !== "base") && (value)).map(([key]) => ` plugin_${key}: yes`),
|
||||
...Object.entries(this.plugins.options).filter(([key, value]) => (value) && (!(key in metadata.base.web))).filter(([key, value]) => this.plugins.enabled[key.split(".")[0]]).map(([key, value]) => ` plugin_${key.replace(/[.]/g, "_")}: ${typeof value === "boolean" ? {true: "yes", false: "no"}[value] : value}`),
|
||||
...Object.entries(this.config).filter(([key, value]) => (value) && (value !== metadata.core.web[key]?.defaulted)).map(([key, value]) => ` config_${key.replace(/[.]/g, "_")}: ${typeof value === "boolean" ? {true: "yes", false: "no"}[value] : value}`),
|
||||
].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)
|
||||
},
|
||||
//Rate limit reset
|
||||
rlreset() {
|
||||
const reset = new Date(Math.max(this.requests.graphql.reset, this.requests.rest.reset))
|
||||
return `${reset.getHours()}:${reset.getMinutes()}`
|
||||
},
|
||||
},
|
||||
//Methods
|
||||
methods: {
|
||||
//Refresh computed properties
|
||||
async refresh() {
|
||||
const keys = {action: ["scopes", "action"], markdown: ["url", "embed"]}[this.tab]
|
||||
if (keys) {
|
||||
for (const key of keys)
|
||||
this._computedWatchers[key]?.run()
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
//Load and render placeholder image
|
||||
async mock({timeout = 600} = {}) {
|
||||
this.refresh()
|
||||
clearTimeout(this.templates.placeholder.timeout)
|
||||
this.templates.placeholder.timeout = setTimeout(async () => {
|
||||
this.templates.placeholder.image = await placeholder(this)
|
||||
this.generated.content = ""
|
||||
this.generated.error = null
|
||||
}, timeout)
|
||||
},
|
||||
//Resize mock image
|
||||
mockresize() {
|
||||
const svg = document.querySelector(".preview .image svg")
|
||||
if ((svg) && (svg.getAttribute("height") == 99999)) {
|
||||
const height = svg.querySelector("#metrics-end")?.getBoundingClientRect()?.y - svg.getBoundingClientRect()?.y
|
||||
if (Number.isFinite(height))
|
||||
svg.setAttribute("height", height)
|
||||
}
|
||||
},
|
||||
//Generate metrics and flush cache
|
||||
async generate() {
|
||||
//Avoid requests spamming
|
||||
if (this.generated.pending)
|
||||
return
|
||||
this.generated.pending = true
|
||||
//Compute metrics
|
||||
try {
|
||||
await axios.get(`/.uncache?&token=${(await axios.get(`/.uncache?user=${this.user}`)).data.token}`)
|
||||
this.generated.content = (await axios.get(this.url)).data
|
||||
this.generated.error = null
|
||||
}
|
||||
catch (error) {
|
||||
this.generated.error = {code: error.response.status, message: error.response.data}
|
||||
}
|
||||
finally {
|
||||
this.generated.pending = false
|
||||
try {
|
||||
const {data: requests} = await axios.get("/.requests")
|
||||
this.requests = requests
|
||||
}
|
||||
catch {}
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
})()
|
||||
|
||||
328
source/app/web/statics/embed/app.js
Normal file
328
source/app/web/statics/embed/app.js
Normal file
@@ -0,0 +1,328 @@
|
||||
;(async function() {
|
||||
//Init
|
||||
const {data: metadata} = await axios.get("/.plugins.metadata")
|
||||
delete metadata.core.web.output
|
||||
delete metadata.core.web.twemojis
|
||||
//App
|
||||
return new Vue({
|
||||
//Initialization
|
||||
el: "main",
|
||||
async mounted() {
|
||||
//Interpolate config from browser
|
||||
try {
|
||||
this.config.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||||
this.palette = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"
|
||||
}
|
||||
catch (error) {}
|
||||
//Init
|
||||
await Promise.all([
|
||||
//GitHub limit tracker
|
||||
(async () => {
|
||||
const {data: requests} = await axios.get("/.requests")
|
||||
this.requests = requests
|
||||
})(),
|
||||
//Templates
|
||||
(async () => {
|
||||
const {data: templates} = await axios.get("/.templates")
|
||||
templates.sort((a, b) => (a.name.startsWith("@") ^ b.name.startsWith("@")) ? (a.name.startsWith("@") ? 1 : -1) : a.name.localeCompare(b.name))
|
||||
this.templates.list = templates
|
||||
this.templates.selected = templates[0]?.name || "classic"
|
||||
})(),
|
||||
//Plugins
|
||||
(async () => {
|
||||
const {data: plugins} = await axios.get("/.plugins")
|
||||
this.plugins.list = plugins.filter(({name}) => metadata[name]?.supports.includes("user") || metadata[name]?.supports.includes("organization"))
|
||||
const categories = [...new Set(this.plugins.list.map(({category}) => category))]
|
||||
this.plugins.categories = Object.fromEntries(categories.map(category => [category, this.plugins.list.filter(value => category === value.category)]))
|
||||
})(),
|
||||
//Base
|
||||
(async () => {
|
||||
const {data: base} = await axios.get("/.plugins.base")
|
||||
this.plugins.base = base
|
||||
this.plugins.enabled.base = Object.fromEntries(base.map(key => [key, true]))
|
||||
})(),
|
||||
//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
|
||||
})(),
|
||||
])
|
||||
//Generate placeholder
|
||||
this.mock({timeout: 200})
|
||||
setInterval(() => {
|
||||
const marker = document.querySelector("#metrics-end")
|
||||
if (marker) {
|
||||
this.mockresize()
|
||||
marker.remove()
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
components: {Prism: PrismComponent},
|
||||
//Watchers
|
||||
watch: {
|
||||
tab: {
|
||||
immediate: true,
|
||||
handler(current) {
|
||||
if (current === "action")
|
||||
this.clipboard = new ClipboardJS(".copy-action")
|
||||
else
|
||||
this.clipboard?.destroy()
|
||||
},
|
||||
},
|
||||
palette: {
|
||||
immediate: true,
|
||||
handler(current, previous) {
|
||||
document.querySelector("body").classList.remove(previous)
|
||||
document.querySelector("body").classList.add(current)
|
||||
},
|
||||
},
|
||||
},
|
||||
//Data initialization
|
||||
data: {
|
||||
version: "",
|
||||
user: "",
|
||||
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}},
|
||||
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,
|
||||
docs: {
|
||||
overview: {
|
||||
link: "https://github.com/lowlighter/metrics#-documentation",
|
||||
name: "Complete documentation",
|
||||
},
|
||||
markdown: {
|
||||
link: "https://github.com/lowlighter/metrics/blob/master/.github/readme/partials/documentation/setup/shared.md",
|
||||
name: "Setup using the shared instance",
|
||||
},
|
||||
action: {
|
||||
link: "https://github.com/lowlighter/metrics/blob/master/.github/readme/partials/documentation/setup/action.md",
|
||||
name: "Setup using GitHub Action on a profile repository",
|
||||
},
|
||||
},
|
||||
plugins: {
|
||||
base: {},
|
||||
list: [],
|
||||
categories: [],
|
||||
enabled: {},
|
||||
descriptions: {
|
||||
base: "🗃️ Base content",
|
||||
"base.header": "Header",
|
||||
"base.activity": "Account activity",
|
||||
"base.community": "Community stats",
|
||||
"base.repositories": "Repositories metrics",
|
||||
"base.metadata": "Metadata",
|
||||
...Object.fromEntries(Object.entries(metadata).map(([key, {name}]) => [key, name])),
|
||||
},
|
||||
options: {
|
||||
descriptions: {...(Object.assign({}, ...Object.entries(metadata).flatMap(([key, {web}]) => web)))},
|
||||
...(Object.fromEntries(
|
||||
Object.entries(
|
||||
Object.assign({}, ...Object.entries(metadata).flatMap(([key, {web}]) => web)),
|
||||
)
|
||||
.map(([key, {defaulted}]) => [key, defaulted]),
|
||||
)),
|
||||
},
|
||||
},
|
||||
templates: {
|
||||
list: [],
|
||||
selected: "classic",
|
||||
placeholder: {
|
||||
timeout: null,
|
||||
image: "",
|
||||
},
|
||||
descriptions: {
|
||||
classic: "Classic template",
|
||||
terminal: "Terminal template",
|
||||
markdown: "(hidden)",
|
||||
repository: "(hidden)",
|
||||
},
|
||||
},
|
||||
generated: {
|
||||
pending: false,
|
||||
content: "",
|
||||
error: false,
|
||||
},
|
||||
},
|
||||
//Computed data
|
||||
computed: {
|
||||
//Unusable plugins
|
||||
unusable() {
|
||||
return this.plugins.list.filter(({name}) => this.plugins.enabled[name]).filter(({enabled}) => !enabled).map(({name}) => name)
|
||||
},
|
||||
//User's avatar
|
||||
avatar() {
|
||||
return this.generated.content ? `https://github.com/${this.user}.png` : null
|
||||
},
|
||||
//User's repository
|
||||
repo() {
|
||||
return `https://github.com/${this.user}/${this.user}`
|
||||
},
|
||||
//Endpoint to use for computed metrics
|
||||
url() {
|
||||
//Plugins enabled
|
||||
const plugins = Object.entries(this.plugins.enabled)
|
||||
.flatMap(([key, value]) => key === "base" ? Object.entries(value).map(([key, value]) => [`base.${key}`, value]) : [[key, value]])
|
||||
.filter(([key, value]) => /^base[.]\w+$/.test(key) ? !value : value)
|
||||
.map(([key, value]) => `${key}=${+value}`)
|
||||
//Plugins options
|
||||
const options = Object.entries(this.plugins.options)
|
||||
.filter(([key, value]) => `${value}`.length)
|
||||
.filter(([key, value]) => this.plugins.enabled[key.split(".")[0]])
|
||||
.map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
|
||||
//Base options
|
||||
const base = Object.entries(this.plugins.options).filter(([key, value]) => (key in metadata.base.web) && (value !== metadata.base.web[key]?.defaulted)).map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
|
||||
//Config
|
||||
const config = Object.entries(this.config).filter(([key, value]) => (value) && (value !== metadata.core.web[key]?.defaulted)).map(([key, value]) => `config.${key}=${encodeURIComponent(value)}`)
|
||||
//Template
|
||||
const template = (this.templates.selected !== this.templates.list[0]) ? [`template=${this.templates.selected}`] : []
|
||||
//Generated url
|
||||
const params = [...template, ...base, ...plugins, ...options, ...config].join("&")
|
||||
return `${window.location.protocol}//${window.location.host}/${this.user}${params.length ? `?${params}` : ""}`
|
||||
},
|
||||
//Embedded generated code
|
||||
embed() {
|
||||
return ``
|
||||
},
|
||||
//Token scopes
|
||||
scopes() {
|
||||
return new Set([
|
||||
...Object.entries(this.plugins.enabled).filter(([key, value]) => (key !== "base") && (value)).flatMap(([key]) => metadata[key].scopes),
|
||||
...(Object.entries(this.plugins.enabled.base).filter(([key, value]) => value).length ? metadata.base.scopes : []),
|
||||
])
|
||||
},
|
||||
//GitHub action auto-generated code
|
||||
action() {
|
||||
return [
|
||||
`# Visit https://github.com/lowlighter/metrics#-documentation for full reference`,
|
||||
`name: Metrics`,
|
||||
`on:`,
|
||||
` # Schedule updates (each hour)`,
|
||||
` schedule: [{cron: "0 * * * *"}]`,
|
||||
` # Lines below let you run workflow manually and on each commit`,
|
||||
` workflow_dispatch:`,
|
||||
` push: {branches: ["master", "main"]}`,
|
||||
`jobs:`,
|
||||
` github-metrics:`,
|
||||
` runs-on: ubuntu-latest`,
|
||||
` permissions:`,
|
||||
` contents: write`,
|
||||
` steps:`,
|
||||
` - uses: lowlighter/metrics@latest`,
|
||||
` with:`,
|
||||
...(this.scopes.size
|
||||
? [
|
||||
` # Your GitHub token`,
|
||||
` # The following scopes are required:`,
|
||||
...[...this.scopes].map(scope => ` # - ${scope}${scope === "public_access" ? " (default scope)" : ""}`),
|
||||
` # The following additional scopes may be required:`,
|
||||
` # - read:org (for organization related metrics)`,
|
||||
` # - read:user (for user related data)`,
|
||||
` # - read:packages (for some packages related data)`,
|
||||
` # - repo (optional, if you want to include private repositories)`,
|
||||
]
|
||||
: [
|
||||
` # Current configuration doesn't require a GitHub token`,
|
||||
]),
|
||||
` token: ${this.scopes.size ? `${"$"}{{ secrets.METRICS_TOKEN }}` : "NOT_NEEDED"}`,
|
||||
``,
|
||||
` # Options`,
|
||||
...(this.user ? [` user: ${this.user}`] : []),
|
||||
` template: ${this.templates.selected}`,
|
||||
` base: ${Object.entries(this.plugins.enabled.base).filter(([key, value]) => value).map(([key]) => key).join(", ") || '""'}`,
|
||||
...[
|
||||
...Object.entries(this.plugins.options).filter(([key, value]) => (key in metadata.base.web) && (value !== metadata.base.web[key]?.defaulted)).map(([key, value]) => ` ${key.replace(/[.]/g, "_")}: ${typeof value === "boolean" ? {true: "yes", false: "no"}[value] : value}`),
|
||||
...Object.entries(this.plugins.enabled).filter(([key, value]) => (key !== "base") && (value)).map(([key]) => ` plugin_${key}: yes`),
|
||||
...Object.entries(this.plugins.options).filter(([key, value]) => (value) && (!(key in metadata.base.web))).filter(([key, value]) => this.plugins.enabled[key.split(".")[0]]).map(([key, value]) => ` plugin_${key.replace(/[.]/g, "_")}: ${typeof value === "boolean" ? {true: "yes", false: "no"}[value] : value}`),
|
||||
...Object.entries(this.config).filter(([key, value]) => (value) && (value !== metadata.core.web[key]?.defaulted)).map(([key, value]) => ` config_${key.replace(/[.]/g, "_")}: ${typeof value === "boolean" ? {true: "yes", false: "no"}[value] : value}`),
|
||||
].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)
|
||||
},
|
||||
//Rate limit reset
|
||||
rlreset() {
|
||||
const reset = new Date(Math.max(this.requests.graphql.reset, this.requests.rest.reset))
|
||||
return `${reset.getHours()}:${reset.getMinutes()}`
|
||||
},
|
||||
},
|
||||
//Methods
|
||||
methods: {
|
||||
//Refresh computed properties
|
||||
async refresh() {
|
||||
const keys = {action: ["scopes", "action"], markdown: ["url", "embed"]}[this.tab]
|
||||
if (keys) {
|
||||
for (const key of keys)
|
||||
this._computedWatchers[key]?.run()
|
||||
this.$forceUpdate()
|
||||
}
|
||||
},
|
||||
//Load and render placeholder image
|
||||
async mock({timeout = 600} = {}) {
|
||||
this.refresh()
|
||||
clearTimeout(this.templates.placeholder.timeout)
|
||||
this.templates.placeholder.timeout = setTimeout(async () => {
|
||||
this.templates.placeholder.image = await placeholder(this)
|
||||
this.generated.content = ""
|
||||
this.generated.error = null
|
||||
}, timeout)
|
||||
},
|
||||
//Resize mock image
|
||||
mockresize() {
|
||||
const svg = document.querySelector(".preview .image svg")
|
||||
if ((svg) && (svg.getAttribute("height") == 99999)) {
|
||||
const height = svg.querySelector("#metrics-end")?.getBoundingClientRect()?.y - svg.getBoundingClientRect()?.y
|
||||
if (Number.isFinite(height))
|
||||
svg.setAttribute("height", height)
|
||||
}
|
||||
},
|
||||
//Generate metrics and flush cache
|
||||
async generate() {
|
||||
//Avoid requests spamming
|
||||
if (this.generated.pending)
|
||||
return
|
||||
this.generated.pending = true
|
||||
//Compute metrics
|
||||
try {
|
||||
await axios.get(`/.uncache?&token=${(await axios.get(`/.uncache?user=${this.user}`)).data.token}`)
|
||||
this.generated.content = (await axios.get(this.url)).data
|
||||
this.generated.error = null
|
||||
}
|
||||
catch (error) {
|
||||
this.generated.error = {code: error.response.status, message: error.response.data}
|
||||
}
|
||||
finally {
|
||||
this.generated.pending = false
|
||||
try {
|
||||
const {data: requests} = await axios.get("/.requests")
|
||||
this.requests = requests
|
||||
}
|
||||
catch {}
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
})()
|
||||
201
source/app/web/statics/embed/index.html
Normal file
201
source/app/web/statics/embed/index.html
Normal file
@@ -0,0 +1,201 @@
|
||||
<!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">
|
||||
<link rel="stylesheet" href="/.css/style.css">
|
||||
<link rel="stylesheet" href="/.css/style.prism.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Vue app -->
|
||||
<main :class="[palette]">
|
||||
<template>
|
||||
|
||||
<header>
|
||||
<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="https://github.com/lowlighter/metrics">Metrics {{ version }}</a>
|
||||
</header>
|
||||
|
||||
<div class="ui top">
|
||||
<aside></aside>
|
||||
<nav>
|
||||
<div @click="tab = 'overview'" :class="{active:tab === 'overview'}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 1.75a.75.75 0 00-1.5 0v12.5c0 .414.336.75.75.75h14.5a.75.75 0 000-1.5H1.5V1.75zm14.28 2.53a.75.75 0 00-1.06-1.06L10 7.94 7.53 5.47a.75.75 0 00-1.06 0L3.22 8.72a.75.75 0 001.06 1.06L7 7.06l2.47 2.47a.75.75 0 001.06 0l5.25-5.25z"></path></svg>
|
||||
Metrics preview
|
||||
</div>
|
||||
<div @click="tab = 'action'" :class="{active:tab === 'action'}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>
|
||||
Action code
|
||||
</div>
|
||||
<div @click="tab = 'markdown'" :class="{active:tab === 'markdown'}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0114.25 15h-9a.75.75 0 010-1.5h9a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 0110 4.25V1.5H5.75a.25.25 0 00-.25.25v2.5a.75.75 0 01-1.5 0v-2.5zm7.5-.188V4.25c0 .138.112.25.25.25h2.688a.252.252 0 00-.011-.013l-2.914-2.914a.272.272 0 00-.013-.011zM5.72 6.72a.75.75 0 000 1.06l1.47 1.47-1.47 1.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM3.28 7.78a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 001.06-1.06L1.81 9.25l1.47-1.47z"></path></svg>
|
||||
Markdown code
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="ui">
|
||||
|
||||
<aside>
|
||||
|
||||
<div class="ui-avatar" :style="{backgroundImage:avatar ? `url(${avatar})` : 'none'}"></div>
|
||||
|
||||
<input type="text" v-model="user" placeholder="Your GitHub username" :disabled="generated.pending" @keyup.enter="(!user)||(generated.pending)||(unusable.length > 0)||(!requests.rest.remaining)||(!requests.graphql.remaining) ? null : generate()">
|
||||
<button @click="generate" :disabled="(!user)||(generated.pending)||(unusable.length > 0)||(!requests.rest.remaining)||(!requests.graphql.remaining)">
|
||||
<template v-if="generated.pending">
|
||||
Generating metrics<span class="loading"></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
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="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(", ") }}
|
||||
</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">
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
</label>
|
||||
</template>
|
||||
</template>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<div class="preview">
|
||||
|
||||
<div class="readmes">
|
||||
<div class="readme">
|
||||
<svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
<span>{{ user }}</span><span class="slash">/</span>README<span class="md">.md</span>
|
||||
</div>
|
||||
<div class="readme" v-if="tab in docs">
|
||||
<a :href="docs[tab].link">{{ docs[tab].name }}</a>
|
||||
</div>
|
||||
<div class="readme">
|
||||
<a href="https://github.com/lowlighter/metrics/discussions" target="_blank">Send feedback</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tab == 'overview'">
|
||||
<div class="alert error" v-if="generated.error">
|
||||
An error occurred while generating your metrics :(<br>
|
||||
<small>{{ generated.error.message }}</small>
|
||||
</div>
|
||||
<div class="image" :class="{pending:generated.pending}" v-html="generated.content||templates.placeholder.image"></div>
|
||||
</div>
|
||||
<div v-else-if="tab == 'markdown'">
|
||||
Add the markdown below to your <i>README.md</i> <template v-if="user">at <a :href="repo">{{ user }}/{{ user }}</a></template>
|
||||
<div class="code">
|
||||
<Prism language="markdown" :code="embed"></Prism>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="tab == 'action'">
|
||||
<div>
|
||||
<button class="copy-action" data-clipboard-target=".code">Copy Action Code</button>
|
||||
</div>
|
||||
Create a new workflow with the following content <template v-if="user">at <a :href="repo">{{ user }}/{{ user }}</a></template>
|
||||
<div class="code">
|
||||
<Prism language="yaml" :code="action"></Prism>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<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/prism.min.js"></script>
|
||||
<script src="/.js/prism.markdown.min.js"></script>
|
||||
<script src="/.js/prism.yaml.min.js"></script>
|
||||
<script src="/.js/ejs.min.js"></script>
|
||||
<script src="/.js/faker.min.js?v=7.x" type="module"></script>
|
||||
<script src="/.js/vue.min.js"></script>
|
||||
<script src="/.js/vue.prism.min.js"></script>
|
||||
<script src="/.js/clipboard.min.js"></script>
|
||||
<script src="/.js/embed/app.placeholder.js?v=3.26"></script>
|
||||
<script src="/.js/embed/app.js?v=3.26"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 139 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 99 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
@@ -10,7 +10,6 @@
|
||||
<link rel="icon" href="/.favicon.png">
|
||||
<link rel="stylesheet" href="/.css/style.vars.css">
|
||||
<link rel="stylesheet" href="/.css/style.css">
|
||||
<link rel="stylesheet" href="/.css/style.prism.css" />
|
||||
</head>
|
||||
<body>
|
||||
<!-- Vue app -->
|
||||
@@ -22,165 +21,11 @@
|
||||
<a href="https://github.com/lowlighter/metrics">Metrics {{ version }}</a>
|
||||
</header>
|
||||
|
||||
<div class="ui top">
|
||||
<aside></aside>
|
||||
<nav>
|
||||
<div @click="mode = 'metrics', tab = 'overview'" :class="{active:tab === 'overview'}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 1.75a.75.75 0 00-1.5 0v12.5c0 .414.336.75.75.75h14.5a.75.75 0 000-1.5H1.5V1.75zm14.28 2.53a.75.75 0 00-1.06-1.06L10 7.94 7.53 5.47a.75.75 0 00-1.06 0L3.22 8.72a.75.75 0 001.06 1.06L7 7.06l2.47 2.47a.75.75 0 001.06 0l5.25-5.25z"></path></svg>
|
||||
Metrics preview
|
||||
</div>
|
||||
<div @click="(user)&&(mode === 'metrics') ? tab = 'action' : null" :class="{active:tab === 'action', disabled:(!user)||(mode !== 'metrics')}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z"></path></svg>
|
||||
Action code
|
||||
</div>
|
||||
<div @click="(user)&&(mode === 'metrics') ? tab = 'markdown' : null" :class="{active:tab === 'markdown', disabled:(!user)||(mode !== 'metrics')}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4 1.75C4 .784 4.784 0 5.75 0h5.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v8.586A1.75 1.75 0 0114.25 15h-9a.75.75 0 010-1.5h9a.25.25 0 00.25-.25V6h-2.75A1.75 1.75 0 0110 4.25V1.5H5.75a.25.25 0 00-.25.25v2.5a.75.75 0 01-1.5 0v-2.5zm7.5-.188V4.25c0 .138.112.25.25.25h2.688a.252.252 0 00-.011-.013l-2.914-2.914a.272.272 0 00-.013-.011zM5.72 6.72a.75.75 0 000 1.06l1.47 1.47-1.47 1.47a.75.75 0 101.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0zM3.28 7.78a.75.75 0 00-1.06-1.06l-2 2a.75.75 0 000 1.06l2 2a.75.75 0 001.06-1.06L1.81 9.25l1.47-1.47z"></path></svg>
|
||||
Markdown code
|
||||
</div>
|
||||
<div @click="mode = 'insights', tab = 'insights'" :class="{active:tab === 'insights'}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M14.184 1.143a1.75 1.75 0 00-2.502-.57L.912 7.916a1.75 1.75 0 00-.53 2.32l.447.775a1.75 1.75 0 002.275.702l11.745-5.656a1.75 1.75 0 00.757-2.451l-1.422-2.464zm-1.657.669a.25.25 0 01.358.081l1.422 2.464a.25.25 0 01-.108.35l-2.016.97-1.505-2.605 1.85-1.26zM9.436 3.92l1.391 2.41-5.42 2.61-.942-1.63 4.97-3.39zM3.222 8.157l-1.466 1a.25.25 0 00-.075.33l.447.775a.25.25 0 00.325.1l1.598-.769-.83-1.436zm6.253 2.306a.75.75 0 00-.944-.252l-1.809.87a.75.75 0 00-.293.253L4.38 14.326a.75.75 0 101.238.848l1.881-2.75v2.826a.75.75 0 001.5 0v-2.826l1.881 2.75a.75.75 0 001.238-.848l-2.644-3.863z"></path></svg>
|
||||
Metrics Insights
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="ui" v-if="mode === 'metrics'">
|
||||
|
||||
<aside>
|
||||
|
||||
<div class="ui-avatar" :style="{backgroundImage:avatar ? `url(${avatar})` : 'none'}"></div>
|
||||
|
||||
<input type="text" v-model="user" placeholder="Your GitHub username" :disabled="generated.pending" @keyup.enter="(!user)||(generated.pending)||(unusable.length > 0)||(!requests.rest.remaining)||(!requests.graphql.remaining) ? null : generate()">
|
||||
<button @click="generate" :disabled="(!user)||(generated.pending)||(unusable.length > 0)||(!requests.rest.remaining)||(!requests.graphql.remaining)">
|
||||
<template v-if="generated.pending">
|
||||
Generating metrics<span class="loading"></span>
|
||||
</template>
|
||||
<template v-else>
|
||||
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="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(", ") }}
|
||||
</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">
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
</label>
|
||||
</template>
|
||||
</template>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<div class="preview">
|
||||
|
||||
<div class="readmes">
|
||||
<div class="readme">
|
||||
<svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
|
||||
<span>{{ user }}</span><span class="slash">/</span>README<span class="md">.md</span>
|
||||
</div>
|
||||
<div class="readme" v-if="tab in docs">
|
||||
<a :href="docs[tab].link">{{ docs[tab].name }}</a>
|
||||
</div>
|
||||
<div class="readme">
|
||||
<a href="https://github.com/lowlighter/metrics/discussions" target="_blank">Send feedback</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tab == 'overview'">
|
||||
<div class="error" v-if="generated.error">
|
||||
An error occurred while generating your metrics :(<br>
|
||||
<small>{{ generated.error.message }}</small>
|
||||
</div>
|
||||
<div class="image" :class="{pending:generated.pending}" v-html="generated.content||templates.placeholder.image"></div>
|
||||
</div>
|
||||
<div v-else-if="tab == 'markdown'">
|
||||
Add the markdown below to your <i>README.md</i> at <a :href="repo">{{ user }}/{{ user }}</a>
|
||||
<div class="code">
|
||||
<Prism language="markdown" :code="embed"></Prism>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="tab == 'action'">
|
||||
<div>
|
||||
<button class="copy-action" data-clipboard-target=".code">Copy Action Code</button>
|
||||
</div>
|
||||
Create a new workflow with the following content at <a :href="repo">{{ user }}/{{ user }}</a>
|
||||
<div class="code">
|
||||
<Prism language="yaml" :code="action"></Prism>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<iframe v-else src="/about?embed=1" frameborder="0"></iframe>
|
||||
<main>
|
||||
<section class="container center">
|
||||
Hi
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<a href="https://github.com/lowlighter/metrics">Repository</a>
|
||||
@@ -193,15 +38,7 @@
|
||||
</main>
|
||||
<!-- Scripts -->
|
||||
<script src="/.js/axios.min.js"></script>
|
||||
<script src="/.js/prism.min.js"></script>
|
||||
<script src="/.js/prism.markdown.min.js"></script>
|
||||
<script src="/.js/prism.yaml.min.js"></script>
|
||||
<script src="/.js/ejs.min.js"></script>
|
||||
<script src="/.js/faker.min.js?v=7.x" type="module"></script>
|
||||
<script src="/.js/vue.min.js"></script>
|
||||
<script src="/.js/vue.prism.min.js"></script>
|
||||
<script src="/.js/clipboard.min.js"></script>
|
||||
<script src="/.js/app.placeholder.js?v=3.26"></script>
|
||||
<script src="/.js/app.js?v=3.26"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,7 +10,7 @@
|
||||
<link rel="icon" href="/.favicon.png">
|
||||
<link rel="stylesheet" href="/.css/style.vars.css">
|
||||
<link rel="stylesheet" href="/.css/style.css">
|
||||
<link rel="stylesheet" href="/about/.statics/style.css">
|
||||
<link rel="stylesheet" href="/insights/.statics/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Vue app -->
|
||||
@@ -585,6 +585,6 @@
|
||||
<!-- Scripts -->
|
||||
<script src="/.js/axios.min.js"></script>
|
||||
<script src="/.js/vue.min.js"></script>
|
||||
<script src="/about/.statics/script.js?v=3.26"></script>
|
||||
<script src="/insights/.statics/script.js?v=3.26"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -15,7 +15,7 @@
|
||||
this.localstorage = !!(new URLSearchParams(location.search).get("localstorage"))
|
||||
//User
|
||||
const user = location.pathname.split("/").pop()
|
||||
if ((user) && (user !== "about")) {
|
||||
if ((user) && (!["about", "insights"].includes(user))) {
|
||||
this.user = user
|
||||
await this.search()
|
||||
}
|
||||
@@ -99,7 +99,7 @@
|
||||
this.loaded = ["base", ...Object.keys(this.metrics?.rendered?.plugins ?? {})]
|
||||
return
|
||||
}
|
||||
const {processing, ...data} = (await axios.get(`/about/query/${this.user}`)).data
|
||||
const {processing, ...data} = (await axios.get(`/insights/query/${this.user}`)).data
|
||||
if (processing) {
|
||||
let completed = 0
|
||||
this.progress = 1 / (data.plugins.length + 1)
|
||||
@@ -109,7 +109,7 @@
|
||||
return
|
||||
do {
|
||||
try {
|
||||
const {data} = await axios.get(`/about/query/${this.user}/${plugin}`)
|
||||
const {data} = await axios.get(`/insights/query/${this.user}/${plugin}`)
|
||||
if (!data)
|
||||
throw new Error(`${plugin}: no data`)
|
||||
if (plugin === "base")
|
||||
@@ -220,7 +220,7 @@
|
||||
return {login, name, avatar: this.metrics?.rendered.computed.avatar, type: this.metrics?.rendered.account}
|
||||
},
|
||||
url() {
|
||||
return `${window.location.protocol}//${window.location.host}/about/${this.user}`
|
||||
return `${window.location.protocol}//${window.location.host}/insights/${this.user}`
|
||||
},
|
||||
preview() {
|
||||
return /-preview$/.test(this.version)
|
||||
@@ -281,7 +281,7 @@
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.error {
|
||||
.alert.error {
|
||||
padding: 1.25rem 1rem;
|
||||
background-image: linear-gradient(var(--color-alert-error-bg),var(--color-alert-error-bg));
|
||||
color: var(--color-alert-error-text);
|
||||
|
||||
Reference in New Issue
Block a user