From 09391f3923e15bfcc47e45a768c03b263dc80208 Mon Sep 17 00:00:00 2001 From: lowlighter <22963968+lowlighter@users.noreply.github.com> Date: Sat, 24 Oct 2020 20:13:55 +0200 Subject: [PATCH] Add yaml action generator to web app --- package-lock.json | 53 ++++++++++++++++++++++++++++++++++++++++++++- package.json | 6 +++-- src/app.mjs | 6 +++++ src/html/app.js | 31 ++++++++++++++++++++++++++ src/html/index.html | 16 +++++++++----- src/html/style.css | 32 +++++++++++++++++---------- 6 files changed, 125 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 49a4af2e..16669d95 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "metrics", - "version": "2.1.0", + "version": "2.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -297,6 +297,17 @@ "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==", "dev": true }, + "clipboard": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz", + "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==", + "optional": true, + "requires": { + "good-listener": "^1.2.2", + "select": "^1.1.2", + "tiny-emitter": "^2.0.0" + } + }, "coa": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/coa/-/coa-2.0.2.tgz", @@ -464,6 +475,12 @@ "object-keys": "^1.0.12" } }, + "delegate": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz", + "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==", + "optional": true + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -721,6 +738,15 @@ "path-is-absolute": "^1.0.0" } }, + "good-listener": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz", + "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=", + "optional": true, + "requires": { + "delegate": "^3.1.2" + } + }, "has": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", @@ -1229,6 +1255,14 @@ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" }, + "prismjs": { + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.22.0.tgz", + "integrity": "sha512-lLJ/Wt9yy0AiSYBf212kK3mM5L8ycwlyTlSxHBAneXLR0nzFMlZ5y7riFPF3E33zXOF2IH95xdY5jIyZbM9z/w==", + "requires": { + "clipboard": "^2.0.0" + } + }, "process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", @@ -1328,6 +1362,12 @@ "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==" }, + "select": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", + "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=", + "optional": true + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -1547,6 +1587,12 @@ "yallist": "^3.0.3" } }, + "tiny-emitter": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz", + "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==", + "optional": true + }, "toidentifier": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", @@ -1613,6 +1659,11 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz", "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==" }, + "vue-prism-component": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/vue-prism-component/-/vue-prism-component-1.2.0.tgz", + "integrity": "sha512-0N9CNuQu+36CJpdsZHrhdq7d18oBvjVMjawyKdIr8xuzFWLfdxECZQYbFaYoopPBg3SvkEEMtkhYqdgTQl5Y+A==" + }, "wide-align": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz", diff --git a/package.json b/package.json index 59116112..1a2f6406 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "start": "node index.mjs", "build": "node utils/build.mjs", "test": "node tests/metrics.mjs", - "upgrade": "npm install @actions/core@latest @actions/github@latest @octokit/graphql@latest @octokit/rest@latest axios@latest compression@latest ejs@latest express@latest express-rate-limit@latest image-to-base64@latest memory-cache@latest svgo@latest vue@latest @vercel/ncc@latest libxmljs@latest" + "upgrade": "npm install @actions/core@latest @actions/github@latest @octokit/graphql@latest @octokit/rest@latest axios@latest compression@latest ejs@latest express@latest express-rate-limit@latest image-to-base64@latest memory-cache@latest prismjs@latest svgo@latest vue@latest vue-prism-component@latest @vercel/ncc@latest libxmljs@latest" }, "repository": { "type": "git", @@ -31,8 +31,10 @@ "express-rate-limit": "^5.1.3", "image-to-base64": "^2.1.1", "memory-cache": "^0.2.0", + "prismjs": "^1.22.0", "svgo": "^1.3.2", - "vue": "^2.6.12" + "vue": "^2.6.12", + "vue-prism-component": "^1.2.0" }, "devDependencies": { "@vercel/ncc": "^0.24.1", diff --git a/src/app.mjs b/src/app.mjs index 8096ee45..da5a28c9 100644 --- a/src/app.mjs +++ b/src/app.mjs @@ -56,6 +56,12 @@ app.get("/axios.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/axios/dist/axios.min.js`)) app.get("/axios.min.map", limiter, (req, res) => res.sendFile(`${conf.node_modules}/axios/dist/axios.min.map`)) app.get("/vue.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/vue/dist/vue.min.js`)) + app.get("/vue.prism.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/vue-prism-component/dist/vue-prism-component.min.js`)) + app.get("/vue-prism-component.min.js.map", limiter, (req, res) => res.sendFile(`${conf.node_modules}/vue-prism-component/dist/vue-prism-component.min.js.map`)) + app.get("/prism.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/prismjs/prism.js`)) + app.get("/prism.yaml.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/prismjs/components/prism-yaml.min.js`)) + app.get("/prism.markdown.min.js", limiter, (req, res) => res.sendFile(`${conf.node_modules}/prismjs/components/prism-markdown.min.js`)) + app.get("/style.prism.css", limiter, (req, res) => res.sendFile(`${conf.node_modules}/prismjs/themes/prism-tomorrow.css`)) app.get("/placeholder.svg", limiter, async (req, res) => { const template = req.query.template || conf.settings.templates.default if (!(template in Templates)) diff --git a/src/html/app.js b/src/html/app.js index 03a347cc..0ad1e95c 100644 --- a/src/html/app.js +++ b/src/html/app.js @@ -11,6 +11,7 @@ async mounted() { await this.load() }, + components:{Prism:PrismComponent}, //Data initialization data:{ user:url.get("user") || "", @@ -65,6 +66,36 @@ const params = [...(this.templates.selected !== templates[0] ? [`template=${this.templates.selected}`] : []), ...plugins].join("&") return `${window.location.protocol}//${window.location.host}/${this.user}${params.length ? `?${params}` : ""}` }, + //Embedded generated code + embed() { + return `[![GitHub metrics](${this.url})](https://github.com/lowlighter/metrics)` + }, + //GitHub action auto-generated code + action() { + return [ + `# Visit https://github.com/lowlighter/metrics for full reference`, + `name: GitHub metrics as SVG image`, + `on:`, + ` schedule: [{cron: "0 * * * *"}]`, + ` push: {branches: "master"}`, + `jobs:`, + ` github-metrics:`, + ` runs-on: ubuntu-latest`, + ` steps:`, + ` - uses: lowlighter/metrics@latest`, + ` with:`, + ` # Setup a personal token in your secrets.`, + ` token: ${"$"}{{ secrets.METRICS_TOKEN }}`, + ` # You can also setup a bot token for commits`, + ` # committer_token: ${"$"}{{ secrets.METRICS_BOT_TOKEN }}`, + ``, + ` # Options`, + ` user: ${this.user }`, + ` template: ${this.templates.selected}`, + ` base: ${Object.keys(this.plugins.enabled.base).join(", ") }`, + ...Object.entries(this.plugins.enabled).filter(([key, value]) => (key !== "base")&&(value)).map(([key]) => ` plugin_${key}: yes`) + ].join("\n") + } }, //Methods methods:{ diff --git a/src/html/index.html b/src/html/index.html index 3c210391..4dab901d 100644 --- a/src/html/index.html +++ b/src/html/index.html @@ -7,6 +7,7 @@ + @@ -80,14 +81,15 @@

4. Embed these metrics on your GitHub profile

+ For even more features, be sure to checkout lowlighter/metrics ! - For even more features, setup lowlighter/metrics as a GitHub action !
- Enjoying metrics ? Consider starring it, a little bit of support is always appreciated 💖 !
@@ -105,8 +107,12 @@ + + + + \ No newline at end of file diff --git a/src/html/style.css b/src/html/style.css index 192fa99e..264cdfd4 100644 --- a/src/html/style.css +++ b/src/html/style.css @@ -88,15 +88,15 @@ .generator .step { margin-bottom: 1rem; text-align: center; + width: 100%; max-width: 800px; } .generator .steps { - margin: .5rem 1rem 2rem; flex-grow: 1; + width: 100%; } .generator .preview { display: none; - margin: .5rem 1rem 2rem; flex-shrink: 0; } .generator .preview .metrics { @@ -131,17 +131,27 @@ .plugins label, .palettes label { margin: 0 1rem; } -/* Markdown code */ +/* Code snippets */ .code { - font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; - padding: 1rem; - margin: .5rem 0; - border-radius: .5rem; - background-color: #FAFBFC; - word-wrap: break-word; + display: flex; + justify-content: center; + align-items: center; + margin: 0 .5rem; } - .code .md-alt { - color: #6F42C1; + .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 {