Refactor web instance style
This commit is contained in:
linguist
@@ -16,7 +16,7 @@
|
|||||||
//Load configuration settings
|
//Load configuration settings
|
||||||
const {conf, Plugins, Templates} = await setup({nosettings})
|
const {conf, Plugins, Templates} = await setup({nosettings})
|
||||||
const {token, maxusers = 0, restricted = [], debug = false, cached = 30*60*1000, port = 3000, ratelimiter = null, plugins = null} = conf.settings
|
const {token, maxusers = 0, restricted = [], debug = false, cached = 30*60*1000, port = 3000, ratelimiter = null, plugins = null} = conf.settings
|
||||||
cache.placeholder = new Map()
|
cache.placeholder = new cache.Cache()
|
||||||
|
|
||||||
//Apply configuration mocking if needed
|
//Apply configuration mocking if needed
|
||||||
if (mock) {
|
if (mock) {
|
||||||
@@ -60,6 +60,7 @@
|
|||||||
}
|
}
|
||||||
//Cache headers middleware
|
//Cache headers middleware
|
||||||
middlewares.push((req, res, next) => {
|
middlewares.push((req, res, next) => {
|
||||||
|
console.log(["/placeholder"].includes(req.path))
|
||||||
if (!["/placeholder"].includes(req.path))
|
if (!["/placeholder"].includes(req.path))
|
||||||
res.header("Cache-Control", cached ? `public, max-age=${cached}` : "no-store, no-cache")
|
res.header("Cache-Control", cached ? `public, max-age=${cached}` : "no-store, no-cache")
|
||||||
next()
|
next()
|
||||||
@@ -79,6 +80,7 @@
|
|||||||
app.get("/.plugins", limiter, (req, res) => res.status(200).json(enabled))
|
app.get("/.plugins", limiter, (req, res) => res.status(200).json(enabled))
|
||||||
app.get("/.plugins.base", limiter, (req, res) => res.status(200).json(conf.settings.plugins.base.parts))
|
app.get("/.plugins.base", limiter, (req, res) => res.status(200).json(conf.settings.plugins.base.parts))
|
||||||
app.get("/.css/style.css", limiter, (req, res) => res.sendFile(`${conf.statics}/style.css`))
|
app.get("/.css/style.css", limiter, (req, res) => res.sendFile(`${conf.statics}/style.css`))
|
||||||
|
app.get("/.css/style.vars.css", limiter, (req, res) => res.sendFile(`${conf.statics}/style.vars.css`))
|
||||||
app.get("/.css/style.prism.css", limiter, (req, res) => res.sendFile(`${conf.node_modules}/prismjs/themes/prism-tomorrow.css`))
|
app.get("/.css/style.prism.css", limiter, (req, res) => res.sendFile(`${conf.node_modules}/prismjs/themes/prism-tomorrow.css`))
|
||||||
app.get("/.js/app.js", limiter, (req, res) => res.sendFile(`${conf.statics}/app.js`))
|
app.get("/.js/app.js", limiter, (req, res) => res.sendFile(`${conf.statics}/app.js`))
|
||||||
app.get("/.js/ejs.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/ejs/ejs.min.js`))
|
app.get("/.js/ejs.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/ejs/ejs.min.js`))
|
||||||
@@ -119,7 +121,7 @@
|
|||||||
}
|
}
|
||||||
//Read cached data if possible
|
//Read cached data if possible
|
||||||
//Placeholder
|
//Placeholder
|
||||||
if ((login === "placeholder")&&(cache.placeholder.has(Object.keys(req.query).sort().join("-")))) {
|
if ((login === "placeholder")&&(cache.placeholder.get(Object.keys(req.query).sort().join("-")))) {
|
||||||
const {rendered, mime} = cache.placeholder.get(Object.keys(req.query).sort().join("-"))
|
const {rendered, mime} = cache.placeholder.get(Object.keys(req.query).sort().join("-"))
|
||||||
res.header("Content-Type", mime)
|
res.header("Content-Type", mime)
|
||||||
res.send(rendered)
|
res.send(rendered)
|
||||||
@@ -151,7 +153,7 @@
|
|||||||
}, {Plugins, Templates})
|
}, {Plugins, Templates})
|
||||||
//Cache
|
//Cache
|
||||||
if (login === "placeholder")
|
if (login === "placeholder")
|
||||||
cache.placeholder.set(Object.keys(req.query).sort().join("-"), rendered)
|
cache.placeholder.put(Object.keys(req.query).sort().join("-"), rendered)
|
||||||
if ((!debug)&&(cached))
|
if ((!debug)&&(cached))
|
||||||
cache.put(login, {rendered, mime}, cached)
|
cache.put(login, {rendered, mime}, cached)
|
||||||
//Send response
|
//Send response
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
data:{
|
data:{
|
||||||
version,
|
version,
|
||||||
user:url.get("user") || "",
|
user:url.get("user") || "",
|
||||||
|
tab:"overview",
|
||||||
palette:url.get("palette") || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") || "light",
|
palette:url.get("palette") || (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light") || "light",
|
||||||
requests:{limit:0, used:0, remaining:0, reset:0},
|
requests:{limit:0, used:0, remaining:0, reset:0},
|
||||||
config:{
|
config:{
|
||||||
@@ -32,25 +33,35 @@
|
|||||||
list:plugins,
|
list:plugins,
|
||||||
enabled:{base:Object.fromEntries(base.map(key => [key, true]))},
|
enabled:{base:Object.fromEntries(base.map(key => [key, true]))},
|
||||||
descriptions:{
|
descriptions:{
|
||||||
pagespeed:"Website performances",
|
pagespeed:"⏱️ Website performances",
|
||||||
languages:"Most used languages",
|
languages:"🈷️ Most used languages",
|
||||||
followup:"Issues and pull requests",
|
followup:"🎟️ Issues and pull requests",
|
||||||
traffic:"Pages views",
|
traffic:"🧮 Pages views",
|
||||||
lines:"Lines of code changed",
|
lines:"👨💻 Lines of code changed",
|
||||||
habits:"Coding habits",
|
habits:"💡 Coding habits",
|
||||||
music:"Music plugin",
|
music:"🎼 Music plugin",
|
||||||
posts:"Recent posts",
|
posts:"✒️ Recent posts",
|
||||||
isocalendar:"Isometric commit calendar",
|
isocalendar:"📅 Isometric commit calendar",
|
||||||
gists:"Gists metrics",
|
gists:"🎫 Gists metrics",
|
||||||
topics:"Starred topics",
|
topics:"📌 Starred topics",
|
||||||
projects:"Projects",
|
projects:"🗂️ Projects",
|
||||||
tweets:"Latest tweets",
|
tweets:"🐤 Latest tweets",
|
||||||
stars:"Recently starred repositories",
|
stars:"🌟 Recently starred repositories",
|
||||||
"base.header":"Header",
|
"base.header":`
|
||||||
"base.activity":"Account activity",
|
<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>
|
||||||
"base.community":"Community stats",
|
Header`,
|
||||||
"base.repositories":"Repositories metrics",
|
"base.activity":`
|
||||||
"base.metadata":"Metadata",
|
<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>
|
||||||
|
Account activity`,
|
||||||
|
"base.community":`
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><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>
|
||||||
|
Community stats`,
|
||||||
|
"base.repositories":`
|
||||||
|
<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>
|
||||||
|
Repositories metrics`,
|
||||||
|
"base.metadata":`
|
||||||
|
<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 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>
|
||||||
|
Metadata`,
|
||||||
},
|
},
|
||||||
options:{
|
options:{
|
||||||
"languages.ignored":"",
|
"languages.ignored":"",
|
||||||
@@ -94,6 +105,10 @@
|
|||||||
},
|
},
|
||||||
//Computed data
|
//Computed data
|
||||||
computed:{
|
computed:{
|
||||||
|
//User's avatar
|
||||||
|
avatar() {
|
||||||
|
return `https://github.com/${this.user}.png`
|
||||||
|
},
|
||||||
//User's repository
|
//User's repository
|
||||||
repo() {
|
repo() {
|
||||||
return `https://github.com/${this.user}/${this.user}`
|
return `https://github.com/${this.user}/${this.user}`
|
||||||
|
|||||||
@@ -6,6 +6,7 @@
|
|||||||
<meta name="description" content="A SVG image generator which includes activity, community and repositories metrics about your GitHub account that you can includes on your profile">
|
<meta name="description" content="A SVG image generator which includes activity, community and repositories metrics about your GitHub account that you can includes on your profile">
|
||||||
<meta name="author" content="lowlighter">
|
<meta name="author" content="lowlighter">
|
||||||
<link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/209/bar-chart_1f4ca.png">
|
<link rel="icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/209/bar-chart_1f4ca.png">
|
||||||
|
<link rel="stylesheet" href="/.css/style.vars.css">
|
||||||
<link rel="stylesheet" href="/.css/style.css">
|
<link rel="stylesheet" href="/.css/style.css">
|
||||||
<link rel="stylesheet" href="/.css/style.prism.css" />
|
<link rel="stylesheet" href="/.css/style.prism.css" />
|
||||||
</head>
|
</head>
|
||||||
@@ -13,224 +14,245 @@
|
|||||||
<!-- Vue app -->
|
<!-- Vue app -->
|
||||||
<main :class="[palette]">
|
<main :class="[palette]">
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<template>
|
<h1 class="title">
|
||||||
<h1><a href="https://github.com/lowlighter/metrics">Metrics v{{ version }}</a></h1>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||||
</template>
|
<a href="https://github.com/lowlighter/metrics">Metrics v{{ version }}</a>
|
||||||
|
</h1>
|
||||||
<!-- Content -->
|
<!-- Content -->
|
||||||
<template>
|
<template>
|
||||||
<section class="generator">
|
|
||||||
<!-- Steps panel -->
|
<!-- Tabs -->
|
||||||
<section class="steps">
|
<nav>
|
||||||
<div class="step">
|
<div class="left"></div>
|
||||||
<h2>1. Enter your GitHub username</h2>
|
<div class="right">
|
||||||
<input type="text" name="user" v-model="user" maxlength="39" placeholder="GitHub username" :disabled="generated.pending">
|
<div @click="tab = 'overview'" class="tab" :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>
|
</div>
|
||||||
<div class="step">
|
<div @click="tab = 'markdown'" class="tab" :class="{active:tab === 'markdown', disabled:!user}">
|
||||||
<h2>2. Select a template</h2>
|
<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>
|
||||||
<div class="templates">
|
Markdown
|
||||||
<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 web instance, use it with GitHub actions !' : ''">
|
</div>
|
||||||
<input type="radio" v-model="templates.selected" :value="template.name" @change="load" :disabled="generated.pending">
|
<div @click="tab = 'action'" class="tab" :class="{active:tab === 'action', disabled:!user}">
|
||||||
{{ templates.descriptions[template.name] || template.name }}
|
<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>
|
||||||
</label>
|
Action
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<section class="container">
|
||||||
|
<!-- Left section -->
|
||||||
|
<div class="left">
|
||||||
|
|
||||||
|
<!-- Avatar -->
|
||||||
|
<div class="avatar">
|
||||||
|
<div :style="{backgroundImage:`url(${avatar})`}"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- User -->
|
||||||
|
<div class="user step">
|
||||||
|
<input type="text" name="user" v-model="user" maxlength="39" placeholder="Your GitHub username" :disabled="generated.pending">
|
||||||
|
<button @click="generate" :disabled="(!user)||(generated.pending)">{{ generated.pending ? "Working on it :)" : "Generate your metrics !" }}</button>
|
||||||
|
<!-- GitHub requests tracker -->
|
||||||
|
<div class="gh-requests">{{ requests.remaining }} GitHub request{{ requests.remaining > 1 ? "s" : "" }} remaining</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Scrollable part -->
|
||||||
|
<div class="scrollable">
|
||||||
|
|
||||||
|
<!-- Template -->
|
||||||
|
<div class="step">
|
||||||
|
<h2>🖼️ Template</h2>
|
||||||
|
<div class="templates">
|
||||||
|
<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 web instance, use it with GitHub actions !' : ''">
|
||||||
|
<input type="radio" v-model="templates.selected" :value="template.name" @change="load" :disabled="generated.pending">
|
||||||
|
{{ templates.descriptions[template.name] || template.name }}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="plugins.base.length">
|
|
||||||
<h3>2.1 Configure base content</h3>
|
<!-- Base content -->
|
||||||
|
<div class="step" v-if="plugins.base.length">
|
||||||
|
<h2>🗃️ Base content</h2>
|
||||||
<div class="plugins">
|
<div class="plugins">
|
||||||
<label v-for="part in plugins.base" :key="part">
|
<label v-for="part in plugins.base" :key="part">
|
||||||
<input type="checkbox" v-model="plugins.enabled.base[part]" @change="load" :disabled="generated.pending">
|
<input type="checkbox" v-model="plugins.enabled.base[part]" @change="load" :disabled="generated.pending">
|
||||||
{{ plugins.descriptions[`base.${part}`] || `base.${part}` }}
|
<span v-html="plugins.descriptions[`base.${part}`] || `base.${part}`"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
<template v-if="plugins.list.length">
|
|
||||||
<h3>2.2 Enable additional plugins</h3>
|
<!-- Plugins -->
|
||||||
|
<div class="step" v-if="plugins.list.length">
|
||||||
|
<h2>🧩 Additional plugins</h2>
|
||||||
<div class="plugins">
|
<div class="plugins">
|
||||||
<label v-for="plugin in plugins.list" :key="plugin" :class="{'not-available':!plugin.enabled}" :title="!plugin.enabled ? 'This plugin is not enabled on web instance, use it with GitHub actions !' : ''">
|
<label v-for="plugin in plugins.list" :key="plugin" :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="load" :disabled="(!plugin.enabled)||(generated.pending)">
|
<input type="checkbox" v-model="plugins.enabled[plugin.name]" @change="load" :disabled="(!plugin.enabled)||(generated.pending)">
|
||||||
{{ plugins.descriptions[plugin.name] || plugin.name }}
|
{{ plugins.descriptions[plugin.name] || plugin.name }}
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="(plugins.enabled.tweets)||(plugins.enabled.music)||(plugins.enabled.pagespeed)||(plugins.enabled.languages)||(plugins.enabled.habits)||(plugins.enabled.posts)||(plugins.enabled.isocalendar)||(plugins.enabled.projects)||(plugins.enabled.topics)">
|
|
||||||
<h3>2.3 Configure additional plugins</h3>
|
|
||||||
<div class="options">
|
|
||||||
<div class="options-group" v-if="plugins.enabled.tweets">
|
|
||||||
<h4>{{ plugins.descriptions.tweets }}</h4>
|
|
||||||
<label>
|
|
||||||
Number of tweets to display
|
|
||||||
<input type="number" v-model="plugins.options['tweets.limit']" min="1" max="10" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.music">
|
|
||||||
<h4>{{ plugins.descriptions.music }}</h4>
|
|
||||||
<label>
|
|
||||||
Playlist embed link
|
|
||||||
<input type="text" v-model="plugins.options['music.playlist']" placeholder="https://embed.music.apple.com/en/playlist/" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Number of tracks to display
|
|
||||||
<input type="number" v-model="plugins.options['music.limit']" min="1" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.pagespeed">
|
|
||||||
<h4>{{ plugins.descriptions.pagespeed }}</h4>
|
|
||||||
<label>
|
|
||||||
Detailed PageSpeed report
|
|
||||||
<input type="checkbox" v-model="plugins.options['pagespeed.detailed']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Include a website screenshot
|
|
||||||
<input type="checkbox" v-model="plugins.options['pagespeed.screenshot']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.languages">
|
|
||||||
<h4>{{ plugins.descriptions.languages }}</h4>
|
|
||||||
<label>
|
|
||||||
Ignored languages (comma separated)
|
|
||||||
<input type="text" v-model="plugins.options['languages.ignored']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Skipped repositories (comma separated)
|
|
||||||
<input type="text" v-model="plugins.options['languages.skipped']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.habits">
|
|
||||||
<h4>{{ plugins.descriptions.habits }}</h4>
|
|
||||||
<label>
|
|
||||||
Number of events for habits
|
|
||||||
<input type="number" v-model="plugins.options['habits.from']" min="1" max="1000" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Number of days for habits
|
|
||||||
<input type="number" v-model="plugins.options['habits.days']" min="1" max="30" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Display tidbits
|
|
||||||
<input type="checkbox" v-model="plugins.options['habits.facts']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Display activity charts
|
|
||||||
<input type="checkbox" v-model="plugins.options['habits.charts']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.posts">
|
|
||||||
<h4>{{ plugins.descriptions.posts }}</h4>
|
|
||||||
<label>
|
|
||||||
Posts source
|
|
||||||
<select v-model="plugins.options['posts.source']" disabled>
|
|
||||||
<option value="dev.to">dev.to</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Number of posts to display
|
|
||||||
<input type="number" v-model="plugins.options['posts.limit']" min="1" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.isocalendar">
|
|
||||||
<h4>{{ plugins.descriptions.isocalendar }}</h4>
|
|
||||||
<label>
|
|
||||||
Isocalendar duration
|
|
||||||
<select v-model="plugins.options['isocalendar.duration']" :disabled="generated.pending">
|
|
||||||
<option value="half-year">Half year</option>
|
|
||||||
<option value="full-year">Full year</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.topics">
|
|
||||||
<h4>{{ plugins.descriptions.topics }}</h4>
|
|
||||||
<label>
|
|
||||||
Topics display mode
|
|
||||||
<select v-model="plugins.options['topics.mode']" @change="load" :disabled="generated.pending">
|
|
||||||
<option value="starred">Starred topics</option>
|
|
||||||
<option value="mastered">Known and mastered technologies</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Topics sorting
|
|
||||||
<select v-model="plugins.options['topics.sort']" :disabled="generated.pending">
|
|
||||||
<option value="starred">Recently starred by you</option>
|
|
||||||
<option value="stars">Most stars</option>
|
|
||||||
<option value="activity">Recent actity</option>
|
|
||||||
<option value="random">Random</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Number of topics to display
|
|
||||||
<input type="number" v-model="plugins.options['topics.limit']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="options-group" v-if="plugins.enabled.projects">
|
|
||||||
<h4>{{ plugins.descriptions.projects }}</h4>
|
|
||||||
<label>
|
|
||||||
Number of projects to display
|
|
||||||
<input type="number" v-model="plugins.options['projects.limit']" min="1" max="100" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Repositories projects to display (comma separated)
|
|
||||||
<input type="text" v-model="plugins.options['projects.repositories']" @change="load" :disabled="generated.pending">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div class="step">
|
|
||||||
<h2>3. Generate your metrics</h2>
|
|
||||||
<template v-if="!user">
|
|
||||||
Set your username to generate your metrics 🦑
|
|
||||||
</template>
|
|
||||||
<div class="preview-inliner">
|
|
||||||
<template v-if="generated.content">
|
|
||||||
<img class="metrics preview-inline" :src="generated.content" alt="metrics">
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<img class="metrics preview-inline" :src="templates.placeholder" alt="metrics">
|
|
||||||
</template>
|
|
||||||
<div class="error" v-if="generated.error">An error occurred. Please try again later.</div>
|
|
||||||
</div>
|
</div>
|
||||||
<template v-if="user">
|
|
||||||
<button @click="generate" :disabled="generated.pending">{{ generated.pending ? "Working on it :)" : "Generate your metrics !" }}</button>
|
<!-- Plugins options -->
|
||||||
</template>
|
<div class="step" v-if="(plugins.enabled.tweets)||(plugins.enabled.music)||(plugins.enabled.pagespeed)||(plugins.enabled.languages)||(plugins.enabled.habits)||(plugins.enabled.posts)||(plugins.enabled.isocalendar)||(plugins.enabled.projects)||(plugins.enabled.topics)">
|
||||||
<div class="palette">
|
<h2>🔧 Configure plugins</h2>
|
||||||
Generated metrics use transparency and colors which can be read on both light and dark modes, so everyone can see your stats whatever their preferred color scheme !
|
<div class="options">
|
||||||
<div class="palettes">
|
<div class="options-group" v-if="plugins.enabled.tweets">
|
||||||
<label>
|
<h4>{{ plugins.descriptions.tweets }}</h4>
|
||||||
<input type="radio" v-model="palette" value="light"> ☀️ Light mode
|
<label>
|
||||||
</label>
|
Number of tweets to display
|
||||||
<label>
|
<input type="number" v-model="plugins.options['tweets.limit']" min="1" max="10" @change="load" :disabled="generated.pending">
|
||||||
<input type="radio" v-model="palette" value="dark"> 🌙 Night mode
|
</label>
|
||||||
</label>
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.music">
|
||||||
|
<h4>{{ plugins.descriptions.music }}</h4>
|
||||||
|
<label>
|
||||||
|
Playlist embed link
|
||||||
|
<input type="text" v-model="plugins.options['music.playlist']" placeholder="https://embed.music.apple.com/en/playlist/" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Number of tracks to display
|
||||||
|
<input type="number" v-model="plugins.options['music.limit']" min="1" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.pagespeed">
|
||||||
|
<h4>{{ plugins.descriptions.pagespeed }}</h4>
|
||||||
|
<label>
|
||||||
|
Detailed PageSpeed report
|
||||||
|
<input type="checkbox" v-model="plugins.options['pagespeed.detailed']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Include a website screenshot
|
||||||
|
<input type="checkbox" v-model="plugins.options['pagespeed.screenshot']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.languages">
|
||||||
|
<h4>{{ plugins.descriptions.languages }}</h4>
|
||||||
|
<label>
|
||||||
|
Ignored languages (comma separated)
|
||||||
|
<input type="text" v-model="plugins.options['languages.ignored']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Skipped repositories (comma separated)
|
||||||
|
<input type="text" v-model="plugins.options['languages.skipped']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.habits">
|
||||||
|
<h4>{{ plugins.descriptions.habits }}</h4>
|
||||||
|
<label>
|
||||||
|
Number of events for habits
|
||||||
|
<input type="number" v-model="plugins.options['habits.from']" min="1" max="1000" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Number of days for habits
|
||||||
|
<input type="number" v-model="plugins.options['habits.days']" min="1" max="30" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Display tidbits
|
||||||
|
<input type="checkbox" v-model="plugins.options['habits.facts']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Display activity charts
|
||||||
|
<input type="checkbox" v-model="plugins.options['habits.charts']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.posts">
|
||||||
|
<h4>{{ plugins.descriptions.posts }}</h4>
|
||||||
|
<label>
|
||||||
|
Posts source
|
||||||
|
<select v-model="plugins.options['posts.source']" disabled>
|
||||||
|
<option value="dev.to">dev.to</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Number of posts to display
|
||||||
|
<input type="number" v-model="plugins.options['posts.limit']" min="1" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.isocalendar">
|
||||||
|
<h4>{{ plugins.descriptions.isocalendar }}</h4>
|
||||||
|
<label>
|
||||||
|
Isocalendar duration
|
||||||
|
<select v-model="plugins.options['isocalendar.duration']" :disabled="generated.pending">
|
||||||
|
<option value="half-year">Half year</option>
|
||||||
|
<option value="full-year">Full year</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.topics">
|
||||||
|
<h4>{{ plugins.descriptions.topics }}</h4>
|
||||||
|
<label>
|
||||||
|
Topics display mode
|
||||||
|
<select v-model="plugins.options['topics.mode']" @change="load" :disabled="generated.pending">
|
||||||
|
<option value="starred">Starred topics</option>
|
||||||
|
<option value="mastered">Known and mastered technologies</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Topics sorting
|
||||||
|
<select v-model="plugins.options['topics.sort']" :disabled="generated.pending">
|
||||||
|
<option value="starred">Recently starred by you</option>
|
||||||
|
<option value="stars">Most stars</option>
|
||||||
|
<option value="activity">Recent actity</option>
|
||||||
|
<option value="random">Random</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Number of topics to display
|
||||||
|
<input type="number" v-model="plugins.options['topics.limit']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="options-group" v-if="plugins.enabled.projects">
|
||||||
|
<h4>{{ plugins.descriptions.projects }}</h4>
|
||||||
|
<label>
|
||||||
|
Number of projects to display
|
||||||
|
<input type="number" v-model="plugins.options['projects.limit']" min="1" max="100" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Repositories projects to display (comma separated)
|
||||||
|
<input type="text" v-model="plugins.options['projects.repositories']" @change="load" :disabled="generated.pending">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="step">
|
</div>
|
||||||
<h2>4. Embed these metrics on your GitHub profile</h2>
|
|
||||||
For even more features, be sure to checkout <a href="https://github.com/lowlighter/metrics">lowlighter/metrics</a> !
|
<!-- Right section -->
|
||||||
<template v-if="user">
|
<div class="right">
|
||||||
<h3>4.1 Using <a href="#">{{ window.location.host }}</a></h3>
|
<div class="body">
|
||||||
|
<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>lowlighter</span><span class="slash">/</span>README<span class="md">.md</span>
|
||||||
|
</div>
|
||||||
|
<!-- Overview -->
|
||||||
|
<section class="preview" v-if="tab == 'overview'">
|
||||||
|
<template v-if="generated.content">
|
||||||
|
<img class="metrics" :src="generated.content" alt="metrics">
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<img class="metrics" :src="templates.placeholder" alt="metrics">
|
||||||
|
</template>
|
||||||
|
<div class="error" v-if="generated.error">An error occurred. Please try again later.</div>
|
||||||
|
</section>
|
||||||
|
<!-- Markdown -->
|
||||||
|
<section v-else-if="tab == 'markdown'">
|
||||||
Add the markdown below in your <i>README.md</i> at <a :href="repo">{{ user }}/{{ user }}</a>
|
Add the markdown below in your <i>README.md</i> at <a :href="repo">{{ user }}/{{ user }}</a>
|
||||||
<div class="code"><Prism language="markdown" :code="embed"></Prism></div>
|
<div class="code">
|
||||||
<h3>4. Using <a href="https://github.com/marketplace/actions/github-metrics-as-svg-image">GitHub action</a></h3>
|
<Prism language="markdown" :code="embed"></Prism>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<!-- Action -->
|
||||||
|
<section v-else-if="tab == 'action'">
|
||||||
Create a new workflow with the following content at <a :href="repo">{{ user }}/{{ user }}</a>
|
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 class="code">
|
||||||
</template>
|
<Prism language="yaml" :code="action"></Prism>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</div>
|
||||||
<!-- Metrics preview -->
|
|
||||||
<section class="preview">
|
|
||||||
<template v-if="generated.content">
|
|
||||||
<img class="metrics" :src="generated.content" alt="metrics">
|
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
<img class="metrics" :src="templates.placeholder" alt="metrics">
|
|
||||||
</template>
|
|
||||||
<div class="error" v-if="generated.error">An error occurred. Please try again later.</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
<!-- GitHub requests tracker -->
|
|
||||||
<template>
|
|
||||||
<div class="gh-requests">{{ requests.remaining }} GitHub request{{ requests.remaining > 1 ? "s" : "" }} remaining</div>
|
|
||||||
</template>
|
|
||||||
</main>
|
</main>
|
||||||
<!-- Scripts -->
|
<!-- Scripts -->
|
||||||
<script src="/.js/axios.min.js"></script>
|
<script src="/.js/axios.min.js"></script>
|
||||||
|
|||||||
@@ -3,68 +3,231 @@
|
|||||||
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
|
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
main {
|
main {
|
||||||
background-color: #FFFFFF;
|
height: 100vh;
|
||||||
color: #1B1F23;
|
width: 100vw;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
background-color: var(--color-bg-canvas);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
/* Title */
|
||||||
|
.title {
|
||||||
|
margin: 0;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
overflow-x: hidden;
|
|
||||||
transition: background-color .3s;
|
|
||||||
}
|
|
||||||
/* Headlines */
|
|
||||||
h1 {
|
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
margin: 1rem 0;
|
background-color: var(--color-header-bg);
|
||||||
}
|
}
|
||||||
h2 {
|
.title a {
|
||||||
margin: 1.5rem 0 1rem;
|
color: var(--color-text-primary) !important;
|
||||||
font-size: 1.3rem;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
h3 {
|
.title svg {
|
||||||
margin: .5rem 0 .25rem;
|
margin-right: 2rem;
|
||||||
font-size: 1.1rem;
|
fill: currentColor;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
}
|
||||||
|
/* Tabs */
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px solid var(--color-border-secondary);
|
||||||
|
margin: 32px 0 24px;
|
||||||
|
}
|
||||||
|
nav .tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 8px 16px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 30px;
|
||||||
|
color: var(--color-underlinenav-text-hover);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
nav .tab.active {
|
||||||
|
color: var(--color-underlinenav-text-active);
|
||||||
|
border-bottom: 2px solid #f9826c;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
nav .tab.disabled {
|
||||||
|
opacity: .5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
nav .tab svg {
|
||||||
|
fill: currentColor;
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
nav .right {
|
||||||
|
display: flex;
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Readme container */
|
||||||
|
.container {
|
||||||
|
max-width: 1280px;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.left, .right {
|
||||||
|
margin: 0 8px;
|
||||||
|
height: 75%;
|
||||||
|
width: 0%;
|
||||||
|
}
|
||||||
|
.left {
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: 25%;
|
||||||
|
min-width: 230px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.left .user {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.left .user input, .left .user button {
|
||||||
|
width: 100%;
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
.left .scrollable {
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.right {
|
||||||
|
flex-grow: 1;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
}
|
||||||
|
.right .body {
|
||||||
|
margin: 24px;
|
||||||
|
}
|
||||||
|
/* Avatar */
|
||||||
|
.avatar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: -20%;
|
||||||
|
}
|
||||||
|
.avatar div {
|
||||||
|
width: 50%;
|
||||||
|
padding-top: 50%;
|
||||||
|
border-radius: 50%;
|
||||||
|
box-shadow: 0 0 0 1px var(--color-avatar-border);
|
||||||
|
border: 1px solid var(--color-border-primary);
|
||||||
|
background-color: black;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
/* Readme */
|
||||||
|
.readme {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.readme svg {
|
||||||
|
fill: currentColor;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.readme .slash {
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
.readme .md {
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
/* Readme content */
|
||||||
|
.right section {
|
||||||
|
height: 87%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
/* Code */
|
||||||
|
.code {
|
||||||
|
overflow-x: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.code pre {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
/* Plugins */
|
||||||
|
.plugins, .templates {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.plugins label, .templates label {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.plugins label svg, .templates label svg {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
.options {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.options-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.options-group label {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.options-group h4 {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/* Step */
|
||||||
|
.step {
|
||||||
|
padding: 1rem .5rem;
|
||||||
|
border-bottom: 1px solid var(--color-border-secondary);
|
||||||
|
}
|
||||||
|
.step h2 {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: .25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
/* Links */
|
/* Links */
|
||||||
a, a:hover, a:visited {
|
a, a:hover, a:visited {
|
||||||
color: #0366D6;
|
color: var(--color-text-link);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
color: #79B8FF;
|
text-decoration: underline;
|
||||||
transition: color .4s;
|
transition: color .4s;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
/* Inputs */
|
/* Inputs */
|
||||||
input, button, select {
|
input, button, select {
|
||||||
border-radius: .5rem;
|
background-color: var(--color-input-contrast-bg);
|
||||||
padding: .25rem .5rem;
|
padding: 5px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
border: 1px solid var(--color-input-border);
|
||||||
|
border-radius: 6px;
|
||||||
outline: none;
|
outline: none;
|
||||||
border: 1px solid #E1E4E8;
|
box-shadow: var(--color-shadow-inset);
|
||||||
background-color: #FAFBFC;
|
|
||||||
color: #1B1F23;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
button {
|
||||||
|
color: var(--color-btn-primary-text);
|
||||||
|
background-color: var(--color-btn-primary-bg);
|
||||||
|
border-color: var(--color-btn-primary-border);
|
||||||
|
}
|
||||||
input:focus {
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
input[name=user] {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
input[type=text], select, button {
|
|
||||||
min-width: 50%;
|
|
||||||
}
|
|
||||||
option {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
label, button {
|
label, button {
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
}
|
}
|
||||||
@@ -85,117 +248,6 @@
|
|||||||
.not-available {
|
.not-available {
|
||||||
opacity: .3;
|
opacity: .3;
|
||||||
}
|
}
|
||||||
/* Generator */
|
|
||||||
.generator {
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 1;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
.generator .step {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
.generator .steps {
|
|
||||||
flex-grow: 1;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.generator .preview {
|
|
||||||
display: none;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
.generator .preview .metrics {
|
|
||||||
width: 480px;
|
|
||||||
}
|
|
||||||
.generator .preview-inliner {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.generator .preview-inliner .metrics {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 480px;
|
|
||||||
}
|
|
||||||
@media only screen and (min-width: 1180px) {
|
|
||||||
.generator .preview-inliner {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.generator .preview {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
/* Plugins */
|
|
||||||
.plugins, .palettes {
|
|
||||||
margin-top: 1rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
.plugins label, .palettes label {
|
|
||||||
margin: 0 1rem;
|
|
||||||
}
|
|
||||||
.options {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.options-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.options-group label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.options-group h4 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
/* Code snippets */
|
|
||||||
.code {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0 .5rem;
|
|
||||||
}
|
|
||||||
.code pre {
|
|
||||||
width: 100%;
|
|
||||||
border-radius: .5rem;
|
|
||||||
}
|
|
||||||
.code .language-markdown {
|
|
||||||
word-break: break-all !important;
|
|
||||||
white-space: pre-wrap !important;
|
|
||||||
}
|
|
||||||
details {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
details summary {
|
|
||||||
cursor: pointer;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
/* Color palette */
|
|
||||||
.palette {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
main.dark {
|
|
||||||
background-color: #181A1B;
|
|
||||||
color: #D4D1C5;
|
|
||||||
}
|
|
||||||
.dark a, .dark a:visited {
|
|
||||||
color: #4CACEE;
|
|
||||||
}
|
|
||||||
.dark input, .dark button {
|
|
||||||
color: #D4D1C5;
|
|
||||||
background-color: #1A1C1E;
|
|
||||||
border-color: #373C3E;
|
|
||||||
}
|
|
||||||
.dark .code {
|
|
||||||
background-color: #1A1C1E;
|
|
||||||
}
|
|
||||||
/* Error */
|
/* Error */
|
||||||
.error {
|
.error {
|
||||||
color: #721c24;
|
color: #721c24;
|
||||||
@@ -209,8 +261,5 @@
|
|||||||
}
|
}
|
||||||
/* Github requests */
|
/* Github requests */
|
||||||
.gh-requests {
|
.gh-requests {
|
||||||
position: fixed;
|
|
||||||
right: .25rem;
|
|
||||||
bottom: .25rem;
|
|
||||||
font-size: .8rem;
|
font-size: .8rem;
|
||||||
}
|
}
|
||||||
1297
source/app/web/statics/style.vars.css
Normal file
1297
source/app/web/statics/style.vars.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user