From 2dd8ffe570e7e7f97744757f8dd6dec387d44073 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 28 Nov 2024 13:35:18 -0600
Subject: [PATCH] fix: compare tool embed

---
 .../src/components/ToolOpenGraph.astro        | 22 +++++++++++++++++++
 packages/website/src/layouts/ToolLayout.astro | 15 +++----------
 .../src/pages/tools/compare/index.astro       |  4 +++-
 3 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 packages/website/src/components/ToolOpenGraph.astro

diff --git a/packages/website/src/components/ToolOpenGraph.astro b/packages/website/src/components/ToolOpenGraph.astro
new file mode 100644
index 000000000..480972af7
--- /dev/null
+++ b/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} />
+    </>
+  )
+}
diff --git a/packages/website/src/layouts/ToolLayout.astro b/packages/website/src/layouts/ToolLayout.astro
index 696cec1d7..d86483200 100644
--- a/packages/website/src/layouts/ToolLayout.astro
+++ b/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, {
diff --git a/packages/website/src/pages/tools/compare/index.astro b/packages/website/src/pages/tools/compare/index.astro
index d01741d20..518668228 100644
--- a/packages/website/src/pages/tools/compare/index.astro
+++ b/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 />