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

Introducing metrics insights! (#228)

Browse Source
This commit is contained in:
Simon Lecoq
2021-04-12 21:26:31 +02:00
committed by GitHub
parent 65442e671d
commit 14ce8416be
11 changed files with 886 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -89,7 +89,14 @@
let requests = {limit:0, used:0, remaining:0, reset:NaN}
if (!conf.settings.notoken) {
requests = (await rest.rateLimit.get()).data.rate
setInterval(async() => requests = (await rest.rateLimit.get()).data.rate, 5*60*1000)
setInterval(async() => {
try {
requests = (await rest.rateLimit.get()).data.rate
}
catch {
console.debug("metrics/app > failed to update remaining requests")
}
}, 5*60*1000)
}
//Web
app.get("/", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/index.html`))
@@ -144,6 +151,57 @@
}
})
//About routes
app.use("/about/.statics/", express.static(`${conf.paths.statics}/about`))
app.get("/about/", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/about/index.html`))
app.get("/about/index.html", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/about/index.html`))
app.get("/about/:login", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/about/index.html`))
app.get("/about/query/:login/", ...middlewares, async(req, res) => {
//Check username
const login = req.params.login?.replace(/[\n\r]/g, "")
if (!/^[-\w]+$/i.test(login)) {
console.debug(`metrics/app/${login}/insights > 400 (invalid username)`)
return res.status(400).send("Bad request: username seems invalid")
}
//Compute metrics
try {
//Read cached data if possible
if ((!debug)&&(cached)&&(cache.get(`about.${login}`))) {
console.debug(`metrics/app/${login}/insights > using cached results`)
return res.send(cache.get(`about.${login}`))
}
//Compute metrics
console.debug(`metrics/app/${login}/insights > compute insights`)
const json = await metrics({
login, q:{
template:"classic",
achievements:true, "achievements.threshold":"X",
isocalendar:true, "isocalendar.duration":"full-year",
languages:true, "languages.limit":0,
activity:true, "activity.limit":100, "activity.days":0,
notable:true,
},
}, {graphql, rest, plugins:{achievements:{enabled:true}, isocalendar:{enabled:true}, languages:{enabled:true}, activity:{enabled:true}, notable:{enabled:true}}, conf, convert:"json"}, {Plugins, Templates})
//Cache
if ((!debug)&&(cached)) {
const maxage = Math.round(Number(req.query.cache))
cache.put(`about.${login}`, json, maxage > 0 ? maxage : cached)
}
return res.json(json)
}
//Internal error
catch (error) {
//Not found user
if ((error instanceof Error)&&(/^user not found$/.test(error.message))) {
console.debug(`metrics/app/${login} > 404 (user/organization not found)`)
return res.status(404).send("Not found: unknown user or organization")
}
//General error
console.error(error)
return res.status(500).send("Internal Server Error: failed to process metrics correctly")
}
})
//Metrics
const pending = new Map()
app.get("/:login/:repository?", ...middlewares, async(req, res) => {

316
source/app/web/statics/about/index.html Normal file
View File

@@ -0,0 +1,316 @@
<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="/about/.statics/style.css">
</head>
<body>
<!-- Vue app -->
<main :class="[palette]">
<template>
<header v-once v-if="!embed">
<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 v{{ version }}</a>
</header>
<section class="container center">
<div class="search" v-if="searchable">
<div class="about">
<h2>
<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>{{ requests.remaining }} GitHub requests remaining</small>
</div>
<div class="inputs">
<input type="text" v-model="user" @keyup.enter="search" :disabled="pending">
<button @click="search" :disabled="pending">
{{ pending ? 'Working on it :)' : 'Search user!' }}
</button>
</div>
<small class="info">
Display rankings, highlights, commits calendar, used languages and recent activity from any user account!
</small>
<small class="info" v-if="metrics">
Share this profile using <a :href="url">{{ url }}</a>
</small>
</div>
<div v-else-if="!metrics">
<p>
Generating insights for {{ user }}...
</p>
</div>
<div class="error" v-if="error">
An error occurred while generating metrics :(<br>
<small>{{ error.message }}</small>
</div>
</section>
<template v-if="metrics">
<section class="container">
<div class="user">
<img :src="account.avatar">
<div class="info">
<div class="name">{{ account.name }}</div>
<div class="login">{{ account.login }}</div>
</div>
</div>
</section>
<div class="rankeds">
<div v-for="{icon, title, text, rank, progress, value, leaderboard = null} in ranked" class="ranked" :class="{[rank.charAt(0).toLocaleLowerCase()]:rank !== '$', secret:rank === '$'}">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="44" width="44">
<defs>
<mask id="mask">
<circle class="gauge-base" r="25" cx="28" cy="28" fill="white"></circle>
</mask>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" class="gauge">
<circle class="gauge-base" r="25" cx="28" cy="28"></circle>
<circle v-if="(progress)||(rank !== 'X')" class="gauge-arc" transform="rotate(-90 28 28)" r="25" cx="28" cy="28" :stroke-dasharray="`${progress*155} 155`"></circle>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" mask="url(#mask)" v-html="icon"></svg>
</svg>
</div>
<div class="info">
<div class="user-rank">{{ format("number", leaderboard.user) }}<sup>{{ {1:"st", 2:"nd", 3:"rd"}[leaderboard.user%10] ?? "th" }}</sup></div>
<div class="total-rank">/ {{ format("number", leaderboard.total, {notation:"compact", compactDisplay:"long"}) }} {{ leaderboard.type }}</div>
<div class="title">{{ title }}</div>
<div class="text">{{ text }}</div>
</div>
</div>
</div>
<section class="container" v-if="contributions.length">
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z"></path></svg>
Notable contributions
</h2>
<div class="contributions">
<a v-for="{name, avatar} in contributions" class="contribution" :href="`https://github.com/${name}`">
<img :src="avatar" alt="">
@{{ name }}
</a>
</div>
</section>
<section class="container">
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>
Highlights
</h2>
<div class="achievements">
<div v-for="{icon, title, text, rank, progress, value, leaderboard = null} in achievements" class="achievement" :class="{[rank.charAt(0).toLocaleLowerCase()]:rank !== '$', secret:rank === '$'}">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" height="44" width="44">
<defs>
<mask id="mask">
<circle class="gauge-base" r="25" cx="28" cy="28" fill="white"></circle>
</mask>
</defs>
<svg xmlns="http://www.w3.org/2000/svg" class="gauge">
<circle class="gauge-base" r="25" cx="28" cy="28"></circle>
<circle v-if="(progress)||(rank !== 'X')" class="gauge-arc" transform="rotate(-90 28 28)" r="25" cx="28" cy="28" :stroke-dasharray="`${progress*155} 155`"></circle>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" mask="url(#mask)" v-html="icon"></svg>
</svg>
</div>
<div class="info">
<div class="title">{{ title }}</div>
<div class="text">{{ text }}</div>
</div>
</div>
</div>
</section>
<section class="container">
<div class="languages">
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
Languages used
</h2>
<div class="list" v-if="languages.length">
<div class="language" v-for="{name, value, color, size} of languages">
<div class="progress" :style="{width:`${100*value}%`, backgroundColor:color}"></div>
<div :style="{color}">
<span class="name">{{ name }}</span>
<span class="percent">({{ format("number", value, {style:"percent", maximumFractionDigits:2})}})</span>
</div>
<div class="size">{{ format("number", size) }} byte{{ "s" }}</div>
</div>
</div>
<div v-else>
No languages used
</div>
</div>
</section>
<section class="container">
<div class="isocalendar">
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.75 0a.75.75 0 01.75.75V2h5V.75a.75.75 0 011.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 014.75 0zm0 3.5h8.5a.25.25 0 01.25.25V6h-11V3.75a.25.25 0 01.25-.25h2zm-2.25 4v6.75c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V7.5h-11z"></path></svg>
Commits calendar
</h2>
<div class="svg" v-html="isocalendar"></div>
</div>
</section>
<section class="container">
<div class="activity">
<h2>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 8a8 8 0 1116 0v5.25a.75.75 0 01-1.5 0V8a6.5 6.5 0 10-13 0v5.25a.75.75 0 01-1.5 0V8zm5.5 4.25a.75.75 0 01.75-.75h3.5a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75zM3 6.75C3 5.784 3.784 5 4.75 5h6.5c.966 0 1.75.784 1.75 1.75v1.5A1.75 1.75 0 0111.25 10h-6.5A1.75 1.75 0 013 8.25v-1.5zm1.47-.53a.75.75 0 011.06 0l.97.97.97-.97a.75.75 0 011.06 0l.97.97.97-.97a.75.75 0 111.06 1.06l-1.5 1.5a.75.75 0 01-1.06 0L8 7.81l-.97.97a.75.75 0 01-1.06 0l-1.5-1.5a.75.75 0 010-1.06z"></path></svg>
Recent activity
</h2>
<ul v-if="activity.length">
<template v-for="{actor, type, repo, timestamp, ...event} of activity">
<li v-if="type === 'comment'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg v-if="event.on === 'pr'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v8.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 14.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-8.5zM1.75 1A1.75 1.75 0 000 2.75v8.5C0 12.216.784 13 1.75 13H3v1.543a1.457 1.457 0 002.487 1.03L8.061 13h6.189A1.75 1.75 0 0016 11.25v-8.5A1.75 1.75 0 0014.25 1H1.75zm5.03 3.47a.75.75 0 010 1.06L5.31 7l1.47 1.47a.75.75 0 01-1.06 1.06l-2-2a.75.75 0 010-1.06l2-2a.75.75 0 011.06 0zm2.44 0a.75.75 0 000 1.06L10.69 7 9.22 8.47a.75.75 0 001.06 1.06l2-2a.75.75 0 000-1.06l-2-2a.75.75 0 00-1.06 0z"></path></svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z"></path></svg>
<div class="content">Commented on <a :href="`https://github.com/${repo}/${{issue:'issues', pr:'pull', commit:'commit'}[event.on]}/${event.number}`">#{{ event.number }} {{ event.title }}</a> from <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'member'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm.061 3.073a4 4 0 10-5.123 0 6.004 6.004 0 00-3.431 5.142.75.75 0 001.498.07 4.5 4.5 0 018.99 0 .75.75 0 101.498-.07 6.005 6.005 0 00-3.432-5.142z"></path></svg>
<div class="content">Added <a :href="`https://github.com/${event.user}`"></a> as collaborator in <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'star'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z"></path></svg>
<div class="content">Starred <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'release'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8.878.392a1.75 1.75 0 00-1.756 0l-5.25 3.045A1.75 1.75 0 001 4.951v6.098c0 .624.332 1.2.872 1.514l5.25 3.045a1.75 1.75 0 001.756 0l5.25-3.045c.54-.313.872-.89.872-1.514V4.951c0-.624-.332-1.2-.872-1.514L8.878.392zM7.875 1.69a.25.25 0 01.25 0l4.63 2.685L8 7.133 3.245 4.375l4.63-2.685zM2.5 5.677v5.372c0 .09.047.171.125.216l4.625 2.683V8.432L2.5 5.677zm6.25 8.271l4.625-2.683a.25.25 0 00.125-.216V5.677L8.75 8.432v5.516z"></path></svg>
<div class="content">{{ event.draft ? "Drafted release" : event.prerelease ? "Pre-released" : "Released" }} of <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'fork'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z"></path></svg>
<div class="content">Forked <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'push'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"></path></svg>
<div class="content">
Pushed {{ event.size }} commit{{ "s" }} in <a :href="`https://github.com/${repo}`">{{ repo }}</a> <template v-if="event.branch">on branch <code>{{ event.branch }}</code></template>
<ul>
<li v-for="commit of event.commits">
<a :href="`https://github.com/${repo}/commit/${commit.sha}`">#{{ commit.sha }}</a> {{ commit.message }}
</li>
</ul>
</div>
</div>
</li>
<li v-if="type === 'issue'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>
<div class="content">{{ event.action === "opened" ? "Opened" : event.action === "reopened" ? "Reopened" : "Closed" }} <a :href="`https://github.com/${repo}/issues/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'pr'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z"></path></svg>
<div class="content">
{{ event.action === "opened" ? "Opened" : event.action === "merged" ? "Merged" : "Closed" }} <a :href="`https://github.com/${repo}/pull/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a>
<ul>
<li>
{{ event.files.changed }} file{{ "s" }} changed <code>++{{ event.lines.added }} --{{ event.lines.deleted }}</code>
</li>
</ul>
</div>
</div>
</li>
<li v-if="type === 'wiki'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"></path></svg>
<div class="content">
Updated {{ event.pages.length }} wiki page{{ "s" }} in <a :href="`https://github.com/${repo}`">{{ repo }}</a>
<ul>
<li v-for="page of event.pages">
{{ page }}
</li>
</ul>
</div>
</div>
</li>
<li v-if="type === 'public'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path></svg>
<div class="content">Made <a :href="`https://github.com/${repo}`">{{ repo }}</a> public</div>
</div>
</li>
<li v-if="type === 'review'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 1.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v7.736a.75.75 0 101.5 0V1.75A1.75 1.75 0 0011.25 0h-8.5A1.75 1.75 0 001 1.75v11.5c0 .966.784 1.75 1.75 1.75h3.17a.75.75 0 000-1.5H2.75a.25.25 0 01-.25-.25V1.75zM4.75 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM4 7.75A.75.75 0 014.75 7h2a.75.75 0 010 1.5h-2A.75.75 0 014 7.75zm11.774 3.537a.75.75 0 00-1.048-1.074L10.7 14.145 9.281 12.72a.75.75 0 00-1.062 1.058l1.943 1.95a.75.75 0 001.055.008l4.557-4.45z"></path></svg>
<div class="content">Reviewed <a :href="`https://github.com/${repo}/pull/${event.number}`">#{{ event.number }} {{ event.title }}</a> in <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'ref/create'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg v-if="event.ref.type === 'branch'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
<div class="content">Created new {{ event.ref.type }} <code>{{ event.ref.name }}</code> in <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
<li v-if="type === 'ref/delete'">
<time :datetime="timestamp">{{ format("date", timestamp, {timeStyle:"short", dateStyle:"short"}) }}</time>
<div class="event">
<svg v-if="event.ref.type === 'branch'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M11.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122V6A2.5 2.5 0 0110 8.5H6a1 1 0 00-1 1v1.128a2.251 2.251 0 11-1.5 0V5.372a2.25 2.25 0 111.5 0v1.836A2.492 2.492 0 016 7h4a1 1 0 001-1v-.628A2.25 2.25 0 019.5 3.25zM4.25 12a.75.75 0 100 1.5.75.75 0 000-1.5zM3.5 3.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0z"></path></svg>
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg>
<div class="content">Deleted {{ event.ref.type }} <code>{{ event.ref.name }}</code> from <a :href="`https://github.com/${repo}`">{{ repo }}</a></div>
</div>
</li>
</template>
</ul>
<div v-else>
No recent activity
</div>
</div>
</section>
</template>
<footer v-once v-if="!embed">
<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/github-metrics-as-svg-image">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="/about/.statics/script.js"></script>
</body>
</html>

113
source/app/web/statics/about/script.js Normal file
View File

@@ -0,0 +1,113 @@
;(async function() {
//Init
const {data:version} = await axios.get("/.version")
const {data:hosted} = await axios.get("/.hosted")
//App
return new Vue({
//Initialization
el:"main",
async mounted() {
//Palette
try {
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
//Initialization
const user = location.pathname.split("/").pop()
if ((user)&&(user !== "about")) {
this.user = user
await this.search()
}
else
this.searchable = true
//Embed
this.embed = !!(new URLSearchParams(location.search).get("embed"))
},
//Watchers
watch:{
palette:{
immediate:true,
handler(current, previous) {
document.querySelector("body").classList.remove(previous)
document.querySelector("body").classList.add(current)
}
}
},
//Methods
methods:{
format(type, value, options) {
switch (type) {
case "number":
return new Intl.NumberFormat(navigator.lang, options).format(value)
case "date":
return new Intl.DateTimeFormat(navigator.lang, options).format(new Date(value))
}
return value
},
async search() {
try {
this.error = null
this.metrics = null
this.pending = true
this.metrics = (await axios.get(`/about/query/${this.user}`)).data
}
catch (error) {
this.error = error
}
finally {
this.pending = false
}
}
},
//Computed properties
computed:{
ranked() {
return this.metrics?.rendered.plugins.achievements.list.filter(({leaderboard}) => leaderboard).sort((a, b) => a.leaderboard.type.localeCompare(b.leaderboard.type))
},
achievements() {
return this.metrics?.rendered.plugins.achievements.list.filter(({leaderboard}) => !leaderboard).filter(({title}) => !/(?:automater|octonaut|infographile)/i.test(title))
},
isocalendar() {
return this.metrics?.rendered.plugins.isocalendar.svg
.replace(/#ebedf0/gi, "var(--color-calendar-graph-day-bg)")
.replace(/#9be9a8/gi, "var(--color-calendar-graph-day-L1-bg)")
.replace(/#40c463/gi, "var(--color-calendar-graph-day-L2-bg)")
.replace(/#30a14e/gi, "var(--color-calendar-graph-day-L3-bg)")
.replace(/#216e39/gi, "var(--color-calendar-graph-day-L4-bg)")
},
languages() {
return this.metrics?.rendered.plugins.languages.favorites
},
activity() {
return this.metrics?.rendered.plugins.activity.events
},
contributions() {
return this.metrics?.rendered.plugins.notable.contributions
},
account() {
if (!this.metrics)
return null
const {login, name} = this.metrics.rendered.user
return {login, name, avatar:this.metrics.rendered.computed.avatar}
},
url() {
return `${window.location.protocol}//${window.location.host}/about/${this.user}`
},
},
//Data initialization
data:{
version,
hosted,
user:"",
embed:false,
searchable:false,
requests:{limit:0, used:0, remaining:0, reset:0},
palette:"light",
metrics:null,
pending:false,
error:null,
}
})
})()

360
source/app/web/statics/about/style.css Normal file
View File

@@ -0,0 +1,360 @@
/* Containers */
.container {
padding: 0 1rem;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 920px;
margin: auto;
}
.center {
align-items: center;
}
/* Search */
.search {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 3rem 0 1rem;
}
.search h2 {
margin: 0;
padding: 0;
}
.search .about {
width: 100%;
display: flex;
flex-direction: column;
}
.search .about small {
font-size: .8rem;
color: var(--color-text-secondary);
text-align: left;
}
.search .inputs {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.search .inputs > * {
margin: .25rem;
}
.search .inputs input {
flex-grow: 1;
}
.search .info {
color: var(--color-text-secondary);
margin-top: 1rem;
}
.search .info svg {
fill: currentColor;
}
/* Contributions */
.contributions {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.contribution {
display: flex;
align-items: center;
border-radius: 6px;
margin: .25rem;
padding: .25rem .5rem;
padding-left: .25rem;
color: var(--color-text-primary) !important;
border: 1px solid var(--color-border-primary);
}
.contribution img {
height: 1.5rem;
width: 1.5rem;
margin-right: .5rem;
border-radius: 6px;
flex-shrink: 0;
box-shadow: 0 0 0 1px var(--color-avatar-border);
}
/* Languages */
.languages .list {
display: flex;
flex-wrap: wrap;
}
.languages .language {
width: 100%;
margin: 0 0 .5rem;
}
.languages .percent {
font-size: .8rem;
}
.languages .size {
display: flex;
font-size: .8rem;
color: var(--color-text-secondary);
}
.progress {
height: 8px;
border-radius: 6px;
outline: 1px solid transparent;
}
/* Isocalendar */
.isocalendar .svg {
margin-top: 2rem;
}
/* Activity */
.activity > ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.activity > ul > li {
margin: 0 0 1rem;
}
.activity time {
font-size: .8rem;
color: var(--color-text-secondary);
}
.activity svg {
fill: var(--color-text-primary);
flex-shrink: 0;
margin: .25rem 0;
margin-right: .5rem;
}
.activity .event {
display: flex;
align-items: flex-start;
}
.activity .event ul {
font-size: .8rem;
}
/* User */
.user {
display: flex;
justify-content: center;
margin: 2rem 0;
}
.user img {
border-radius: 50%;
height: 4.5rem;
width: 4.5rem;
margin: 0 1rem;
}
.user .info {
display: flex;
flex-direction: column;
}
.user .name {
font-size: 2rem;
}
.user .login {
font-size: 1.25rem;
}
/* Ranked achievements */
.rankeds {
display: flex;
flex-direction: column;
align-items: center;
}
.ranked {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
}
.ranked .text {
min-height: 2rem;
}
.ranked .icon {
transform: scale(1.75);
}
.ranked .info {
margin-top: 1rem;
text-align: center;
}
.ranked .title {
font-size: 1.5rem;
margin-top: .5rem;
}
.user-rank {
font-size: 1.5rem;
}
.total-rank {
opacity: .75;
}
/* Achievements */
.achievements {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.achievement {
display: flex;
margin: .5rem;
max-width: 18rem;
width: 100%;
}
/* Icon gauges */
.gauge {
stroke-linecap: round;
fill: none;
color: #58A6FF;
}
.gauge-base, .gauge-arc {
stroke: currentColor;
stroke-width: 6;
}
.gauge-base {
stroke-opacity: .2;
}
.gauge-arc {
fill: none;
stroke-dashoffset: 0;
animation-delay: 250ms;
animation: animation-gauge 1s ease forwards
}
@keyframes animation-gauge {
from {
stroke-dasharray: 0 329;
}
}
/* General and colors */
.icon {
margin: 0 .25rem;
width: 44px;
height: 44px;
}
.text {
font-size: 12px;
}
.info {
font-size: 14px;
color: #58A6FF;
}
.x .info {
color: #666666;
}
.x .gauge {
color: #B0B0B0;
}
.b .info {
color: #9D8FFF;
}
.b .gauge {
color: #9E91FF;
}
.a .info {
color: #D79533;
}
.a .gauge {
color: #E7BD69;
}
.s .info {
color: #FF0000;
}
.s .gauge {
color: #FF0000;
}
.s .icon {
filter: sepia() saturate(100);
}
.secret .info {
color: #FF76CD;
}
.secret .gauge {
color: #FF79D1;
}
/* Header */
h2 {
display: flex;
align-items: center;
font-weight: normal;
}
h2 svg {
margin-right: .25rem;
fill: currentColor;
height: 1.25rem;
width: 1.25rem;
}
/* Inputs */
label {
cursor: pointer;
}
label:hover {
background-color: var(--color-input-contrast-bg);
border-radius: 6px;
}
input[type=text], input[type=number], select {
background-color: var(--color-input-contrast-bg);
padding: .4rem .8rem;
color: var(--color-text-primary);
background-color: var(--color-input-bg);
border: 1px solid var(--color-input-border);
border-radius: 6px;
outline: none;
box-shadow: var(--color-shadow-inset);
}
input[type=text]:focus, input[type=number]:focus, select:focus {
background-color: var(--color-input-bg);
border-color: var(--color-state-focus-border);
outline: none;
box-shadow: var(--color-state-focus-shadow);
}
button {
color: var(--color-btn-primary-text);
background-color: var(--color-btn-primary-bg);
border-color: var(--color-btn-primary-border);
box-shadow: var(--color-btn-primary-shadow),var(--color-btn-primary-inset-shadow);
padding: .4rem .8rem;
border-radius: 6px;
font-weight: 500;
margin: .5rem 0;
cursor: pointer;
transition-duration: all .12s ease-out;
}
button[disabled] {
color: var(--color-btn-primary-disabled-text);
background-color: var(--color-btn-primary-disabled-bg);
border-color: var(--color-btn-primary-disabled-border);
}
button:focus {
outline: none;
}
/* Media screen */
@media only screen and (min-width: 740px) {
.rankeds {
flex-direction: row;
margin: 4rem 0 2rem;
}
.ranked {
margin-bottom: 0;
}
.languages .language {
width: 25%;
}
.search {
width: 520px;
}
}

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

@@ -48,6 +48,7 @@
data:{
version,
user:"",
mode:"metrics",
tab:"overview",
palette:"light",
requests:{limit:0, used:0, remaining:0, reset:0},

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

@@ -24,9 +24,9 @@
<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="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"></path></svg>
Overview
<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 ? tab = 'action' : null" :class="{active:tab === 'action', disabled:!user}">
<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>
@@ -36,16 +36,20 @@
<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">
<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">
<input type="text" v-model="user" placeholder="Your GitHub username" :disabled="generated.pending" @keyup.enter="(!user)||(generated.pending)||(unusable.length > 0) ? null : generate()">
<button @click="generate" :disabled="(!user)||(generated.pending)||(unusable.length > 0)">
{{ generated.pending ? 'Working on it :)' : 'Generate your metrics!' }}
</button>
@@ -145,6 +149,8 @@
</div>
<iframe v-else src="/about?embed=1" frameborder="0"></iframe>
<footer v-once>
<a href="https://github.com/lowlighter/metrics">Repository</a>
<a href="https://github.com/lowlighter/metrics/blob/master/LICENSE">License</a>

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

@@ -6,6 +6,11 @@ body {
color: var(--color-text-primary);
}
iframe {
width: 100%;
height: 100%;
}
/* Header */
header {
display: flex;

10
source/plugins/achievements/index.mjs
View File

@@ -222,7 +222,7 @@
title:"Verified",
text:"Registered a GPG key to sign commits",
icon:"<g stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M46 17.036v13.016c0 4.014-.587 8.94-4.751 13.67-5.787 5.911-12.816 8.279-13.243 8.283-.426.003-7.91-2.639-13.222-8.283C10.718 39.4 10 34.056 10 30.052V17.036a2 2 0 012-2h32a2 2 0 012 2zM16 15c0-6.616 5.384-12 12-12s12 5.384 12 12\" stroke=\"#secondary\"/><path d=\"M21 15c0-3.744 3.141-7 7-7 3.86 0 7 3.256 7 7m4.703 29.63l-3.672-3.647m-17.99-17.869l-7.127-7.081\" stroke=\"#secondary\"/><path d=\"M28 23a8 8 0 110 16 8 8 0 010-16z\" stroke=\"#primary\"/><path stroke=\"#primary\" d=\"M30.966 29.005l-4 3.994-2.002-1.995\"/></g>",
rank:value ? "$" : "X", progress:1, value, unlock:new Date(unlock?.createdAt),
rank:value ? "$" : "X", progress:value ? 1 : 0, value, unlock:new Date(unlock?.createdAt),
})
}
@@ -235,7 +235,7 @@
title:"Explorer",
text:"Starred a topic on GitHub Explore",
icon:"<g transform=\"translate(3 4)\" fill=\"none\" fill-rule=\"evenodd\"><path d=\"M10 37.5l.049.073a2 2 0 002.506.705l24.391-11.324a2 2 0 00.854-2.874l-2.668-4.27a2 2 0 00-2.865-.562L10.463 34.947A1.869 1.869 0 0010 37.5zM33.028 28.592l-4.033-6.58\" stroke=\"#primary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path stroke=\"#primary\" stroke-width=\"2\" stroke-linejoin=\"round\" d=\"M15.52 37.004l-2.499-3.979\"/><path stroke=\"#primary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M25.008 48.011l.013-15.002M17.984 47.038l6.996-14.035M32.005 47.029l-6.987-14.016\"/><path d=\"M2.032 17.015A23.999 23.999 0 001 24c0 9.3 5.29 17.365 13.025 21.35m22-.027C43.734 41.33 49 33.28 49 24a24 24 0 00-1.025-6.96M34.022 1.754A23.932 23.932 0 0025 0c-2.429 0-4.774.36-6.983 1.032\" stroke=\"#secondary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M40.64 8.472c-1.102-2.224-.935-4.764 1.382-6.465-.922-.087-2.209.326-3.004.784a6.024 6.024 0 00-2.674 7.229c.94 2.618 3.982 4.864 7.66 3.64 1.292-.429 2.615-1.508 2.996-2.665-1.8.625-5.258-.3-6.36-2.523zM21.013 6.015c-.22-.802-3.018-1.295-4.998-.919M4.998 8.006C2.25 9.22.808 11.146 1.011 12.009\" stroke=\"#primary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle stroke=\"#secondary\" stroke-width=\"2\" cx=\"11\" cy=\"9\" r=\"6\"/><path d=\"M.994 12.022c.351 1.38 5.069 1.25 10.713-.355 5.644-1.603 9.654-4.273 9.303-5.653\" stroke=\"#primary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M26.978 10.105c.318 1.123.573 1.373 1.71 1.679-1.135.314-1.388.566-1.698 1.69-.318-1.122-.573-1.373-1.711-1.679 1.135-.314 1.39-.566 1.7-1.69\" fill=\"#secondary\"/><path d=\"M26.978 10.105c.318 1.123.573 1.373 1.71 1.679-1.135.314-1.388.566-1.698 1.69-.318-1.122-.573-1.373-1.711-1.679 1.135-.314 1.39-.566 1.7-1.69z\" stroke=\"#secondary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M9.929 22.737c.317 1.121.573 1.372 1.71 1.678-1.135.314-1.389.566-1.699 1.69-.318-1.121-.573-1.372-1.71-1.679 1.134-.313 1.389-.566 1.699-1.69\" fill=\"#secondary\"/><path d=\"M9.929 22.737c.317 1.121.573 1.372 1.71 1.678-1.135.314-1.389.566-1.699 1.69-.318-1.121-.573-1.372-1.71-1.679 1.134-.313 1.389-.566 1.699-1.69z\" stroke=\"#secondary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M38.912 33.684c.318 1.122.573 1.373 1.711 1.679-1.136.313-1.39.565-1.7 1.69-.317-1.123-.573-1.372-1.71-1.68 1.136-.313 1.389-.565 1.7-1.689\" fill=\"#secondary\"/><path d=\"M38.912 33.684c.318 1.122.573 1.373 1.711 1.679-1.136.313-1.39.565-1.7 1.69-.317-1.123-.573-1.372-1.71-1.68 1.136-.313 1.389-.565 1.7-1.689z\" stroke=\"#secondary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g>",
rank:value ? "$" : "X", progress:1, value, unlock:new Date(unlock?.createdAt),
rank:value ? "$" : "X", progress:value ? 1 : 0, value, unlock:new Date(unlock?.createdAt),
})
}
@@ -248,7 +248,7 @@
title:"Automater",
text:"Use GitHub Actions to automate profile updates",
icon:"<g transform=\"translate(4 5)\" stroke-width=\"2\" fill=\"none\" fill-rule=\"evenodd\"><g stroke-linecap=\"round\" stroke-linejoin=\"round\"><path stroke=\"#primary\" d=\"M26.478 22l.696 2.087 3.478.696v2.782l-3.478 1.392-.696 1.39 1.392 3.48-1.392 1.39L23 33.827l-1.391.695L20.217 38h-2.782l-1.392-3.478-1.39-.696-3.48 1.391-1.39-1.39 1.39-3.48-.695-1.39L7 27.565v-2.782l3.478-1.392.696-1.391-1.391-3.478 1.39-1.392 3.48 1.392 1.39-.696 1.392-3.478h2.782l1.392 3.478 1.391.696 3.478-1.392 1.392 1.392z\"/><path stroke=\"#secondary\" d=\"M24.779 12.899l-1.475-2.212 1.475-1.475 2.95 1.475 1.474-.738.737-2.934h2.212l.737 2.934 1.475.738 2.95-1.475 1.474 1.475-1.475 2.949.738 1.475 2.949.737v2.212l-2.95.737-.737 1.475 1.475 2.949-1.475 1.475-2.949-1.475\"/></g><path stroke=\"#primary\" stroke-linecap=\"round\" d=\"M5.932 5.546l7.082 6.931\"/><path stroke=\"#secondary\" stroke-linecap=\"round\" d=\"M32.959 31.99l8.728 8.532\"/><circle stroke=\"#secondary\" cx=\"44\" cy=\"43\" r=\"3\"/><circle stroke=\"#primary\" cx=\"13\" cy=\"2\" r=\"2\"/><circle stroke=\"#secondary\" cx=\"35\" cy=\"44\" r=\"2\"/><circle stroke=\"#secondary\" cx=\"3\" cy=\"12\" r=\"2\"/><circle stroke=\"#primary\" cx=\"45\" cy=\"34\" r=\"2\"/><path d=\"M3.832 0a3 3 0 110 6 3 3 0 010-6zM8.04 10.613l2.1-.613M10.334 9.758l1.914-5.669\" stroke=\"#primary\" stroke-linecap=\"round\"/><path stroke=\"#secondary\" stroke-linecap=\"round\" d=\"M40.026 35.91l-2.025.591M35.695 41.965l1.843-5.326\"/><path d=\"M16 2h23.038a6 6 0 016 6v24.033\" stroke=\"#primary\" stroke-linecap=\"round\"/><path d=\"M32.038 44.033H9a6 6 0 01-6-6V14\" stroke=\"#secondary\" stroke-linecap=\"round\"/><path d=\"M17.533 22.154l5.113 3.22a1 1 0 01-.006 1.697l-5.113 3.17a1 1 0 01-1.527-.85V23a1 1 0 011.533-.846zm11.58-7.134v-.504a1 1 0 011.53-.85l3.845 2.397a1 1 0 01-.006 1.701l-3.846 2.358\" stroke=\"#primary\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g>",
rank:value ? "$" : "X", progress:1, value, unlock:new Date(unlock?.createdAt),
rank:value ? "$" : "X", progress:value ? 1 : 0, value, unlock:new Date(unlock?.createdAt),
})
}
@@ -261,7 +261,7 @@
title:"Infographile",
text:"Fervent supporter of metrics",
icon:"<g stroke-linejoin=\"round\" stroke-width=\"2\" fill=\"none\" fill-rule=\"evenodd\"><g stroke=\"#secondary\" stroke-linecap=\"round\"><path d=\"M22 31h20M22 36h10\"/></g><path d=\"M44.05 36.013a8 8 0 110 16 8 8 0 010-16z\" stroke=\"#primary\" stroke-linecap=\"round\"/><path d=\"M32 43H7c-1.228 0-2-.84-2-2V7c0-1.16.772-2 2-2h7.075M47 24.04V32\" stroke=\"#secondary\" stroke-linecap=\"round\"/><path stroke=\"#primary\" stroke-linecap=\"round\" d=\"M47.015 42.017l-4 3.994-2.001-1.995\"/><path stroke=\"#secondary\" d=\"M11 31h5v5h-5z\"/><path d=\"M11 14a2 2 0 012-2m28 12a2 2 0 01-2 2h-1m-5 0h-4m-6 0h-4m-5 0h-1a2 2 0 01-2-2m0-4v-2\" stroke=\"#secondary\" stroke-linecap=\"round\"/><path d=\"M18 18V7c0-1.246.649-2 1.73-2h28.54C49.351 5 50 5.754 50 7v11c0 1.246-.649 2-1.73 2H19.73c-1.081 0-1.73-.754-1.73-2z\" stroke=\"#primary\" stroke-linecap=\"round\"/><path stroke=\"#primary\" stroke-linecap=\"round\" d=\"M22 13h4l2-3 3 5 2-2h3.052l2.982-4 3.002 4H46\"/></g>",
rank:(value)&&(login === _login) ? "$" : "X", progress:1, value, unlock:new Date(unlock?.createdAt),
rank:(value)&&(login === _login) ? "$" : "X", progress:(value)&&(login === _login) ? 1 : 0, value, unlock:new Date(unlock?.createdAt),
})
}
@@ -274,7 +274,7 @@
title:"Octonaut",
text:"Following octocat",
icon:"<g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M14.7 8c.316 1.122.572 1.372 1.71 1.678-1.136.314-1.39.566-1.7 1.69-.317-1.121-.573-1.372-1.71-1.679 1.135-.313 1.389-.566 1.7-1.689zm26 0c.316 1.122.572 1.372 1.71 1.678-1.136.314-1.39.566-1.7 1.69-.317-1.121-.573-1.372-1.71-1.679 1.135-.313 1.389-.566 1.7-1.689zM28.021 5c.318 1.122.574 1.372 1.711 1.678-1.136.314-1.389.566-1.7 1.69-.317-1.121-.572-1.372-1.71-1.679 1.135-.313 1.39-.566 1.7-1.689z\" stroke=\"#primary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><g transform=\"translate(4 9)\" fill-rule=\"nonzero\"><path d=\"M14.05 9.195C10.327 7.065 7.46 6 5.453 6 4.92 6 4 6.164 3.5 6.653s-.572.741-.711 1.14c-.734 2.1-1.562 6.317.078 9.286-8.767 25.38 15.513 24.92 21.207 24.92 5.695 0 29.746.456 21.037-24.908 1.112-2.2 1.404-5.119.121-9.284-.863-2.802-4.646-2.341-11.35 1.384a27.38 27.38 0 00-9.802-1.81c-3.358 0-6.701.605-10.03 1.814z\" stroke=\"#secondary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M10.323 40.074c-2.442-1.02-2.93-3.308-2.93-4.834 0-1.527.488-2.45.976-3.92.489-1.47.391-2.281-.976-5.711-1.368-3.43.976-7.535 4.884-7.535 3.908 0 7.088 3.005 11.723 2.956m0 0c4.635.05 7.815-2.956 11.723-2.956 3.908 0 6.252 4.105 4.884 7.535-1.367 3.43-1.465 4.241-.976 5.71.488 1.47.976 2.394.976 3.92 0 1.527-.488 3.816-2.93 4.835\" stroke=\"#secondary\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><circle fill=\"#primary\" cx=\"12\" cy=\"30\" r=\"1\"/><circle fill=\"#primary\" cx=\"13\" cy=\"28\" r=\"1\"/><circle fill=\"#primary\" cx=\"15\" cy=\"28\" r=\"1\"/><circle fill=\"#primary\" cx=\"23\" cy=\"35\" r=\"1\"/><circle fill=\"#primary\" cx=\"25\" cy=\"35\" r=\"1\"/><circle fill=\"#primary\" cx=\"17\" cy=\"28\" r=\"1\"/><circle fill=\"#primary\" cx=\"31\" cy=\"28\" r=\"1\"/><circle fill=\"#primary\" cx=\"33\" cy=\"28\" r=\"1\"/><circle fill=\"#primary\" cx=\"35\" cy=\"28\" r=\"1\"/><circle fill=\"#primary\" cx=\"12\" cy=\"32\" r=\"1\"/><circle fill=\"#primary\" cx=\"19\" cy=\"30\" r=\"1\"/><circle fill=\"#primary\" cx=\"19\" cy=\"32\" r=\"1\"/><circle fill=\"#primary\" cx=\"29\" cy=\"30\" r=\"1\"/><circle fill=\"#primary\" cx=\"29\" cy=\"32\" r=\"1\"/><circle fill=\"#primary\" cx=\"36\" cy=\"30\" r=\"1\"/><circle fill=\"#primary\" cx=\"36\" cy=\"32\" r=\"1\"/></g></g>",
rank:(value)&&(login === _login) ? "$" : "X", progress:1, value, unlock:new Date(unlock?.createdAt),
rank:(value)&&(login === _login) ? "$" : "X", progress:(value)&&(login === _login) ? 1 : 0, value, unlock:new Date(unlock?.createdAt),
})
}

1
source/plugins/languages/README.md
View File

@@ -31,4 +31,5 @@ It is also possible to use a predefined set of colors from [colorsets.json](colo
plugin_languages_colors: "0:orange, javascript:#ff0000, ..." # Make most used languages orange and JavaScript red
plugin_languages_details: bytes-size, percentage # Additionally display total bytes size and percentage
plugin_languages_threshold: 2% # Hides all languages less than 2%
plugin_languages_limit: 8 # Display up to 8 languages
```

8
source/plugins/languages/index.mjs
View File

@@ -7,12 +7,14 @@
return null
//Load inputs
let {ignored, skipped, colors, details, threshold} = imports.metadata.plugins.languages.inputs({data, account, q})
let {ignored, skipped, colors, details, threshold, limit} = imports.metadata.plugins.languages.inputs({data, account, q})
threshold = (Number(threshold.replace(/%$/, ""))||0)/100
if (!limit)
limit = Infinity
//Custom colors
const colorsets = JSON.parse(`${await imports.fs.readFile(`${imports.__module(import.meta.url)}/colorsets.json`)}`)
if (`${colors}` in colorsets)
if ((`${colors}` in colorsets)&&(limit <= 8))
colors = colorsets[`${colors}`]
colors = Object.fromEntries(decodeURIComponent(colors).split(",").map(x => x.trim().toLocaleLowerCase()).filter(x => x).map(x => x.split(":").map(x => x.trim())))
console.debug(`metrics/compute/${login}/plugins > languages > custom colors ${JSON.stringify(colors)}`)
@@ -42,7 +44,7 @@
//Compute languages stats
console.debug(`metrics/compute/${login}/plugins > languages > computing stats`)
languages.favorites = Object.entries(languages.stats).sort(([_an, a], [_bn, b]) => b - a).slice(0, 8).map(([name, value]) => ({name, value, size:value, color:languages.colors[name], x:0})).filter(({value}) => value/languages.total > threshold)
languages.favorites = Object.entries(languages.stats).sort(([_an, a], [_bn, b]) => b - a).slice(0, limit).map(([name, value]) => ({name, value, size:value, color:languages.colors[name], x:0})).filter(({value}) => value/languages.total > threshold)
const visible = {total:Object.values(languages.favorites).map(({size}) => size).reduce((a, b) => a + b, 0)}
for (let i = 0; i < languages.favorites.length; i++) {
languages.favorites[i].value /= visible.total

10
source/plugins/languages/metadata.yml
View File

@@ -30,11 +30,21 @@ inputs:
default: ""
example: my-repo-1, my-repo-2, owner/repo-3 ...
# Number of languages to display
# Set to 0 to disable limitations
plugin_languages_limit:
description: Maximum number of languages to display
type: number
default: 8
min: 0
max: 8
# Overrides default languages colors
# Use `${n}:${color}` to change the color of the n-th most used language (e.g. "0:red" to make your most used language red)
# Use `${language}:${color}` to change the color of named language (e.g. "javascript:red" to make JavaScript language red, language case is ignored)
# Use a value from `colorsets.json` to use a predefined set of colors
# Both hexadecimal and named colors are supported
# This cannot be used when "plugin_languages_limit" is greater than 8
plugin_languages_colors:
description: Custom languages colors
type: array