From 482dbb46f0bc3912adfd9aecb767bea50eae1407 Mon Sep 17 00:00:00 2001 From: luke-h1 Date: Tue, 17 Dec 2024 15:48:54 +0000 Subject: [PATCH 1/4] fix(frontend): fix header issue --- src/data/uses.ts | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 src/data/uses.ts diff --git a/src/data/uses.ts b/src/data/uses.ts new file mode 100644 index 000000000..80f5e82fa --- /dev/null +++ b/src/data/uses.ts @@ -0,0 +1,41 @@ +export interface Stack { + title: string; + description: string; + src: string; +} + +export interface StackSection { + title: string; + stacks: Stack[]; +} + +export const uses: Stack[] = [ + { + title: '16" MacBook Pro (M2 pro)', + description: + 'Solid laptop and something I can rely on daily. The difference between the ARM and intel chips is amazing. Much more silent & quicker too', + src: '/images/apple.jpg', + }, + { + title: 'Ducky One 2 SF keyboard', + description: + 'Great keyboard albeit a little noisy (cherry MX blues). Worked solidly for 2+ years', + src: '/images/kb.jpeg', + }, + { + title: 'Logitech StreamCam', + description: 'Reliable 1080p camera for zoom etc.', + src: '/images/logitech-cam.jpg', + }, + { + title: 'Airpods Pro (gen 2)', + description: 'Super convenient, easy to connect to and good quality.', + src: '/images/airpods.png', + }, + { + title: 'Mokin USB adapter', + description: + 'Great USB c adapter with long life span and a variety of ports', + src: '/images/mokin.jpg', + }, +]; From c5ca36d0688f7d1ddafa18c76b85449ecd7e0715 Mon Sep 17 00:00:00 2001 From: luke-h1 Date: Tue, 17 Dec 2024 19:23:27 +0000 Subject: [PATCH 2/4] chore(frontend): enable experimental hmr cache --- next.config.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/next.config.js b/next.config.js index 1f38a8ec8..44bb347b6 100644 --- a/next.config.js +++ b/next.config.js @@ -70,6 +70,8 @@ const nextConfig = { // Force SWC transform on build to stop Next.js trying to use babel // since babel is only needed to support vanilla-extract in unit tests forceSwcTransforms: true, + + serverComponentsHmrCache: true, }, images: { minimumCacheTTL: 120, From e89dfb0d4240d1350ec377f4d78a6369ac2645ee Mon Sep 17 00:00:00 2001 From: luke-h1 Date: Tue, 17 Dec 2024 20:36:11 +0000 Subject: [PATCH 3/4] fix(frontend): update skills section --- src/components/SkillItem/index.tsx | 3 ++- src/components/Skills/index.tsx | 2 +- src/utils/__tests__/toCamelCase.test.ts | 16 +++++----------- 3 files changed, 8 insertions(+), 13 deletions(-) diff --git a/src/components/SkillItem/index.tsx b/src/components/SkillItem/index.tsx index 6a4fc3f9b..82b88eb9b 100644 --- a/src/components/SkillItem/index.tsx +++ b/src/components/SkillItem/index.tsx @@ -1,5 +1,6 @@ 'use client'; +import toCamelCase from '@frontend/utils/toCamelCase'; import { useTheme } from 'next-themes'; import { useEffect } from 'react'; import type { IconType } from 'react-icons'; @@ -24,7 +25,7 @@ const SkillItem = ({ icon, text }: SkillItemProps) => { return (
  • - + {icon({ size: 30, className: styles.skillIcon, diff --git a/src/components/Skills/index.tsx b/src/components/Skills/index.tsx index 30d996e69..6df67ebd5 100644 --- a/src/components/Skills/index.tsx +++ b/src/components/Skills/index.tsx @@ -86,7 +86,7 @@ export const skills: SkillItemProps[] = [ }, { icon: SiStyledComponents, - text: 'Styled component', + text: 'CSS in JS', }, { icon: BiTestTube, diff --git a/src/utils/__tests__/toCamelCase.test.ts b/src/utils/__tests__/toCamelCase.test.ts index c8e0b5e29..e38e4901d 100644 --- a/src/utils/__tests__/toCamelCase.test.ts +++ b/src/utils/__tests__/toCamelCase.test.ts @@ -1,21 +1,15 @@ import toCamelCase from '../toCamelCase'; describe('toCamelCase', () => { - test('should convert a string to camel case', () => { + test('converts string to camel-case', () => { const str = 'Hello World'; const result = toCamelCase(str); - expect(result).toBe('HelloWorld'); + expect(result).toEqual('HelloWorld'); }); - test('should convert a string to camel case', () => { - const str = 'Hello World'; - const result = toCamelCase(str); - expect(result).toBe('HelloWorld'); - }); - - test('should convert a string to camel case', () => { - const str = 'Hello World'; + test('multiple gaps get converted to camel-case', () => { + const str = 'AWS Azure Vercel'; const result = toCamelCase(str); - expect(result).toBe('HelloWorld'); + expect(result).toEqual('AWSAzureVercel'); }); }); From a36e49bce7b548dacb4dc55c28338e67c8b52893 Mon Sep 17 00:00:00 2001 From: luke-h1 Date: Tue, 17 Dec 2024 22:22:07 +0000 Subject: [PATCH 4/4] test(frontend): fix skills test --- src/components/Skills/Skills.test.tsx | 5 +- .../Skills/__snapshots__/Skills.test.tsx.snap | 352 +++++++++--------- 2 files changed, 180 insertions(+), 177 deletions(-) diff --git a/src/components/Skills/Skills.test.tsx b/src/components/Skills/Skills.test.tsx index ce8a1de50..961fa35da 100644 --- a/src/components/Skills/Skills.test.tsx +++ b/src/components/Skills/Skills.test.tsx @@ -1,4 +1,5 @@ import render from '@frontend/test/render'; +import toCamelCase from '@frontend/utils/toCamelCase'; import { screen } from '@testing-library/react'; import Skills, { skills } from '.'; @@ -7,7 +8,9 @@ describe('Skills', () => { const { container } = render(); skills.forEach(skill => { expect(screen.getByText(skill.text)).toBeInTheDocument(); - expect(screen.getByTestId(`${skill.text}-icon`)).toBeInTheDocument(); + expect( + screen.getByTestId(`${toCamelCase(skill.text)}-icon`), + ).toBeInTheDocument(); expect(container).toMatchSnapshot(); }); }); diff --git a/src/components/Skills/__snapshots__/Skills.test.tsx.snap b/src/components/Skills/__snapshots__/Skills.test.tsx.snap index 32dc45bf1..c5c04b9a6 100644 --- a/src/components/Skills/__snapshots__/Skills.test.tsx.snap +++ b/src/components/Skills/__snapshots__/Skills.test.tsx.snap @@ -107,7 +107,7 @@ exports[`Skills renders correctly 1`] = `
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS
  • - Styled component + CSS in JS