feat: preview image

src/app/tools/tankopedia/[id]/components/Title.tsx

@@ -13,8 +13,6 @@ export function Title() {
 
   return (
     <>
-      <title>{protagonist.tank.name}</title>
-
       <Flex gap="6" justify="center" align="center" style={{ padding: 16 }}>
         <Flex gap="2" align="center">
           <Heading

src/app/tools/tankopedia/[id]/layout.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { tankDefinitions } from '../../../../core/blitzkrieg/tankDefinitions';
+import { tankIcon } from '../../../../core/blitzkrieg/tankIcon';
+
+interface TankopediaLayoutProps {
+  children: ReactNode;
+  params: { id: string };
+}
+
+export default async function TankopediaLayout({
+  children,
+  params,
+}: TankopediaLayoutProps) {
+  const id = Number(params.id);
+  const awaitedTankDefinitions = await tankDefinitions;
+  const tank = awaitedTankDefinitions[id];
+
+  return (
+    <>
+      <title>{tank.name}</title>
+      <meta
+        name="description"
+        content={`Statistics, armor profiles, equipment, and more about ${tank.name}`}
+      />
+      <meta property="og:image" content={tankIcon(id)} />
+
+      {children}
+    </>
+  );
+}