home page list

packages/website/src/components/HomeCosmetics.astro

@@ -0,0 +1,19 @@
+---
+import { Heading } from "@radix-ui/themes";
+import { tools } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import ToolCard from "./ToolCard.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await getStrings(locale);
+---
+
+<Heading size="8" className="title">{strings.home.cosmetics}</Heading>
+
+<ToolCard {locale} tool={tools.avatars} />
+<ToolCard {locale} tool={tools.backgrounds} />

packages/website/src/components/HomeGames.astro

@@ -0,0 +1,19 @@
+---
+import { Heading } from "@radix-ui/themes";
+import { tools } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import ToolCard from "./ToolCard.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = getStrings(locale);
+---
+
+<Heading size="8" className="title">{strings.home.games}</Heading>
+
+<ToolCard {locale} tool={tools.mixer} />
+<ToolCard {locale} tool={tools.guesser} />

packages/website/src/components/HomeHero.astro

@@ -4,6 +4,10 @@ import { resolveBranchName } from "../core/blitzkit/branches";
 import { getStrings } from "../core/i18n/getStrings";
 import { literals } from "@blitzkit/i18n/src/literals";
 
+interface Props {
+  locale: string;
+}
+
 const { locale } = Astro.props;
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;

packages/website/src/components/HomePlayers.astro

@@ -0,0 +1,20 @@
+---
+import { Heading } from "@radix-ui/themes";
+import { tools } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import ToolCard from "./ToolCard.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = getStrings(locale);
+---
+
+<Heading size="8">{strings.home.players}</Heading>
+
+<ToolCard {locale} tool={tools.players} />
+<ToolCard {locale} tool={tools.session} />
+<ToolCard {locale} tool={tools.playlist} />

packages/website/src/components/HomeTanks.astro

@@ -0,0 +1,19 @@
+---
+import { Heading } from "@radix-ui/themes";
+import { tools } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import ToolCard from "./ToolCard.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+const strings = getStrings(locale);
+---
+
+<Heading size="8">{strings.home.tanks}</Heading>
+
+<ToolCard {locale} tool={tools.tanks} />
+<ToolCard {locale} tool={tools.compare} />
+<ToolCard {locale} tool={tools.performance} />

packages/website/src/components/HomeTechnical.astro

@@ -0,0 +1,19 @@
+---
+import { Heading } from "@radix-ui/themes";
+import { tools } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+import ToolCard from "./ToolCard.astro";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = getStrings(locale);
+---
+
+<Heading size="8" className="title">{strings.home.technical}</Heading>
+
+<ToolCard {locale} tool={tools.api} />
+<ToolCard {locale} tool={tools.changelogs} />

packages/website/src/components/Navbar.astro

@@ -19,9 +19,7 @@ export interface Props {
 }
 
 const { integrated = false } = Astro.props;
-const toolsFiltered = Object.values(tools).filter(
-  (tool) => !tool.href && !tool.disabled
-);
+const toolsFiltered = Object.entries(tools).filter(([, tool]) => !tool.href);
 const { locale } = Astro.props;
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
@@ -141,12 +139,13 @@ const strings = getStrings(locale);
           className="tools"
         >
           {
-            toolsFiltered.map((tool) => {
-              const selected = Astro.url.pathname.includes(`/${tool.id}`);
+            toolsFiltered.map(([id, tool]) => {
+              const selected = Astro.url.pathname.includes(
+                `/${tool.path ?? id}`,
+              );
               const toolStrings =
                 strings.website.tools[
-                  (tool.strings ??
-                    tool.id) as keyof typeof strings.website.tools
+                  (tool.strings ?? id) as keyof typeof strings.website.tools
                 ];
 
               return (
@@ -156,7 +155,7 @@ const strings = getStrings(locale);
                   color="gray"
                   highContrast={selected}
                   size={{ initial: "1", md: "2" }}
-                  href={`/${tool.id}`}
+                  href={`/${tool.path ?? id}`}
                   underline="hover"
                 >
                   {toolStrings.name}
@@ -207,10 +206,10 @@ const strings = getStrings(locale);
         display={{ initial: "flex", sm: "none" }}
       >
         {
-          toolsFiltered.map((tool) => {
+          toolsFiltered.map(([id, tool]) => {
             const toolStrings =
               strings.website.tools[
-                (tool.strings ?? tool.id) as keyof typeof strings.website.tools
+                (tool.strings ?? id) as keyof typeof strings.website.tools
               ];
 
             return (
@@ -218,12 +217,12 @@ const strings = getStrings(locale);
                 color="gray"
                 highContrast
                 style={{ display: "contents" }}
-                href={`/${tool.id}`}
+                href={`/${tool.path ?? id}`}
               >
                 <Box
                   style={{
                     borderRadius: Var("radius-2"),
-                    backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
+                    backgroundImage: `url(/assets/images/tools/${id}.webp)`,
                     backgroundSize: "200%",
                     backgroundPosition: "right center",
                   }}

packages/website/src/components/ToolCard.astro

@@ -1,13 +1,5 @@
 ---
-import { CaretRightIcon } from "@radix-ui/react-icons";
-import {
-  Box,
-  Button,
-  Flex,
-  Heading,
-  Text,
-  type ButtonProps,
-} from "@radix-ui/themes";
+import { Box, Flex, Heading, Text } from "@radix-ui/themes";
 import type { Tool } from "../constants/tools";
 import { getStrings } from "../core/i18n/getStrings";
 import { LinkI18n } from "./LinkI18n";
@@ -15,9 +7,10 @@ import { LinkI18n } from "./LinkI18n";
 interface Props {
   tool: Tool;
   locale: string;
+  significant?: boolean;
 }
 
-const { locale, tool } = Astro.props;
+const { locale, tool, significant } = Astro.props;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
@@ -55,12 +48,12 @@ const toolStrings =
   style={{
     backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
   }}
-  data-significant={tool.significant}
+  data-significant={significant}
   className="container"
   position="relative"
   overflow="hidden"
-  flexGrow={tool.significant ? undefined : "1"}
-  flexBasis={tool.significant ? undefined : { initial: undefined, sm: "0" }}
+  flexGrow={significant ? undefined : "1"}
+  flexBasis={significant ? undefined : { initial: undefined, sm: "0" }}
 >
   <LinkI18n
     {locale}
@@ -79,8 +72,8 @@ const toolStrings =
     />
 
     <Flex
-      px={{ initial: "6", md: tool.significant ? "8" : "6" }}
-      py={{ initial: "4", sm: tool.significant ? "6" : "4" }}
+      px={{ initial: "6", md: significant ? "8" : "6" }}
+      py={{ initial: "4", sm: significant ? "6" : "4" }}
       gap="4"
       align="center"
       justify="between"
@@ -99,31 +92,19 @@ const toolStrings =
       >
         <Heading
           align={{ initial: "center", sm: "left" }}
-          size={{ initial: "6", sm: tool.significant ? "7" : "5" }}
+          size={{ initial: "6", sm: significant ? "7" : "5" }}
           weight="medium"
         >
           {toolStrings.name}
         </Heading>
         <Text
           align={{ initial: "center", sm: "left" }}
-          size={{ initial: "3", sm: tool.significant ? "4" : "3" }}
+          size={{ initial: "3", sm: significant ? "4" : "3" }}
           color="gray"
         >
           {toolStrings.description}
         </Text>
       </Flex>
-
-      <Button
-        size={{
-          initial: undefined,
-          sm: tool.significant ? "3" : undefined,
-        }}
-        color={tool.button as ButtonProps["color"]}
-        style={{ cursor: "inherit" }}
-      >
-        {toolStrings.button}
-        <CaretRightIcon />
-      </Button>
     </Flex>
   </LinkI18n>
 </Flex>