fix: seo

packages/website/src/components/PageWrapper.tsx

@@ -1,11 +1,11 @@
-import { Flex, type FlexProps, Theme } from '@radix-ui/themes';
-import type { ComponentProps } from 'react';
-import { NAVBAR_HEIGHT } from '../constants/navbar';
-import type { RadixSize } from '../stores/embedState';
-import { BlitzKitTheme } from './BlitzKitTheme';
+import { Flex, type FlexProps, Theme } from "@radix-ui/themes";
+import type { ComponentProps } from "react";
+import { NAVBAR_HEIGHT } from "../constants/navbar";
+import type { RadixSize } from "../stores/embedState";
+import { BlitzKitTheme } from "./BlitzKitTheme";
 
 type PageWrapperProps = FlexProps & {
-  color?: ComponentProps<typeof Theme>['accentColor'];
+  color?: ComponentProps<typeof Theme>["accentColor"];
   containerProps?: ComponentProps<typeof Theme>;
   noFlex1?: boolean;
   padding?: RadixSize;
@@ -19,7 +19,7 @@ export function PageWrapper({
   noFlex1 = false,
   containerProps,
   noMinHeight = false,
-  padding = '4',
+  padding = "4",
   ...props
 }: PageWrapperProps) {
   return (
@@ -27,9 +27,9 @@ export function PageWrapper({
       accentColor={color}
       style={{
         flex: noFlex1 ? undefined : 1,
-        display: 'flex',
-        minHeight: noMinHeight ? 'unset' : `calc(100svh - ${NAVBAR_HEIGHT}px)`,
-        flexDirection: 'column',
+        display: "flex",
+        minHeight: noMinHeight ? "unset" : `calc(100svh - ${NAVBAR_HEIGHT}px)`,
+        flexDirection: "column",
         ...containerProps?.style,
       }}
       {...containerProps}
@@ -41,8 +41,8 @@ export function PageWrapper({
         width="100%"
         maxWidth="80rem"
         style={{
-          margin: 'auto',
-          boxSizing: 'border-box',
+          margin: "auto",
+          boxSizing: "border-box",
           flex: 1,
           ...style,
         }}

packages/website/src/pages/[...locale]/mixer/index.astro

@@ -1,5 +1,6 @@
 ---
-import { PageWrapper } from "../../../components/PageWrapper";
+import ToolOpenGraph from "../../../components/ToolOpenGraph.astro";
+import { tools } from "../../../constants/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 import { Page } from "./_index";
 
@@ -8,8 +9,10 @@ export { getStaticPaths } from "../index.astro";
 const { locale } = Astro.params;
 ---
 
+<ToolOpenGraph tool={tools.mixer} />
+
 <BaseLayout integrated>
-    <Page {locale} client:only="react">
-      <Page {locale} skeleton slot="fallback" />
-    </Page>
- </BaseLayout>
+  <Page {locale} client:only="react">
+    <Page {locale} skeleton slot="fallback" />
+  </Page>
+</BaseLayout>