2 |
3 |
11 |
12 |
13 | ## Usage
14 |
15 | Two way to generate MonkeyType Readme
16 |
17 | 1. #### Using GitHub Action from Marketplace
18 | 2. #### Setting Up Custom MonkeyType Readme GitHub Action
19 |
20 | ### Using GitHub Action from Marketplace ([MonkeyType Readme Github Action](https://github.com/marketplace/actions/monkeytype-readme))
21 |
22 | 1. Add a `monkeytype-readme.yml` file in your repository's `.github/workflows/` path.
23 | 2. Configure `monkeytype-readme.yml` with the following format:
24 |
25 | - **Username**: Change `MONKEYTYPE_USERNAME` to your username in MonkeyType.
26 |
27 | - **Themes**: Change `MONKEYTYPE_THEME_NAME` to your favorite theme in MonkeyType.
88 |
89 |
90 | #### With LeaderBoards: `?lb=true`
91 |
92 |
93 | 
94 |
95 |
96 | #### With PersonalBests: `?pb=true`
97 |
98 |
99 | 
100 |
101 |
102 | #### With LeaderBoards and PersonalBests: `?lbpb=true`
103 |
104 | #### github actions
105 |
106 | ```yml
107 | name: generate monkeytype readme svg
108 |
109 | on:
110 | schedule:
111 | - cron: "0 */6 * * *" # every 6 hours
112 | workflow_dispatch:
113 |
114 | jobs:
115 | download-svg:
116 | runs-on: ubuntu-latest
117 | steps:
118 | - name: Checkout code
119 | uses: actions/checkout@v3
120 |
121 | - name: Set up Node.js
122 | uses: actions/setup-node@v3
123 | with:
124 | node-version: "20.x"
125 |
126 | - name: Download SVG
127 | run: |
128 | mkdir public
129 | curl -o public/monkeytype-readme.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES
130 | curl -o public/monkeytype-readme-lb.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES?lb=true
131 | curl -o public/monkeytype-readme-pb.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES?pb=true
132 | curl -o public/monkeytype-readme-lb-pb.svg https://monkeytype-readme.zeabur.app/generate-svg/YOUR_USERNAME/THEMES?lbpb=true
133 |
134 | - name: push monkeytype-readme.svg to the monkeytype-readme branch
135 | uses: crazy-max/ghaction-github-pages@v4.0.0
136 | with:
137 | target_branch: monkeytype-readme
138 | build_dir: public
139 | env:
140 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
141 | ```
142 |
143 | 3. Add SVGs to your GitHub Readme.
144 |
145 | > Note:
146 | > change YOUR_MONKEYTYPE_USERNAME to your MonkeyType username.
147 | > change YOUR_GITHUB_USERNAME to your Github username.
148 | > change YOUR_GITHUB_REPOSITORY to your repository name.
149 | > change SVG_NAME to the svg you want to use.
150 | >
151 | > > original : monkeytype-readme.svg
152 | > > original + leader boards : monkeytype-readme-lb.svg
153 | > > original + personal bests : monkeytype-readme-pb.svg
154 | > > original + leader boards + personal bests : monkeytype-readme-lbpb.svg
155 |
156 | ```md
157 |
158 | 
51 |
220 | name: generate monkeytype readme svg
221 |
222 | on:
223 | schedule:
224 | - cron: "0 */6 * * *" # every 6 hours
225 | workflow_dispatch:
226 |
227 | jobs:
228 | download-svg:
229 | runs-on: ubuntu-latest
230 | steps:
231 | - name: Checkout code
232 | uses: actions/checkout@v3
233 |
234 | - name: Set up Node.js
235 | uses: actions/setup-node@v3
236 | with:
237 | node-version: '16.x'
238 |
239 | - name: Download SVG
240 | run: |
241 | mkdir public
242 | curl -o public/monkeytype-readme.svg ${domain}/generate-svg/${monkeytypeName}/${themeListState.themeName}
243 | curl -o public/monkeytype-readme-lb.svg ${domain}/generate-svg/${monkeytypeName}/${themeListState.themeName}?lb=true
244 | curl -o public/monkeytype-readme-pb.svg ${domain}/generate-svg/${monkeytypeName}/${themeListState.themeName}?pb=true
245 | curl -o public/monkeytype-readme-lb-pb.svg ${domain}/generate-svg/${monkeytypeName}/${themeListState.themeName}?lbpb=true
246 |
247 | - name: push monkeytype-readme.svg to the monkeytype-readme branch
248 | uses: crazy-max/ghaction-github-pages@v2.5.0
249 | with:
250 | target_branch: monkeytype-readme
251 | build_dir: public
252 | env:
253 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
254 |
255 |
256 | `;
257 | $("#githubReadmeYml").empty();
258 | $("#githubReadmeYml").append(githubReamdeYml);
259 |
260 | const githubReamdeMd = `
261 |
262 | <a href="https://monkeytype.com/profile/${monkeytypeName}">
263 | <img src="https://raw.githubusercontent.com/GITHUB_USERNAME/GITHUB_REPOSITORY/monkeytype-readme/monkeytype-readme-lb.svg" alt="My Monkeytype profile" />
264 | </a>
265 |
266 |
267 | `;
268 | $("#githubReadmeMd").empty();
269 | $("#githubReadmeMd").append(githubReamdeMd);
270 | }
271 |
272 | function hexToRgb(hex) {
273 | // Remove the # symbol if present
274 | hex = hex.replace("#", "");
275 |
276 | // Check if the hex code is three characters long
277 | if (hex.length === 3) {
278 | // Duplicate each character to expand the code to six characters
279 | hex = hex.replace(/(.)/g, "$1$1");
280 | }
281 |
282 | // Convert the hex value to RGB
283 | const r = parseInt(hex.substring(0, 2), 16);
284 | const g = parseInt(hex.substring(2, 4), 16);
285 | const b = parseInt(hex.substring(4, 6), 16);
286 |
287 | return { r, g, b };
288 | }
289 |
290 | function compareColors(hex1, hex2, themeName1, themeName2) {
291 | const rgb1 = hexToRgb(hex1);
292 | const rgb2 = hexToRgb(hex2);
293 | const brightness1 = rgb1.r + rgb1.g + rgb1.b;
294 | const brightness2 = rgb2.r + rgb2.g + rgb2.b;
295 |
296 | if (brightness1 > brightness2) {
297 | return true;
298 | } else if (brightness1 == brightness2) {
299 | if (themeName1 < themeName2) {
300 | return true;
301 | } else {
302 | return false;
303 | }
304 | } else {
305 | return false;
306 | }
307 | }
308 |
309 | async function getMonkeyTypeThemesList() {
310 | const url =
311 | "https://raw.githubusercontent.com/monkeytype-hub/monkeytype-readme/refs/heads/master/monkeytype-data/themes.json";
312 |
313 | return fetch(url)
314 | .then((response) => response.json())
315 | .then((data) => {
316 | return data;
317 | });
318 | }
319 |
320 | async function themeList() {
321 | let themeList = await getMonkeyTypeThemesList();
322 |
323 | for (let i = 0; i < themeList.length; i++) {
324 | for (let j = i + 1; j < themeList.length; j++) {
325 | if (
326 | compareColors(
327 | themeList[i]["bgColor"],
328 | themeList[j]["bgColor"],
329 | themeList[i]["name"],
330 | themeList[j]["name"],
331 | )
332 | ) {
333 | let temp = themeList[i];
334 | themeList[i] = themeList[j];
335 | themeList[j] = temp;
336 | }
337 | }
338 | }
339 |
340 | for (let i = themeList.length - 1; i >= 0; i--) {
341 | let html = `
342 |
354 | `;
355 | $("#themeListContainer").append(html);
356 | }
357 | }
358 |
359 | themeList();
360 |
--------------------------------------------------------------------------------
/public/script/monkeytypeData.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs");
2 | let fetch;
3 | import("node-fetch")
4 | .then((module) => {
5 | fetch = module.default;
6 | })
7 | .catch((err) => {
8 | console.error("Error while importing node-fetch:", err);
9 | });
10 |
11 | const { library } = require("@fortawesome/fontawesome-svg-core");
12 | const { fas } = require("@fortawesome/free-solid-svg-icons");
13 | const { far } = require("@fortawesome/free-regular-svg-icons");
14 | const { fab } = require("@fortawesome/free-brands-svg-icons");
15 | const { findIconDefinition } = require("@fortawesome/fontawesome-svg-core");
16 |
17 | library.add(fas, far, fab);
18 |
19 | function getTheme(themeName) {
20 | const themesRawData = fs.readFileSync("./monkeytype-data/themes.json");
21 | const themesData = JSON.parse(themesRawData);
22 | let serika_dark = {};
23 |
24 | for (let i = 0; i < themesData.length; i++) {
25 | const theme = themesData[i];
26 | if (theme.name === themeName) {
27 | return theme;
28 | }
29 | if (theme.name === "serika_dark") {
30 | serika_dark = theme;
31 | }
32 | }
33 |
34 | return serika_dark;
35 | }
36 |
37 | function getFaviconTheme() {
38 | const themesRawData = fs.readFileSync("./monkeytype-data/themes.json");
39 | const themesData = JSON.parse(themesRawData);
40 | let faviconData = {};
41 |
42 | let data;
43 | for (let i = 0; i < themesData.length; i++) {
44 | data = {
45 | name: themesData[i].name,
46 | bgColor: themesData[i].bgColor,
47 | mainColor: themesData[i].mainColor,
48 | subColor: themesData[i].subColor,
49 | textColor: themesData[i].textColor,
50 | };
51 | faviconData[i] = data;
52 | }
53 |
54 | return faviconData;
55 | }
56 |
57 | function getBadge(badgeId) {
58 | const badgesRawData = fs.readFileSync("./monkeytype-data/badges.json");
59 | const badgesData = JSON.parse(badgesRawData);
60 | return badgesData[badgeId];
61 | }
62 |
63 | async function getUserData(userId) {
64 | const url = `https://api.monkeytype.com/users/${userId}/profile`;
65 |
66 | try {
67 | return fetch(url)
68 | .then((response) => response.json())
69 | .then((data) => {
70 | return data.data;
71 | });
72 | } catch (error) {
73 | console.error(error);
74 | }
75 | }
76 |
77 | async function getMonkeyTypeThemesData() {
78 | const url = "https://mr-api.zeabur.app/themes";
79 |
80 | try {
81 | return fetch(url)
82 | .then((response) => response.json())
83 | .then((data) => {
84 | return data;
85 | });
86 | } catch (error) {
87 | console.error(error);
88 | }
89 | }
90 |
91 | async function getMonkeyTypeBadgesData() {
92 | const url =
93 | "https://raw.githubusercontent.com/monkeytypegame/monkeytype/master/frontend/src/ts/controllers/badge-controller.ts";
94 |
95 | return fetch(url)
96 | .then((response) => response.text())
97 | .then((data) => {
98 | const badgesStart = data.search(
99 | "const badges: Record
381 |