fix(utils): use shields.io for colorizing changed values

matejchalk · matejchalk · commit d0eb475db520 · 2024-03-18T17:45:45.000+01:00
diff --git a/packages/utils/src/lib/reports/__snapshots__/report-diff-added.md b/packages/utils/src/lib/reports/__snapshots__/report-diff-added.md
@@ -6,7 +6,7 @@
 
 |🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
 |:--|:--:|:--:|:--:|
-|Bug prevention|🟡 **63**|🟡 68|<span style="color: red">▼ **-5**</span>|
+|Bug prevention|🟡 **63**|🟡 68|![🠋 −5](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%925-red)|
 |Performance|🟢 **94**|n/a|n/a|
 |Code style|🟡 **54**|🟡 54|–|
 
@@ -21,7 +21,7 @@ All of 1 group is unchanged.
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|<span style="color: red">▲ **+∞%**</span>|
+|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![🠉 +∞%](https://img.shields.io/badge/%F0%9F%A0%89%20%2B%E2%88%9E%25-red)|
 
 48 other audits are unchanged.
 
diff --git a/packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md b/packages/utils/src/lib/reports/__snapshots__/report-diff-improved.md
@@ -6,9 +6,9 @@
 
 |🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
 |:--|:--:|:--:|:--:|
-|Code style|🟢 **100**|🟡 54|<span style="color: green">▲ **+46**</span>|
-|Bug prevention|🟢 **95**|🟡 68|<span style="color: green">▲ **+27**</span>|
-|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
+|Code style|🟢 **100**|🟡 54|![🠉 +46](https://img.shields.io/badge/%F0%9F%A0%89%20%2B46-green)|
+|Bug prevention|🟢 **95**|🟡 68|![🠉 +27](https://img.shields.io/badge/%F0%9F%A0%89%20%2B27-green)|
+|Performance|🟢 **94**|🟢 92|![🠉 +2](https://img.shields.io/badge/%F0%9F%A0%89%20%2B2-green)|
 
 ## 🎗️ Groups
 
@@ -17,8 +17,8 @@
 
 |🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🗠 Score change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Maximum lines limitation|🟢 **100**|🟡 50|<span style="color: green">▲ **+50**</span>|
-|Lighthouse|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
+|ESLint|Maximum lines limitation|🟢 **100**|🟡 50|![🠉 +50](https://img.shields.io/badge/%F0%9F%A0%89%20%2B50-green)|
+|Lighthouse|Performance|🟢 **94**|🟢 92|![🠉 +2](https://img.shields.io/badge/%F0%9F%A0%89%20%2B2-green)|
 
 </details>
 
@@ -30,18 +30,18 @@
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|<span style="color: green">▼ **-100%**</span>|
-|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Require the use of `===` and `!==`|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|ESLint|Disallow missing `key` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|<span style="color: green">▼ **-100%**</span>|
-|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|<span style="color: green">▼ **-8%**</span>|
-|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|<span style="color: green">▼ **-4%**</span>|
-|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|<span style="color: green">▼ **-4%**</span>|
+|ESLint|Disallow variable declarations from shadowing variables declared in the outer scope|🟩 **passed**|🟥 3 warnings|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|Require or disallow method and property shorthand syntax for object literals|🟩 **passed**|🟥 3 warnings|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|verifies the list of dependencies for Hooks like useEffect and similar|🟩 **passed**|🟥 2 warnings|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|Disallow unused variables|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|Require braces around arrow function bodies|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|Require the use of `===` and `!==`|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|Enforce a maximum number of lines of code in a function|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|Require `const` declarations for variables that are never reassigned after declared|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|ESLint|Disallow missing `key` props in iterators/collection literals|🟩 **passed**|🟥 1 warning|![🠋 −100%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%92100%25-green)|
+|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![🠋 −8%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%928%25-green)|
+|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
+|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
 
 40 other audits are unchanged.
 
diff --git a/packages/utils/src/lib/reports/__snapshots__/report-diff-minimal.md b/packages/utils/src/lib/reports/__snapshots__/report-diff-minimal.md
@@ -9,6 +9,6 @@
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
 |:--|:--|:--:|:--:|:--:|
-|NPM|Check for outdates NPM packages|🟨 **3 packages are out of date**|🟩 1 package is out of date|<span style="color: red">▲ **+200%**</span>|
+|NPM|Check for outdates NPM packages|🟨 **3 packages are out of date**|🟩 1 package is out of date|![🠉 +200%](https://img.shields.io/badge/%F0%9F%A0%89%20%2B200%25-red)|
 
 </details>
diff --git a/packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md b/packages/utils/src/lib/reports/__snapshots__/report-diff-mixed.md
@@ -6,8 +6,8 @@
 
 |🏷️ Category|⭐ Current score|⭐ Previous score|🗠 Score change|
 |:--|:--:|:--:|:--:|
-|Bug prevention|🟡 **63**|🟡 68|<span style="color: red">▼ **-5**</span>|
-|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
+|Bug prevention|🟡 **63**|🟡 68|![🠋 −5](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%925-red)|
+|Performance|🟢 **94**|🟢 92|![🠉 +2](https://img.shields.io/badge/%F0%9F%A0%89%20%2B2-green)|
 |Code style|🟡 **54**|🟡 54|–|
 
 ## 🎗️ Groups
@@ -17,7 +17,7 @@
 
 |🔌 Plugin|🎗️ Group|⭐ Current score|⭐ Previous score|🗠 Score change|
 |:--|:--|:--:|:--:|:--:|
-|Lighthouse|Performance|🟢 **94**|🟢 92|<span style="color: green">▲ **+2**</span>|
+|Lighthouse|Performance|🟢 **94**|🟢 92|![🠉 +2](https://img.shields.io/badge/%F0%9F%A0%89%20%2B2-green)|
 
 1 other group is unchanged.
 
@@ -31,10 +31,10 @@
 
 |🔌 Plugin|🛡️ Audit|📏 Current value|📏 Previous value|🗠 Value change|
 |:--|:--|:--:|:--:|:--:|
-|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|<span style="color: red">▲ **+∞%**</span>|
-|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|<span style="color: green">▼ **-8%**</span>|
-|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|<span style="color: green">▼ **-4%**</span>|
-|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|<span style="color: green">▼ **-4%**</span>|
+|ESLint|Disallow unused variables|🟥 **1 error**|🟩 passed|![🠉 +∞%](https://img.shields.io/badge/%F0%9F%A0%89%20%2B%E2%88%9E%25-red)|
+|Lighthouse|Largest Contentful Paint|🟨 **1.4 s**|🟨 1.5 s|![🠋 −8%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%928%25-green)|
+|Lighthouse|First Contentful Paint|🟨 **1.1 s**|🟨 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
+|Lighthouse|Speed Index|🟩 **1.1 s**|🟩 1.2 s|![🠋 −4%](https://img.shields.io/badge/%F0%9F%A0%8B%20%E2%88%924%25-green)|
 
 48 other audits are unchanged.
 
diff --git a/packages/utils/src/lib/reports/generate-md-reports-diff.ts b/packages/utils/src/lib/reports/generate-md-reports-diff.ts
@@ -182,7 +182,7 @@ function formatGroupsOrAuditsDetails<T extends 'group' | 'audit'>(
 
 function formatScoreChange(diff: number): string {
   const marker = getDiffMarker(diff);
-  const text = style(formatDiffNumber(Math.round(diff * 100)));
+  const text = formatDiffNumber(Math.round(diff * 100));
   return colorByScoreDiff(`${marker} ${text}`, diff);
 }
 
@@ -197,7 +197,7 @@ function formatValueChange({
         ? Number.POSITIVE_INFINITY
         : Number.NEGATIVE_INFINITY
       : Math.round((100 * values.diff) / values.before);
-  const text = style(`${formatDiffNumber(percentage)}%`);
+  const text = `${formatDiffNumber(percentage)}%`;
   return colorByScoreDiff(`${marker} ${text}`, scores.diff);
 }
 
diff --git a/packages/utils/src/lib/reports/md/html-color.ts b/packages/utils/src/lib/reports/md/html-color.ts
diff --git a/packages/utils/src/lib/reports/md/image.ts b/packages/utils/src/lib/reports/md/image.ts
@@ -0,0 +1,3 @@
+export function image(src: string, alt: string) {
+  return `![${alt}](${src})`;
+}
diff --git a/packages/utils/src/lib/reports/md/index.ts b/packages/utils/src/lib/reports/md/index.ts
@@ -1,7 +1,7 @@
 export * from './details';
 export * from './font-style';
 export * from './headline';
-export * from './html-color';
+export * from './image';
 export * from './link';
 export * from './list';
 export * from './paragraphs';
diff --git a/packages/utils/src/lib/reports/utils.ts b/packages/utils/src/lib/reports/utils.ts
@@ -16,7 +16,7 @@ import {
   readTextFile,
 } from '../file-system';
 import { SCORE_COLOR_RANGE } from './constants';
-import { htmlColor, style } from './md';
+import { image, style } from './md';
 import { ScoredReport, SortableAuditReport, SortableGroup } from './types';
 
 export function formatReportScore(score: number): string {
@@ -55,29 +55,31 @@ export function getSquaredScoreMarker(score: number): string {
 
 export function getDiffMarker(diff: number): string {
   if (diff > 0) {
-    return '▲';
+    return '🠉';
   }
   if (diff < 0) {
-    return '▼';
+    return '🠋';
   }
   return '';
 }
 
 export function colorByScoreDiff(text: string, diff: number): string {
-  return htmlColor(text, diff > 0 ? 'green' : diff < 0 ? 'red' : 'gray');
+  const color = diff > 0 ? 'green' : diff < 0 ? 'red' : 'gray';
+  return shieldsBadge(text, color);
+}
+
+export function shieldsBadge(text: string, color: string): string {
+  return image(
+    `https://img.shields.io/badge/${encodeURIComponent(text)}-${color}`,
+    text,
+  );
 }
 
 export function formatDiffNumber(diff: number): string {
-  if (diff === Number.POSITIVE_INFINITY) {
-    return '+∞';
-  }
-  if (diff === Number.NEGATIVE_INFINITY) {
-    return '-∞';
-  }
-  if (diff > 0) {
-    return `+${diff}`;
-  }
-  return `${diff}`;
+  const number =
+    Math.abs(diff) === Number.POSITIVE_INFINITY ? '∞' : `${Math.abs(diff)}`;
+  const sign = diff < 0 ? '−' : '+';
+  return `${sign}${number}`;
 }
 
 export function getSeverityIcon(

Original file line number	Diff line number	Diff line change
`@@ -182,7 +182,7 @@ function formatGroupsOrAuditsDetails<T extends 'group' \| 'audit'>(`
`182`	`182`
`183`	`183`	`function formatScoreChange(diff: number): string {`
`184`	`184`	`const marker = getDiffMarker(diff);`
`185`		`- const text = style(formatDiffNumber(Math.round(diff * 100)));`
	`185`	`+ const text = formatDiffNumber(Math.round(diff * 100));`
`186`	`186`	return colorByScoreDiff(`${marker} ${text}`, diff);
`187`	`187`	`}`
`188`	`188`
`@@ -197,7 +197,7 @@ function formatValueChange({`
`197`	`197`	`? Number.POSITIVE_INFINITY`
`198`	`198`	`: Number.NEGATIVE_INFINITY`
`199`	`199`	`: Math.round((100 * values.diff) / values.before);`
`200`		- const text = style(`${formatDiffNumber(percentage)}%`);
	`200`	+ const text = `${formatDiffNumber(percentage)}%`;
`201`	`201`	return colorByScoreDiff(`${marker} ${text}`, scores.diff);
`202`	`202`	`}`
`203`	`203`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function image(src: string, alt: string) {`
	`2`	+ return `![${alt}](${src})`;
	`3`	`+}`