feat: tools layout

packages/website/src/layouts/ToolLayout.astro

@@ -0,0 +1,66 @@
+---
+import { imgur, ImgurSize } from '@blitzkit/core';
+import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { TOOLS } from '../constants/tools';
+import RootLayout from './RootLayout.astro';
+
+const { pathname } = Astro.url;
+const pathSplit = pathname.split('/');
+const toolId = pathSplit.at(2);
+const isToolRoot = pathname === `/tools/${toolId}`;
+const tool = TOOLS.find((tool) => tool.id === toolId);
+---
+
+<RootLayout>
+  {
+    tool && (
+      <>
+        {isToolRoot && (
+          <>
+            <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}
+                />
+              </>
+            )}
+          </>
+        )}
+      </>
+    )
+  }
+
+  {
+    pathSplit.length === 3 && (
+      <Box
+        style={{
+          backgroundImage: `url(${imgur(tool!.image, {
+            format: 'jpeg',
+            size: ImgurSize.HugeThumbnail,
+          })})`,
+          backgroundSize: 'cover',
+        }}
+      >
+        <Flex
+          direction="column"
+          align="center"
+          py="6"
+          style={{
+            backdropFilter: 'blur(4rem)',
+            WebkitBackdropFilter: 'blur(4rem)',
+          }}
+        >
+          <Heading size="8">{tool?.title}</Heading>
+          <Text color="gray">{tool?.description}</Text>
+        </Flex>
+      </Box>
+    )
+  }
+
+  <slot />
+</RootLayout>

packages/website/src/pages/TestComponent.tsx

@@ -1,21 +0,0 @@
-import { Button, Flex, Popover, Text } from '@radix-ui/themes';
-import { BlitzKitTheme } from '../components/BlitzKitTheme';
-
-export function TestComponent() {
-  return (
-    <Popover.Root>
-      <Popover.Trigger>
-        <Button>Radix UI</Button>
-      </Popover.Trigger>
-
-      <BlitzKitTheme>
-        <Popover.Content>
-          <Flex direction="column">
-            <Text>I should be in a dark mode popover</Text>
-            <Button>And I should be yellow and have full border radius!</Button>
-          </Flex>
-        </Popover.Content>
-      </BlitzKitTheme>
-    </Popover.Root>
-  );
-}

packages/website/src/pages/test.astro

@@ -1,16 +0,0 @@
----
-import { BlitzKitTheme } from '../components/BlitzKitTheme';
-import { TestComponent } from './TestComponent';
----
-
-<style is:global>
-  @import '@radix-ui/themes/styles.css';
-</style>
-
-<html>
-  <body>
-    <BlitzKitTheme>
-      <TestComponent client:idle />
-    </BlitzKitTheme>
-  </body>
-</html>

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

@@ -0,0 +1,7 @@
+---
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+---
+
+<ToolLayout>
+  <slot />
+</ToolLayout>