118 lines
5.7 KiB
HTML
118 lines
5.7 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>📊 GitHub metrics</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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">
|
|
<link rel="icon" href="data:,">
|
|
<link rel="stylesheet" href="/style.css">
|
|
<link rel="stylesheet" href="/style.prism.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Vue app -->
|
|
<main :class="[palette]">
|
|
<!-- Title -->
|
|
<h1><a href="https://github.com/lowlighter/metrics">Generate your metrics !</a></h1>
|
|
<!-- Content -->
|
|
<template>
|
|
<section class="generator">
|
|
<!-- Steps panel -->
|
|
<section class="steps">
|
|
<div class="step">
|
|
<h2>1. Enter your GitHub username</h2>
|
|
<input type="text" v-model="user" maxlength="39" placeholder="GitHub username" :disabled="generated.pending">
|
|
</div>
|
|
<div class="step">
|
|
<h2>2. Select a template</h2>
|
|
<div class="templates">
|
|
<label v-for="template in templates.list" :key="template">
|
|
<input type="radio" v-model="templates.selected" :value="template" @change="load" :disabled="generated.pending">
|
|
{{ templates.descriptions[template] || template }}
|
|
</label>
|
|
</div>
|
|
<template v-if="plugins.base.length">
|
|
<h3>2.1 Configure base content</h3>
|
|
<div class="plugins">
|
|
<label v-for="part in plugins.base" :key="part">
|
|
<input type="checkbox" v-model="plugins.enabled.base[part]" @change="load" :disabled="generated.pending">
|
|
{{ plugins.descriptions[`base.${part}`] || `base.${part}` }}
|
|
</label>
|
|
</div>
|
|
</template>
|
|
<template v-if="plugins.list.length">
|
|
<h3>2.2 Enable additional plugins</h3>
|
|
<div class="plugins">
|
|
<label v-for="plugin in plugins.list" :key="plugin">
|
|
<input type="checkbox" v-model="plugins.enabled[plugin]" @change="load" :disabled="generated.pending">
|
|
{{ plugins.descriptions[plugin] || plugin }}
|
|
</label>
|
|
</div>
|
|
</template>
|
|
<div class="palette">
|
|
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="palettes">
|
|
<label>
|
|
<input type="radio" v-model="palette" value="light"> ☀️ Light mode
|
|
</label>
|
|
<label>
|
|
<input type="radio" v-model="palette" value="dark"> 🌙 Night mode
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
<template v-if="user">
|
|
<button @click="generate" :disabled="generated.pending">{{ generated.pending ? "Working on it :)" : "Generate your metrics !" }}</button>
|
|
</template>
|
|
</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"><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>
|
|
</div>
|
|
</section>
|
|
<!-- 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>
|
|
</template>
|
|
</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> |