Skip to content

Commit

Permalink
perf: remove icons for now (#413)
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidlj95
davidlj95 authored Apr 24, 2024
1 parent 6d8ba0a commit b2a56c0
Show file tree
Hide file tree
Showing 6 changed files with 73 additions and 66 deletions.
3 changes: 2 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@
"format:check-all": "pnpm run format-check .",
"scripts:tsc": "cd scripts && tsc",
"lighthouse": "lhci autorun",
"bundlewatch": "bundlewatch --config .bundlewatch.config.json"
"bundlewatch": "bundlewatch --config .bundlewatch.config.json",
"analyze-main-bundle": "pnpm dlx source-map-explorer dist/@davidlj95/website/browser/main*.js"
},
"dependencies": {
"@angular/animations": "17.3.5",
Expand Down
6 changes: 3 additions & 3 deletions scripts/src/generate-simple-icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,11 @@ async function generateSimpleIcons() {
)
Log.info('%d icons match technology IDs', neededIcons.length)

const iconsJson = neededIcons.map(({ title, slug, svg, hex }) => ({
const iconsJson = neededIcons.map(({ title, slug }) => ({
title,
slug,
svg,
hex,
//svg,
//hex,
}))

await writeFile(SIMPLE_ICONS_FILE, JSON.stringify(iconsJson, null, 2))
Expand Down
14 changes: 7 additions & 7 deletions src/app/resume-page/technology/extra-icons.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const EXTRA_ICONS: ReadonlyArray<ReducedSimpleIcon> = [
// 👇 With all details (Ruby logo internal shapes)
// svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>RSpec</title><path fill="#5ecae6" d="m1.913 14.88 1.995.55a8.8 8.8 0 0 1-.692-3.44c0-4.845 3.929-8.794 8.794-8.794h.163l1.18-1.608L12.398 0h-.387C5.374 0 0 5.374 0 12.01c0 1.527.285 3.013.814 4.356z"/><path fill="#a5ddef" d="m14.046 1.69-1.222 1.567c4.458.427 7.96 4.173 7.96 8.753a8.7 8.7 0 0 1-.51 2.931l.958 1.853 1.832-.143a12.1 12.1 0 0 0 .936-4.64C24 5.74 19.196.59 13.069.06Z"/><path fill="#7fd2ed" d="m20.865 17.364-.855-1.75a8.78 8.78 0 0 1-8.02 5.17 8.78 8.78 0 0 1-7.776-4.703l-2.117-.529-1.038 1.405C2.952 21.109 7.125 24 11.989 24c4.764 0 8.876-2.768 10.81-6.779z"/><path fill="#ef4561" d="m8.712 6.799-3.216 3.298.814 1.649 5.598 6.84 5.598-7.003.815-1.486-3.217-3.298zM5.496 10.198l2.015.408"/><path fill="#ef4d6e" d="m18.32 10.198-.814 1.405-1.995.59.794-1.587z"/><path fill="#ef4561" d="M12.702 12.499h-1.587l-.815-2.036h3.217z"/><path fill="#ef4561" d="M15.511 12.092h-1.2l-.794-1.629h2.788z"/><path fill="#ef4d6e" d="m10.3 10.606.815 1.995-1.609-.408zM13.517 10.606l.793 1.587-1.608.408z"/><path fill="#ef4561" d="m18.32 10.036-2.015.468-1.587-3.705h.386z"/><path fill="#ef4d6e" d="M16.305 10.463h-2.788l.386-3.664h.815zM5.496 10.198l.814 1.609 1.995.386-.794-1.587z"/><path fill="#ef4561" d="M8.305 12.092h1.201l.794-1.629H7.511z"/><path fill="#ef4561" d="m5.496 10.036 2.015.468L9.1 6.799h-.387z"/><path fill="#ef4d6e" d="M7.511 10.463h2.79L9.912 6.8H9.1z"/><path fill="#ef4561" d="M11.908 6.799H9.913l.387 3.603zM13.903 6.799h-1.995l1.609 3.603z"/><path fill="#ef4d6e" d="M11.908 6.86 10.3 10.463h3.217zM11.908 18.483l-2.402-6.391h-1.2z"/><path fill="#ef4561" d="m8.305 12.193 3.603 6.413-5.598-6.8zM11.115 12.6l.793 6.006-2.402-6.413zM11.908 18.606l.794-6.005 1.608-.408z"/><path fill="#ef4d6e" d="m11.908 18.483 2.402-6.391h1.201z"/><path fill="#ef4561" d="m15.511 12.193-3.603 6.413 5.598-7.003z"/><path fill="#ef4d6e" d="M11.115 12.499h1.587l-.794 6.005z"/></svg>',
// 👇 Without Ruby logo internal shapes
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>RSpec</title><path fill="#5ecae6" d="m1.913 14.88 1.995.55a8.8 8.8 0 0 1-.692-3.44c0-4.845 3.929-8.794 8.794-8.794h.163l1.18-1.608L12.398 0h-.387C5.374 0 0 5.374 0 12.01c0 1.527.285 3.013.814 4.356z"/><path fill="#a5ddef" d="m14.046 1.69-1.222 1.567c4.458.427 7.96 4.173 7.96 8.753a8.7 8.7 0 0 1-.51 2.931l.958 1.853 1.832-.143a12.1 12.1 0 0 0 .936-4.64C24 5.74 19.196.59 13.069.06Z"/><path fill="#7fd2ed" d="m20.865 17.364-.855-1.75a8.78 8.78 0 0 1-8.02 5.17 8.78 8.78 0 0 1-7.776-4.703l-2.117-.529-1.038 1.405C2.952 21.109 7.125 24 11.989 24c4.764 0 8.876-2.768 10.81-6.779z"/><path d="m8.713 6.799-3.217 3.236.049.012-.049.05.057.114-.057-.012.815 1.608 5.597 6.798-.035-.062.022.027.013.035-.004-.023.004.004.004-.004-.004.023.014-.037.023-.03-.037.067 5.598-7.001.814-1.405-.062.012.062-.113-.049-.051.05-.012L15.103 6.8z" fill="#ef4561"/></svg>',
// svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>RSpec</title><path fill="#5ecae6" d="m1.913 14.88 1.995.55a8.8 8.8 0 0 1-.692-3.44c0-4.845 3.929-8.794 8.794-8.794h.163l1.18-1.608L12.398 0h-.387C5.374 0 0 5.374 0 12.01c0 1.527.285 3.013.814 4.356z"/><path fill="#a5ddef" d="m14.046 1.69-1.222 1.567c4.458.427 7.96 4.173 7.96 8.753a8.7 8.7 0 0 1-.51 2.931l.958 1.853 1.832-.143a12.1 12.1 0 0 0 .936-4.64C24 5.74 19.196.59 13.069.06Z"/><path fill="#7fd2ed" d="m20.865 17.364-.855-1.75a8.78 8.78 0 0 1-8.02 5.17 8.78 8.78 0 0 1-7.776-4.703l-2.117-.529-1.038 1.405C2.952 21.109 7.125 24 11.989 24c4.764 0 8.876-2.768 10.81-6.779z"/><path d="m8.713 6.799-3.217 3.236.049.012-.049.05.057.114-.057-.012.815 1.608 5.597 6.798-.035-.062.022.027.013.035-.004-.023.004.004.004-.004-.004.023.014-.037.023-.03-.037.067 5.598-7.001.814-1.405-.062.012.062-.113-.049-.051.05-.012L15.103 6.8z" fill="#ef4561"/></svg>',
},
// Extracted from https://norbr.com/payment-providers/redsys/
// Nothing in vector format found in official site
Expand All @@ -38,8 +38,8 @@ export const EXTRA_ICONS: ReadonlyArray<ReducedSimpleIcon> = [
{
title: 'Redsys',
slug: 'redsys',
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Redsys</title><path d="M11.626 24c-3.989-.108-7.476-2.03-9.89-5.873A10.9 10.9 0 0 1 .17 13.959a12.4 12.4 0 0 1 .239-4.996c.44-1.711 1.275-3.197 2.339-4.58.075-.099.169-.263.314-.174.098.061.023.207-.019.324-.473 1.36-.46 2.756.225 3.984.783 1.411 1.964 2.438 3.67 2.705 1.636.258 3.07-.211 4.21-1.317 1.378-1.34 1.95-2.99 1.415-4.946-.285-1.036-.768-1.922-1.612-2.578-1.092-.848-2.33-1.26-3.722-1.12-.098.01-.225.08-.267-.056s.103-.14.187-.178A11.9 11.9 0 0 1 12.071 0c1.74.01 3.427.384 5.006 1.125 2.152 1.008 3.91 2.498 5.133 4.552a12.4 12.4 0 0 1 1.688 4.93c.154 1.313.08 2.584-.188 3.863-.333 1.575-.942 3.028-1.875 4.34-.853 1.2-1.851 2.241-3.103 3.052-.998.647-2.025 1.177-3.16 1.538-1.115.356-2.245.544-3.946.595z"/></svg>',
hex: 'DC7C26',
// svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Redsys</title><path d="M11.626 24c-3.989-.108-7.476-2.03-9.89-5.873A10.9 10.9 0 0 1 .17 13.959a12.4 12.4 0 0 1 .239-4.996c.44-1.711 1.275-3.197 2.339-4.58.075-.099.169-.263.314-.174.098.061.023.207-.019.324-.473 1.36-.46 2.756.225 3.984.783 1.411 1.964 2.438 3.67 2.705 1.636.258 3.07-.211 4.21-1.317 1.378-1.34 1.95-2.99 1.415-4.946-.285-1.036-.768-1.922-1.612-2.578-1.092-.848-2.33-1.26-3.722-1.12-.098.01-.225.08-.267-.056s.103-.14.187-.178A11.9 11.9 0 0 1 12.071 0c1.74.01 3.427.384 5.006 1.125 2.152 1.008 3.91 2.498 5.133 4.552a12.4 12.4 0 0 1 1.688 4.93c.154 1.313.08 2.584-.188 3.863-.333 1.575-.942 3.028-1.875 4.34-.853 1.2-1.851 2.241-3.103 3.052-.998.647-2.025 1.177-3.16 1.538-1.115.356-2.245.544-3.946.595z"/></svg>',
// hex: 'DC7C26',
},
// Extracted from JetBrains brand guidelines
// https://www.jetbrains.com/company/brand/#logos-and-icons-product-logos
Expand All @@ -48,8 +48,8 @@ export const EXTRA_ICONS: ReadonlyArray<ReducedSimpleIcon> = [
{
title: 'RubyMine',
slug: 'rubymine',
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>RubyMine</title><path d="M0 0v24h24V0zm3.287 2.992H7.13q.932.001 1.643.344.706.344 1.095.969c.26.42.389.895.389 1.447q.002.828-.393 1.465-.39.635-1.111.982a4 4 0 0 1-.44.168l2.135 3.584H8.488L6.54 8.55H4.996v3.402H3.287zm8.305 0h1.953l2.168 3.5.2.424.183-.424 2.068-3.5v.004h1.985v8.96h-1.676V5.606l.02-.37-2.626 4.214-2.615-4.18.023.332v6.348h-1.683zm-6.6 1.428v2.705h2.016q.45-.001.785-.17.336-.167.516-.47c.12-.205.18-.45.18-.721q0-.406-.18-.711a1.17 1.17 0 0 0-.516-.469 1.8 1.8 0 0 0-.785-.164zM3.2 19.199h9.602V20.8H3.199z"/></svg>',
hex: '000000',
// svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>RubyMine</title><path d="M0 0v24h24V0zm3.287 2.992H7.13q.932.001 1.643.344.706.344 1.095.969c.26.42.389.895.389 1.447q.002.828-.393 1.465-.39.635-1.111.982a4 4 0 0 1-.44.168l2.135 3.584H8.488L6.54 8.55H4.996v3.402H3.287zm8.305 0h1.953l2.168 3.5.2.424.183-.424 2.068-3.5v.004h1.985v8.96h-1.676V5.606l.02-.37-2.626 4.214-2.615-4.18.023.332v6.348h-1.683zm-6.6 1.428v2.705h2.016q.45-.001.785-.17.336-.167.516-.47c.12-.205.18-.45.18-.721q0-.406-.18-.711a1.17 1.17 0 0 0-.516-.469 1.8 1.8 0 0 0-.785-.164zM3.2 19.199h9.602V20.8H3.199z"/></svg>',
// hex: '000000',
},
// Extracted from ZenQMS official site using SVG extractor
// Omitting, even minimized version takes 11kb 🙃
Expand All @@ -70,7 +70,7 @@ export const EXTRA_ICONS: ReadonlyArray<ReducedSimpleIcon> = [
{
title: 'Karma Runner',
slug: 'karmarunner',
svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Karma</title><path d="M8.722 2.782v5.462l2.847 10.49.663 2.484h1.829v-4.61l.518-.762 3.601 5.372H24l-6.525-9.64 5.97-8.797h-5.82l-3.564 5.267V2.78zM0 8.469 2.767 18.67l2.695-2.54 4.31 5.087-2.767-10.203-2.695 2.54z"/></svg>',
hex: '42BEAE',
// svg: '<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Karma</title><path d="M8.722 2.782v5.462l2.847 10.49.663 2.484h1.829v-4.61l.518-.762 3.601 5.372H24l-6.525-9.64 5.97-8.797h-5.82l-3.564 5.267V2.78zM0 8.469 2.767 18.67l2.695-2.54 4.31 5.087-2.767-10.203-2.695 2.54z"/></svg>',
// hex: '42BEAE',
},
]
5 changes: 2 additions & 3 deletions src/app/resume-page/technology/reduced-simple-icon.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { SimpleIcon } from 'simple-icons'

export type ReducedSimpleIcon = Pick<SimpleIcon, 'title' | 'slug' | 'svg'> & {
hex?: SimpleIcon['hex']
}
export type ReducedSimpleIcon = Pick<SimpleIcon, 'title' | 'slug'>
//| 'svg'> & { hex?: SimpleIcon['hex'] }
59 changes: 29 additions & 30 deletions src/app/resume-page/technology/technology.service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ import { serviceTestSetup } from '@/test/helpers/service-test-setup'
import { EXTRA_ICONS } from './extra-icons'
import { MockProvider } from 'ng-mocks'
import { DomSanitizer } from '@angular/platform-browser'
import { IDENTITY } from '@/test/helpers/identity'

describe('TechnologyService', () => {
let sut: TechnologyService
const SIMPLE_ICON = SIMPLE_ICONS_JSON[0]
const EXTRA_ICON = EXTRA_ICONS[0]
const EXTRA_DISPLAY_NAME_ENTRY = [...EXTRA_DISPLAY_NAMES.entries()][0]
const EXTRA_DISPLAY_NAME_ENTRY = EXTRA_DISPLAY_NAMES[0]
const EXTRA_DISPLAY_NAME_SLUG = EXTRA_DISPLAY_NAME_ENTRY[0]
const EXTRA_DISPLAY_NAME = EXTRA_DISPLAY_NAME_ENTRY[1]
it('should be created', () => {
Expand All @@ -19,34 +18,34 @@ describe('TechnologyService', () => {
})

describe('icon', () => {
it('should return icon sanitized SVG and color in hex form from simple icons JSON given a technology slug', () => {
const domSanitizer: Partial<DomSanitizer> = {
bypassSecurityTrustHtml: jasmine.createSpy().and.callFake(IDENTITY),
}
sut = makeSut({ domSanitizer })
const icon = sut.getIcon(SIMPLE_ICON.slug)

expect(icon!.svg).toEqual(SIMPLE_ICON.svg)
expect(domSanitizer.bypassSecurityTrustHtml).toHaveBeenCalledOnceWith(
SIMPLE_ICON.svg,
)
expect(icon!.color).toEqual(`#${SIMPLE_ICON.hex}`)
})

it('should return icon sanitized SVG and color in hex form from extra icons given a technology slug', () => {
const domSanitizer: Partial<DomSanitizer> = {
bypassSecurityTrustHtml: jasmine.createSpy().and.callFake(IDENTITY),
}
sut = makeSut({ domSanitizer })

const icon = sut.getIcon(EXTRA_ICON.slug)

expect(icon!.svg).toEqual(EXTRA_ICON.svg)
expect(domSanitizer.bypassSecurityTrustHtml).toHaveBeenCalledOnceWith(
EXTRA_ICON.svg,
)
expect(icon!.color).toEqual(`#${EXTRA_ICON.hex}`)
})
//it('should return icon sanitized SVG and color in hex form from simple icons JSON given a technology slug', () => {
// const domSanitizer: Partial<DomSanitizer> = {
// bypassSecurityTrustHtml: jasmine.createSpy().and.callFake(IDENTITY),
// }
// sut = makeSut({ domSanitizer })
// const icon = sut.getIcon(SIMPLE_ICON.slug)

// expect(icon!.svg).toEqual(SIMPLE_ICON.svg)
// expect(domSanitizer.bypassSecurityTrustHtml).toHaveBeenCalledOnceWith(
// SIMPLE_ICON.svg,
// )
// expect(icon!.color).toEqual(`#${SIMPLE_ICON.hex}`)
//})

//it('should return icon sanitized SVG and color in hex form from extra icons given a technology slug', () => {
// const domSanitizer: Partial<DomSanitizer> = {
// bypassSecurityTrustHtml: jasmine.createSpy().and.callFake(IDENTITY),
// }
// sut = makeSut({ domSanitizer })

// const icon = sut.getIcon(EXTRA_ICON.slug)

// expect(icon!.svg).toEqual(EXTRA_ICON.svg)
// expect(domSanitizer.bypassSecurityTrustHtml).toHaveBeenCalledOnceWith(
// EXTRA_ICON.svg,
// )
// expect(icon!.color).toEqual(`#${EXTRA_ICON.hex}`)
//})

it('should return null when icon does not exist', () => {
sut = makeSut()
Expand Down
52 changes: 30 additions & 22 deletions src/app/resume-page/technology/technology.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { Injectable } from '@angular/core'
import SIMPLE_ICONS_JSON from './simple-icons.json'
import { TechnologyIcon } from './technology-item'
import { DomSanitizer } from '@angular/platform-browser'
import { ReducedSimpleIcon } from './reduced-simple-icon'
import { EXTRA_ICONS } from './extra-icons'

@Injectable({
Expand All @@ -11,37 +10,39 @@ import { EXTRA_ICONS } from './extra-icons'
export class TechnologyService {
constructor(private readonly _domSanitizer: DomSanitizer) {}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
public getIcon(id: string): TechnologyIcon | null {
const icon = ICONS_BY_SLUG.get(id)
if (icon) {
return {
svg: this._domSanitizer.bypassSecurityTrustHtml(icon.svg),
color: `#${icon.hex}`,
}
}
//const icon = ICONS_BY_SLUG.get(id)
//if (icon) {
// return {
// svg: this._domSanitizer.bypassSecurityTrustHtml(icon.svg),
// color: `#${icon.hex}`,
// }
//}
return null
}

public getDisplayName(slug: string): string | null {
const icon = ICONS_BY_SLUG.get(slug)
if (icon) {
return icon.title
}
const extraDisplayName = EXTRA_DISPLAY_NAMES.get(slug)
if (extraDisplayName) {
return extraDisplayName
}
return null
//const icon = ICONS_BY_SLUG.get(slug)
//if (icon) {
// return icon.title
//}
//const extraDisplayName = EXTRA_DISPLAY_NAMES.get(slug)
//if (extraDisplayName) {
// return extraDisplayName
//}
//return null
return DISPLAY_NAME_BY_SLUG.get(slug) ?? null
}
}

const ALL_ICONS = [...Object.values(SIMPLE_ICONS_JSON), ...EXTRA_ICONS]
const ICONS_BY_SLUG = ALL_ICONS.reduce((map, icon) => {
map.set(icon.slug, icon)
return map
}, new Map<string, ReducedSimpleIcon>())
//const ICONS_BY_SLUG = ALL_ICONS.reduce((map, icon) => {
// map.set(icon.slug, icon)
// return map
//}, new Map<string, ReducedSimpleIcon>())

export const EXTRA_DISPLAY_NAMES = new Map<string, string>([
export const EXTRA_DISPLAY_NAMES: ReadonlyArray<[string, string]> = [
['http', 'HTTP'],
['httprest', 'RESTful'],
['googleworkspace', 'Google Workspace'],
Expand All @@ -58,4 +59,11 @@ export const EXTRA_DISPLAY_NAMES = new Map<string, string>([
['html', 'HTML'],
['css', 'CSS'],
['zenqms', 'ZenQMS'],
]
const DISPLAY_NAME_BY_SLUG = new Map<string, string>([
...Object.values(ALL_ICONS).reduce<ReadonlyArray<[string, string]>>(
(entries, icon) => [...entries, [icon.slug, icon.title]],
[],
),
...EXTRA_DISPLAY_NAMES,
])

0 comments on commit b2a56c0

Please sign in to comment.