Skip to content

Commit 60985e0

Browse files
anuraghazralencx
authored andcommitted
feat(script): improved theme preview script (anuraghazra#1439)
* feat: improved theme preview script * chore: add getPRNumber
1 parent 630d62e commit 60985e0

File tree

2 files changed

+44
-13
lines changed

2 files changed

+44
-13
lines changed

package.json

+3
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,12 @@
1818
"@testing-library/jest-dom": "^5.11.0",
1919
"axios": "^0.19.2",
2020
"axios-mock-adapter": "^1.18.1",
21+
"color-contrast-checker": "^2.1.0",
2122
"css-to-object": "^1.1.0",
23+
"hjson": "^3.2.2",
2224
"husky": "^4.2.5",
2325
"jest": "^26.1.0",
26+
"lodash.snakecase": "^4.1.1",
2427
"parse-diff": "^0.7.0"
2528
},
2629
"dependencies": {

scripts/preview-theme.js

+41-13
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
const core = require("@actions/core");
22
const github = require("@actions/github");
33
const parse = require("parse-diff");
4+
const Hjson = require("hjson");
5+
const snakeCase = require("lodash.snakecase");
6+
const ColorContrastChecker = require("color-contrast-checker");
7+
48
require("dotenv").config();
59

610
function getPrNumber() {
@@ -21,6 +25,8 @@ const themeContribGuidelines = `
2125

2226
async function run() {
2327
try {
28+
const ccc = new ColorContrastChecker();
29+
const warnings = [];
2430
const token = core.getInput("token");
2531
const octokit = github.getOctokit(token || process.env.PERSONAL_TOKEN);
2632
const pullRequestId = getPrNumber();
@@ -30,7 +36,7 @@ async function run() {
3036
return;
3137
}
3238

33-
let res = await octokit.pulls.get({
39+
const res = await octokit.pulls.get({
3440
owner: "anuraghazra",
3541
repo: "github-readme-stats",
3642
pull_number: pullRequestId,
@@ -39,15 +45,20 @@ async function run() {
3945
},
4046
});
4147

42-
let diff = parse(res.data);
43-
let colorStrings = diff
48+
const diff = parse(res.data);
49+
const content = diff
4450
.find((file) => file.to === "themes/index.js")
4551
.chunks[0].changes.filter((c) => c.type === "add")
4652
.map((c) => c.content.replace("+", ""))
4753
.join("");
4854

49-
let matches = colorStrings.match(/(title_color:.*bg_color.*\")/);
50-
let colors = matches && matches[0].split(",");
55+
const themeObject = Hjson.parse(content);
56+
const themeName = Object.keys(themeObject)[0];
57+
const colors = themeObject[themeName];
58+
59+
if (themeName !== snakeCase(themeName)) {
60+
warnings.push("Theme name isn't in snake_case");
61+
}
5162

5263
if (!colors) {
5364
await octokit.issues.createComment({
@@ -64,22 +75,39 @@ async function run() {
6475
});
6576
return;
6677
}
67-
colors = colors.map((color) =>
68-
color.replace(/.*\:\s/, "").replace(/\"/g, ""),
69-
);
70-
71-
const titleColor = colors[0];
72-
const iconColor = colors[1];
73-
const textColor = colors[2];
74-
const bgColor = colors[3];
78+
79+
const titleColor = colors.title_color;
80+
const iconColor = colors.icon_color;
81+
const textColor = colors.text_color;
82+
const bgColor = colors.bg_color;
7583
const url = `https://github-readme-stats.vercel.app/api?username=anuraghazra&title_color=${titleColor}&icon_color=${iconColor}&text_color=${textColor}&bg_color=${bgColor}&show_icons=true`;
7684

85+
const colorPairs = {
86+
title_color: [titleColor, bgColor],
87+
icon_color: [iconColor, bgColor],
88+
text_color: [textColor, bgColor],
89+
};
90+
91+
// check color contrast
92+
Object.keys(colorPairs).forEach((key) => {
93+
const color1 = colorPairs[key][0];
94+
const color2 = colorPairs[key][1];
95+
if (!ccc.isLevelAA(`#${color1}`, `#${color2}`)) {
96+
const permalink = `https://webaim.org/resources/contrastchecker/?fcolor=${color1}&bcolor=${color2}`;
97+
warnings.push(
98+
`\`${key}\` does not passes [AA contrast ratio](${permalink})`,
99+
);
100+
}
101+
});
102+
77103
await octokit.issues.createComment({
78104
owner: "anuraghazra",
79105
repo: "github-readme-stats",
80106
body: `
81107
\r**Automated Theme preview**
82108
109+
\r${warnings.map((warning) => `- :warning: ${warning}\n`).join("")}
110+
83111
\ntitle_color: <code>#${titleColor}</code> | icon_color: <code>#${iconColor}</code> | text_color: <code>#${textColor}</code> | bg_color: <code>#${bgColor}</code>
84112
85113
\r[Preview Link](${url})

0 commit comments

Comments
 (0)