Skip to content

Commit

Permalink
Add an HTML preview for labels
Browse files Browse the repository at this point in the history
  • Loading branch information
@belochub
belochub committed Jul 5, 2019
1 parent 0a95be0 commit 3a39e21
Show file tree
Hide file tree
Showing 2 changed files with 188 additions and 0 deletions.
99 changes: 99 additions & 0 deletions labels/make-preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
#!/usr/bin/env node

const labels = require('./labels.json');
const fs = require('fs');
const path = require('path');

const html = `\
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
tr {
border-top: 1px solid #eaecef;
}
tr:last-child {
border-bottom: 1px solid #eaecef;
}
tr > td:first-child {
border-left: 1px solid #eaecef;
}
tr > td:last-child {
border-right: 1px solid #eaecef;
}
.label {
border-radius: 3px;
font-size: 16px;
font-weight: 600;
line-height: 2;
font-family: sans-serif;
padding: 0 8px;
display: inline-block;
margin: 8px 8px;
}
.desc {
padding: 8px 16px;
display: inline-block;
}
</style>
</head>
<body>
<script>
const labels = ${JSON.stringify(labels)};
function calculateColor(bgColor) {
const r = parseInt(bgColor.slice(0, 2), 16);
const g = parseInt(bgColor.slice(2, 4), 16);
const b = parseInt(bgColor.slice(4, 6), 16);
const c = [r / 255, g / 255, b / 255];
for (let i = 0; i < c.length; ++i) {
if (c[i] <= 0.03928) {
c[i] = c[i] / 12.92;
} else {
c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
}
}
const l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];
return l > 0.179 ? "black" : "white";
}
const table = document.body.appendChild(document.createElement('table'));
for (const label of labels) {
const tableRow = table.appendChild(document.createElement('tr'));
const cells = [
document.createElement('td'),
document.createElement('td'),
];
tableRow.append(...cells);
const labelDiv = cells[0].appendChild(document.createElement('div'));
labelDiv.setAttribute('class', 'label');
const textColor = calculateColor(label.color);
labelDiv.setAttribute(
'style',
\`background-color: #\${label.color}; color: \${textColor}\`,
);
labelDiv.innerText = label.name;
if (!label.description) continue;
const descDiv = cells[1].appendChild(document.createElement('div'));
descDiv.setAttribute('class', 'desc');
descDiv.innerText = label.description;
}
</script>
</body>
</html>
`;

fs.writeFileSync(path.join(__dirname, 'preview.html'), html);
89 changes: 89 additions & 0 deletions labels/preview.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}

tr {
border-top: 1px solid #eaecef;
}
tr:last-child {
border-bottom: 1px solid #eaecef;
}

tr > td:first-child {
border-left: 1px solid #eaecef;
}
tr > td:last-child {
border-right: 1px solid #eaecef;
}
.label {
border-radius: 3px;
font-size: 16px;
font-weight: 600;
line-height: 2;
font-family: sans-serif;
padding: 0 8px;
display: inline-block;
margin: 8px 8px;
}

.desc {
padding: 8px 16px;
display: inline-block;
}
</style>
</head>
<body>
<script>
const labels = [{"name":"abandoned","color":"000000"},{"name":"backport","color":"4213c4","description":"related to backporting features and bug fixes to previous versions"},{"name":"blocked","color":"874f4f","description":"blocked by other issue(s)/PR(s)"},{"name":"browser","color":"ffde3a"},{"name":"bug","color":"ff0000"},{"name":"build","color":"eb6420","description":"related to build configuration"},{"name":"ci","color":"f3efae"},{"name":"cli","color":"bfd4f2"},{"name":"coverage","color":"009900"},{"name":"deprecation","color":"ffae00"},{"name":"deps","color":"1da6db"},{"name":"discussion","color":"9fefc7"},{"name":"doc","color":"006b75"},{"name":"duplicate","color":"ddeede"},{"name":"feature","color":"069b1f","description":"PRs that add new features"},{"name":"feature request","color":"0d7bde","description":"issues that request new features"},{"name":"good first issue","color":"7057ff","description":"issues that are suitable for first-time contributors"},{"name":"help wanted","color":"066e70","description":"issues that need assistance from volunteers or PRs that need help to proceed"},{"name":"investigating","color":"e407f4","description":"issues and PRs that are not confirmed"},{"name":"known limitation","color":"9b0606","description":"issues that are identified as known limitations"},{"name":"lint","color":"463fd4"},{"name":"macos","color":"efefef"},{"name":"meta","color":"ffff00","description":"issues or PRs related to the general management of the project"},{"name":"optimization","color":"70d34c"},{"name":"question","color":"ff8cdc"},{"name":"refactoring","color":"5effee"},{"name":"regression","color":"b60205"},{"name":"release","color":"00ff00"},{"name":"research","color":"0000ff"},{"name":"revisit later","color":"ff89ed","description":"could be revisited later"},{"name":"security","color":"ff0000"},{"name":"semver-major","color":"dd1111","description":"incompatible API changes"},{"name":"semver-minor","color":"dddd11","description":"addition of functionality in a backwards-compatible way"},{"name":"semver-patch","color":"11dd11","description":"backwards-compatible bug fixes"},{"name":"stale","color":"d4c5f9"},{"name":"test","color":"00ddff"},{"name":"windows","color":"0067b8"},{"name":"wontfix","color":"ededed","description":"issues that will not be fixed, e.g. due to backwards compatibility concerns"}];

function calculateColor(bgColor) {
const r = parseInt(bgColor.slice(0, 2), 16);
const g = parseInt(bgColor.slice(2, 4), 16);
const b = parseInt(bgColor.slice(4, 6), 16);

const c = [r / 255, g / 255, b / 255];

for (let i = 0; i < c.length; ++i) {
if (c[i] <= 0.03928) {
c[i] = c[i] / 12.92;
} else {
c[i] = Math.pow((c[i] + 0.055) / 1.055, 2.4);
}
}

const l = 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2];

return l > 0.179 ? "black" : "white";
}

const table = document.body.appendChild(document.createElement('table'));

for (const label of labels) {
const tableRow = table.appendChild(document.createElement('tr'));
const cells = [
document.createElement('td'),
document.createElement('td'),
];
tableRow.append(...cells);

const labelDiv = cells[0].appendChild(document.createElement('div'));
labelDiv.setAttribute('class', 'label');
const textColor = calculateColor(label.color);
labelDiv.setAttribute(
'style',
`background-color: #${label.color}; color: ${textColor}`,
);
labelDiv.innerText = label.name;

if (!label.description) continue;
const descDiv = cells[1].appendChild(document.createElement('div'));
descDiv.setAttribute('class', 'desc');
descDiv.innerText = label.description;
}
</script>
</body>
</html>

0 comments on commit 3a39e21

Please sign in to comment.