From 1713f5e47f319f33a91f24e8927b39decc59e3dd Mon Sep 17 00:00:00 2001 From: lowlighter <22963968+lowlighter@users.noreply.github.com> Date: Tue, 5 Jul 2022 23:44:00 -0400 Subject: [PATCH] feat(app/web): add index.html [skip ci] --- source/app/metrics/index.mjs | 4 +- source/app/web/instance.mjs | 2 + source/app/web/statics/app.js | 68 +++++++----------- source/app/web/statics/embed/app.js | 2 +- source/app/web/statics/embed/index.html | 2 +- source/app/web/statics/index.html | 61 ++++++++++++++-- source/app/web/statics/insights/index.html | 2 +- source/app/web/statics/insights/script.js | 5 ++ source/app/web/statics/insights/style.css | 60 ---------------- source/app/web/statics/style.css | 82 ++++++++++++++++++++++ 10 files changed, 174 insertions(+), 114 deletions(-) diff --git a/source/app/metrics/index.mjs b/source/app/metrics/index.mjs index e1f07278..3282b367 100644 --- a/source/app/metrics/index.mjs +++ b/source/app/metrics/index.mjs @@ -24,8 +24,6 @@ export default async function metrics({login, q}, {graphql, rest, plugins, conf, //Initialization const pending = [] const {queries} = conf - const extras = {css: imports.metadata.plugins.core.extras("extras_css", {...conf.settings, error:false}) ? q["extras.css"] ?? "" : "", js: imports.metadata.plugins.core.extras("extras_js", {...conf.settings, error:false}) ? q["extras.js"] ?? "" : ""} - const data = {q, animated: true, large: false, base: {}, config: {}, errors: [], plugins: {}, computed: {}, extras, postscripts: []} const imports = { plugins: Plugins, templates: Templates, @@ -40,6 +38,8 @@ export default async function metrics({login, q}, {graphql, rest, plugins, conf, } : null), } + const extras = {css: imports.metadata.plugins.core.extras("extras_css", {...conf.settings, error:false}) ? q["extras.css"] ?? "" : "", js: imports.metadata.plugins.core.extras("extras_js", {...conf.settings, error:false}) ? q["extras.js"] ?? "" : ""} + const data = {q, animated: true, large: false, base: {}, config: {}, errors: [], plugins: {}, computed: {}, extras, postscripts: []} const experimental = new Set(decodeURIComponent(q["experimental.features"] ?? "").split(" ").map(x => x.trim().toLocaleLowerCase()).filter(x => x)) if (conf.settings["debug.headless"]) imports.puppeteer.headless = false diff --git a/source/app/web/instance.mjs b/source/app/web/instance.mjs index edd83e13..66808ecb 100644 --- a/source/app/web/instance.mjs +++ b/source/app/web/instance.mjs @@ -130,6 +130,8 @@ export default async function({sandbox = false} = {}) { app.get("/.templates/:template", limiter, (req, res) => req.params.template in conf.templates ? res.status(200).json(conf.templates[req.params.template]) : res.sendStatus(404)) for (const template in conf.templates) app.use(`/.templates/${template}/partials`, express.static(`${conf.paths.templates}/${template}/partials`)) + //Modes + app.get("/.modes", limiter, (req, res) => res.status(200).json(conf.settings.modes)) //Styles app.get("/.css/style.css", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/style.css`)) app.get("/.css/style.vars.css", limiter, (req, res) => res.sendFile(`${conf.paths.statics}/style.vars.css`)) diff --git a/source/app/web/statics/app.js b/source/app/web/statics/app.js index ff820280..ef23221c 100644 --- a/source/app/web/statics/app.js +++ b/source/app/web/statics/app.js @@ -6,7 +6,6 @@ async mounted() { //Interpolate config from browser try { - this.config.timezone = Intl.DateTimeFormat().resolvedOptions().timeZone this.palette = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" } catch (error) {} @@ -17,26 +16,6 @@ const {data: requests} = await axios.get("/.requests") this.requests = requests })(), - //Templates - (async () => { - const {data: templates} = await axios.get("/.templates") - templates.sort((a, b) => (a.name.startsWith("@") ^ b.name.startsWith("@")) ? (a.name.startsWith("@") ? 1 : -1) : a.name.localeCompare(b.name)) - this.templates.list = templates - this.templates.selected = templates[0]?.name || "classic" - })(), - //Plugins - (async () => { - const {data: plugins} = await axios.get("/.plugins") - this.plugins.list = plugins.filter(({name}) => metadata[name]?.supports.includes("user") || metadata[name]?.supports.includes("organization")) - const categories = [...new Set(this.plugins.list.map(({category}) => category))] - this.plugins.categories = Object.fromEntries(categories.map(category => [category, this.plugins.list.filter(value => category === value.category)])) - })(), - //Base - (async () => { - const {data: base} = await axios.get("/.plugins.base") - this.plugins.base = base - this.plugins.enabled.base = Object.fromEntries(base.map(key => [key, true])) - })(), //Version (async () => { const {data: version} = await axios.get("/.version") @@ -47,28 +26,15 @@ const {data: hosted} = await axios.get("/.hosted") this.hosted = hosted })(), + //Modes + (async () => { + const {data: modes} = await axios.get("/.modes") + this.modes = modes + })(), ]) - //Generate placeholder - this.mock({timeout: 200}) - setInterval(() => { - const marker = document.querySelector("#metrics-end") - if (marker) { - this.mockresize() - marker.remove() - } - }, 100) }, //Watchers watch: { - tab: { - immediate: true, - handler(current) { - if (current === "action") - this.clipboard = new ClipboardJS(".copy-action") - else - this.clipboard?.destroy() - }, - }, palette: { immediate: true, handler(current, previous) { @@ -80,14 +46,12 @@ //Data initialization data: { version: "", - user: "", - tab: "overview", + user1: "", + user2: "", palette: "light", - clipboard: null, requests: {rest: {limit: 0, used: 0, remaining: 0, reset: NaN}, graphql: {limit: 0, used: 0, remaining: 0, reset: NaN}}, - cached: new Map(), - hosted: null, + modes: [], }, //Computed data computed: { @@ -95,6 +59,22 @@ preview() { return /-preview$/.test(this.version) }, + //Rate limit reset + rlreset() { + const reset = new Date(Math.max(this.requests.graphql.reset, this.requests.rest.reset)) + return `${reset.getHours()}:${reset.getMinutes()}` + }, }, + //Methods + methods:{ + //Metrics insights + async insights() { + window.location.href = `/insights?user=${this.user1}` + }, + //Metrics embed + async embed() { + window.location.href = `/embed?user=${this.user2}` + } + } }) })() diff --git a/source/app/web/statics/embed/app.js b/source/app/web/statics/embed/app.js index 26b94dd4..438467ce 100644 --- a/source/app/web/statics/embed/app.js +++ b/source/app/web/statics/embed/app.js @@ -85,7 +85,7 @@ //Data initialization data: { version: "", - user: "", + user: new URLSearchParams(location.search).get("user") || "", tab: "overview", palette: "light", clipboard: null, diff --git a/source/app/web/statics/embed/index.html b/source/app/web/statics/embed/index.html index 8649b937..5ea70517 100644 --- a/source/app/web/statics/embed/index.html +++ b/source/app/web/statics/embed/index.html @@ -19,7 +19,7 @@
- Metrics {{ version }} + Metrics Embed {{ version }}
diff --git a/source/app/web/statics/index.html b/source/app/web/statics/index.html index 292a30b4..10c9b0a9 100644 --- a/source/app/web/statics/index.html +++ b/source/app/web/statics/index.html @@ -21,11 +21,62 @@ Metrics {{ version }} -
-
- Hi -
-
+
+
+
+

+ + Create your own metrics +

+ + Choose among dozens of plugins and hundreds of options to craft your own custom metrics infographics. Preview renders and auto-generate a configuration file! + +
+
+ + +
+
+
+ +
+
+
+

+ + Search a GitHub user +

+ + Display rankings, highlights, contributions, repositories, user reactions, stars, commits history, used languages and recent activity from any user account! + +
+
+ + +
+
+
+ +
+
+
+ + Metrics insights are rendered by metrics.lecoq.io in preview mode.
+ Any backend editions won't be reflected but client-side rendering can still be tested. + +
+ This web instance has run out of GitHub API requests. + Please wait until {{ rlreset }} to generate metrics again. +
+ Remaining GitHub requests: {{ requests.rest.remaining }} REST / {{ requests.graphql.remaining }} GraphQL + Send feedback on GitHub discussions! +
+
+
- Display rankings, contributions, highlights, commits calendar, used languages and recent activity from any user account! + Display rankings, highlights, contributions, repositories, user reactions, stars, commits history, used languages and recent activity from any user account! Share this profile using {{ url }} diff --git a/source/app/web/statics/insights/script.js b/source/app/web/statics/insights/script.js index 07939f55..906ce996 100644 --- a/source/app/web/statics/insights/script.js +++ b/source/app/web/statics/insights/script.js @@ -20,7 +20,12 @@ await this.search() } else { + const user = new URLSearchParams(location.search).get("user") this.searchable = true + if (user) { + this.user = user + this.search() + } } //Init await Promise.all([ diff --git a/source/app/web/statics/insights/style.css b/source/app/web/statics/insights/style.css index f9289577..c8dd912b 100644 --- a/source/app/web/statics/insights/style.css +++ b/source/app/web/statics/insights/style.css @@ -1,63 +1,3 @@ -/* Containers */ - .container { - padding: 0 1rem; - display: flex; - flex-direction: column; - justify-content: center; - max-width: 920px; - margin: auto; - } - .center { - align-items: center; - margin-top: 1rem; - } - .text-center { - text-align: 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; diff --git a/source/app/web/statics/style.css b/source/app/web/statics/style.css index 9dc40543..f9f68db9 100644 --- a/source/app/web/statics/style.css +++ b/source/app/web/statics/style.css @@ -360,4 +360,86 @@ @keyframes loading-dots-keyframes { 0% { transform: translateX(-100%); } + } + +/* Containers */ + .container { + padding: 0 1rem; + display: flex; + flex-direction: column; + justify-content: center; + max-width: 920px; + margin: auto; + align-items: center; + margin: 2rem auto 1rem; + } + .text-center { + text-align: center; + } + .mb1 { + margin-bottom: 1rem; + } + +/* Search */ + .search { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + .search.app { + padding: 1.5rem; + border: 1px solid var(--color-border-primary); + border-radius: 6px; + } + .search h2 { + margin: 0; + padding: 0; + display: flex; + align-items: center; + font-weight: normal; + } + .search h2 svg { + margin-right: .25rem; + fill: currentColor; + height: 1.25rem; + width: 1.25rem; + } + .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 .inputs button { + min-width: 7rem; + } + .search .info { + color: var(--color-text-secondary); + margin-top: 1rem; + } + .search .info svg { + fill: currentColor; + } + @media only screen and (min-width: 740px) { + .search { + width: 520px; + } } \ No newline at end of file