diff --git a/public/media/projects/battle-brothers-legends-browser.webp b/public/media/projects/battle-brothers-legends-browser.webp new file mode 100644 index 0000000..466ce8a Binary files /dev/null and b/public/media/projects/battle-brothers-legends-browser.webp differ diff --git a/public/media/projects/og_images/battle-brothers-legends-browser_preview.jpg b/public/media/projects/og_images/battle-brothers-legends-browser_preview.jpg new file mode 100644 index 0000000..735efaa Binary files /dev/null and b/public/media/projects/og_images/battle-brothers-legends-browser_preview.jpg differ diff --git a/src/features/Projects/ProjectCard/projectCard.module.scss.d.ts b/src/features/Projects/ProjectCard/projectCard.module.scss.d.ts index 221bd0d..ad9ccc5 100644 --- a/src/features/Projects/ProjectCard/projectCard.module.scss.d.ts +++ b/src/features/Projects/ProjectCard/projectCard.module.scss.d.ts @@ -10,8 +10,8 @@ declare const card: string; declare const description: string; declare const dateBadge: string; declare const previewContainer: string; -declare const image: string; declare const previewLink: string; +declare const image: string; declare const content: string; declare const projectTitle: string; declare const imageRight: string; @@ -22,8 +22,8 @@ export { description, dateBadge, previewContainer, - image, previewLink, + image, content, projectTitle, imageRight, @@ -35,8 +35,8 @@ declare const __default_export__: { description: typeof description; dateBadge: typeof dateBadge; previewContainer: typeof previewContainer; - image: typeof image; previewLink: typeof previewLink; + image: typeof image; content: typeof content; projectTitle: typeof projectTitle; imageRight: typeof imageRight; diff --git a/src/features/Projects/Projects.spec.tsx b/src/features/Projects/Projects.spec.tsx index 6cd986c..b2bb95e 100644 --- a/src/features/Projects/Projects.spec.tsx +++ b/src/features/Projects/Projects.spec.tsx @@ -42,6 +42,9 @@ describe('Projects page', () => { expect(getHeading(/sealed\.vote/i)).toBeInTheDocument(); expect(getHeading(/expressplate/i)).toBeInTheDocument(); expect(getHeading(/aliases\.sh/i)).toBeInTheDocument(); + expect( + getHeading(/Battle Brothers Legends build planner/i), + ).toBeInTheDocument(); }); it('prioritizes only the first project grid image', () => { diff --git a/src/features/Projects/projectsData.ts b/src/features/Projects/projectsData.ts index 968462d..b98570f 100644 --- a/src/features/Projects/projectsData.ts +++ b/src/features/Projects/projectsData.ts @@ -124,25 +124,25 @@ export const PROJECTS = [ ], }, { - name: 'expressplate', - repo: 'expressplate', + name: 'Battle Brothers Legends build planner', + repo: 'battle-brothers-legends-browser', projectPreview: { - fileName: 'expressplate.webp', - width: 682, - height: 290, + fileName: 'battle-brothers-legends-browser.webp', + width: 1600, + height: 1000, }, - ogImage: 'expressplate_preview.jpg', + ogImage: 'battle-brothers-legends-browser_preview.jpg', ogImageAlt: - 'Terminal screenshot running expressplate in development with nodemon and tsx.', + 'Battle Brothers Legends build planner showing background rankings, perk details, search results and category filters.', programmingLanguage: 'TypeScript', technologies: [ 'typescript', - 'nodejs', - 'express', + 'react', + 'sass', 'vitejs', 'eslint', 'prettier', - 'sentry', + 'netlify', ], }, { @@ -159,6 +159,28 @@ export const PROJECTS = [ programmingLanguage: 'Bash', technologies: ['bash'], }, + { + name: 'expressplate', + repo: 'expressplate', + projectPreview: { + fileName: 'expressplate.webp', + width: 682, + height: 290, + }, + ogImage: 'expressplate_preview.jpg', + ogImageAlt: + 'Terminal screenshot running expressplate in development with nodemon and tsx.', + programmingLanguage: 'TypeScript', + technologies: [ + 'typescript', + 'nodejs', + 'express', + 'vitejs', + 'eslint', + 'prettier', + 'sentry', + ], + }, { name: 'tiles.town', repo: 'tiles-town', diff --git a/src/utils/build/generateOgImageSizes.ts b/src/utils/build/generateOgImageSizes.ts index a9f79ff..989b911 100644 --- a/src/utils/build/generateOgImageSizes.ts +++ b/src/utils/build/generateOgImageSizes.ts @@ -37,10 +37,12 @@ const imageSizes = imageFiles.map((fileName) => { return { fileName, width, height }; }); -const generatedEntries = imageSizes.map( - ({ fileName, width, height }) => - ` '${fileName}': { width: ${String(width)}, height: ${String(height)} },`, -); +const generatedEntries = imageSizes.flatMap(({ fileName, width, height }) => [ + ` '${fileName}': {`, + ` width: ${String(width)},`, + ` height: ${String(height)},`, + ' },', +]); const fileContents = [ 'type OgImageSize = { width: number; height: number };', diff --git a/src/utils/media/ogImageSizes.generated.ts b/src/utils/media/ogImageSizes.generated.ts index 305cdcc..3bb4fab 100644 --- a/src/utils/media/ogImageSizes.generated.ts +++ b/src/utils/media/ogImageSizes.generated.ts @@ -1,15 +1,52 @@ type OgImageSize = { width: number; height: number }; export const OG_IMAGE_SIZES: Partial> = { - 'aliases.sh_preview.jpg': { width: 833, height: 622 }, - 'bob_preview.jpg': { width: 1542, height: 720 }, - 'expressplate_preview.jpg': { width: 682, height: 290 }, - 'particle-golf_preview.jpg': { width: 1442, height: 720 }, - 'piech.dev_contact.jpg': { width: 1031, height: 412 }, - 'piech.dev_projects.jpg': { width: 1235, height: 1279 }, - 'piotr.jpg': { width: 1063, height: 1535 }, - 'reactplate_preview.jpg': { width: 1353, height: 882 }, - 'sealed.vote_preview.jpg': { width: 1630, height: 810 }, - 'threshold-elgamal_preview.jpg': { width: 1196, height: 683 }, - 'tiles.town_preview.jpg': { width: 1274, height: 716 }, + 'aliases.sh_preview.jpg': { + width: 833, + height: 622, + }, + 'battle-brothers-legends-browser_preview.jpg': { + width: 1600, + height: 1000, + }, + 'bob_preview.jpg': { + width: 1542, + height: 720, + }, + 'expressplate_preview.jpg': { + width: 682, + height: 290, + }, + 'particle-golf_preview.jpg': { + width: 1442, + height: 720, + }, + 'piech.dev_contact.jpg': { + width: 1031, + height: 412, + }, + 'piech.dev_projects.jpg': { + width: 1235, + height: 1279, + }, + 'piotr.jpg': { + width: 1063, + height: 1535, + }, + 'reactplate_preview.jpg': { + width: 1353, + height: 882, + }, + 'sealed.vote_preview.jpg': { + width: 1630, + height: 810, + }, + 'threshold-elgamal_preview.jpg': { + width: 1196, + height: 683, + }, + 'tiles.town_preview.jpg': { + width: 1274, + height: 716, + }, };