https://ucdok.com/project/generate_nodejs_project_shields/

1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>生成Node.js项目的badge图标</title>
6<style>
7#box {
8  width: 100%;
9  max-width: 800px;
10  margin: auto;
11  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
12  text-align: center;
13}
14#box h1 {
15  color: #333;
16  font-weight: normal;
17  font-size: 30px;
18}
19button {
20  font-size: 14px;
21  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
22  background-color: darkcyan;
23  border: 1px solid #3F51B5;
24  color: #fff;
25  padding: 4px 30px;
26  border-radius: 4px;
27  cursor: pointer;
28  margin: 0px 18px;
29}
30button:hover {
31  color: floralwhite;
32}
33.ipt-box {
34  padding-bottom: 10px;
35  border: 1px solid #F4F4F4;
36  border-bottom: none;
37  padding-top: 10px;
38}
39.ipt-box label {
40  width: 150px;
41  display: inline-block;
42  font-size: 16px;
43  font-weight: normal;
44  color: #333;
45  text-align: right;
46}
47.ipt-box input {
48  font-size: 16px;
49  width: 300px;
50  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
51  text-align: center;
52}
53#out {
54  background-color: #F4F4F4;
55  padding: 8px;
56}
57#out-result {
58  background: inherit;
59  font-size: 16px;
60  text-align: left;
61  line-height: 1.6;
62  font-weight: normal;
63  width: 100%;
64  border: none;
65  height: 550px;
66  font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
67}
68</style>
69</head>
70<body>
71  <div id="box">
72    <h1>生成Node.js项目的badge图标</h1>
73    <div class="ipt-box">
74      <label>Github项目: </label>
75      <input type="text" id="ipt-project" placeholder="用户名/项目名，如：leizongmin/js-xss">
76    </div>
77    <div class="ipt-box">
78      <label>NPM包名: </label>
79      <input type="text" id="ipt-npm" placeholder="如：xss">
80    </div>
81    <div class="ipt-box">
82      <label>最低Node.js版本: </label>
83      <input type="text" id="ipt-node" value="4.0" placeholder="如：6.0">
84    </div>
85    <div class="ipt-box">
86      <button id="btn-generate">生成shields.io图标</button>
87      <button id="btn-copy">复制Markdown源码到粘贴板</button>
88    </div>
89    <div class="ipt-box">
90      <div id="render"></div>
91    </div>
92    <div id="out">
93      <textarea id="out-result"></textarea>
94    </div>
95  </div>
96  <div style="display:none;" id="template">
97[![NPM version][npm-image]][npm-url]
98[![build status][travis-image]][travis-url]
99[![Test coverage][coveralls-image]][coveralls-url]
100[![David deps][david-image]][david-url]
101[![node version][node-image]][node-url]
102[![npm download][download-image]][download-url]
103[![npm license][license-image]][download-url]
104
105[npm-image]: https://img.shields.io/npm/v/${npm}.svg?style=flat-square
106[npm-url]: https://npmjs.org/package/${npm}
107[travis-image]: https://img.shields.io/travis/${project}.svg?style=flat-square
108[travis-url]: https://travis-ci.org/${project}
109[coveralls-image]: https://img.shields.io/coveralls/${project}.svg?style=flat-square
110[coveralls-url]: https://coveralls.io/r/${project}?branch=master
111[david-image]: https://img.shields.io/david/${project}.svg?style=flat-square
112[david-url]: https://david-dm.org/${project}
113[node-image]: https://img.shields.io/badge/node.js-%3E=_${node}-green.svg?style=flat-square
114[node-url]: http://nodejs.org/download/
115[download-image]: https://img.shields.io/npm/dm/${npm}.svg?style=flat-square
116[download-url]: https://npmjs.org/package/${npm}
117[license-image]: https://img.shields.io/npm/l/${npm}.svg
118  </div>
119</body>
120</html>

121<script src="markdown-it.min.js"></script>

121

122<script>
123function $(str) {
124  return document.querySelector(str);
125}
126
127// 生成Node.js项目的badge图标
128function generateShields() {
129  var tpl = $('#template').innerText;
130  var project = $('#ipt-project').value.trim();
131  var npm = $('#ipt-npm').value.trim();
132  var node = $('#ipt-node').value.trim();
133  var data = tpl.replace(/\$\{project\}/g, project)
134                .replace(/\$\{npm\}/g, npm)
135                .replace(/\$\{node\}/g, node)
136                .trim();
137  $('#out-result').value = data;
138
139  // 显示渲染效果
140  var md = window.markdownit();
141  var result = md.render(data);
142  $('#render').innerHTML = result;
143}
144
145// 复制Markdown源码到粘贴板
146function copyMarkdown() {
147  try {
148    $('#out-result').select();
149    document.execCommand('copy');
150    $('#out-result').blur();
151  } catch (err) {
152    alert('请手动复制生成的Markdown源码并粘贴到README.md文件');
153  }
154}
155
156$('#btn-generate').onclick = generateShields;
157$('#btn-copy').onclick = copyMarkdown;
158</script>

158