From 36583add1db6385f46aa8f15d9b6029016fc3434 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 17 Sep 2024 18:35:16 -0500
Subject: [PATCH] feat: tools layout

---
 packages/website/src/layouts/ToolLayout.astro | 66 +++++++++++++++++++
 packages/website/src/pages/TestComponent.tsx  | 21 ------
 packages/website/src/pages/test.astro         | 16 -----
 .../src/pages/tools/tankopedia/index.astro    |  7 ++
 4 files changed, 73 insertions(+), 37 deletions(-)
 create mode 100644 packages/website/src/layouts/ToolLayout.astro
 delete mode 100644 packages/website/src/pages/TestComponent.tsx
 delete mode 100644 packages/website/src/pages/test.astro
 create mode 100644 packages/website/src/pages/tools/tankopedia/index.astro

diff --git a/packages/website/src/layouts/ToolLayout.astro b/packages/website/src/layouts/ToolLayout.astro
new file mode 100644
index 000000000..357c4ae2a
--- /dev/null
+++ b/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>
diff --git a/packages/website/src/pages/TestComponent.tsx b/packages/website/src/pages/TestComponent.tsx
deleted file mode 100644
index 234f7ab73..000000000
--- a/packages/website/src/pages/TestComponent.tsx
+++ /dev/null
@@ -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>
-  );
-}
diff --git a/packages/website/src/pages/test.astro b/packages/website/src/pages/test.astro
deleted file mode 100644
index a8ef8d709..000000000
--- a/packages/website/src/pages/test.astro
+++ /dev/null
@@ -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>
diff --git a/packages/website/src/pages/tools/tankopedia/index.astro b/packages/website/src/pages/tools/tankopedia/index.astro
new file mode 100644
index 000000000..813aed701
--- /dev/null
+++ b/packages/website/src/pages/tools/tankopedia/index.astro
@@ -0,0 +1,7 @@
+---
+import ToolLayout from '../../../layouts/ToolLayout.astro';
+---
+
+<ToolLayout>
+  <slot />
+</ToolLayout>