fix: compare tool embed

packages/website/src/components/ToolOpenGraph.astro

@@ -0,0 +1,22 @@
+---
+import { imgur } from '@blitzkit/core';
+import { type Tool } from '../constants/tools';
+
+interface Props {
+  tool: Tool;
+}
+
+const { tool } = Astro.props;
+---
+
+<title>{tool.title}</title>
+<meta property="og:image" content={imgur(tool.image)} />
+
+{
+  tool.pageDescription !== undefined && (
+    <>
+      <meta name="description" content={tool.pageDescription} />
+      <meta property="og:description" content={tool.pageDescription} />
+    </>
+  )
+}

packages/website/src/layouts/ToolLayout.astro

@@ -1,6 +1,7 @@
 ---
 import { imgur, ImgurSize } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import ToolOpenGraph from '../components/ToolOpenGraph.astro';
 import { type Tool } from '../constants/tools';
 import BaseLayout from './BaseLayout.astro';
 
@@ -11,19 +12,9 @@ interface Props {
 const { tool } = Astro.props;
 ---
 
+<ToolOpenGraph tool={tool} />
+
 <BaseLayout>
-  <title>{tool.title}</title>
-  <meta property="og:image" content={imgur(tool.image)} />
-
-  {
-    tool.pageDescription !== undefined && (
-      <>
-        <meta name="description" content={tool.pageDescription} />
-        <meta property="og:description" content={tool.pageDescription} />
-      </>
-    )
-  }
-
   <Box
     style={{
       backgroundImage: `url(${imgur(tool!.image, {

packages/website/src/pages/tools/compare/index.astro

@@ -1,9 +1,11 @@
 ---
+import ToolOpenGraph from '../../../components/ToolOpenGraph.astro';
+import { compareTool } from '../../../constants/tools';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
 ---
 
-<title>Compare</title>
+<ToolOpenGraph tool={compareTool} />
 
 <BaseLayout noFooter>
   <Page client:load />