Add an HTML preview for labels

metarhia · Jul 3, 2019 · 857e9f7 · 857e9f7
1 parent 0a95be0
commit 857e9f7
Show file tree

Hide file tree

Showing 2 changed files with 196 additions and 0 deletions.
diff --git a/labels/make-preview.js b/labels/make-preview.js
@@ -0,0 +1,103 @@
+#!/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),
+          G = parseInt(bgColor.slice(2, 4), 16),
+          B = parseInt(bgColor.slice(4, 6), 16);
+
+        const C = [R / 255, G / 255, B / 255];
+
+        for (var 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];
+
+        if (L > 0.179) {
+          return 'black';
+        } else {
+          return '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);
diff --git a/labels/preview.html b/labels/preview.html
@@ -0,0 +1,93 @@
+<!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),
+          G = parseInt(bgColor.slice(2, 4), 16),
+          B = parseInt(bgColor.slice(4, 6), 16);
+
+        const C = [R / 255, G / 255, B / 255];
+
+        for (var 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];
+
+        if (L > 0.179) {
+          return 'black';
+        } else {
+          return '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>