feat(logos): support auto-sizing mode

badges · Aug 27, 2023 · d83ad1b · d83ad1b
1 parent 09a55ab
commit d83ad1b
Show file tree

Hide file tree

Showing 14 changed files with 241 additions and 18 deletions.
diff --git a/badge-maker/lib/constants.js b/badge-maker/lib/constants.js
@@ -0,0 +1,5 @@
+const DEFAULT_LOGO_HEIGHT = 14
+
+module.exports = {
+  DEFAULT_LOGO_HEIGHT,
+}
diff --git a/badge-maker/lib/make-badge.js b/badge-maker/lib/make-badge.js
@@ -3,6 +3,7 @@
 const { normalizeColor, toSvgColor } = require('./color')
 const badgeRenderers = require('./badge-renderers')
 const { stripXmlWhitespace } = require('./xml')
+const { DEFAULT_LOGO_HEIGHT } = require('./constants')
 
 /*
 note: makeBadge() is fairly thinly wrapped so if we are making changes here
@@ -17,6 +18,7 @@ module.exports = function makeBadge({
   labelColor,
   logo,
   logoPosition,
+  logoSize,
   logoWidth,
   links = ['', ''],
 }) {
@@ -45,7 +47,7 @@ module.exports = function makeBadge({
     throw new Error(`Unknown badge style: '${style}'`)
   }
 
-  logoWidth = +logoWidth || (logo ? 14 : 0)
+  logoWidth = +logoWidth || (logo ? DEFAULT_LOGO_HEIGHT : 0)
 
   return stripXmlWhitespace(
     render({
@@ -55,6 +57,7 @@ module.exports = function makeBadge({
       logo,
       logoPosition,
       logoWidth,
+      logoSize,
       logoPadding: logo && label.length ? 3 : 0,
       color: toSvgColor(color),
       labelColor: toSvgColor(labelColor),

diff --git a/core/base-service/base.spec.js b/core/base-service/base.spec.js
@@ -373,6 +373,8 @@ describe('BaseService', function () {
         namedLogo: undefined,
         logo: undefined,
         logoWidth: undefined,
+        logoHeight: undefined,
+        logoSize: undefined,
         logoPosition: undefined,
         links: [],
         labelColor: undefined,

diff --git a/core/base-service/coalesce-badge.js b/core/base-service/coalesce-badge.js
@@ -2,7 +2,8 @@ import {
   decodeDataUrlFromQueryParam,
   prepareNamedLogo,
 } from '../../lib/logos.js'
-import { svg2base64 } from '../../lib/svg-helpers.js'
+import { svg2base64, getIconSize } from '../../lib/svg-helpers.js'
+import { DEFAULT_LOGO_HEIGHT } from '../../badge-maker/lib/constants.js'
 import coalesce from './coalesce.js'
 import toArray from './to-array.js'
 
@@ -55,7 +56,9 @@ export default function coalesceBadge(
   } = overrides
   let {
     logoWidth: overrideLogoWidth,
+    logoHeight: overrideLogoHeight,
     logoPosition: overrideLogoPosition,
+    logoSize: overrideLogoSize,
     color: overrideColor,
     labelColor: overrideLabelColor,
   } = overrides
@@ -76,6 +79,7 @@ export default function coalesceBadge(
     overrideLabelColor = `${overrideLabelColor}`
   }
   overrideLogoWidth = +overrideLogoWidth || undefined
+  overrideLogoHeight = +overrideLogoHeight || undefined
   overrideLogoPosition = +overrideLogoPosition || undefined
 
   const {
@@ -87,7 +91,9 @@ export default function coalesceBadge(
     logoSvg: serviceLogoSvg,
     namedLogo: serviceNamedLogo,
     logoColor: serviceLogoColor,
+    logoSize: serviceLogoSize,
     logoWidth: serviceLogoWidth,
+    logoHeight: serviceLogoHeight,
     logoPosition: serviceLogoPosition,
     link: serviceLink,
     cacheSeconds: serviceCacheSeconds,
@@ -119,7 +125,13 @@ export default function coalesceBadge(
     style = 'flat'
   }
 
-  let namedLogo, namedLogoColor, logoWidth, logoPosition, logoSvgBase64
+  let namedLogo,
+    namedLogoColor,
+    logoSize,
+    logoWidth,
+    logoHeight,
+    logoPosition,
+    logoSvgBase64
   if (overrideLogo) {
     // `?logo=` could be a named logo or encoded svg.
     const overrideLogoSvgBase64 = decodeDataUrlFromQueryParam(overrideLogo)
@@ -133,7 +145,9 @@ export default function coalesceBadge(
     }
     // If the logo has been overridden it does not make sense to inherit the
     // original width or position.
+    logoSize = overrideLogoSize
     logoWidth = overrideLogoWidth
+    logoHeight = overrideLogoHeight
     logoPosition = overrideLogoPosition
   } else {
     if (serviceLogoSvg) {
@@ -145,13 +159,23 @@ export default function coalesceBadge(
       )
       namedLogoColor = coalesce(overrideLogoColor, serviceLogoColor)
     }
+    logoSize = coalesce(overrideLogoSize, serviceLogoSize)
     logoWidth = coalesce(overrideLogoWidth, serviceLogoWidth)
+    logoHeight = coalesce(overrideLogoHeight, serviceLogoHeight)
     logoPosition = coalesce(overrideLogoPosition, serviceLogoPosition)
   }
   if (namedLogo) {
+    const iconSize = getIconSize(String(namedLogo).toLowerCase())
+
+    if (!logoWidth && iconSize && logoSize === 'auto') {
+      logoWidth =
+        (iconSize.width / iconSize.height) * (logoHeight || DEFAULT_LOGO_HEIGHT)
+    }
+
     logoSvgBase64 = prepareNamedLogo({
       name: namedLogo,
       color: namedLogoColor,
+      size: logoSize,
       style,
     })
   }
@@ -178,7 +202,9 @@ export default function coalesceBadge(
     namedLogo,
     logo: logoSvgBase64,
     logoWidth,
+    logoHeight,
     logoPosition,
+    logoSize,
     links: toArray(overrideLink || serviceLink),
     cacheLengthSeconds: coalesce(serviceCacheSeconds, defaultCacheSeconds),
   }

diff --git a/core/base-service/coalesce-badge.spec.js b/core/base-service/coalesce-badge.spec.js
@@ -260,6 +260,20 @@ describe('coalesceBadge', function () {
     })
   })
 
+  describe('Logo size', function () {
+    it('overrides the logoSize', function () {
+      expect(coalesceBadge({ logoSize: 'auto' }, {}, {})).to.include({
+        logoSize: 'auto',
+      })
+    })
+
+    it('applies the logo size', function () {
+      expect(
+        coalesceBadge({}, { namedLogo: 'npm', logoSize: 'auto' }, {})
+      ).to.include({ logoSize: 'auto' })
+    })
+  })
+
   describe('Logo width', function () {
     it('overrides the logoWidth', function () {
       expect(coalesceBadge({ logoWidth: 20 }, {}, {})).to.include({
@@ -274,6 +288,20 @@ describe('coalesceBadge', function () {
     })
   })
 
+  describe('Logo height', function () {
+    it('overrides the logoHeight', function () {
+      expect(coalesceBadge({ logoHeight: 10 }, {}, {})).to.include({
+        logoHeight: 10,
+      })
+    })
+
+    it('applies the logo height', function () {
+      expect(
+        coalesceBadge({}, { namedLogo: 'npm', logoHeight: 10 }, {})
+      ).to.include({ logoHeight: 10 })
+    })
+  })
+
   describe('Logo position', function () {
     it('overrides the logoPosition', function () {
       expect(coalesceBadge({ logoPosition: -10 }, {}, {})).to.include({

diff --git a/core/base-service/openapi.js b/core/base-service/openapi.js
@@ -9,6 +9,9 @@ const globalParamRefs = [
   { $ref: '#/components/parameters/style' },
   { $ref: '#/components/parameters/logo' },
   { $ref: '#/components/parameters/logoColor' },
+  { $ref: '#/components/parameters/logoSize' },
+  { $ref: '#/components/parameters/logoWidth' },
+  { $ref: '#/components/parameters/logoHeight' },
   { $ref: '#/components/parameters/label' },
   { $ref: '#/components/parameters/labelColor' },
   { $ref: '#/components/parameters/color' },
@@ -270,6 +273,37 @@ function category2openapi(category, services) {
           },
           example: 'violet',
         },
+        logoSize: {
+          name: 'logoSize',
+          in: 'query',
+          required: false,
+          description:
+            "Make icons adaptively resize by setting `auto`. It's useful for some wider logos like `amd` and `amg`.",
+          schema: {
+            type: 'string',
+          },
+          example: 'auto',
+        },
+        logoWidth: {
+          name: 'logoWidth',
+          in: 'query',
+          required: false,
+          description: 'The width of the logo, default to `14`',
+          schema: {
+            type: 'string',
+          },
+          example: '20',
+        },
+        logoHeight: {
+          name: 'logoHeight',
+          in: 'query',
+          required: false,
+          description: 'The height of the logo, default to `14`',
+          schema: {
+            type: 'string',
+          },
+          example: '12',
+        },
         label: {
           name: 'label',
           in: 'query',

diff --git a/core/base-service/openapi.spec.js b/core/base-service/openapi.spec.js
@@ -111,6 +111,37 @@ const expected = {
         schema: { type: 'string' },
         example: 'violet',
       },
+      logoSize: {
+        name: 'logoSize',
+        in: 'query',
+        required: false,
+        description:
+          "Make icons adaptively resize by setting `auto`. It's useful for some wider logos like `amd` and `amg`.",
+        schema: {
+          type: 'string',
+        },
+        example: 'auto',
+      },
+      logoWidth: {
+        name: 'logoWidth',
+        in: 'query',
+        required: false,
+        description: 'The width of the logo, default to `14`',
+        schema: {
+          type: 'string',
+        },
+        example: '20',
+      },
+      logoHeight: {
+        name: 'logoHeight',
+        in: 'query',
+        required: false,
+        description: 'The height of the logo, default to `14`',
+        schema: {
+          type: 'string',
+        },
+        example: '12',
+      },
       label: {
         name: 'label',
         in: 'query',
@@ -176,6 +207,9 @@ const expected = {
           { $ref: '#/components/parameters/style' },
           { $ref: '#/components/parameters/logo' },
           { $ref: '#/components/parameters/logoColor' },
+          { $ref: '#/components/parameters/logoSize' },
+          { $ref: '#/components/parameters/logoWidth' },
+          { $ref: '#/components/parameters/logoHeight' },
           { $ref: '#/components/parameters/label' },
           { $ref: '#/components/parameters/labelColor' },
           { $ref: '#/components/parameters/color' },
@@ -231,6 +265,9 @@ const expected = {
           { $ref: '#/components/parameters/style' },
           { $ref: '#/components/parameters/logo' },
           { $ref: '#/components/parameters/logoColor' },
+          { $ref: '#/components/parameters/logoSize' },
+          { $ref: '#/components/parameters/logoWidth' },
+          { $ref: '#/components/parameters/logoHeight' },
           { $ref: '#/components/parameters/label' },
           { $ref: '#/components/parameters/labelColor' },
           { $ref: '#/components/parameters/color' },
@@ -285,6 +322,9 @@ const expected = {
           { $ref: '#/components/parameters/style' },
           { $ref: '#/components/parameters/logo' },
           { $ref: '#/components/parameters/logoColor' },
+          { $ref: '#/components/parameters/logoSize' },
+          { $ref: '#/components/parameters/logoWidth' },
+          { $ref: '#/components/parameters/logoHeight' },
           { $ref: '#/components/parameters/label' },
           { $ref: '#/components/parameters/labelColor' },
           { $ref: '#/components/parameters/color' },
@@ -331,6 +371,9 @@ const expected = {
           { $ref: '#/components/parameters/style' },
           { $ref: '#/components/parameters/logo' },
           { $ref: '#/components/parameters/logoColor' },
+          { $ref: '#/components/parameters/logoSize' },
+          { $ref: '#/components/parameters/logoWidth' },
+          { $ref: '#/components/parameters/logoHeight' },
           { $ref: '#/components/parameters/label' },
           { $ref: '#/components/parameters/labelColor' },
           { $ref: '#/components/parameters/color' },

diff --git a/lib/load-simple-icons.js b/lib/load-simple-icons.js
@@ -1,5 +1,4 @@
 import * as originalSimpleIcons from 'simple-icons/icons'
-import { svg2base64 } from './svg-helpers.js'
 
 function loadSimpleIcons() {
   const simpleIcons = {}
@@ -16,10 +15,10 @@ function loadSimpleIcons() {
     const icon = originalSimpleIcons[key]
     const { title, slug, hex } = icon
 
-    icon.base64 = {
-      default: svg2base64(icon.svg.replace('<svg', `<svg fill="#${hex}"`)),
-      light: svg2base64(icon.svg.replace('<svg', '<svg fill="whitesmoke"')),
-      dark: svg2base64(icon.svg.replace('<svg', '<svg fill="#333"')),
+    icon.styles = {
+      default: icon.svg.replace('<svg', `<svg fill="#${hex}"`),
+      light: icon.svg.replace('<svg', '<svg fill="whitesmoke"'),
+      dark: icon.svg.replace('<svg', '<svg fill="#333"'),
     }
 
     // There are a few instances where multiple icons have the same title

diff --git a/lib/load-simple-icons.spec.js b/lib/load-simple-icons.spec.js
@@ -8,7 +8,7 @@ describe('loadSimpleIcons', function () {
   })
 
   it('prepares three color themes', function () {
-    expect(simpleIcons.sentry.base64).to.have.all.keys(
+    expect(simpleIcons.sentry.styles).to.have.all.keys(
       'default',
       'light',
       'dark',