246 lines
13 KiB
HTML
246 lines
13 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>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="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/microsoft/209/bar-chart_1f4ca.png">
|
|
<link rel="stylesheet" href="/.css/style.css">
|
|
<link rel="stylesheet" href="/.css/style.prism.css" />
|
|
</head>
|
|
<body>
|
|
<!-- Vue app -->
|
|
<main :class="[palette]">
|
|
<!-- Title -->
|
|
<template>
|
|
<h1><a href="https://github.com/lowlighter/metrics">Metrics v{{ version }}</a></h1>
|
|
</template>
|
|
<!-- Content -->
|
|
<template>
|
|
<section class="generator">
|
|
<!-- Steps panel -->
|
|
<section class="steps">
|
|
<div class="step">
|
|
<h2>1. Enter your GitHub username</h2>
|
|
<input type="text" name="user" 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" v-show="templates.descriptions[template] !== '(hidden)'">
|
|
<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>
|
|
<i>*Additional plugins may be available when used as GitHub Action</i>
|
|
<template v-if="(plugins.enabled.tweets)||(plugins.enabled.music)||(plugins.enabled.pagespeed)||(plugins.enabled.languages)||(plugins.enabled.habits)||(plugins.enabled.posts)||(plugins.enabled.isocalendar)||(plugins.enabled.projects)||(plugins.enabled.topics)">
|
|
<h3>2.3 Configure additional plugins</h3>
|
|
<div class="options">
|
|
<div class="options-group" v-if="plugins.enabled.tweets">
|
|
<h4>{{ plugins.descriptions.tweets }}</h4>
|
|
<label>
|
|
Number of tweets to display
|
|
<input type="number" v-model="plugins.options['tweets.limit']" min="1" max="10" @change="load">
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.music">
|
|
<h4>{{ plugins.descriptions.music }}</h4>
|
|
<label>
|
|
Playlist embed link
|
|
<input type="text" v-model="plugins.options['music.playlist']" placeholder="https://embed.music.apple.com/en/playlist/">
|
|
</label>
|
|
<label>
|
|
Number of tracks to display
|
|
<input type="number" v-model="plugins.options['music.limit']" min="1" @change="load">
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.pagespeed">
|
|
<h4>{{ plugins.descriptions.pagespeed }}</h4>
|
|
<label>
|
|
Detailed PageSpeed report
|
|
<input type="checkbox" v-model="plugins.options['pagespeed.detailed']" @change="load">
|
|
</label>
|
|
<label>
|
|
Include a website screenshot
|
|
<input type="checkbox" v-model="plugins.options['pagespeed.screenshot']" @change="load">
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.languages">
|
|
<h4>{{ plugins.descriptions.languages }}</h4>
|
|
<label>
|
|
Ignored languages (comma separated)
|
|
<input type="text" v-model="plugins.options['languages.ignored']" @change="load">
|
|
</label>
|
|
<label>
|
|
Skipped repositories (comma separated)
|
|
<input type="text" v-model="plugins.options['languages.skipped']" @change="load">
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.habits">
|
|
<h4>{{ plugins.descriptions.habits }}</h4>
|
|
<label>
|
|
Number of events for habits
|
|
<input type="number" v-model="plugins.options['habits.from']" min="1" max="1000">
|
|
</label>
|
|
<label>
|
|
Number of days for habits
|
|
<input type="number" v-model="plugins.options['habits.days']" min="1" max="30">
|
|
</label>
|
|
<label>
|
|
Display tidbits
|
|
<input type="checkbox" v-model="plugins.options['habits.facts']" @change="load">
|
|
</label>
|
|
<label>
|
|
Display activity charts
|
|
<input type="checkbox" v-model="plugins.options['habits.charts']" @change="load">
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.posts">
|
|
<h4>{{ plugins.descriptions.posts }}</h4>
|
|
<label>
|
|
Posts source
|
|
<select v-model="plugins.options['posts.source']" disabled>
|
|
<option value="dev.to">dev.to</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Number of posts to display
|
|
<input type="number" v-model="plugins.options['posts.limit']" min="1" @change="load">
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.isocalendar">
|
|
<h4>{{ plugins.descriptions.isocalendar }}</h4>
|
|
<label>
|
|
Isocalendar duration
|
|
<select v-model="plugins.options['isocalendar.duration']">
|
|
<option value="half-year">Half year</option>
|
|
<option value="full-year">Full year</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.topics">
|
|
<h4>{{ plugins.descriptions.topics }}</h4>
|
|
<label>
|
|
Topics display mode
|
|
<select v-model="plugins.options['topics.mode']" @change="load">
|
|
<option value="starred">Starred topics</option>
|
|
<option value="mastered">Known and mastered technologies</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Topics sorting
|
|
<select v-model="plugins.options['topics.sort']">
|
|
<option value="starred">Recently starred by you</option>
|
|
<option value="stars">Most stars</option>
|
|
<option value="activity">Recent actity</option>
|
|
<option value="random">Random</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
Number of topics to display
|
|
<input type="number" v-model="plugins.options['topics.limit']" @change="load">
|
|
</label>
|
|
</div>
|
|
<div class="options-group" v-if="plugins.enabled.projects">
|
|
<h4>{{ plugins.descriptions.projects }}</h4>
|
|
<label>
|
|
Number of projects to display
|
|
<input type="number" v-model="plugins.options['projects.limit']" min="1" max="100" @change="load">
|
|
</label>
|
|
<label>
|
|
Repositories projects to display (comma separated)
|
|
<input type="text" v-model="plugins.options['projects.repositories']" @change="load">
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</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 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>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>
|
|
<!-- GitHub requests tracker -->
|
|
<template>
|
|
<div class="gh-requests">{{ requests.remaining }} GitHub request{{ requests.remaining > 1 ? "s" : "" }} remaining</div>
|
|
</template>
|
|
</main>
|
|
<!-- Scripts -->
|
|
<script src="/.js/axios.min.js"></script>
|
|
<script src="/.js/prism.min.js"></script>
|
|
<script src="/.js/prism.markdown.min.js"></script>
|
|
<script src="/.js/prism.yaml.min.js"></script>
|
|
<script src="/.js/ejs.min.js"></script>
|
|
<script src="/.js/vue.min.js"></script>
|
|
<script src="/.js/vue.prism.min.js"></script>
|
|
<script src="/.js/app.js"></script>
|
|
</body>
|
|
</html> |