Add yaml action generator to web app

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",

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",

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))

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:{

src/html/index.html

@@ -7,6 +7,7 @@
     <meta name="author" content="lowlighter">
     <link rel="icon" href="data:,">
     <link rel="stylesheet" href="/style.css">
+    <link rel="stylesheet" href="/style.prism.css" />
   </head>
   <body>
     <!-- Vue app -->
@@ -80,14 +81,15 @@
             </div>
             <div class="step">
               <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> !
               <template v-if="user">
+                <h3>4.1 Using <a href="#">{{ window.location.host }}</a></h3>
                 Add the markdown below in your <i>README.md</i> at <a :href="repo">{{ user }}/{{ user }}</a>
-                <div class="code">
+                <div class="code"><Prism language="markdown" :code="embed"></Prism></div>
-                  ![<span class="md-alt">GitHub metrics</span>]({{ url }})
+                <h3>4. Using <a href="https://github.com/marketplace/actions/github-metrics-as-svg-image">GitHub action</a></h3>
-                </div>
+                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>
               </template>
-              For even more features, setup <a href="https://github.com/lowlighter/metrics">lowlighter/metrics</a> as a <a href="https://github.com/marketplace/actions/github-metrics-as-svg-image">GitHub action</a> !<br>
-              Enjoying <a href="https://github.com/lowlighter/metrics">metrics</a> ? Consider starring it, a little bit of support is always appreciated 💖 !
             </div>
           </section>
           <!-- Metrics preview -->
@@ -105,8 +107,12 @@
     </main>
     <!-- Scripts -->
     <script src="/axios.min.js"></script>
+    <script src="/prism.min.js"></script>
+    <script src="/prism.markdown.min.js"></script>
+    <script src="/prism.yaml.min.js"></script>
     <script src="/ejs.min.js"></script>
     <script src="/vue.min.js"></script>
+    <script src="/vue.prism.min.js"></script>
     <script src="/app.js"></script>
   </body>
 </html>

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;
+    display: flex;
-    padding: 1rem;
+    justify-content: center;
-    margin: .5rem 0;
+    align-items: center;
-    border-radius: .5rem;
+    margin: 0 .5rem;
-    background-color: #FAFBFC;
-    word-wrap: break-word;
   }
-  .code .md-alt {
+  .code pre {
-    color: #6F42C1;
+    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 {