Battle Brothers Legends mod build planner

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;

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', () => {

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',

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 };',

src/utils/media/ogImageSizes.generated.ts

@@ -1,15 +1,52 @@
 type OgImageSize = { width: number; height: number };
 
 export const OG_IMAGE_SIZES: Partial<Record<string, OgImageSize>> = {
-    '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,
+    },
 };