home page list

packages/i18n/strings/en.json

@@ -1,4 +1,12 @@
 {
+  "home": {
+    "tanks": "Tanks",
+    "players": "Players",
+    "games": "Games",
+    "cosmetics": "Cosmetics",
+    "technical": "Technical"
+  },
+
   "test": {
     "default": "test",
     "long": "This is a long test string. You MUST NEVER see this in the UI. My favorite fruit is {fruit} because it has the color of {color}. I like it so much that I will say its name 3 times! {fruit}! {fruit}! {fruit}! Once again, it's {color}, not {not_color}.",
@@ -337,6 +345,18 @@
     },
 
     "tools": {
+      "backgrounds": {
+        "name": "Backgrounds",
+        "description": "Profile backgrounds",
+        "seo_description": "World of Tanks Blitz player profile backgrounds"
+      },
+
+      "players": {
+        "name": "Players",
+        "description": "Player statistics",
+        "seo_description": "Player statistics in World of Tanks Blitz"
+      },
+
       "playlist": {
         "reset": "Reset",
         "shuffle": "Shuffle",
@@ -370,22 +390,19 @@
         "name": "Playlist",
         "description": "Tank playlist generator",
         "seo_description": "Don't know what to play in World of Tanks Blitz? Use BlitzKit Playlist to get suggestions!",
-        "button": "Generate",
         "pool_size": "{count} possible tanks"
       },
 
       "mixer": {
         "name": "Mixer",
-        "button": "Mix and match",
         "description": "Mix tank modules",
         "seo_description": "Mix and match hulls, turrets, and guns of tanks in World of Tanks Blitz",
         "screenshot": "Screenshot",
         "randomize": "Randomize"
       },
 
-      "guess": {
+      "guesser": {
         "name": "Guess",
-        "button": "What could it be?",
         "description": "Silhouette mini-game",
         "seo_description": "Play a tank guessing game with a silhouette in World of Tanks Blitz",
         "search": {
@@ -411,7 +428,6 @@
         "search": "Search a stat...",
 
         "name": "Tankopedia",
-        "button": "Find tanks",
         "description": "Blitz tank encyclopedia",
         "seo_description": "Statistics, armor, and more for all tanks in World of Tanks Blitz",
         "tank_seo_title": "{name} - Tier {tier} {nationality} {class} | {website} Tankopedia | World of Tanks Blitz (WoTB)",
@@ -721,9 +737,9 @@
           "title": "Survivability"
         }
       },
+
       "compare": {
         "name": "Compare",
-        "button": "Compare tanks",
         "description": "Compare tank statistics",
         "seo_description": "Compare tanks statistics and loadouts in World of Tanks Blitz",
 
@@ -770,9 +786,9 @@
           }
         }
       },
+
       "performance": {
         "name": "Performance",
-        "button": "View tanks",
         "description": "Tank performance statistics",
         "seo_description": "Best tanks and their performances in World of Tanks Blitz",
         "estimation": {
@@ -805,9 +821,9 @@
           }
         }
       },
-      "gallery": {
+
-        "name": "Gallery",
+      "avatars": {
-        "button": "Browse all",
+        "name": "Avatars",
         "description": "Blitz player avatars",
         "seo_description": "All World of Tanks Blitz player avatars",
         "last_updated": "Last updated on {time}",
@@ -816,9 +832,9 @@
           "results": "{count} avatars"
         }
       },
+
       "session": {
         "name": "Session",
-        "button": "Start tracking",
         "description": "Live session stats",
         "seo_description": "Track your stats in real time as you play World of Tanks Blitz",
         "search": {
@@ -848,9 +864,9 @@
           "remove": "Remove"
         }
       },
+
       "tier_list": {
         "name": "Tier list",
-        "button": "Rank tanks",
         "description": "Rank Blitz tanks",
         "seo_description": "Explore tier lists ranking tanks from best to worst, based on player ratings and statistical performance in World of Tanks Blitz",
         "buttons": {
@@ -858,9 +874,9 @@
           "share": "Share"
         }
       },
+
       "embed": {
         "name": "Embed",
-        "button": "Create now",
         "description": "Embeds for streaming",
         "seo_description": "Create embeds for streaming World of Tanks Blitz with extreme customization",
         "coming_soon": "More embeds coming soon.",
@@ -941,47 +957,23 @@
           }
         }
       },
-      "charts": {
+
-        "name": "Charts",
-        "button": "Nerd out",
-        "description": "Lots of graphs",
-        "seo_description": "Charts and graphs on anything and everything about tanks, players, and events in World of Tanks Blitz"
-      },
-      "rating": {
-        "name": "Rating",
-        "button": "View leaderboard",
-        "description": "Full rating leaderboard",
-        "seo_description": "Live and archived full rating leaderboard for World of Tanks Blitz"
-      },
-      "discord": {
-        "name": "Discord bot",
-        "button": "Install now",
-        "description": "Stats right in Discord",
-        "seo_description": "Get stats right in Discord with BlitzKit's Discord bot"
-      },
       "more": {
         "name": "More coming soon",
-        "button": "Join Discord",
         "description": "What we're making",
         "seo_description": "What we're making with BlitzKit"
       },
-      "players": {
+
-        "name": "Players",
-        "button": "Lookup player",
-        "description": "Periodical player statistics",
-        "seo_description": "Periodical player statistics in World of Tanks Blitz"
-      },
-      "home": {
-        "name": "Home",
-        "button": "Get started",
-        "description": "Get started with BlitzKit",
-        "seo_description": "Get started with BlitzKit"
-      },
       "api": {
         "name": "API",
-        "button": "To the docs",
         "description": "BlitzKit hosted API",
         "seo_description": "BlitzKit hosted static API for World of Tanks Blitz"
+      },
+
+      "changelogs": {
+        "name": "Changelogs",
+        "description": "BlitzKit changelogs",
+        "seo_description": "Changelogs and patch notes for BlitzKit"
       }
     },
 

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(
+const toolsFiltered = Object.entries(tools).filter(([, tool]) => !tool.href);
-  (tool) => !tool.href && !tool.disabled
-);
 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) => {
+            toolsFiltered.map(([id, tool]) => {
-              const selected = Astro.url.pathname.includes(`/${tool.id}`);
+              const selected = Astro.url.pathname.includes(
+                `/${tool.path ?? id}`,
+              );
               const toolStrings =
                 strings.website.tools[
-                  (tool.strings ??
+                  (tool.strings ?? id) as keyof typeof strings.website.tools
-                    tool.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, Flex, Heading, Text } from "@radix-ui/themes";
-import {
-  Box,
-  Button,
-  Flex,
-  Heading,
-  Text,
-  type ButtonProps,
-} 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"}
+  flexGrow={significant ? undefined : "1"}
-  flexBasis={tool.significant ? undefined : { initial: undefined, sm: "0" }}
+  flexBasis={significant ? undefined : { initial: undefined, sm: "0" }}
 >
   <LinkI18n
     {locale}
@@ -79,8 +72,8 @@ const toolStrings =
     />
 
     <Flex
-      px={{ initial: "6", md: tool.significant ? "8" : "6" }}
+      px={{ initial: "6", md: significant ? "8" : "6" }}
-      py={{ initial: "4", sm: tool.significant ? "6" : "4" }}
+      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>

packages/website/src/constants/tools.ts

@@ -1,47 +1,59 @@
-import type { ButtonProps } from "@radix-ui/themes";
-
 export interface Tool {
+  id: string;
+
   path?: string;
   strings?: string;
 
-  button: ButtonProps["color"];
   href?: string;
 }
 
 export const tools: Record<string, Tool> = {
   tanks: {
+    id: "tanks",
     strings: "tankopedia",
-    button: "purple",
+  },
+  players: {
+    id: "players",
+    strings: "players",
   },
   compare: {
-    button: "crimson",
+    id: "compare",
   },
   performance: {
-    button: "jade",
+    id: "performance",
   },
   playlist: {
-    button: "tomato",
+    id: "playlist",
   },
   mixer: {
-    button: "gray",
+    id: "mixer",
   },
-  guess: {
+  guesser: {
-    button: "cyan",
+    id: "guesser",
   },
-  gallery: {
+  avatars: {
-    button: "gold",
+    id: "avatars",
+  },
+  backgrounds: {
+    id: "backgrounds",
   },
   session: {
-    button: "blue",
+    id: "session",
   },
   tier_list: {
-    button: "orange",
+    id: "tier_list",
   },
   embed: {
-    button: "red",
+    id: "embed",
   },
   more: {
+    id: "more",
     href: "https://discord.gg/nDt7AjGJQH",
-    button: "plum",
+  },
+  api: {
+    id: "api",
+  },
+  changelogs: {
+    id: "changelogs",
   },
 };

packages/website/src/core/i18n/getStrings.ts

@@ -1,7 +1,6 @@
 import { STRINGS } from "@blitzkit/i18n";
-import locales from "@blitzkit/i18n/locales.json";
 
-export function getStrings(locale: string = locales.default) {
+export function getStrings(locale: string) {
   if (locale in STRINGS) return STRINGS[locale];
   throw new Error(`Unsupported locale: ${locale}`);
 }

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

@@ -0,0 +1,16 @@
+---
+import { tools } from "../../../../constants/tools";
+import ToolLayout from "../../../../layouts/ToolLayout.astro";
+import type { getStaticPaths } from "../index.astro";
+import { Page } from "./_index";
+
+export { getStaticPaths } from "../index.astro";
+
+const { locale } = Astro.props;
+---
+
+<ToolLayout {locale} tool={tools.gallery}>
+  <Page {locale} client:only="react">
+    <Page {locale} skeleton slot="fallback" />
+  </Page>
+</ToolLayout>

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

@@ -1,16 +1,9 @@
 ---
-import { tools } from "../../../../constants/tools";
+import LegacyRedirect from "../../../../layouts/LegacyRedirect.astro";
-import ToolLayout from "../../../../layouts/ToolLayout.astro";
-import type { getStaticPaths } from "../index.astro";
-import { Page } from "./_index";
 
 export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.props;
 ---
 
-<ToolLayout {locale} tool={tools.gallery}>
+<LegacyRedirect {locale} path="avatars" />
-  <Page {locale} client:only="react">
-    <Page {locale} skeleton slot="fallback" />
-  </Page>
-</ToolLayout>

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

@@ -3,11 +3,16 @@ import { AstroSeo } from "@astrolib/seo";
 import { assertSecret } from "@blitzkit/core";
 import locales from "@blitzkit/i18n/locales.json";
 import { literals } from "@blitzkit/i18n/src/literals";
-import { Box, Flex, Link } from "@radix-ui/themes";
+import { Flex, Link } from "@radix-ui/themes";
 import { AesonPlug } from "../../../components/AesonPlug";
+import HomeCosmetics from "../../../components/HomeCosmetics.astro";
+import HomeGames from "../../../components/HomeGames.astro";
 import HomeHero from "../../../components/HomeHero.astro";
+import HomePlayers from "../../../components/HomePlayers.astro";
+import HomeTanks from "../../../components/HomeTanks.astro";
+import HomeTechnical from "../../../components/HomeTechnical.astro";
+import { PageWrapper } from "../../../components/PageWrapper";
 import { Plugs } from "../../../components/Plugs";
-import ToolCard from "../../../components/ToolCard.astro";
 import { tools, type Tool } from "../../../constants/tools";
 import { mixStaticPaths } from "../../../core/blitzkit/mixStaticPaths";
 import { getStrings } from "../../../core/i18n/getStrings";
@@ -63,7 +68,7 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
 />
 
 <BaseLayout {locale}>
-  <HomeHero />
+  <HomeHero {locale} />
 
   {
     locale !== locales.default && (
@@ -95,23 +100,11 @@ export const getStaticPaths = mixStaticPaths(_getStaticPaths, () => {
     )
   }
 
-  <Flex p="4" justify="center" gap="4" mt="3">
+  <PageWrapper>
-    <Flex maxWidth="80rem" flexGrow="1" gap="4" direction="column">
+    <HomeTanks {locale} />
-      {
+    <HomePlayers {locale} />
-        rows.map((row) => (
+    <HomeGames {locale} />
-          <Flex gap="4" direction={{ initial: "column", sm: "row" }}>
+    <HomeCosmetics {locale} />
-            {row.map((tool) => (
+    <HomeTechnical {locale} />
-              <ToolCard {locale} {tool} />
+  </PageWrapper>
-            ))}
-            {row.length < MAX_TOOLS_PER_ROW &&
-              !("significant" in row[0] && row[0].significant) && (
-                <Box flexGrow="1" />
-              )}
-          </Flex>
-        ))
-      }
-    </Flex>
-  </Flex>
-
-  <div style={{ flex: 1 }}></div>
 </BaseLayout>