blitzkit/packages/website/src/components/ToolOpenGraph.astro

---
import { AstroSeo } from "@astrolib/seo";
import type { Tool } from "../constants/tools";
import { getStrings } from "../core/i18n/getStrings";

interface Props {
  tool: Tool;
  locale: string;
}

const { locale, tool } = Astro.props;
const strings = getStrings(locale);
const toolStrings =
  strings.website.tools[
    (tool.strings ?? tool.id) as keyof typeof strings.website.tools
  ];
---

<AstroSeo
  title={toolStrings.name}
  description={toolStrings.seo_description}
  canonical={Astro.url.href}
  openGraph={{
    url: Astro.url.href,
    images: [
      {
        url: `${Astro.url.origin}/assets/images/tools/${tool.id}.webp`,
      },
    ],
    title: toolStrings.name,
    description: toolStrings.seo_description,
    site_name: "BlitzKit",
  }}
  twitter={{ cardType: "summary_large_image" }}
/>