Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

automatically show light or dark logos when using simple-icons #2833

Merged
merged 5 commits into from
Jan 23, 2019
Merged

automatically show light or dark logos when using simple-icons #2833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a47a3bb
automatically show light or dark logos when using simple-icons
chris48s Jan 21, 2019
447cd3b
svgColor will always be set
chris48s Jan 22, 2019
61567c5
declare regex outside function
chris48s Jan 22, 2019
92ac374
test prepareNamedLogo(), keep function getSimpleIconColor() private i…
chris48s Jan 22, 2019
ab208b1
Merge branch 'master' into issue2431
chris48s Jan 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions core/base-service/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -441,6 +441,7 @@ class BaseService {
// the color.
overrideNamedLogo ? undefined : serviceLogoColor
),
style,
})

return {
Expand Down
47 changes: 37 additions & 10 deletions lib/logos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,28 +54,54 @@ function getShieldsIcon({ name, color }) {
}
}

function getSimpleIcon({ name, color }) {
function brightness({ r, g, b }) {
return +((r * 299 + g * 587 + b * 114) / 255000).toFixed(2)
}

const hexColorRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i

function hexToRgb(hex) {
const result = hexColorRegex.exec(hex)
return {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16),
}
}

function getSimpleIconColor({ icon, style }) {
const { hex } = icon
if (style !== 'social' && brightness(hexToRgb(hex)) <= 0.4) {
return 'whitesmoke'
}
if (style === 'social' && brightness(hexToRgb(hex)) >= 0.6) {
return '#333'
}
return hex
}

function getSimpleIcon({ name, color, style }) {
const key = name.toLowerCase().replace(/ /g, '-')

if (!(key in simpleIcons)) {
return undefined
}

const { svg, base64 } = simpleIcons[key]
const svgColor = toSvgColor(color)
if (svgColor) {
return svg2base64(svg.replace('<svg', `<svg fill="${svgColor}"`))
} else {
return base64
}
const { svg } = simpleIcons[key]
const svgColor =
toSvgColor(color) ||
toSvgColor(getSimpleIconColor({ icon: simpleIcons[key], style }))
return svg2base64(svg.replace('<svg', `<svg fill="${svgColor}"`))
}

function prepareNamedLogo({ name, color }) {
function prepareNamedLogo({ name, color, style }) {
if (typeof name !== 'string') {
return undefined
}

return getShieldsIcon({ name, color }) || getSimpleIcon({ name, color })
return (
getShieldsIcon({ name, color }) || getSimpleIcon({ name, color, style })
)
}

function makeLogo(defaultNamedLogo, overrides) {
Expand All @@ -86,6 +112,7 @@ function makeLogo(defaultNamedLogo, overrides) {
return prepareNamedLogo({
name: coalesce(overrides.logo, defaultNamedLogo),
color: overrides.logoColor,
style: overrides.style,
})
}
}
Expand Down
52 changes: 52 additions & 0 deletions lib/logos.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use strict'

const { expect } = require('chai')
const { test, given, forCases } = require('sazerac')
const {
prependPrefix,
Expand Down Expand Up @@ -31,6 +32,57 @@ describe('Logo helpers', function() {
given({ name: 'github', color: 'blue' }).expect(
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMTIgMTIgNDAgNDAiPgo8cGF0aCBmaWxsPSIjMDA3ZWM2IiBkPSJNMzIsMTMuNGMtMTAuNSwwLTE5LDguNS0xOSwxOWMwLDguNCw1LjUsMTUuNSwxMywxOGMxLDAuMiwxLjMtMC40LDEuMy0wLjljMC0wLjUsMC0xLjcsMC0zLjIgYy01LjMsMS4xLTYuNC0yLjYtNi40LTIuNkMyMCw0MS42LDE4LjgsNDEsMTguOCw0MWMtMS43LTEuMiwwLjEtMS4xLDAuMS0xLjFjMS45LDAuMSwyLjksMiwyLjksMmMxLjcsMi45LDQuNSwyLjEsNS41LDEuNiBjMC4yLTEuMiwwLjctMi4xLDEuMi0yLjZjLTQuMi0wLjUtOC43LTIuMS04LjctOS40YzAtMi4xLDAuNy0zLjcsMi01LjFjLTAuMi0wLjUtMC44LTIuNCwwLjItNWMwLDAsMS42LTAuNSw1LjIsMiBjMS41LTAuNCwzLjEtMC43LDQuOC0wLjdjMS42LDAsMy4zLDAuMiw0LjcsMC43YzMuNi0yLjQsNS4yLTIsNS4yLTJjMSwyLjYsMC40LDQuNiwwLjIsNWMxLjIsMS4zLDIsMywyLDUuMWMwLDcuMy00LjUsOC45LTguNyw5LjQgYzAuNywwLjYsMS4zLDEuNywxLjMsMy41YzAsMi42LDAsNC42LDAsNS4yYzAsMC41LDAuNCwxLjEsMS4zLDAuOWM3LjUtMi42LDEzLTkuNywxMy0xOC4xQzUxLDIxLjksNDIuNSwxMy40LDMyLDEzLjR6Ii8+Cjwvc3ZnPgo='
)

it('preserves color if light logo on dark background', function() {
const logo = prepareNamedLogo({ name: 'javascript' })
const decodedLogo = Buffer.from(
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#f7df1e"')
})
it('recolors logo if light logo on light background', function() {
const logo = prepareNamedLogo({ name: 'javascript', style: 'social' })
const decodedLogo = Buffer.from(
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#333"')
})

it('preserves color if dark logo on light background', function() {
const logo = prepareNamedLogo({ name: 'nuget', style: 'social' })
const decodedLogo = Buffer.from(
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#004880"')
})
it('recolors logo if dark logo on dark background', function() {
const logo = prepareNamedLogo({ name: 'nuget' })
const decodedLogo = Buffer.from(
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="whitesmoke"')
})

it('preserves color if medium logo on dark background', function() {
const logo = prepareNamedLogo({ name: 'skype' })
const decodedLogo = Buffer.from(
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#00aff0"')
})
it('preserves color if medium logo on light background', function() {
const logo = prepareNamedLogo({ name: 'skype', style: 'social' })
const decodedLogo = Buffer.from(
logo.replace('data:image/svg+xml;base64,', ''),
'base64'
).toString('ascii')
expect(decodedLogo).to.contain('fill="#00aff0"')
})
})
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be good to have a couple higher-level tests of this functionality. Perhaps you could call add a third test for prepareNamedLogo() with a result you've checked, or else a regular unit test that turns the base64 back into svg and checks that it includes whitesmoke.

This is "unconversion" code I wrote for #2473:

const logoSvg = Buffer.from(
  getShieldsIcon({ name: 'github' }).replace('data:image/svg+xml;base64,', ''),
  'base64'
).toString('ascii')


test(makeLogo, () => {
Expand Down