feat: migrated home page

packages/website-legacy/package.json

@@ -9,13 +9,13 @@
   },
   "dependencies": {
     "@radix-ui/themes": "^3.1.3",
+    "@radix-ui/react-icons": "^1.3.0",
     "@blitzkit/core": "workspace:*",
     "fuzzysort": "^2.0.4",
     "@nivo/bar": "^0.87.0",
     "three": "0.159.0",
     "lodash": "^4.17.21",
     "next": "^14.2.7",
-    "@radix-ui/react-icons": "^1.3.0",
     "three-stdlib": "^2.32.2",
     "@react-three/drei": "^9.111.5",
     "@react-three/fiber": "^8.17.6",

packages/website-legacy/src/app/components/ToolCard.tsx

@@ -1,128 +0,0 @@
-import { assertSecret, imgur, ImgurSize } from '@blitzkit/core';
-import { CaretRightIcon } from '@radix-ui/react-icons';
-import {
-  Box,
-  Button,
-  Code,
-  Flex,
-  FlexProps,
-  Heading,
-  Text,
-} from '@radix-ui/themes';
-import { Link } from '../../components/Link';
-import { Tool } from '../../constants/tools';
-
-type ToolCardProps = FlexProps & {
-  tool: Tool;
-};
-
-export function ToolCard({ tool, style, ...props }: ToolCardProps) {
-  const size = tool.significant
-    ? ImgurSize.HugeThumbnail
-    : ImgurSize.LargeThumbnail;
-  const unavailableOnBranch = tool.branches?.every(
-    (branch) => branch !== assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH),
-  );
-
-  return (
-    <Flex
-      style={{
-        opacity: unavailableOnBranch ? 0.25 : 1,
-        position: 'relative',
-        borderRadius: 'var(--radius-2)',
-        overflow: 'hidden',
-        backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size })})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        height: tool.significant ? 'min(320px, 50vh)' : '256px',
-        ...style,
-      }}
-      flexGrow={tool.significant ? undefined : '1'}
-      flexBasis={tool.significant ? undefined : { initial: undefined, sm: '0' }}
-      {...props}
-    >
-      <Link
-        disabled={unavailableOnBranch}
-        href={tool.href ?? `/tools/${tool.id}`}
-        target={tool.href ? '_blank' : undefined}
-        style={{
-          display: 'flex',
-          width: '100%',
-          height: '100%',
-          flexDirection: 'column',
-          textDecoration: 'none',
-          color: 'inherit',
-        }}
-      >
-        <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"
-            >
-              {unavailableOnBranch ? (
-                <>
-                  Unavailable on{' '}
-                  <Code>
-                    {assertSecret(process.env.NEXT_PUBLIC_ASSET_BRANCH)}
-                  </Code>
-                </>
-              ) : (
-                tool.description
-              )}
-            </Text>
-          </Flex>
-
-          {!unavailableOnBranch && (
-            <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-legacy/src/app/page.tsx

@@ -10,97 +10,97 @@ import {
   sessionTool,
   tankopediaTool,
   tankPerformanceTool,
-} from '../constants/tools';
+} from '../../../website/src/constants/tools';
 import { useAdExempt } from '../hooks/useAdExempt';
 import { Hero } from './components/Hero';
 import { Plugs } from './components/Plugs';
-import { ToolCard } from './components/ToolCard';
+import { ToolCard } from '../../../website/src/components/ToolCard';
 
 export default function Page() {
   const exempt = useAdExempt();
 
   return (
     <>
-      <Hero />
+    <Hero />
 
-      <Plugs />
+    <Plugs />
 
-      <Flex p="4" justify="center" gap="4">
-        <Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">
-          <ToolCard tool={tankopediaTool} />
+    <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 gap="4" direction={{ initial: 'column', sm: 'row' }}>
+          {/* <ToolCard tool={playerStatsTool} /> */}
+          <ToolCard tool={compareTool} />
+          <ToolCard tool={tankPerformanceTool} />
+        </Flex>
+
+        {!exempt && (
+          <Flex justify="center">
+            <AdMidSectionResponsive />
           </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>
 
-          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-            <ToolCard tool={sessionTool} />
-            {/* <ToolCard tool={embedTool} /> */}
-            <ToolCard tool={ratingTool} />
+        {!exempt && (
+          <Flex
+            justify="center"
+            display={{
+              initial: 'flex',
+              md: 'none',
+            }}
+          >
+            <AdMidSectionResponsive />
           </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>
 
-          <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-            <ToolCard tool={discordTool} />
-            <ToolCard tool={moreTool} />
-          </Flex>
+        {!exempt && <AdMidSectionResponsive />}
 
-          {!exempt && <AdMidSectionResponsive />}
+        <Heading>Other cool projects</Heading>
 
-          <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 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 style={{ flex: 1 }} />
     </>
   );
 }

packages/website-legacy/src/app/tools/layout.tsx

@@ -4,7 +4,7 @@ import { imgur, ImgurSize } from '@blitzkit/core';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { ReactNode } from 'react';
-import { TOOLS } from '../../constants/tools';
+import { TOOLS } from '../../../../website/src/constants/tools';
 
 export default function Layout({ children }: { children: ReactNode }) {
   const pathname = usePathname();

packages/website-legacy/src/components/Navbar/index.tsx

@@ -30,7 +30,7 @@ import {
 import { usePathname } from 'next/navigation';
 import { Fragment, Suspense, useState } from 'react';
 import { BRANCH_NAMES } from '../../app/components/Hero/constants';
-import { homeTool, TOOLS } from '../../constants/tools';
+import { homeTool, TOOLS } from '../../../../website/src/constants/tools';
 import * as App from '../../stores/app';
 import { Link } from '../Link';
 import { PatreonIcon } from '../PatreonIcon';

packages/website-legacy/src/constants/tools.tsx

@@ -1,160 +0,0 @@
-import { Button } from '@radix-ui/themes';
-import { 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-legacy/tsconfig.json

@@ -12,5 +12,5 @@
     ".next/types/**/*.ts",
     "../../dist/website/types/**/*.ts",
     "dist/website/types/**/*.ts"
-  ]
+, "../website/src/components/ToolCard.tsx", "../website/src/constants/tools.tsx"  ]
 }