fix: better layouts

packages/website/src/constants/tools.ts

@@ -114,7 +114,7 @@ export const playerStatsTool: Tool = {
   branches: ['main', 'dev'],
 };
 
-export const tankPerformanceTool: Tool = {
+export const performanceTool: Tool = {
   id: 'performance',
   title: 'Performance',
   description: 'Tank performance statistics',
@@ -153,7 +153,7 @@ export const homeTool: Tool = {
 export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
-  tankPerformanceTool,
+  performanceTool,
   sessionTool,
   embedTool,
   // ratingTool,

packages/website/src/layouts/ToolLayout.astro

@@ -1,55 +1,51 @@
 ---
 import { imgur, ImgurSize } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
-import { TOOLS } from '../constants/tools';
+import { type Tool } from '../constants/tools';
-import RootLayout from './RootLayout.astro';
+import BaseLayout from './BaseLayout.astro';
 
-const { pathname } = Astro.url;
+interface Props {
-const pathSplit = pathname.split('/');
+  tool: Tool;
-const toolId = pathSplit.at(2);
+}
-const isToolRoot = pathname === `/tools/${toolId}`;
+
-const tool = TOOLS.find((tool) => tool.id === toolId);
+const { tool } = Astro.props;
 ---
 
-<RootLayout>
+<BaseLayout>
+  <title>{tool.title}</title>
+  <meta property="og:image" content={imgur(tool.image)} />
+
   {
-    tool && isToolRoot && (
+    tool.pageDescription !== undefined && (
       <>
-        <title>{tool.title}</title>
+        <meta name="description" content={tool.pageDescription} />
-        <meta property="og:image" content={imgur(tool.image)} />
+        <meta property="og:description" content={tool.pageDescription} />
-
-        {tool.pageDescription !== undefined && (
-          <>
-            <meta name="description" content={tool.pageDescription} />
-            <meta property="og:description" content={tool.pageDescription} />
-          </>
-        )}
-
-        <Box
-          style={{
-            backgroundImage: `url(${imgur(tool!.image, {
-              format: 'jpeg',
-              size: ImgurSize.SmallThumbnail,
-            })})`,
-            backgroundSize: 'cover',
-          }}
-        >
-          <Flex
-            direction="column"
-            align="center"
-            py="6"
-            style={{
-              backdropFilter: 'blur(4rem)',
-              WebkitBackdropFilter: 'blur(4rem)',
-            }}
-          >
-            <Heading size="7">{tool?.title}</Heading>
-            <Text>{tool?.description}</Text>
-          </Flex>
-        </Box>
       </>
     )
   }
 
+  <Box
+    style={{
+      backgroundImage: `url(${imgur(tool!.image, {
+        format: 'jpeg',
+        size: ImgurSize.SmallThumbnail,
+      })})`,
+      backgroundSize: 'cover',
+    }}
+  >
+    <Flex
+      direction="column"
+      align="center"
+      py="6"
+      style={{
+        backdropFilter: 'blur(4rem)',
+        WebkitBackdropFilter: 'blur(4rem)',
+      }}
+    >
+      <Heading size="7">{tool?.title}</Heading>
+      <Text>{tool?.description}</Text>
+    </Flex>
+  </Box>
+
   <slot />
-</RootLayout>
+</BaseLayout>

packages/website/src/pages/404.astro

@@ -2,10 +2,10 @@
 import { DiscordLogoIcon, HomeIcon } from '@radix-ui/react-icons';
 import { Button, Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { PageWrapper } from '../components/PageWrapper';
-import RootLayout from '../layouts/RootLayout.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
-<RootLayout>
+<BaseLayout>
   <PageWrapper>
     <Flex direction="column" justify="center" align="center" flexGrow="1">
       <Heading>404: page not found</Heading>
@@ -25,4 +25,4 @@ import RootLayout from '../layouts/RootLayout.astro';
       </Flex>
     </Flex>
   </PageWrapper>
-</RootLayout>
+</BaseLayout>

packages/website/src/pages/auth/[provider]/index.astro

@@ -2,7 +2,7 @@
 import { Flex, Heading, Text } from '@radix-ui/themes';
 import type { GetStaticPaths } from 'astro';
 import { PageWrapper } from '../../../components/PageWrapper';
-import RootLayout from '../../../layouts/RootLayout.astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { AUTH_PROVIDERS, AUTH_PROVIDER_NAMES, Authorize } from './_index';
 
 export const getStaticPaths = (() => {
@@ -12,7 +12,7 @@ export const getStaticPaths = (() => {
 const { provider } = Astro.params;
 ---
 
-<RootLayout>
+<BaseLayout>
   <PageWrapper>
     <Flex
       style={{ flex: 1 }}
@@ -29,4 +29,4 @@ const { provider } = Astro.params;
   </PageWrapper>
 
   <Authorize client:only="react" {provider} />
-</RootLayout>
+</BaseLayout>

packages/website/src/pages/docs/[directory]/[document]/index.astro

@@ -1,8 +1,8 @@
 ---
 import type { GetStaticPaths } from 'astro';
 import { readFile } from 'fs/promises';
+import BaseLayout from '../../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
-import RootLayout from '../../../../layouts/RootLayout.astro';
 
 export const getStaticPaths = (async () => {
   const ROOT = '../../../../../../../docs/';
@@ -30,6 +30,6 @@ const { content } = Astro.props;
 ---
 
 <!-- <title>{title}</title> -->
-<RootLayout>
+<BaseLayout>
   <Page content={content} />
-</RootLayout>
+</BaseLayout>

packages/website/src/pages/docs/patches/index.astro

@@ -3,7 +3,7 @@ import { MagicWandIcon, StarFilledIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, Link } from '@radix-ui/themes';
 import { compareVersions } from 'compare-versions';
 import { PageWrapper } from '../../../components/PageWrapper';
-import RootLayout from '../../../layouts/RootLayout.astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
 
 // this can't be used in template literal :(
 const ROOT = '../../../../../../docs/changelogs/';
@@ -18,7 +18,7 @@ const versions = Object.keys(
   .reverse();
 ---
 
-<RootLayout>
+<BaseLayout>
   <PageWrapper align="center">
     <Heading mt="6" mb="4">BlitzKit patches</Heading>
 
@@ -45,4 +45,4 @@ const versions = Object.keys(
       }
     </Flex>
   </PageWrapper>
-</RootLayout>
+</BaseLayout>

packages/website/src/pages/index.astro

@@ -8,14 +8,14 @@ import {
   compareTool,
   discordTool,
   moreTool,
+  performanceTool,
   sessionTool,
   tankopediaTool,
-  tankPerformanceTool,
 } from '../constants/tools';
-import RootLayout from '../layouts/RootLayout.astro';
+import BaseLayout from '../layouts/BaseLayout.astro';
 ---
 
-<RootLayout>
+<BaseLayout>
   <HomeHero />
 
   <Plugs />
@@ -29,7 +29,7 @@ import RootLayout from '../layouts/RootLayout.astro';
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         {/* <ToolCard tool={playerStatsTool} /> */}
         <ToolCard tool={compareTool} />
-        <ToolCard tool={tankPerformanceTool} />
+        <ToolCard tool={performanceTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
@@ -81,4 +81,4 @@ import RootLayout from '../layouts/RootLayout.astro';
   </Flex>
 
   <div style={{ flex: 1 }}></div>
-</RootLayout>
+</BaseLayout>

packages/website/src/pages/legal/ccpa/index.astro

@@ -1,13 +1,13 @@
 ---
 import { Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { PageWrapper } from '../../../components/PageWrapper';
-import RootLayout from '../../../layouts/RootLayout.astro';
+import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { Options } from './_index';
 ---
 
 <title>California Consumer Privacy Act (CCPA)</title>
 
-<RootLayout>
+<BaseLayout>
   <PageWrapper justify="center">
     <Flex direction="column">
       <Heading mb="2">California Consumer Privacy Act (CCPA)</Heading>
@@ -22,4 +22,4 @@ import { Options } from './_index';
 
     <Options client:load />
   </PageWrapper>
-</RootLayout>
+</BaseLayout>

packages/website/src/pages/settings/index.astro

@@ -1,8 +1,8 @@
 ---
+import BaseLayout from '../../layouts/BaseLayout.astro';
 import { Page } from './_index';
-import RootLayout from '../../layouts/RootLayout.astro';
 ---
 
-<RootLayout>
+<BaseLayout>
   <Page client:load />
-</RootLayout>
+</BaseLayout>

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

@@ -1,8 +1,9 @@
 ---
+import { compareTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
 import { Page } from './_index';
 ---
 
-<ToolLayout>
+<ToolLayout tool={compareTool}>
   <Page client:load />
 </ToolLayout>

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

@@ -1,8 +1,9 @@
 ---
-import { Page } from './_index';
+import { performanceTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
 ---
 
-<ToolLayout>
+<ToolLayout tool={performanceTool}>
   <Page client:load />
 </ToolLayout>

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

@@ -1,8 +1,9 @@
 ---
+import { sessionTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
 import { Page } from './_index';
 ---
 
-<ToolLayout>
+<ToolLayout tool={sessionTool}>
   <Page client:load />
 </ToolLayout>

packages/website/src/pages/tools/tankopedia/[id]/index.astro

@@ -2,7 +2,7 @@
 import { fetchTankDefinitions, TIER_ROMAN_NUMERALS } from '@blitzkit/core';
 import strings from '@blitzkit/core/lang/en-US.json';
 import type { GetStaticPaths } from 'astro';
-import ToolLayout from '../../../../layouts/ToolLayout.astro';
+import BaseLayout from '../../../../layouts/BaseLayout.astro';
 import { Page } from './_index';
 
 export const getStaticPaths = (async () => {
@@ -29,6 +29,6 @@ const tank = tankDefinitions.tanks[id];
   {strings.common.tank_class_short[tank.class]}
 </title>
 
-<ToolLayout>
+<BaseLayout>
   <Page id={id} client:load />
-</ToolLayout>
+</BaseLayout>

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

@@ -1,8 +1,9 @@
 ---
+import { tankopediaTool } from '../../../constants/tools';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
 import { Page } from './_index';
 ---
 
-<ToolLayout>
+<ToolLayout tool={tankopediaTool}>
   <Page client:load />
 </ToolLayout>