Make for-the-badge letter spacing more predictable, and rewrite layou…

…t logic (#5754) * Rewrite for-the-badge renderer * Update snapshots * Remove pixel grid alignment in for-the-badge * abstract XML stringification to XmlElement class Co-authored-by: chris48s <[email protected]> Co-authored-by: chris48s <[email protected]>
badges · May 26, 2021 · cdd68fe · cdd68fe
1 parent a9d75aa
commit cdd68fe
Show file tree

Hide file tree

Showing 5 changed files with 384 additions and 165 deletions.
diff --git a/__snapshots__/make-badge.spec.js b/__snapshots__/make-badge.spec.js
@@ -969,15 +969,15 @@ exports['The badge generator "for-the-badge" template badge generation should ma
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="145.5"
+  width="146.75"
   height="28"
   role="img"
   aria-label="CACTUS: GROWN"
 >
   <title>CACTUS: GROWN</title>
   <g shape-rendering="crispEdges">
-    <rect width="73" height="28" fill="#0f0" />
-    <rect x="73" width="72.5" height="28" fill="#b3e" />
+    <rect width="72.5" height="28" fill="#0f0" />
+    <rect x="72.5" width="74.25" height="28" fill="#b3e" />
   </g>
   <g
     fill="#fff"
@@ -986,16 +986,16 @@ exports['The badge generator "for-the-badge" template badge generation should ma
     text-rendering="geometricPrecision"
     font-size="100"
   >
-    <text fill="#fff" x="365" y="175" transform="scale(.1)" textLength="490">
+    <text transform="scale(.1)" x="362.5" y="175" textLength="485" fill="#fff">
       CACTUS
     </text>
     <text
-      fill="#fff"
-      x="1092.5"
+      transform="scale(.1)"
+      x="1096.25"
       y="175"
+      textLength="502.5"
+      fill="#fff"
       font-weight="bold"
-      transform="scale(.1)"
-      textLength="485"
     >
       GROWN
     </text>
@@ -1008,15 +1008,15 @@ exports['The badge generator "for-the-badge" template badge generation should ma
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="162.5"
+  width="163.75"
   height="28"
   role="img"
   aria-label="CACTUS: GROWN"
 >
   <title>CACTUS: GROWN</title>
   <g shape-rendering="crispEdges">
-    <rect width="90" height="28" fill="#0f0" />
-    <rect x="90" width="72.5" height="28" fill="#b3e" />
+    <rect width="89.5" height="28" fill="#0f0" />
+    <rect x="89.5" width="74.25" height="28" fill="#b3e" />
   </g>
   <g
     fill="#fff"
@@ -1032,16 +1032,16 @@ exports['The badge generator "for-the-badge" template badge generation should ma
       height="14"
       xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
     />
-    <text fill="#fff" x="535" y="175" transform="scale(.1)" textLength="490">
+    <text transform="scale(.1)" x="532.5" y="175" textLength="485" fill="#fff">
       CACTUS
     </text>
     <text
-      fill="#fff"
-      x="1262.5"
+      transform="scale(.1)"
+      x="1266.25"
       y="175"
+      textLength="502.5"
+      fill="#fff"
       font-weight="bold"
-      transform="scale(.1)"
-      textLength="485"
     >
       GROWN
     </text>
@@ -1054,15 +1054,14 @@ exports['The badge generator "for-the-badge" template badge generation should ma
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="72.5"
+  width="74.25"
   height="28"
   role="img"
   aria-label="GROWN"
 >
   <title>GROWN</title>
   <g shape-rendering="crispEdges">
-    <rect width="0" height="28" fill="#b3e" />
-    <rect x="0" width="72.5" height="28" fill="#b3e" />
+    <rect width="74.25" height="28" fill="#b3e" />
   </g>
   <g
     fill="#fff"
@@ -1072,12 +1071,12 @@ exports['The badge generator "for-the-badge" template badge generation should ma
     font-size="100"
   >
     <text
-      fill="#fff"
-      x="362.5"
+      transform="scale(.1)"
+      x="371.25"
       y="175"
+      textLength="502.5"
+      fill="#fff"
       font-weight="bold"
-      transform="scale(.1)"
-      textLength="485"
     >
       GROWN
     </text>
@@ -1090,15 +1089,14 @@ exports['The badge generator "for-the-badge" template badge generation should ma
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="90.5"
+  width="94.25"
   height="28"
   role="img"
   aria-label="GROWN"
 >
   <title>GROWN</title>
   <g shape-rendering="crispEdges">
-    <rect width="0" height="28" fill="#555" />
-    <rect x="0" width="90.5" height="28" fill="#b3e" />
+    <rect width="94.25" height="28" fill="#b3e" />
   </g>
   <g
     fill="#fff"
@@ -1115,12 +1113,12 @@ exports['The badge generator "for-the-badge" template badge generation should ma
       xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
     />
     <text
-      fill="#fff"
-      x="542.5"
+      transform="scale(.1)"
+      x="571.25"
       y="175"
+      textLength="502.5"
+      fill="#fff"
       font-weight="bold"
-      transform="scale(.1)"
-      textLength="485"
     >
       GROWN
     </text>
@@ -1133,15 +1131,15 @@ exports['The badge generator "for-the-badge" template badge generation should ma
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="104.5"
+  width="106.25"
   height="28"
   role="img"
   aria-label="GROWN"
 >
   <title>GROWN</title>
   <g shape-rendering="crispEdges">
     <rect width="32" height="28" fill="#0f0" />
-    <rect x="32" width="72.5" height="28" fill="#b3e" />
+    <rect x="32" width="74.25" height="28" fill="#b3e" />
   </g>
   <g
     fill="#fff"
@@ -1158,19 +1156,12 @@ exports['The badge generator "for-the-badge" template badge generation should ma
       xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
     />
     <text
-      fill="#fff"
-      x="230"
-      y="175"
       transform="scale(.1)"
-      textLength="-60"
-    ></text>
-    <text
-      fill="#fff"
-      x="682.5"
+      x="691.25"
       y="175"
+      textLength="502.5"
+      fill="#fff"
       font-weight="bold"
-      transform="scale(.1)"
-      textLength="485"
     >
       GROWN
     </text>
@@ -1183,12 +1174,12 @@ exports['The badge generator "for-the-badge" template badge generation should ma
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="145.5"
+  width="146.75"
   height="28"
 >
   <g shape-rendering="crispEdges">
-    <rect width="73" height="28" fill="#0f0" />
-    <rect x="73" width="72.5" height="28" fill="#b3e" />
+    <rect width="72.5" height="28" fill="#0f0" />
+    <rect x="72.5" width="74.25" height="28" fill="#b3e" />
   </g>
   <g
     fill="#fff"
@@ -1198,20 +1189,26 @@ exports['The badge generator "for-the-badge" template badge generation should ma
     font-size="100"
   >
     <a target="_blank" xlink:href="https://shields.io/">
-      <rect width="73" height="28" fill="rgba(0,0,0,0)" />
-      <text fill="#fff" x="365" y="175" transform="scale(.1)" textLength="490">
+      <rect width="72.5" height="28" fill="rgba(0,0,0,0)" />
+      <text
+        transform="scale(.1)"
+        x="362.5"
+        y="175"
+        textLength="485"
+        fill="#fff"
+      >
         CACTUS
       </text>
     </a>
     <a target="_blank" xlink:href="https://www.google.co.uk/">
-      <rect width="72.5" height="28" x="73" fill="rgba(0,0,0,0)" />
+      <rect width="74.25" height="28" x="72.5" fill="rgba(0,0,0,0)" />
       <text
-        fill="#fff"
-        x="1092.5"
+        transform="scale(.1)"
+        x="1096.25"
         y="175"
+        textLength="502.5"
+        fill="#fff"
         font-weight="bold"
-        transform="scale(.1)"
-        textLength="485"
       >
         GROWN
       </text>
@@ -1911,15 +1908,15 @@ exports['The badge generator text colors should use black text when the message
 <svg
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
-  width="145.5"
+  width="146.75"
   height="28"
   role="img"
   aria-label="CACTUS: GROWN"
 >
   <title>CACTUS: GROWN</title>
   <g shape-rendering="crispEdges">
-    <rect width="73" height="28" fill="#000" />
-    <rect x="73" width="72.5" height="28" fill="#e2ffe1" />
+    <rect width="72.5" height="28" fill="#000" />
+    <rect x="72.5" width="74.25" height="28" fill="#e2ffe1" />
   </g>
   <g
     fill="#fff"
@@ -1928,16 +1925,16 @@ exports['The badge generator text colors should use black text when the message
     text-rendering="geometricPrecision"
     font-size="100"
   >
-    <text fill="#fff" x="365" y="175" transform="scale(.1)" textLength="490">
+    <text transform="scale(.1)" x="362.5" y="175" textLength="485" fill="#fff">
       CACTUS
     </text>
     <text
-      fill="#333"
-      x="1092.5"
+      transform="scale(.1)"
+      x="1096.25"
       y="175"
+      textLength="502.5"
+      fill="#333"
       font-weight="bold"
-      transform="scale(.1)"
-      textLength="485"
     >
       GROWN
     </text>