feat: data-driven tools

packages/i18n/strings/en.json

@@ -1445,18 +1445,6 @@
         "button": "Get started",
         "description": "Get started with BlitzKit",
         "seo_description": "Get started with BlitzKit"
-      },
-      "blitz_analysis": {
-        "name": "BlitzAnalysis[]",
-        "button": "Analyze now",
-        "description": "Rich historic average stats",
-        "seo_description": "Rich historic average stats in World of Tanks Blitz"
-      },
-      "blitz_insider": {
-        "name": "Blitz Insider",
-        "button": "Discover today",
-        "description": "In-game session stats",
-        "seo_description": "In-game session stats in World of Tanks Blitz"
       }
     },
 

packages/website/src/components/Navbar.astro

@@ -1,24 +1,24 @@
 ---
-import { assertSecret } from '@blitzkit/core';
+import { assertSecret } from "@blitzkit/core";
 import {
   Cross1Icon,
   DiscordLogoIcon,
   GearIcon,
   HamburgerMenuIcon,
-} from '@radix-ui/react-icons';
+} from "@radix-ui/react-icons";
-import { Box, Code, Flex, IconButton, Link } from '@radix-ui/themes';
+import { Box, Code, Flex, IconButton, Link } from "@radix-ui/themes";
-import { TOOLS } from '../constants/tools';
+import { TOOLS } from "../constants/tools";
-import { resolveBranchName } from '../core/blitzkit/branches';
+import { resolveBranchName } from "../core/blitzkit/branches";
-import { getStrings } from '../core/i18n/getStrings';
+import { getStrings } from "../core/i18n/getStrings";
-import { Var } from '../core/radix/var';
+import { Var } from "../core/radix/var";
-import { LinkI18n } from './LinkI18n';
+import { LinkI18n } from "./LinkI18n";
 
 export interface Props {
   integrated?: boolean;
 }
 
 const { integrated = false } = Astro.props;
-const toolsFiltered = TOOLS.filter((tool) => !('href' in tool));
+const toolsFiltered = TOOLS.filter((tool) => !tool.href && !tool.disabled);
 const { locale } = Astro.params;
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
@@ -39,47 +39,47 @@ const strings = getStrings(locale);
     height: 0;
   }
 
-  .navbar[data-expanded='false'] *[data-expanded] {
+  .navbar[data-expanded="false"] *[data-expanded] {
     display: none;
   }
 
-  .navbar[data-expanded='true'] {
+  .navbar[data-expanded="true"] {
     height: 100%;
   }
 
-  .navbar[data-expanded='false'][data-integrated='false'] .content {
+  .navbar[data-expanded="false"][data-integrated="false"] .content {
     background-color: var(--black-a8);
     backdrop-filter: blur(4rem);
     box-shadow: var(--shadow-3);
   }
 
-  .navbar[data-expanded='true'] .content {
+  .navbar[data-expanded="true"] .content {
     background-color: var(--gray-1);
   }
 
-  .navbar[data-expanded='true'] *[data-closed] {
+  .navbar[data-expanded="true"] *[data-closed] {
     display: none;
   }
 </style>
 
 <script>
-  const navbar = document.querySelector<HTMLDivElement>('.navbar');
+  const navbar = document.querySelector<HTMLDivElement>(".navbar");
-  const hamburger = document.querySelector<HTMLButtonElement>('.hamburger');
+  const hamburger = document.querySelector<HTMLButtonElement>(".hamburger");
 
-  navbar?.addEventListener('click', () => {
+  navbar?.addEventListener("click", () => {
-    navbar.dataset.expanded = 'false';
+    navbar.dataset.expanded = "false";
   });
-  hamburger?.addEventListener('click', (event) => {
+  hamburger?.addEventListener("click", (event) => {
     if (!navbar) return;
 
     event.stopPropagation();
-    navbar.dataset.expanded = `${navbar.dataset.expanded === 'false'}`;
+    navbar.dataset.expanded = `${navbar.dataset.expanded === "false"}`;
   });
 </script>
 
 {
   !integrated && (
-    <Box className="padder" height={{ initial: '3.5rem', sm: '3rem' }} />
+    <Box className="padder" height={{ initial: "3.5rem", sm: "3rem" }} />
   )
 }
 
@@ -94,16 +94,16 @@ const strings = getStrings(locale);
   position="fixed"
   style={{
     zIndex: 1,
-    backdropFilter: 'blur(4rem)',
+    backdropFilter: "blur(4rem)",
   }}
 >
   <Flex
     className="content"
     width="100%"
-    p={{ initial: '4', sm: '3' }}
+    p={{ initial: "4", sm: "3" }}
     direction="column"
     align="center"
-    style={{ backgroundColor: integrated ? undefined : Var('gray-1') }}
+    style={{ backgroundColor: integrated ? undefined : Var("gray-1") }}
   >
     <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
       <Flex align="center">
@@ -131,30 +131,26 @@ const strings = getStrings(locale);
 
         <Flex
           align="center"
-          gap={{ initial: '4', md: '6' }}
+          gap={{ initial: "4", md: "6" }}
-          display={{ initial: 'none', sm: 'flex' }}
+          display={{ initial: "none", sm: "flex" }}
           justify="center"
           className="tools"
         >
           {
             toolsFiltered.map((tool) => {
-              const unavailableOnBranch = tool.branches?.every(
-                (branch) =>
-                  branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
-              );
               const selected = Astro.url.pathname.includes(`/${tool.id}`);
               const toolStrings =
                 strings.website.tools[
-                  (tool.stringsId ??
+                  (tool.strings ??
                     tool.id) as keyof typeof strings.website.tools
                 ];
 
-              if (unavailableOnBranch) return null;
+              if (toolStrings === undefined) console.log(tool.id);
 
               return (
                 <LinkI18n
                   {locale}
-                  weight={selected ? 'medium' : 'regular'}
+                  weight={selected ? "medium" : "regular"}
                   color="gray"
                   highContrast={selected}
                   size="2"
@@ -172,7 +168,7 @@ const strings = getStrings(locale);
 
         <Flex align="center" gap="4">
           <Link
-            style={{ display: 'flex', alignContent: 'center' }}
+            style={{ display: "flex", alignContent: "center" }}
             color="gray"
             href="https://discord.gg/nDt7AjGJQH"
             underline="none"
@@ -183,7 +179,7 @@ const strings = getStrings(locale);
 
           <LinkI18n
             {locale}
-            style={{ display: 'flex', alignContent: 'center' }}
+            style={{ display: "flex", alignContent: "center" }}
             color="gray"
             href="/settings"
             underline="none"
@@ -193,7 +189,7 @@ const strings = getStrings(locale);
 
           <!-- <NavbarAccount client:idle /> -->
 
-          <Flex align="center" display={{ initial: 'flex', sm: 'none' }}>
+          <Flex align="center" display={{ initial: "flex", sm: "none" }}>
             <IconButton variant="ghost" color="gray" className="hamburger">
               <Cross1Icon data-expanded />
               <HamburgerMenuIcon data-closed />
@@ -206,36 +202,28 @@ const strings = getStrings(locale);
         direction="column"
         data-expanded
         gap="3"
-        display={{ initial: 'flex', sm: 'none' }}
+        display={{ initial: "flex", sm: "none" }}
       >
         {
           toolsFiltered.map((tool) => {
-            const unavailableOnBranch = tool.branches?.every(
-              (branch) =>
-                branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
-            );
-
-            if (unavailableOnBranch) return null;
-
             const toolStrings =
               strings.website.tools[
-                (tool.stringsId ??
+                (tool.strings ?? tool.id) as keyof typeof strings.website.tools
-                  tool.id) as keyof typeof strings.website.tools
               ];
 
             return (
               <Link
                 color="gray"
                 highContrast
-                style={{ display: 'contents' }}
+                style={{ display: "contents" }}
                 href={`/${tool.id}`}
               >
                 <Box
                   style={{
-                    borderRadius: Var('radius-2'),
+                    borderRadius: Var("radius-2"),
                     backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-                    backgroundSize: '200%',
+                    backgroundSize: "200%",
-                    backgroundPosition: 'right center',
+                    backgroundPosition: "right center",
                   }}
                 >
                   <Flex
@@ -243,7 +231,7 @@ const strings = getStrings(locale);
                     justify="end"
                     flexGrow="1"
                     style={{
-                      background: `linear-gradient(90deg, transparent, ${Var('gray-1')} 90%)`,
+                      background: `linear-gradient(90deg, transparent, ${Var("gray-1")} 90%)`,
                     }}
                   >
                     {toolStrings.name}
@@ -261,11 +249,11 @@ const strings = getStrings(locale);
     data-expanded
     flexGrow="1"
     width="100%"
-    display={{ initial: 'block', sm: 'none' }}
+    display={{ initial: "block", sm: "none" }}
     style={{
-      backgroundColor: Var('black-a7'),
+      backgroundColor: Var("black-a7"),
-      backdropFilter: 'blur(0.5rem)',
+      backdropFilter: "blur(0.5rem)",
-      WebkitBackdropFilter: 'blur(0.5rem)',
+      WebkitBackdropFilter: "blur(0.5rem)",
     }}
   />
 </Flex>

packages/website/src/components/ToolCard.astro

@@ -1,24 +1,20 @@
 ---
-import { assertSecret } from '@blitzkit/core';
+import { CaretRightIcon } from "@radix-ui/react-icons";
-import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Box, Button, Flex, Heading, Text } from "@radix-ui/themes";
-import { Box, Button, Code, Flex, Heading, Text } from '@radix-ui/themes';
+import type { Tool } from "../constants/tools";
-import type { Tool } from '../constants/tools';
+import { getStrings } from "../core/i18n/getStrings";
-import { getStrings } from '../core/i18n/getStrings';
+import { LinkI18n } from "./LinkI18n";
-import { LinkI18n } from './LinkI18n';
 
 interface Props {
   tool: Tool;
 }
 
 const { tool } = Astro.props;
-const disabled = tool.branches?.every(
-  (branch) => branch !== assertSecret(import.meta.env.PUBLIC_BRANCH),
-);
 const { locale } = Astro.params;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
-    (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
+    (tool.strings ?? tool.id) as keyof typeof strings.website.tools
   ];
 ---
 
@@ -29,11 +25,12 @@ const toolStrings =
     background-position: center;
     height: 16rem;
 
-    &[data-disabled='true'] {
+    &[data-disabled="true"] {
       opacity: 0.25;
     }
 
-    &[data-significant='true'] {
+    &[data-significant="true"] {
+      width: 100%;
       height: min(20rem, 50vh);
     }
   }
@@ -49,90 +46,76 @@ const toolStrings =
 
 <Flex
   style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
-  data-disabled={disabled}
   data-significant={tool.significant}
   className="container"
   position="relative"
   overflow="hidden"
-  flexGrow={tool.significant ? undefined : '1'}
+  flexGrow={tool.significant ? undefined : "1"}
-  flexBasis={tool.significant ? undefined : { initial: undefined, sm: '0' }}
+  flexBasis={tool.significant ? undefined : { initial: undefined, sm: "0" }}
 >
   <LinkI18n
     {locale}
     className="link"
     underline="none"
-    href={disabled ? '#' : (tool.href ?? `/${tool.id}`)}
+    href={tool.href ?? `/${tool.id}`}
-    target={tool.href ? '_blank' : undefined}
+    target={tool.href ? "_blank" : undefined}
   >
     <Box
       flexGrow="1"
       style={{
         backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-        backgroundSize: 'cover',
+        backgroundSize: "cover",
-        backgroundPosition: 'center',
+        backgroundPosition: "center",
       }}
     />
 
     <Flex
-      px={{ initial: '6', md: tool.significant ? '8' : '6' }}
+      px={{ initial: "6", md: tool.significant ? "8" : "6" }}
-      py={{ initial: '4', sm: tool.significant ? '6' : '4' }}
+      py={{ initial: "4", sm: tool.significant ? "6" : "4" }}
       gap="4"
       align="center"
       justify="between"
       width="100%"
-      direction={{ initial: 'column', xs: 'row' }}
+      direction={{ initial: "column", xs: "row" }}
       style={{
-        backgroundColor: 'var(--color-panel-translucent)',
+        backgroundColor: "var(--color-panel-translucent)",
-        backdropFilter: 'blur(64px)',
+        backdropFilter: "blur(64px)",
-        WebkitBackdropFilter: 'blur(64px)',
+        WebkitBackdropFilter: "blur(64px)",
       }}
     >
       <Flex
         direction="column"
         justify="center"
-        align={{ initial: 'center', xs: 'start' }}
+        align={{ initial: "center", xs: "start" }}
       >
         <Heading
-          align={{ initial: 'center', sm: 'left' }}
+          align={{ initial: "center", sm: "left" }}
-          size={{ initial: '6', sm: tool.significant ? '7' : '5' }}
+          size={{ initial: "6", sm: tool.significant ? "7" : "5" }}
           weight="medium"
         >
           {toolStrings.name}
         </Heading>
         <Text
-          align={{ initial: 'center', sm: 'left' }}
+          align={{ initial: "center", sm: "left" }}
-          size={{ initial: '3', sm: tool.significant ? '4' : '3' }}
+          size={{ initial: "3", sm: tool.significant ? "4" : "3" }}
           color="gray"
         >
-          {
+          {toolStrings.description}
-            disabled ? (
-              <>
-                Unavailable on{' '}
-                <Code>{assertSecret(import.meta.env.PUBLIC_BRANCH)}</Code>
-              </>
-            ) : (
-              toolStrings.description
-            )
-          }
         </Text>
       </Flex>
 
-      {
+      <Button
-        !disabled && (
+        highContrast={tool.button.highContrast}
-          <Button
+        size={{
-            highContrast={tool.button.highContrast}
+          initial: undefined,
-            size={{
+          sm: tool.significant ? "3" : undefined,
-              initial: undefined,
+        }}
-              sm: tool.significant ? '3' : undefined,
+        color={tool.button.color}
-            }}
+        style={{ cursor: "inherit" }}
-            color={tool.button.color}
+      >
-            style={{ cursor: 'inherit' }}
+        {toolStrings.button}
-          >
+        <CaretRightIcon />
-            {toolStrings.button}
+      </Button>
-            <CaretRightIcon />
-          </Button>
-        )
-      }
     </Flex>
   </LinkI18n>
 </Flex>

packages/website/src/constants/tools.json

@@ -0,0 +1,24 @@
+[
+  {
+    "id": "tanks",
+    "strings": "tankopedia",
+    "button": { "color": "purple" },
+    "significant": true
+  },
+
+  {
+    "id": "compare",
+    "button": { "color": "crimson" }
+  },
+
+  {
+    "id": "session",
+    "button": { "color": "blue" }
+  },
+
+  {
+    "id": "discord",
+    "href": "https://discord.com/application-directory/1097673957865443370",
+    "button": { "color": "indigo" }
+  }
+]

packages/website/src/constants/tools.ts

@@ -1,148 +1,82 @@
-import { Button } from '@radix-ui/themes';
+import { Button } from "@radix-ui/themes";
-import type { ComponentProps } from 'react';
+import type { ComponentProps } from "react";
 
 export interface Tool {
   id: string;
-  stringsId?: string;
+  strings?: string;
   disabled?: boolean;
   href?: string;
   button: {
     highContrast?: boolean;
-    color: ComponentProps<typeof Button>['color'];
+    color: ComponentProps<typeof Button>["color"];
   };
   significant?: boolean;
-  branches?: string[];
 }
 
-export const tankopediaTool: Tool = {
-  id: 'tanks',
-  stringsId: 'tankopedia',
-  button: {
-    color: 'purple',
-  },
-  significant: true,
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-// export const ratingTool: Tool = {
-//   id: 'rating',
-//   image: 'WEyMZH3',
-//   button: {
-//     color: 'orange',
-//   },
-//   branches: ['main', 'dev'],
-// };
-
-export const compareTool: Tool = {
-  id: 'compare',
-  button: {
-    color: 'crimson',
-  },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const sessionTool: Tool = {
-  // TODO: rename to tracker
-  id: 'session',
-  button: {
-    color: 'blue',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const discordTool: Tool = {
-  id: 'discord',
-  href: 'https://discord.com/application-directory/1097673957865443370',
-  button: {
-    color: 'indigo',
-  },
-};
-
-export const moreTool: Tool = {
-  id: 'more',
-  href: 'https://discord.gg/nDt7AjGJQH',
-  button: {
-    color: 'plum',
-  },
-};
-
-export const playersTool: Tool = {
-  id: 'players',
-  button: {
-    color: 'blue',
-  },
-  href: '_', // TODO: remove this to re-enable link
-  branches: ['main', 'dev'],
-};
-
-export const performanceTool: Tool = {
-  id: 'performance',
-  button: {
-    color: 'jade',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const embedTool: Tool = {
-  id: 'embed',
-  button: {
-    color: 'red',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const homeTool: Tool = {
-  id: 'home',
-  button: { color: 'blue' },
-};
-
-export const galleryTool: Tool = {
-  id: 'gallery',
-  button: {
-    color: 'gold',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const tierListTool: Tool = {
-  id: 'tier-list',
-  stringsId: 'tier_list',
-  button: {
-    color: 'orange',
-  },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const chartsTool: Tool = {
-  id: 'charts',
-  button: {
-    color: 'bronze',
-  },
-  branches: ['main', 'dev'],
-};
-
-export const guessTool: Tool = {
-  id: 'guess',
-  button: { color: 'cyan' },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
-export const mixerTool: Tool = {
-  id: 'mixer',
-  button: { color: 'red' },
-  branches: ['main', 'dev', 'opentest', 'preview'],
-};
-
 export const TOOLS: Tool[] = [
-  tankopediaTool,
+  {
-  compareTool,
+    id: "tanks",
-  performanceTool,
+    strings: "tankopedia",
-  guessTool,
+    button: { color: "purple" },
-  // mixerTool,
+    significant: true,
-  // chartsTool,
+  },
-  galleryTool,
+  {
-  sessionTool,
+    id: "players",
-  tierListTool,
+    disabled: true,
-  embedTool,
+    button: { color: "blue" },
-  // ratingTool,
+  },
+  {
+    id: "compare",
+    button: { color: "crimson" },
+  },
+  {
+    id: "performance",
+    button: { color: "jade" },
+  },
+  {
+    id: "charts",
+    disabled: true,
+    button: { color: "bronze" },
+  },
+  {
+    id: "guess",
+    button: { color: "cyan" },
+  },
+  {
+    id: "mixer",
+    disabled: true,
+    button: { color: "red" },
+  },
+  {
+    id: "charts",
+    disabled: true,
+    button: { color: "red" },
+  },
+  {
+    id: "gallery",
+    button: { color: "gold" },
+  },
+  {
+    id: "session",
+    button: { color: "blue" },
+  },
+  {
+    id: "discord",
+    href: "https://discord.com/application-directory/1097673957865443370",
+    button: { color: "indigo" },
+  },
+  {
+    id: "tier-list",
+    strings: "tier_list",
+    button: { color: "orange" },
+  },
+  {
+    id: "embed",
+    button: { color: "red" },
+  },
+  {
+    id: "more",
+    href: "https://discord.gg/nDt7AjGJQH",
+    button: { color: "plum" },
+  },
 ];

packages/website/src/layouts/ToolLayout.astro

@@ -1,9 +1,9 @@
 ---
-import { Box, Flex, Heading, Text } from '@radix-ui/themes';
+import { Box, Flex, Heading, Text } from "@radix-ui/themes";
-import ToolOpenGraph from '../components/ToolOpenGraph.astro';
+import ToolOpenGraph from "../components/ToolOpenGraph.astro";
-import { type Tool } from '../constants/tools';
+import { type Tool } from "../constants/tools";
-import { getStrings } from '../core/i18n/getStrings';
+import { getStrings } from "../core/i18n/getStrings";
-import BaseLayout from './BaseLayout.astro';
+import BaseLayout from "./BaseLayout.astro";
 
 interface Props {
   tool: Tool;
@@ -14,7 +14,7 @@ const { locale } = Astro.params;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
-    (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
+    (tool.strings ?? tool.id) as keyof typeof strings.website.tools
   ];
 ---
 
@@ -24,7 +24,7 @@ const toolStrings =
   <Box
     style={{
       backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-      backgroundSize: 'cover',
+      backgroundSize: "cover",
     }}
   >
     <Flex
@@ -32,8 +32,8 @@ const toolStrings =
       align="center"
       py="6"
       style={{
-        backdropFilter: 'blur(4rem)',
+        backdropFilter: "blur(4rem)",
-        WebkitBackdropFilter: 'blur(4rem)',
+        WebkitBackdropFilter: "blur(4rem)",
       }}
     >
       <Heading size="7">{toolStrings.name}</Heading>

packages/website/src/pages/[...locale]/index.astro

@@ -1,37 +1,43 @@
 ---
-import { AstroSeo } from '@astrolib/seo';
+import { AstroSeo } from "@astrolib/seo";
-import { assertSecret } from '@blitzkit/core';
+import { assertSecret } from "@blitzkit/core";
-import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/i18n';
+import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from "@blitzkit/i18n";
-import { literals } from '@blitzkit/i18n/src/literals';
+import { literals } from "@blitzkit/i18n/src/literals";
-import { Box, Flex, Heading, Link } from '@radix-ui/themes';
+import { Box, Flex, Link } from "@radix-ui/themes";
-import type { GetStaticPaths } from 'astro';
+import type { GetStaticPaths } from "astro";
-import { AesonPlug } from '../../components/AesonPlug';
+import { AesonPlug } from "../../components/AesonPlug";
-import HomeHero from '../../components/HomeHero.astro';
+import HomeHero from "../../components/HomeHero.astro";
-import { Plugs } from '../../components/Plugs';
+import { Plugs } from "../../components/Plugs";
-import ToolCard from '../../components/ToolCard.astro';
+import ToolCard from "../../components/ToolCard.astro";
-import {
+import { TOOLS, type Tool } from "../../constants/tools";
-  compareTool,
+import { getStrings } from "../../core/i18n/getStrings";
-  discordTool,
+import BaseLayout from "../../layouts/BaseLayout.astro";
-  embedTool,
+
-  galleryTool,
+const MAX_TOOLS_PER_ROW = 2;
-  guessTool,
-  moreTool,
-  performanceTool,
-  sessionTool,
-  tankopediaTool,
-  tierListTool,
-} from '../../constants/tools';
-import { getStrings } from '../../core/i18n/getStrings';
-import BaseLayout from '../../layouts/BaseLayout.astro';
 
 const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
 const locale = Astro.params.locale ?? DEFAULT_LOCALE;
 const strings = getStrings(Astro.params.locale);
+const rows: Tool[][] = [];
+
+for (const tool of TOOLS) {
+  if (tool.disabled) continue;
+
+  const compatibleRow = rows.find(
+    (row) => row.length < MAX_TOOLS_PER_ROW && !row[0].significant
+  );
+
+  if (compatibleRow) {
+    compatibleRow.push(tool);
+  } else {
+    rows.push([tool]);
+  }
+}
 
 export const getStaticPaths = (() => {
   return [
     ...SUPPORTED_LOCALES.filter((locale) => locale !== DEFAULT_LOCALE).map(
-      (locale) => ({ params: { locale } }),
+      (locale) => ({ params: { locale } })
     ),
     { params: { locale: undefined } },
   ];
@@ -44,11 +50,11 @@ export const getStaticPaths = (() => {
   canonical={Astro.url.href}
   openGraph={{
     url: Astro.url.href,
-    title: 'BlitzKit',
+    title: "BlitzKit",
     description: strings.website.home.seo_description,
-    site_name: 'BlitzKit',
+    site_name: "BlitzKit",
   }}
-  twitter={{ cardType: 'summary_large_image' }}
+  twitter={{ cardType: "summary_large_image" }}
 />
 
 <BaseLayout>
@@ -79,7 +85,7 @@ export const getStaticPaths = (() => {
           underline="always"
         >
           {literals(strings.website.home.help_translate, [
-            'BlitzKit',
+            "BlitzKit",
             strings.common.locales[locale],
           ])}
         </Link>
@@ -90,7 +96,7 @@ export const getStaticPaths = (() => {
   <Plugs client:idle />
 
   {
-    PUBLIC_ASSET_BRANCH === 'preview' && (
+    PUBLIC_ASSET_BRANCH === "preview" && (
       <Flex justify="center" my="8" px="4">
         <AesonPlug />
       </Flex>
@@ -99,57 +105,18 @@ export const getStaticPaths = (() => {
 
   <Flex p="4" justify="center" gap="4" mt="3">
     <Flex maxWidth="80rem" flexGrow="1" gap="4" direction="column">
-      <ToolCard tool={tankopediaTool} />
+      {
-
+        rows.map((row) => (
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+          <Flex gap="4" direction={{ initial: "column", sm: "row" }}>
-        {/* <ToolCard tool={playerStatsTool} /> */}
+            {row.map((tool) => (
-        <ToolCard tool={compareTool} />
+              <ToolCard tool={tool} />
-        <ToolCard tool={performanceTool} />
+            ))}
-      </Flex>
+            {row.length < MAX_TOOLS_PER_ROW && !row[0].significant && (
-
+              <Box flexGrow="1" />
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+            )}
-        <!-- <ToolCard tool={chartsTool} /> -->
+          </Flex>
-        <ToolCard tool={guessTool} />
+        ))
-        <ToolCard tool={galleryTool} />
+      }
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={sessionTool} />
-        <ToolCard tool={discordTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={tierListTool} />
-        <ToolCard tool={embedTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard tool={moreTool} />
-        <Box flexGrow="1" />
-      </Flex>
-
-      <Heading align="center" mt="6"
-        >{strings.website.home.other_projects.title}</Heading
-      >
-
-      <Flex gap="4" mb="6" direction={{ initial: 'column', sm: 'row' }}>
-        <ToolCard
-          tool={{
-            button: { color: 'blue' },
-            id: 'blitz-analysis',
-            stringsId: 'blitz_analysis',
-            href: 'https://blitzanalysiz.com/',
-          }}
-        />
-        <ToolCard
-          tool={{
-            button: { color: 'purple', highContrast: true },
-            id: 'blitz-insider',
-            stringsId: 'blitz_insider',
-            href: 'https://discord.gg/UjWf9eGgtR',
-          }}
-        />
-      </Flex>
     </Flex>
   </Flex>