feat: migrated home page

packages/website/src/components/ToolCard.astro

@@ -0,0 +1,136 @@
+---
+import { assertSecret, imgur, ImgurSize } from '@blitzkit/core';
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Box, Button, Code, Flex, Heading, Link, Text } from '@radix-ui/themes';
+import type { Tool } from '../constants/tools';
+
+interface Props {
+  tool: Tool;
+}
+
+const { tool } = Astro.props;
+const disabled = tool.branches?.every(
+  (branch) => branch !== assertSecret(process.env.PUBLIC_ASSET_BRANCH),
+);
+---
+
+<style>
+  .container {
+    border-radius: var(--radius-2);
+    background-size: cover;
+    background-position: center;
+    height: 16rem;
+
+    &[data-disabled='true'] {
+      opacity: 0.25;
+    }
+
+    &[data-significant='true'] {
+      height: min(20rem, 50vh);
+    }
+  }
+
+  .link {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    flex-direction: column;
+    color: inherit;
+  }
+</style>
+
+<Flex
+  data-disabled={disabled}
+  data-significant={tool.significant}
+  className="container"
+  position="relative"
+  overflow="hidden"
+  style={{
+    backgroundImage: `url(${imgur(tool.image, {
+      format: 'jpeg',
+      size: tool.significant
+        ? ImgurSize.HugeThumbnail
+        : ImgurSize.LargeThumbnail,
+    })})`,
+  }}
+  flexGrow={tool.significant ? undefined : '1'}
+  flexBasis={tool.significant ? undefined : { initial: undefined, sm: '0' }}
+>
+  <Link
+    className="link"
+    underline="none"
+    href={disabled ? '#' : (tool.href ?? `/tools/${tool.id}`)}
+    target={tool.href ? '_blank' : undefined}
+  >
+    <Box
+      flexGrow="1"
+      style={{
+        // backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    />
+
+    <Flex
+      px={{ initial: '6', md: tool.significant ? '8' : '6' }}
+      py={{ initial: '4', sm: tool.significant ? '6' : '4' }}
+      gap="4"
+      align="center"
+      justify="between"
+      width="100%"
+      direction={{ initial: 'column', xs: 'row' }}
+      style={{
+        backgroundColor: 'var(--color-panel-translucent)',
+        backdropFilter: 'blur(64px)',
+        WebkitBackdropFilter: 'blur(64px)',
+      }}
+    >
+      <Flex
+        direction="column"
+        justify="center"
+        align={{ initial: 'center', xs: 'start' }}
+      >
+        <Heading
+          align={{ initial: 'center', sm: 'left' }}
+          size={{ initial: '6', sm: tool.significant ? '7' : '5' }}
+          weight="medium"
+        >
+          {tool.title}
+        </Heading>
+        <Text
+          align={{ initial: 'center', sm: 'left' }}
+          size={{ initial: '3', sm: tool.significant ? '4' : '3' }}
+          color="gray"
+        >
+          {
+            disabled ? (
+              <>
+                Unavailable on{' '}
+                <Code>{assertSecret(process.env.PUBLIC_ASSET_BRANCH)}</Code>
+              </>
+            ) : (
+              tool.description
+            )
+          }
+        </Text>
+      </Flex>
+
+      {
+        !disabled && (
+          <Button
+            highContrast={tool.button.highContrast}
+            size={{
+              initial: undefined,
+              sm: tool.significant ? '3' : undefined,
+            }}
+            color={tool.button.color}
+            style={{ cursor: 'inherit' }}
+          >
+            {tool.button.text}
+            <CaretRightIcon />
+          </Button>
+        )
+      }
+    </Flex>
+  </Link>
+</Flex>

packages/website/src/constants/tools.ts

@@ -0,0 +1,160 @@
+import { Button } from '@radix-ui/themes';
+import type { ComponentProps } from 'react';
+
+export interface Tool {
+  id: string;
+  image: string;
+  title: string;
+  description: string;
+  disabled?: boolean;
+  href?: string;
+  pageDescription?: string;
+  button: {
+    highContrast?: boolean;
+    text: string;
+    color: ComponentProps<typeof Button>['color'];
+  };
+  significant?: boolean;
+  branches?: string[];
+}
+
+export const tankopediaTool: Tool = {
+  id: 'tankopedia',
+  title: 'Tankopedia',
+  description: 'Blitz tank encyclopedia',
+  pageDescription:
+    'Statistics, armor, and more for all tanks in World of Tanks Blitz',
+  image: 'D8j6GZx',
+  button: {
+    text: 'Find your tank',
+    color: 'purple',
+  },
+  significant: true,
+  branches: ['main', 'dev', 'opentest'],
+};
+
+export const ratingTool: Tool = {
+  id: 'rating',
+  title: 'Rating',
+  description: 'Full rating leaderboard',
+  pageDescription:
+    'Live and archived full rating leaderboard for World of Tanks Blitz',
+  image: 'WEyMZH3',
+  button: {
+    text: 'View leaderboard',
+    color: 'orange',
+  },
+  branches: ['main', 'dev'],
+};
+
+export const compareTool: Tool = {
+  id: 'compare',
+  title: 'Compare',
+  description: 'Compare tank statistics',
+  pageDescription:
+    'Compare tanks statistics and loadouts in World of Tanks Blitz',
+  image: 'O6VNl6e',
+  button: {
+    text: 'Compare tanks',
+    color: 'crimson',
+  },
+  branches: ['main', 'dev', 'opentest'],
+};
+
+export const sessionTool: Tool = {
+  // TODO: rename to tracker
+  id: 'session',
+  title: 'Session',
+  description: 'Live session stats',
+  pageDescription:
+    'Track your stats in real time as you play World of Tanks Blitz',
+  image: 'HdG9sTf',
+  button: {
+    text: 'Start tracking',
+    color: 'blue',
+  },
+  branches: ['main', 'dev'],
+};
+
+export const discordTool: Tool = {
+  id: 'discord',
+  title: 'Discord bot',
+  description: 'Stats right in Discord',
+  href: 'https://discord.com/application-directory/1097673957865443370',
+  image: '0bWE5hC',
+  button: {
+    text: 'Install now',
+    color: 'indigo',
+  },
+};
+
+export const moreTool: Tool = {
+  id: 'more',
+  title: 'More coming soon',
+  description: "What we're making",
+  href: 'https://discord.gg/nDt7AjGJQH',
+  image: '1nPm6VI',
+  button: {
+    text: 'Join Discord',
+    color: 'plum',
+  },
+};
+
+export const playerStatsTool: Tool = {
+  id: 'player-stats',
+  title: 'Player stats',
+  description: 'Periodical player statistics',
+  pageDescription: 'Periodical player statistics in World of Tanks Blitz',
+  button: {
+    text: 'Lookup player',
+    color: 'blue',
+  },
+  image: 'YelSOfT',
+  href: '_', // TODO: remove this to re-enable link
+  branches: ['main', 'dev'],
+};
+
+export const tankPerformanceTool: Tool = {
+  id: 'performance',
+  title: 'Performance',
+  description: 'Tank performance statistics',
+  pageDescription: 'Best tanks and their performances in World of Tanks Blitz',
+  button: {
+    text: 'View tanks',
+    color: 'jade',
+  },
+  image: 'vOKFB03',
+  branches: ['main', 'dev'],
+};
+
+export const embedTool: Tool = {
+  id: 'embed',
+  title: 'Embed',
+  description: 'Embeds for streaming',
+  pageDescription:
+    'Create embeds for streaming World of Tanks Blitz with extreme customization',
+  button: {
+    text: 'Create',
+    color: 'red',
+  },
+  image: 'Q0faRYg',
+  branches: ['main', 'dev', 'opentest'],
+  href: '',
+};
+
+export const homeTool: Tool = {
+  id: '',
+  title: 'Home',
+  button: { color: 'blue', text: '' },
+  description: '',
+  image: 'rUPie9G',
+};
+
+export const TOOLS: Tool[] = [
+  tankopediaTool,
+  compareTool,
+  tankPerformanceTool,
+  sessionTool,
+  embedTool,
+  ratingTool,
+];

packages/website/src/layouts/RootLayout.astro

@@ -0,0 +1,57 @@
+---
+import { Flex, Theme } from '@radix-ui/themes';
+import '@radix-ui/themes/styles.css';
+const { pathname } = Astro.url;
+
+const isRoot = pathname === '/';
+---
+
+<style>
+  body {
+    margin: 0;
+  }
+</style>
+
+<!-- MIGRATION TODO: roboto flex font -->
+<html lang="en">
+  <head>
+    {
+      isRoot && (
+        <>
+          <title>BlitzKit</title>
+          <meta
+            name="description"
+            content="🎉 Tools for everything World of Tanks Blitz"
+          />
+        </>
+      )
+    }
+    <meta property="og:site_name" content="BlitzKit" />
+    <link rel="icon" type="image/x-icon" href="/favicon.png" />
+
+    <!-- <Party3 /> -->
+  </head>
+
+  <body>
+    <Theme
+      appearance="dark"
+      panelBackground="solid"
+      radius="full"
+      accentColor="amber"
+      suppressHydrationWarning
+      suppressContentEditableWarning
+    >
+      <Flex direction="column" minHeight="100vh">
+        <!-- {!hideNav && <Navbar />} -->
+
+        <!-- <Checks /> -->
+
+        <!-- <Suspense fallback={(<PageLoader />)}> -->
+        <slot />
+        <!-- </Suspense> -->
+
+        <!-- {!hideNav && <Footer />} -->
+      </Flex>
+    </Theme>
+  </body>
+</html>

packages/website/src/pages/index.astro

@@ -1,16 +1,101 @@
 ---
+import { Flex, Heading } from '@radix-ui/themes';
+import ToolCard from '../components/ToolCard.astro';
+import {
+  compareTool,
+  discordTool,
+  moreTool,
+  ratingTool,
+  sessionTool,
+  tankopediaTool,
+  tankPerformanceTool,
+} from '../constants/tools';
+import RootLayout from '../layouts/RootLayout.astro';
+---
 
----
+<RootLayout>
+  <!-- <Hero /> -->
 
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <meta name="generator" content={Astro.generator} />
-    <title>Astro</title>
-  </head>
-  <body>
-    <h1>Astro</h1>
-  </body>
-</html>
+  <!-- <Plugs /> -->
+
+  <Flex p="4" justify="center" gap="4">
+    <Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
+      <ToolCard tool={tankopediaTool} />
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        {/* <ToolCard tool={playerStatsTool} /> */}
+        <ToolCard tool={compareTool} />
+        <ToolCard tool={tankPerformanceTool} />
+      </Flex>
+
+      <!-- {
+        !exempt && (
+          <Flex justify="center">
+            <AdMidSectionResponsive />
+          </Flex>
+        )
+      } -->
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={sessionTool} />
+        {/* <ToolCard tool={embedTool} /> */}
+        <ToolCard tool={ratingTool} />
+      </Flex>
+
+      <!-- {
+        !exempt && (
+          <Flex
+            justify="center"
+            display={{
+              initial: 'flex',
+              md: 'none',
+            }}
+          >
+            <AdMidSectionResponsive />
+          </Flex>
+        )
+      } -->
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={discordTool} />
+        <ToolCard tool={moreTool} />
+      </Flex>
+
+      <!-- {!exempt && <AdMidSectionResponsive />} -->
+
+      <Heading>Other cool projects</Heading>
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard
+          tool={{
+            button: {
+              text: 'Analyze',
+              color: 'blue',
+            },
+            description: 'Rich historic average stats',
+            id: 'blitz-analysis',
+            image: 'j76YXGl',
+            title: 'BlitzAnalysis[]',
+            href: 'https://blitzanalysiz.com/',
+          }}
+        />
+        <ToolCard
+          tool={{
+            button: {
+              color: 'purple',
+              text: 'Install',
+              highContrast: true,
+            },
+            image: 'zYrrYbR',
+            description: 'In-game session stats',
+            id: 'blitz-insider',
+            title: 'Blitz Insider',
+            href: 'https://discord.gg/UjWf9eGgtR',
+          }}
+        />
+      </Flex>
+    </Flex>
+  </Flex>
+
+  <div style={{ flex: 1 }}></div>
+</RootLayout>