290 lines
14 KiB
JavaScript
290 lines
14 KiB
JavaScript
;(async function() {
|
|
//Init
|
|
const {data:templates} = await axios.get("/.templates")
|
|
const {data:plugins} = await axios.get("/.plugins")
|
|
const {data:base} = await axios.get("/.plugins.base")
|
|
const {data:version} = await axios.get("/.version")
|
|
//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) {}
|
|
//GitHub limit tracker
|
|
const {data:requests} = await axios.get("/.requests")
|
|
this.requests = requests
|
|
setInterval(async () => {
|
|
const {data:requests} = await axios.get("/.requests")
|
|
this.requests = requests
|
|
}, 15000)
|
|
//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:{
|
|
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",
|
|
requests:{limit:0, used:0, remaining:0, reset:0},
|
|
cached:new Map(),
|
|
config:{
|
|
timezone:"",
|
|
animated:true,
|
|
},
|
|
plugins:{
|
|
base,
|
|
list:plugins,
|
|
enabled:{base:Object.fromEntries(base.map(key => [key, true]))},
|
|
descriptions:{
|
|
pagespeed:"⏱️ Website performances",
|
|
languages:"🈷️ Most used languages",
|
|
followup:"🎟️ Issues and pull requests",
|
|
traffic:"🧮 Pages views",
|
|
lines:"👨💻 Lines of code changed",
|
|
habits:"💡 Coding habits",
|
|
music:"🎼 Music plugin",
|
|
posts:"✒️ Recent posts",
|
|
isocalendar:"📅 Isometric commit calendar",
|
|
gists:"🎫 Gists metrics",
|
|
topics:"📌 Starred topics",
|
|
projects:"🗂️ Projects",
|
|
tweets:"🐤 Latest tweets",
|
|
stars:"🌟 Recently starred repositories",
|
|
stargazers:"✨ Stargazers over last weeks",
|
|
activity:"📰 Recent activity",
|
|
people:"🧑🤝🧑 Followers and followed",
|
|
base:"🗃️ Base content",
|
|
"base.header":"Header",
|
|
"base.activity":"Account activity",
|
|
"base.community":"Community stats",
|
|
"base.repositories":"Repositories metrics",
|
|
"base.metadata":"Metadata",
|
|
},
|
|
options:{
|
|
descriptions:{
|
|
"languages.ignored":{text:"Ignored languages", placeholder:"lang-0, lang-1, ..."},
|
|
"languages.skipped":{text:"Skipped repositories", placeholder:"repo-0, repo-1, ..."},
|
|
"pagespeed.detailed":{text:"Detailed audit", type:"boolean"},
|
|
"pagespeed.screenshot":{text:"Audit screenshot", type:"boolean"},
|
|
"pagespeed.url":{text:"Url", placeholder:"(default to GitHub attached)"},
|
|
"habits.from":{text:"Events to use", type:"number", min:1, max:1000},
|
|
"habits.days":{text:"Max events age", type:"number", min:1, max:30},
|
|
"habits.facts":{text:"Display facts", type:"boolean"},
|
|
"habits.charts":{text:"Display charts", type:"boolean"},
|
|
"music.playlist":{text:"Playlist url", placeholder:"https://embed.music.apple.com/en/playlist/"},
|
|
"music.limit":{text:"Limit", type:"number", min:1, max:100},
|
|
"posts.limit":{text:"Limit", type:"number", min:1, max:30},
|
|
"posts.user":{text:"Username", placeholder:"(default to GitHub login)"},
|
|
"posts.source":{text:"Source", type:"select", values:["dev.to"]},
|
|
"isocalendar.duration":{text:"Duration", type:"select", values:["half-year", "full-year"]},
|
|
"projects.limit":{text:"Limit", type:"number", min:0, max:100},
|
|
"projects.repositories":{text:"Repositories projects", placeholder:"user/repo/projects/1, ..."},
|
|
"topics.mode":{text:"Mode", type:"select", values:["starred", "mastered"]},
|
|
"topics.sort":{text:"Sort by", type:"select", values:["starred", "activity", "stars", "random"]},
|
|
"topics.limit":{text:"Limit", type:"number", min:0, max:20},
|
|
"tweets.limit":{text:"Limit", type:"number", min:1, max:10},
|
|
"tweets.user":{text:"Username", placeholder:"(default to GitHub attached)"},
|
|
"stars.limit":{text:"Limit", type:"number", min:1, max:100},
|
|
"activity.limit":{text:"Limit", type:"number", min:1, max:100},
|
|
"activity.days":{text:"Max events age", type:"number", min:1, max:9999},
|
|
"activity.filter":{text:"Events type", placeholder:"all"},
|
|
"people.size":{text:"Limit", type:"number", min:16, max:64},
|
|
"people.limit":{text:"Limit", type:"number", min:1, max:9999},
|
|
"people.types":{text:"Types", placeholder:"followers, following"},
|
|
"people.identicons":{text:"Use identicons", type:"boolean"},
|
|
},
|
|
"languages.ignored":"",
|
|
"languages.skipped":"",
|
|
"pagespeed.detailed":false,
|
|
"pagespeed.screenshot":false,
|
|
"habits.from":200,
|
|
"habits.days":14,
|
|
"habits.facts":true,
|
|
"habits.charts":false,
|
|
"music.playlist":"",
|
|
"music.limit":4,
|
|
"posts.limit":4,
|
|
"posts.user":"",
|
|
"posts.source":"dev.to",
|
|
"isocalendar.duration":"half-year",
|
|
"projects.limit":4,
|
|
"projects.repositories":"",
|
|
"topics.mode":"starred",
|
|
"topics.sort":"stars",
|
|
"topics.limit":12,
|
|
"tweets.limit":2,
|
|
"tweets.user":"",
|
|
"stars.limit":4,
|
|
"activity.limit":5,
|
|
"activity.days":14,
|
|
"activity.filter":"all",
|
|
"people.size":28,
|
|
"people.limit":28,
|
|
"people.types":"followers, following",
|
|
"people.identicons":false,
|
|
},
|
|
},
|
|
templates:{
|
|
list:templates,
|
|
selected:templates[0]?.name||"classic",
|
|
placeholder:{
|
|
timeout:null,
|
|
image:""
|
|
},
|
|
descriptions:{
|
|
classic:"Classic template",
|
|
terminal:"Terminal template",
|
|
repository:"(hidden)",
|
|
},
|
|
},
|
|
generated:{
|
|
pending:false,
|
|
content:"",
|
|
error:false,
|
|
},
|
|
},
|
|
//Computed data
|
|
computed:{
|
|
//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)}`)
|
|
//Config
|
|
const config = Object.entries(this.config).filter(([key, value]) => value).map(([key, value]) => `config.${key}=${encodeURIComponent(value)}`)
|
|
//Template
|
|
const template = (this.templates.selected !== templates[0]) ? [`template=${this.templates.selected}`] : []
|
|
//Generated url
|
|
const params = [...template, ...plugins, ...options, ...config].join("&")
|
|
return `${window.location.protocol}//${window.location.host}/${this.user}${params.length ? `?${params}` : ""}`
|
|
},
|
|
//Embedded generated code
|
|
embed() {
|
|
return ``
|
|
},
|
|
//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`,
|
|
` schedule: [{cron: "0 * * * *"}]`,
|
|
` # Lines below let you run workflow manually and on each commit`,
|
|
` push: {branches: ["master", "main"]}`,
|
|
` workflow_dispatch:`,
|
|
`jobs:`,
|
|
` github-metrics:`,
|
|
` runs-on: ubuntu-latest`,
|
|
` steps:`,
|
|
` - uses: lowlighter/metrics@latest`,
|
|
` with:`,
|
|
` # Your GitHub token`,
|
|
` token: ${"$"}{{ secrets.METRICS_TOKEN }}`,
|
|
` # GITHUB_TOKEN is a special auto-generated token restricted to current repository, which is used to push files in it`,
|
|
` committer_token: ${"$"}{{ secrets.GITHUB_TOKEN }}`,
|
|
``,
|
|
` # 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.enabled).filter(([key, value]) => (key !== "base")&&(value)).map(([key]) => ` plugin_${key}: yes`),
|
|
...Object.entries(this.plugins.options).filter(([key, value]) => value).filter(([key, value]) => this.plugins.enabled[key.split(".")[0]]).map(([key, value]) => ` plugin_${key.replace(/[.]/, "_")}: ${typeof value === "boolean" ? {true:"yes", false:"no"}[value] : value}`),
|
|
...Object.entries(this.config).filter(([key, value]) => value).map(([key, value]) => ` config_${key.replace(/[.]/, "_")}: ${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))
|
|
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
|
|
}
|
|
},
|
|
//Methods
|
|
methods:{
|
|
//Load and render placeholder image
|
|
async mock({timeout = 600} = {}) {
|
|
clearTimeout(this.templates.placeholder.timeout)
|
|
this.templates.placeholder.timeout = setTimeout(async () => {
|
|
this.templates.placeholder.image = await placeholder(this)
|
|
this.generated.content = ""
|
|
this.generated.error = false
|
|
}, timeout)
|
|
},
|
|
//Resize mock image
|
|
mockresize() {
|
|
const svg = document.querySelector(".preview .image svg")
|
|
if (svg) {
|
|
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 = false
|
|
} catch {
|
|
this.generated.error = true
|
|
}
|
|
finally {
|
|
this.generated.pending = false
|
|
}
|
|
},
|
|
},
|
|
})
|
|
})() |