Add option for IDs to have a prefix (#10576)

* Add option for IDs to have a prefix * Switch to suffixes to protect ID values * Document idSuffix * Fix validation error message consistency * Fix ID suffix regex test * Add tests * snapshot tests for idSuffix covering all 5 badge styles * tweak docs * update typescript definitions * badge-maker 4.1.0 release --------- Co-authored-by: chris48s <git@chris-shaw.dev>
badges · Oct 13, 2024 · 9ab1a90 · 9ab1a90
1 parent 5580b1c
commit 9ab1a90
Show file tree

Hide file tree

Showing 11 changed files with 431 additions and 14 deletions.
diff --git a/__snapshots__/make-badge.spec.js b/__snapshots__/make-badge.spec.js
@@ -2229,3 +2229,325 @@ exports['The badge generator badges with logos should always produce the same ba
 </svg>
 
 `
+
+exports['The badge generator "flat" template badge generation should match snapshots: message with custom suffix 1'] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="107"
+  height="20"
+  role="img"
+  aria-label="cactus: grown"
+>
+  <title>cactus: grown</title>
+  <linearGradient id="s1" x2="0" y2="100%">
+    <stop offset="0" stop-color="#bbb" stop-opacity=".1" />
+    <stop offset="1" stop-opacity=".1" />
+  </linearGradient>
+  <clipPath id="r1">
+    <rect width="107" height="20" rx="3" fill="#fff" />
+  </clipPath>
+  <g clip-path="url(#r1)">
+    <rect width="62" height="20" fill="#0f0" />
+    <rect x="62" width="45" height="20" fill="#b3e" />
+    <rect width="107" height="20" fill="url(#s1)" />
+  </g>
+  <g
+    fill="#fff"
+    text-anchor="middle"
+    font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
+    text-rendering="geometricPrecision"
+    font-size="110"
+  >
+    <image
+      x="5"
+      y="3"
+      width="14"
+      height="14"
+      xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
+    />
+    <text
+      aria-hidden="true"
+      x="405"
+      y="150"
+      fill="#010101"
+      fill-opacity=".3"
+      transform="scale(.1)"
+      textLength="350"
+    >
+      cactus
+    </text>
+    <text x="405" y="140" transform="scale(.1)" fill="#fff" textLength="350">
+      cactus
+    </text>
+    <text
+      aria-hidden="true"
+      x="835"
+      y="150"
+      fill="#010101"
+      fill-opacity=".3"
+      transform="scale(.1)"
+      textLength="350"
+    >
+      grown
+    </text>
+    <text x="835" y="140" transform="scale(.1)" fill="#fff" textLength="350">
+      grown
+    </text>
+  </g>
+</svg>
+
+`
+
+exports['The badge generator "flat-square" template badge generation should match snapshots: message with custom suffix 1'] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="107"
+  height="20"
+  role="img"
+  aria-label="cactus: grown"
+>
+  <title>cactus: grown</title>
+  <g shape-rendering="crispEdges">
+    <rect width="62" height="20" fill="#0f0" />
+    <rect x="62" width="45" height="20" fill="#b3e" />
+  </g>
+  <g
+    fill="#fff"
+    text-anchor="middle"
+    font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
+    text-rendering="geometricPrecision"
+    font-size="110"
+  >
+    <image
+      x="5"
+      y="3"
+      width="14"
+      height="14"
+      xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
+    />
+    <text x="405" y="140" transform="scale(.1)" fill="#fff" textLength="350">
+      cactus
+    </text>
+    <text x="835" y="140" transform="scale(.1)" fill="#fff" textLength="350">
+      grown
+    </text>
+  </g>
+</svg>
+
+`
+
+exports['The badge generator "plastic" template badge generation should match snapshots: message with custom suffix 1'] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="107"
+  height="18"
+  role="img"
+  aria-label="cactus: grown"
+>
+  <title>cactus: grown</title>
+  <linearGradient id="s1" x2="0" y2="100%">
+    <stop offset="0" stop-color="#fff" stop-opacity=".7" />
+    <stop offset=".1" stop-color="#aaa" stop-opacity=".1" />
+    <stop offset=".9" stop-color="#000" stop-opacity=".3" />
+    <stop offset="1" stop-color="#000" stop-opacity=".5" />
+  </linearGradient>
+  <clipPath id="r1">
+    <rect width="107" height="18" rx="4" fill="#fff" />
+  </clipPath>
+  <g clip-path="url(#r1)">
+    <rect width="62" height="18" fill="#0f0" />
+    <rect x="62" width="45" height="18" fill="#b3e" />
+    <rect width="107" height="18" fill="url(#s1)" />
+  </g>
+  <g
+    fill="#fff"
+    text-anchor="middle"
+    font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
+    text-rendering="geometricPrecision"
+    font-size="110"
+  >
+    <image
+      x="5"
+      y="2"
+      width="14"
+      height="14"
+      xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
+    />
+    <text
+      aria-hidden="true"
+      x="405"
+      y="140"
+      fill="#010101"
+      fill-opacity=".3"
+      transform="scale(.1)"
+      textLength="350"
+    >
+      cactus
+    </text>
+    <text x="405" y="130" transform="scale(.1)" fill="#fff" textLength="350">
+      cactus
+    </text>
+    <text
+      aria-hidden="true"
+      x="835"
+      y="140"
+      fill="#010101"
+      fill-opacity=".3"
+      transform="scale(.1)"
+      textLength="350"
+    >
+      grown
+    </text>
+    <text x="835" y="130" transform="scale(.1)" fill="#fff" textLength="350">
+      grown
+    </text>
+  </g>
+</svg>
+
+`
+
+exports['The badge generator "for-the-badge" template badge generation should match snapshots: message with custom suffix 1'] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="163.75"
+  height="28"
+  role="img"
+  aria-label="CACTUS: GROWN"
+>
+  <title>CACTUS: GROWN</title>
+  <g shape-rendering="crispEdges">
+    <rect width="89.5" height="28" fill="#0f0" />
+    <rect x="89.5" width="74.25" height="28" fill="#b3e" />
+  </g>
+  <g
+    fill="#fff"
+    text-anchor="middle"
+    font-family="Verdana,Geneva,DejaVu Sans,sans-serif"
+    text-rendering="geometricPrecision"
+    font-size="100"
+  >
+    <image
+      x="9"
+      y="7"
+      width="14"
+      height="14"
+      xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
+    />
+    <text transform="scale(.1)" x="532.5" y="175" textLength="485" fill="#fff">
+      CACTUS
+    </text>
+    <text
+      transform="scale(.1)"
+      x="1266.25"
+      y="175"
+      textLength="502.5"
+      fill="#fff"
+      font-weight="bold"
+    >
+      GROWN
+    </text>
+  </g>
+</svg>
+
+`
+
+exports['The badge generator "social" template badge generation should match snapshots: message with custom suffix 1'] = `
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="112"
+  height="20"
+  role="img"
+  aria-label="Cactus: grown"
+>
+  <title>Cactus: grown</title>
+  <style>
+    a:hover #llink1 {
+      fill: url(#b1);
+      stroke: #ccc;
+    }
+    a:hover #rlink1 {
+      fill: #4183c4;
+    }
+  </style>
+  <linearGradient id="a1" x2="0" y2="100%">
+    <stop offset="0" stop-color="#fcfcfc" stop-opacity="0" />
+    <stop offset="1" stop-opacity=".1" />
+  </linearGradient>
+  <linearGradient id="b1" x2="0" y2="100%">
+    <stop offset="0" stop-color="#ccc" stop-opacity=".1" />
+    <stop offset="1" stop-opacity=".1" />
+  </linearGradient>
+  <g stroke="#d5d5d5">
+    <rect
+      stroke="none"
+      fill="#fcfcfc"
+      x="0.5"
+      y="0.5"
+      width="64"
+      height="19"
+      rx="2"
+    />
+    <rect x="70.5" y="0.5" width="41" height="19" rx="2" fill="#fafafa" />
+    <rect x="70" y="7.5" width="0.5" height="5" stroke="#fafafa" />
+    <path d="M70.5 6.5 l-3 3v1 l3 3" stroke="d5d5d5" fill="#fafafa" />
+  </g>
+  <image
+    x="5"
+    y="3"
+    width="14"
+    height="14"
+    xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxu"
+  />
+  <g
+    aria-hidden="true"
+    fill="#333"
+    text-anchor="middle"
+    font-family="Helvetica Neue,Helvetica,Arial,sans-serif"
+    text-rendering="geometricPrecision"
+    font-weight="700"
+    font-size="110px"
+    line-height="14px"
+  >
+    <rect
+      id="llink1"
+      stroke="#d5d5d5"
+      fill="url(#a1)"
+      x=".5"
+      y=".5"
+      width="64"
+      height="19"
+      rx="2"
+    />
+    <text
+      aria-hidden="true"
+      x="405"
+      y="150"
+      fill="#fff"
+      transform="scale(.1)"
+      textLength="370"
+    >
+      Cactus
+    </text>
+    <text x="405" y="140" transform="scale(.1)" textLength="370">Cactus</text>
+    <text
+      aria-hidden="true"
+      x="905"
+      y="150"
+      fill="#fff"
+      transform="scale(.1)"
+      textLength="330"
+    >
+      grown
+    </text>
+    <text id="rlink1" x="905" y="140" transform="scale(.1)" textLength="330">
+      grown
+    </text>
+  </g>
+</svg>
+
+`
diff --git a/badge-maker/CHANGELOG.md b/badge-maker/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 4.1.0
+
+### Features
+
+- Add `idSuffix` param. This can be used to ensure every element id within the SVG is unique
+
 ## 4.0.0
 
 ### Breaking Changes

diff --git a/badge-maker/README.md b/badge-maker/README.md
@@ -73,6 +73,11 @@ The format is the following:
   // (Optional) One of: 'plastic', 'flat', 'flat-square', 'for-the-badge' or 'social'
   // Each offers a different visual design.
   style: 'flat',
+
+  // (Optional) A string with only letters, numbers, -, and _. This can be used
+  // to ensure every element id within the SVG is unique and prevent CSS
+  // cross-contamination when the SVG badge is rendered inline in HTML pages.
+  idSuffix: 'dd'
 }
 ```
 

diff --git a/badge-maker/index.d.ts b/badge-maker/index.d.ts
@@ -6,6 +6,7 @@ interface Format {
   style?: 'plastic' | 'flat' | 'flat-square' | 'for-the-badge' | 'social'
   logoBase64?: string
   links?: Array<string>
+  idSuffix?: string
 }
 
 export declare class ValidationError extends Error {}