├── README.md
└── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | <h1 align="center">🛡️ Repo Badge Generator</h1>
 3 | <p align="center">
 4 |   <i>Quick script to generate embedable badges for a repository</i><br>
 5 |   <b><a href="https://repo-badges.as93.net">repo-badges.as93.net</a></b>
 6 | </p>
 7 | <p align="center">
 8 |   <a href="https://repo-badges.as93.net">
 9 |     <img width="600" src="https://i.ibb.co/7V9x7dk/repo-badge-generator-screenshot-2.png" />
10 |   </a>
11 | </p>
12 | 
13 | ## About
14 | I made this to quickly generate the project links, for this post: [CLI tools you won't be able to live without 🔧 ](https://dev.to/lissy93/cli-tools-you-cant-live-without-57f6)
15 | 
16 | Just a simple script to quickly generate embedable markdown badges to show repository info.<br>
17 | Data is fetched from the GitHub API, and badges are served up using the <a href="https://shields.io/">Shields.io</a> API.<br>
18 | Includes a badge for + link to: the author, the repo + star count, and the language used.<br>
19 | Paste in the URL to a repo, hit 'Generate', and results will be copied to your clipboard.
20 | 
21 | ## Deployment
22 | It's just a static HTML page, so serve it with any web server, CDN or static host.<br>
23 | There's a demo hosted on GH Pages, at: [lissy93.github.io/repo-badge-maker](https://lissy93.github.io/repo-badge-maker/)
24 | 
25 | ## Report an Issue
26 | Found something that's not working? [Open an issue](https://github.com/Lissy93/repo-badge-maker/issues/new/choose), and describe the problem, steps to reproduce alond with expected and actual output. If relevant, also include details about your environment. I'll try and fix / respond to any tickets within 48-hours.
27 | 
28 | ## Contributing
29 | Contributions of any kind are very welcome, and would be much appreiciated.
30 | For Code of Conduct, see [Contributor Convent](https://www.contributor-covenant.org/version/2/1/code_of_conduct/).
31 | 
32 | To get started, fork the repo, make your changes, add, commit and push the code, then come back here to open a pull request. If you're new to GitHub or open source, [this guide](https://www.freecodecamp.org/news/how-to-make-your-first-pull-request-on-github-3#let-s-make-our-first-pull-request-) or the [git docs](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request) may help you get started, but feel free to reach out if you need any support.
33 | 
34 | ## License
35 | 
36 | > _**[Lissy93/repo-badge-maker](https://github.com/Lissy93/repo-badge-maker)** is licensed under [MIT](https://gist.github.com/Lissy93/143d2ee01ccc5c052a17) © [Alicia Sykes](https://aliciasykes.com) 2022._<br>
37 | > <sup align="right">For information, see <a href="https://tldrlegal.com/license/mit-license">TLDR Legal > MIT</a></sup>
38 | 
39 | <details>
40 | <summary>Expand License</summary>
41 | 
42 | ```
43 | The MIT License (MIT)
44 | Copyright (c) Alicia Sykes <alicia@omg.com> 
45 | 
46 | Permission is hereby granted, free of charge, to any person obtaining a copy 
47 | of this software and associated documentation files (the "Software"), to deal 
48 | in the Software without restriction, including without limitation the rights 
49 | to use, copy, modify, merge, publish, distribute, sub-license, and/or sell 
50 | copies of the Software, and to permit persons to whom the Software is furnished 
51 | to do so, subject to the following conditions:
52 | 
53 | The above copyright notice and this permission notice shall be included install 
54 | copies or substantial portions of the Software.
55 | 
56 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
57 | INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANT ABILITY, FITNESS FOR A
58 | PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
59 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
60 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
61 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
62 | ```
63 | 
64 | </details>
65 | 
66 | ---
67 | 
68 | <!-- License + Copyright -->
69 | <p  align="center">
70 |   <i>© <a href="https://aliciasykes.com">Alicia Sykes</a> 2023</i><br>
71 |   <i>Licensed under <a href="https://gist.github.com/Lissy93/143d2ee01ccc5c052a17">MIT</a></i><br>
72 |   <a href="https://github.com/lissy93"><img src="https://i.ibb.co/4KtpYxb/octocat-clean-mini.png" /></a><br>
73 |   <sup>Thanks for visiting :)</sup>
74 | </p>
75 | 
76 | <!-- Dinosaur -->
77 | <!-- 
78 |                         . - ~ ~ ~ - .
79 |       ..     _      .-~               ~-.
80 |      //|     \ `..~                      `.
81 |     || |      }  }              /       \  \
82 | (\   \\ \~^..'                 |         }  \
83 |  \`.-~  o      /       }       |        /    \
84 |  (__          |       /        |       /      `.
85 |   `- - ~ ~ -._|      /_ - ~ ~ ^|      /- _      `.
86 |               |     /          |     /     ~-.     ~- _
87 |               |_____|          |_____|         ~ - . _ _~_-_
88 | -->
89 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <title>Repo Badges</title>
  6 |     <meta name="description" content="Simple script for quickly generating badges for a GH repo">
  7 |     <link rel="icon" href="http://aliciasykes.com/favicon.ico">
  8 |     <script defer data-domain="repo-badges.as93.net" src="https://no-track.as93.net/js/script.js"></script>
  9 | </head>
 10 | 
 11 | <body>
 12 |   <h1>Repo Badges</h1>
 13 | 
 14 |   <section class="input-section">
 15 |     <h3>Input</h3>
 16 |     <label for="repoLink">Enter a GitHub Repo URL</label>
 17 |     <input id="repoLink" onfocus="getClipboardValue()" />
 18 |     <button onClick="generateOutput()">Generate</button>
 19 |   </section>
 20 | 
 21 |   <section class="output-section">
 22 |     <h3>Output</h3>
 23 |     <textarea id="result"></textarea>
 24 |     <h3>Preview</h3>
 25 |     <div id="preview"></div>
 26 |   </section>
 27 | 
 28 |   <section class="about-section">
 29 |     <h3>About</h3>
 30 |     <p>
 31 |       Just a very simple script to generate badges for a repository, outputted in markdown format.
 32 |       The badges are generated using the <a href="https://shields.io/">Shields.io</a> API.
 33 |       Includes a badge for + link to the author, the repo + star count, and the language used.
 34 |       Paste in the URL to a repo, hit 'Generate', and results will be copied to your clipboard.
 35 |     </p>
 36 |     <p class="license-info">
 37 |       Code available on GitHub at
 38 |       <a href="https://github.com/Lissy93/repo-badge-maker">Lissy93/repo-badge-maker</a>
 39 |       <br>
 40 |       Licensed under MIT, © <a href="https://aliciasykes.com">Alicia Sykes</a> 2023
 41 |     </p>
 42 |   </section>
 43 | 
 44 | <script>
 45 | 
 46 | let previewBadges = [];
 47 | 
 48 | const badgeConfigs = {
 49 |   c: { name: 'C', color: 'A8B9CC', icon: 'c' },
 50 |   'c++': { name: 'C++', color: '00599C', icon: 'cplusplus' },
 51 |   'c#': { name: 'C#', color: '239120', icon: 'csharp' },
 52 |   go: { name: 'Go Lang', color: '00ADD8', icon: 'go' },
 53 |   java: { name: 'Java', color: '007396', icon: 'java' },
 54 |   javascript: { name: 'JavaScript', color: 'F7DF1E', icon: 'javascript' },
 55 |   php: { name: 'PHP', color: '777BB4', icon: 'php' },
 56 |   python: { name: 'Python', color: '3C78A9', icon: 'python' },
 57 |   perl: { name: 'Perl', color: '39457E', icon: 'perl' },
 58 |   ruby: { name: 'Ruby', color: 'CC342D', icon: 'ruby' },
 59 |   rust: { name: 'Rust', color: 'e86243', icon: 'rust' },
 60 |   scala: { name: 'Scala', color: 'DC322F', icon: 'scala' },
 61 |   typescript: { name: 'TypeScript', color: '3178C6', icon: 'typescript' },
 62 |   vue: { name: 'Vue.js', color: '4FC08D', icon: 'vuedotjs' },
 63 |   node: { name: 'Node.js', color: '339933', icon: 'nodedotjs' },
 64 |   swift: { name: 'Swift', color: 'F05138', icon: 'swift' },
 65 |   bash: { name: 'Bash', color: '4EAA25', icon: 'gnubash' },
 66 |   dockerfile: { name: 'Docker', color: '2496ED', icon: 'docker' },
 67 |   flutter: { name: 'Flutter', color: '02569B', icon: 'flutter' },
 68 |   angular: { name: 'Angular', color: 'DD0031', icon: 'angular' },
 69 |   coffeescript: { name: 'CoffeeScript', color: '2F2625', icon: 'coffeescript' },
 70 | };
 71 | 
 72 | const getBadgeForLanguage = async (language) => {
 73 |   const langConfig = badgeConfigs[language.toLowerCase()];
 74 |   if (!langConfig) return '';
 75 |   const badgeUrl = `https://img.shields.io/static/v1?label=&message=${langConfig.name}`
 76 |     + `&color=${langConfig.color}&logo=${langConfig.icon}&logoColor=FFFFFF`;
 77 |   previewBadges.push(badgeUrl);
 78 |   return `![Written in ${language}](${badgeUrl})`;
 79 | };
 80 | 
 81 | const getLanguage = async (user, repo) => {
 82 |   const apiUrl = `https://api.github.com/repos/${user}/${repo}/languages`;
 83 |   return fetch(apiUrl)
 84 |     .then((response) => response.json())
 85 |     .then((data) => Object.keys(data)[0])
 86 |     .then((lang) => getBadgeForLanguage(lang))
 87 |     .catch((e) => '');
 88 | };
 89 | 
 90 | const makeMarkdownButtons = async (repoUrl) => {
 91 |   const [ user, repo ] = new URL(repoUrl).pathname.split('/').filter(p => p.length > 0);
 92 |   const shieldsIoUrl = 'https://img.shields.io'
 93 |   const authorBadge = `${shieldsIoUrl}/badge/${user}-b820f9?labelColor=b820f9&logo=githubsponsors&logoColor=fff`;
 94 |   const langBadge = await getLanguage(user, repo);
 95 |   const repoBadge = `${shieldsIoUrl}/github/stars/${user}/${repo}?color=232323&label=${repo}&logo=github&labelColor=232323`;
 96 |   previewBadges.push(repoBadge, authorBadge);
 97 |   return `[![View ${repo} on GitHub](${repoBadge})](${repoUrl}) [![Author ${user}](${authorBadge})](https://github.com/${user}) ${langBadge}`;
 98 | };
 99 | 
100 | const generatePreview = async () => {
101 |   const preview = document.getElementById('preview');
102 |   preview.innerHTML = '';
103 |   previewBadges.forEach(badge => {
104 |     const img = document.createElement('img');
105 |     img.src = badge;
106 |     preview.appendChild(img);
107 |   });
108 | };
109 | 
110 | const showOutputSection = () => {
111 |   const outputSection = document.querySelector('.output-section');
112 |   outputSection.style.display = 'flex';
113 | };
114 | 
115 | const generateOutput = async () => {
116 |   previewBadges = [];
117 |   showOutputSection();
118 |   const userVal = document.getElementById('repoLink').value;
119 |   const result = await makeMarkdownButtons(userVal);
120 |   navigator.clipboard.writeText(result);
121 |   document.getElementById('result').value = result;
122 |   generatePreview();
123 | };
124 | 
125 | const getClipboardValue = async () => {
126 |   if (navigator.clipboard.readText) {
127 |     navigator.clipboard.readText()
128 |     .then((clipText) => document.querySelector('.repoLink').innerText = clipText);
129 |   }
130 | };
131 | </script>
132 | 
133 | <style>
134 |   body {
135 |     font-family: "Roboto", Verdana, Helvetica, sans-serif;
136 |     color: white;
137 |     background: #0d0e20;
138 |     padding-bottom: 2rem;
139 |   }
140 |   h1 {
141 |     font-size: 2.5rem;
142 |     text-align: center;
143 |   }
144 |   h3 {
145 |     margin: 0;
146 |   }
147 |   textarea, input, button, pre {
148 |     color: #fff;
149 |     font-family: courier, sans-serif;
150 |     height: 150px;
151 |     outline: none;
152 |     border: 2px solid #00010a8c;
153 |     border-radius: 5px;
154 |     margin: 1rem;
155 |     background: #0d0e20;
156 |   }
157 |   textarea {
158 |     resize:none;
159 |   }
160 |   input {
161 |     height: 2.5rem;
162 |     padding: 0 1rem;
163 |     font-size: 1rem;
164 |   }
165 |   label {
166 |     margin: 1rem 1rem 0;
167 |     font-style: italic;
168 |   }
169 |   button {
170 |     height: 2.5rem;
171 |     margin: 0 1rem 1rem;
172 |     font-size: 1rem;
173 |     font-weight: thin;
174 |     font-family: "Roboto", Verdana, Helvetica, sans-serif;
175 |     cursor: pointer;
176 |   }
177 |   pre {
178 |     min-height: 150px;
179 |     height: fit-content;
180 |     overflow: hidden;
181 |     padding: 0.5rem;
182 |   }
183 |   input:focus, textarea:focus, button:hover {
184 |     background: #00010a8c;
185 |   }
186 |   .input-section, .output-section, .about-section {
187 |     display: flex;
188 |     flex-direction: column;
189 |     align-items: stretch;
190 |     margin: 1rem auto;
191 |     padding: 1rem;
192 |     border-radius: 5px;
193 |     background: #ffffff0a;
194 |     box-shadow: 2px 10px 10px rgb(0 0 0 / 33%), 0 1px 2px rgba(0,0,0,0.24);
195 |     max-width: 800px;
196 |   }
197 |   .output-section {
198 |     display: none;
199 |   }
200 |   .license-info {
201 |     font-size: 0.8rem;
202 |     margin: 0;
203 |     text-align: center;
204 |     opacity: 0.8;
205 |   }
206 |   img {
207 |     margin: 0.25rem;
208 |   }
209 |   a {
210 |     color: #fff;
211 |   }
212 | </style>
213 | </body>
214 | 
215 | </html>
216 | 


--------------------------------------------------------------------------------