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

Add yaml action generator to web app

Browse Source
This commit is contained in:
lowlighter
2020-10-24 20:13:55 +02:00
parent f2fb214afe
commit 09391f3923
6 changed files with 125 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.mjs
View File

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

31
src/html/app.js
View File

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

16
src/html/index.html
View File

@@ -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">
![<span class="md-alt">GitHub metrics</span>]({{ url }})
</div>
<div class="code"><Prism language="markdown" :code="embed"></Prism></div>
<h3>4. Using <a href="https://github.com/marketplace/actions/github-metrics-as-svg-image">GitHub action</a></h3>
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>

32
src/html/style.css
View File

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