badgen - npm Package Compare versions

Comparing version 2.2.3 to 2.3.0

lib/calc-text-width.js

 const widthsVerdana11 = require('./widths-verdana-11.json')
 const astralRegex = require('unicode-astral-regex')
 
+const SCALE = 10 // Prevent results like 60.599999999999994
+
 const calcWidth = (charWidthTable) => {
-  const SCALE = 10 // Prevent results like 60.599999999999994
   const widthTable = charWidthTable.map(w => Math.round(w * SCALE))
@@ -19,3 +20,3 @@ widthTable[64] = widthTable[64] + 6 // Slightly increase width of "@" by 0.6px
     }
-    return total / SCALE
+    return total
   }
@@ -22,0 +23,0 @@ }

lib/color-presets.js

 module.exports = {
   green: '3C1',
   blue: '08C',
-  red: 'E42',
+  red: 'E43',
   yellow: 'DB1',
   orange: 'F73',
-  purple: 'A3E',
-  pink: 'E59',
+  purple: '94E',
+  pink: 'E5B',
   grey: '999',
   gray: '999',
-  cyan: '1BC'
+  cyan: '1BC',
+  black: '2A2A2A'
 }

lib/index.js

 const calcWidth = require('./calc-text-width.js').Verdana11
 const colorPresets = require('./color-presets.js')
 
-module.exports = ({ subject, status, color, style, emoji, icon, iconWidth = 13 }) => {
+module.exports = ({ subject, status, color, style, emoji, icon, iconWidth = 130 }) => {
   typeAssert(typeof subject === 'string', '<subject> must be string')
@@ -9,23 +9,24 @@ typeAssert(typeof status === 'string', '<status> must be string')
 
-  const iconSpanWidth = icon ? (subject.length ? iconWidth + 4 : iconWidth - 2) : 0
+  const iconSpanWidth = icon ? (subject.length ? iconWidth + 40 : iconWidth - 20) : 0
   const sbTextWidth = calcWidth(subject, emoji)
   const stTextWidth = calcWidth(status, emoji)
-  const sbRectWidth = sbTextWidth + 10.2 + iconSpanWidth
-  const stRectWidth = stTextWidth + 10
+  const sbRectWidth = sbTextWidth + 100 + iconSpanWidth
+  const stRectWidth = stTextWidth + 100
   const width = sbRectWidth + stRectWidth
+  const xlink = icon ? ' xmlns:xlink="http://www.w3.org/1999/xlink"' : ''
 
   if (style === 'flat') {
     return `
-      <svg width="${width}" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <svg width="${width / 10}" height="20" viewBox="0 0 ${width} 200" xmlns="http://www.w3.org/2000/svg"${xlink}>
         <g>
-          <rect width="${sbRectWidth}" height="20" fill="#555"/>
-          <rect x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="#${color}"/>
+          <rect fill="#555" width="${sbRectWidth}" height="200"/>
+          <rect fill="#${color}" x="${sbRectWidth}" width="${stRectWidth}" height="200"/>
         </g>
-        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-          <text x="${icon ? '22.5' : '6.3'}" y="14.8" textLength="${sbTextWidth}" fill="#000" opacity="0.1">${subject}</text>
-          <text x="${icon ? '21.5' : '5.3'}" y="13.8" textLength="${sbTextWidth}">${subject}</text>
-          <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.1" textLength="${stTextWidth}">${status}</text>
-          <text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
+        <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+          <text x="${icon ? '225' : '65'}" y="148" textLength="${sbTextWidth}" fill="#000" opacity="0.1">${subject}</text>
+          <text x="${icon ? '215' : '55'}" y="138" textLength="${sbTextWidth}">${subject}</text>
+          <text x="${sbRectWidth + 55}" y="148" textLength="${stTextWidth}" fill="#000" opacity="0.1">${status}</text>
+          <text x="${sbRectWidth + 45}" y="138" textLength="${stTextWidth}">${status}</text>
         </g>
-        ${icon ? `<image x="3.8" y="3.4" width="${iconWidth}" height="13.2" xlink:href="${icon}"/>` : ''}
+        ${icon ? `<image x="38" y="34" width="${iconWidth}" height="132" xlink:href="${icon}"/>` : ''}
       </svg>
@@ -36,20 +37,20 @@ `
   return `
-    <svg width="${width}" height="20" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <svg width="${width / 10}" height="20" viewBox="0 0 ${width} 200" xmlns="http://www.w3.org/2000/svg"${xlink}>
       <linearGradient id="a" x2="0" y2="100%">
-        <stop offset="0" stop-color="#EEE" stop-opacity=".1"/>
+        <stop offset="0" stop-opacity=".1" stop-color="#EEE"/>
         <stop offset="1" stop-opacity=".1"/>
       </linearGradient>
-      <mask id="m"><rect width="${width}" height="20" rx="3" fill="#FFF"/></mask>
+      <mask id="m"><rect width="${width}" height="200" rx="30" fill="#FFF"/></mask>
       <g mask="url(#m)">
-        <rect width="${sbRectWidth}" height="20" fill="#555"/>
-        <rect x="${sbRectWidth}" width="${stRectWidth}" height="20" fill="#${color}"/>
-        <rect width="${width}" height="20" fill="url(#a)"/>
+        <rect width="${sbRectWidth}" height="200" fill="#555"/>
+        <rect width="${stRectWidth}" height="200" fill="#${color}" x="${sbRectWidth}"/>
+        <rect width="${width}" height="200" fill="url(#a)"/>
       </g>
-      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="11">
-        <text x="${icon ? '22.5' : '6.5'}" y="14.8" textLength="${sbTextWidth}" fill="#000" opacity="0.25">${subject}</text>
-        <text x="${icon ? '21.5' : '5.5'}" y="13.8" textLength="${sbTextWidth}">${subject}</text>
-        <text x="${sbRectWidth + 5.5}" y="14.8" fill="#000" opacity="0.25" textLength="${stTextWidth}">${status}</text>
-        <text x="${sbRectWidth + 4.5}" y="13.8" textLength="${stTextWidth}">${status}</text>
+      <g fill="#fff" text-anchor="start" font-family="Verdana,DejaVu Sans,sans-serif" font-size="110">
+        <text x="${icon ? '225' : '65'}" y="148" textLength="${sbTextWidth}" fill="#000" opacity="0.25">${subject}</text>
+        <text x="${icon ? '215' : '55'}" y="138" textLength="${sbTextWidth}">${subject}</text>
+        <text x="${sbRectWidth + 55}" y="148" textLength="${stTextWidth}" fill="#000" opacity="0.25">${status}</text>
+        <text x="${sbRectWidth + 45}" y="138" textLength="${stTextWidth}">${status}</text>
       </g>
-      ${icon ? `<image x="3.9" y="3.5" width="${iconWidth}" height="13" xlink:href="${icon}"/>` : ''}
+      ${icon ? `<image x="39" y="35" width="${iconWidth}" height="130" xlink:href="${icon}"/>` : ''}
     </svg>
@@ -56,0 +57,0 @@ `

package.json

 {
   "name": "badgen",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "description": "Fast svg badge generator.",
@@ -5,0 +5,0 @@ "repository": "amio/badgen",

No alert changes

Improved metrics

Total package byte prevSize

8247

increased by0.81%

Lines of code

91

increased by2.25%

No dependency changes