diff --git a/package.json b/package.json index 7ff72959..82814647 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/scripts/src/generate-simple-icons.ts b/scripts/src/generate-simple-icons.ts index fb97c259..71993b57 100644 --- a/scripts/src/generate-simple-icons.ts +++ b/scripts/src/generate-simple-icons.ts @@ -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)) diff --git a/src/app/resume-page/technology/extra-icons.ts b/src/app/resume-page/technology/extra-icons.ts index f92bf27b..bcb921ca 100644 --- a/src/app/resume-page/technology/extra-icons.ts +++ b/src/app/resume-page/technology/extra-icons.ts @@ -29,7 +29,7 @@ export const EXTRA_ICONS: ReadonlyArray = [ // 👇 With all details (Ruby logo internal shapes) // svg: 'RSpec', // 👇 Without Ruby logo internal shapes - svg: 'RSpec', + // svg: 'RSpec', }, // Extracted from https://norbr.com/payment-providers/redsys/ // Nothing in vector format found in official site @@ -38,8 +38,8 @@ export const EXTRA_ICONS: ReadonlyArray = [ { title: 'Redsys', slug: 'redsys', - svg: 'Redsys', - hex: 'DC7C26', + // svg: 'Redsys', + // hex: 'DC7C26', }, // Extracted from JetBrains brand guidelines // https://www.jetbrains.com/company/brand/#logos-and-icons-product-logos @@ -48,8 +48,8 @@ export const EXTRA_ICONS: ReadonlyArray = [ { title: 'RubyMine', slug: 'rubymine', - svg: 'RubyMine', - hex: '000000', + // svg: 'RubyMine', + // hex: '000000', }, // Extracted from ZenQMS official site using SVG extractor // Omitting, even minimized version takes 11kb 🙃 @@ -70,7 +70,7 @@ export const EXTRA_ICONS: ReadonlyArray = [ { title: 'Karma Runner', slug: 'karmarunner', - svg: 'Karma', - hex: '42BEAE', + // svg: 'Karma', + // hex: '42BEAE', }, ] diff --git a/src/app/resume-page/technology/reduced-simple-icon.ts b/src/app/resume-page/technology/reduced-simple-icon.ts index c1678ff1..738a0218 100644 --- a/src/app/resume-page/technology/reduced-simple-icon.ts +++ b/src/app/resume-page/technology/reduced-simple-icon.ts @@ -1,5 +1,4 @@ import { SimpleIcon } from 'simple-icons' -export type ReducedSimpleIcon = Pick & { - hex?: SimpleIcon['hex'] -} +export type ReducedSimpleIcon = Pick +//| 'svg'> & { hex?: SimpleIcon['hex'] } diff --git a/src/app/resume-page/technology/technology.service.spec.ts b/src/app/resume-page/technology/technology.service.spec.ts index 589a162d..9a01e4e3 100644 --- a/src/app/resume-page/technology/technology.service.spec.ts +++ b/src/app/resume-page/technology/technology.service.spec.ts @@ -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', () => { @@ -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 = { - 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 = { - 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 = { + // 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 = { + // 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() diff --git a/src/app/resume-page/technology/technology.service.ts b/src/app/resume-page/technology/technology.service.ts index 8a21181b..8d46ae76 100644 --- a/src/app/resume-page/technology/technology.service.ts +++ b/src/app/resume-page/technology/technology.service.ts @@ -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({ @@ -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()) +//const ICONS_BY_SLUG = ALL_ICONS.reduce((map, icon) => { +// map.set(icon.slug, icon) +// return map +//}, new Map()) -export const EXTRA_DISPLAY_NAMES = new Map([ +export const EXTRA_DISPLAY_NAMES: ReadonlyArray<[string, string]> = [ ['http', 'HTTP'], ['httprest', 'RESTful'], ['googleworkspace', 'Google Workspace'], @@ -58,4 +59,11 @@ export const EXTRA_DISPLAY_NAMES = new Map([ ['html', 'HTML'], ['css', 'CSS'], ['zenqms', 'ZenQMS'], +] +const DISPLAY_NAME_BY_SLUG = new Map([ + ...Object.values(ALL_ICONS).reduce>( + (entries, icon) => [...entries, [icon.slug, icon.title]], + [], + ), + ...EXTRA_DISPLAY_NAMES, ])