feat: data-driven tools

packages/website/src/components/Navbar.astro

@@ -1,5 +1,4 @@
 ---
-import { assertSecret } from "@blitzkit/core";
 import {
   Cross1Icon,
   DiscordLogoIcon,
@@ -7,18 +6,20 @@ import {
   HamburgerMenuIcon,
 } from "@radix-ui/react-icons";
 import { Box, Code, Flex, IconButton, Link } from "@radix-ui/themes";
-import { TOOLS } from "../constants/tools";
 import { resolveBranchName } from "../core/blitzkit/branches";
 import { getStrings } from "../core/i18n/getStrings";
 import { Var } from "../core/radix/var";
 import { LinkI18n } from "./LinkI18n";
+import { tools } from "../constants/tools";
 
 export interface Props {
   integrated?: boolean;
 }
 
 const { integrated = false } = Astro.props;
-const toolsFiltered = TOOLS.filter((tool) => !tool.href && !tool.disabled);
+const toolsFiltered = Object.entries(tools).filter(
+  ([, tool]) => !tool.href && !tool.disabled
+);
 const { locale } = Astro.params;
 const branchName = resolveBranchName(locale);
 const isBranchNamed = branchName !== undefined;
@@ -137,16 +138,13 @@ const strings = getStrings(locale);
           className="tools"
         >
           {
-            toolsFiltered.map((tool) => {
+            toolsFiltered.map(([id, tool]) => {
               const selected = Astro.url.pathname.includes(`/${tool.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
                 ];
 
-              if (toolStrings === undefined) console.log(tool.id);
-
               return (
                 <LinkI18n
                   {locale}
@@ -205,10 +203,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 (

packages/website/src/components/ToolCard.astro

@@ -1,6 +1,13 @@
 ---
 import { CaretRightIcon } from "@radix-ui/react-icons";
-import { Box, Button, 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";
@@ -45,7 +52,9 @@ const toolStrings =
 </style>
 
 <Flex
-  style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
+  style={{
+    backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
+  }}
   data-significant={tool.significant}
   className="container"
   position="relative"
@@ -105,12 +114,11 @@ const toolStrings =
       </Flex>
 
       <Button
-        highContrast={tool.button.highContrast}
         size={{
           initial: undefined,
           sm: tool.significant ? "3" : undefined,
         }}
-        color={tool.button.color}
+        color={tool.button as ButtonProps["color"]}
         style={{ cursor: "inherit" }}
       >
         {toolStrings.button}

packages/website/src/components/ToolOpenGraph.astro

@@ -1,7 +1,7 @@
 ---
-import { AstroSeo } from '@astrolib/seo';
+import { AstroSeo } from "@astrolib/seo";
-import { type Tool } from '../constants/tools';
+import type { Tool } from "../constants/tools";
-import { getStrings } from '../core/i18n/getStrings';
+import { getStrings } from "../core/i18n/getStrings";
 
 interface Props {
   tool: Tool;
@@ -12,7 +12,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
   ];
 ---
 
@@ -23,11 +23,13 @@ const toolStrings =
   openGraph={{
     url: Astro.url.href,
     images: [
-      { url: `${Astro.url.origin}/assets/images/tools/${tool.id}.webp` },
+      {
+        url: `${Astro.url.origin}/assets/images/tools/${tool.id}.webp`,
+      },
     ],
     title: toolStrings.name,
     description: toolStrings.seo_description,
-    site_name: 'BlitzKit',
+    site_name: "BlitzKit",
   }}
-  twitter={{ cardType: 'summary_large_image' }}
+  twitter={{ cardType: "summary_large_image" }}
 />

packages/website/src/constants/tools.json

@@ -1,24 +0,0 @@
-[
-  {
-    "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,82 +1,74 @@
-import { Button } from "@radix-ui/themes";
+import type { ButtonProps } from "@radix-ui/themes";
-import type { ComponentProps } from "react";
 
 export interface Tool {
   id: string;
   strings?: string;
+
+  button: ButtonProps["color"];
+  significant?: boolean;
   disabled?: boolean;
   href?: string;
-  button: {
-    highContrast?: boolean;
-    color: ComponentProps<typeof Button>["color"];
-  };
-  significant?: boolean;
 }
 
-export const TOOLS: Tool[] = [
+export const tools: Record<string, Tool> = {
-  {
+  tanks: {
     id: "tanks",
     strings: "tankopedia",
-    button: { color: "purple" },
+    button: "purple",
     significant: true,
   },
-  {
+  players: {
     id: "players",
     disabled: true,
-    button: { color: "blue" },
+    button: "blue",
   },
-  {
+  compare: {
     id: "compare",
-    button: { color: "crimson" },
+    button: "crimson",
   },
-  {
+  performance: {
     id: "performance",
-    button: { color: "jade" },
+    button: "jade",
   },
-  {
+  charts: {
     id: "charts",
     disabled: true,
-    button: { color: "bronze" },
+    button: "bronze",
   },
-  {
+  guess: {
     id: "guess",
-    button: { color: "cyan" },
+    button: "cyan",
   },
-  {
+  mixer: {
     id: "mixer",
     disabled: true,
-    button: { color: "red" },
+    button: "red",
   },
-  {
+  gallery: {
-    id: "charts",
-    disabled: true,
-    button: { color: "red" },
-  },
-  {
     id: "gallery",
-    button: { color: "gold" },
+    button: "gold",
   },
-  {
+  session: {
     id: "session",
-    button: { color: "blue" },
+    button: "blue",
   },
-  {
+  discord: {
     id: "discord",
     href: "https://discord.com/application-directory/1097673957865443370",
-    button: { color: "indigo" },
+    button: "indigo",
   },
-  {
+  tier_list: {
     id: "tier-list",
     strings: "tier_list",
-    button: { color: "orange" },
+    button: "orange",
   },
-  {
+  embed: {
     id: "embed",
-    button: { color: "red" },
+    button: "red",
   },
-  {
+  more: {
     id: "more",
     href: "https://discord.gg/nDt7AjGJQH",
-    button: { color: "plum" },
+    button: "plum",
   },
-];
+};

packages/website/src/layouts/ToolLayout.astro

@@ -1,7 +1,7 @@
 ---
 import { Box, Flex, Heading, Text } from "@radix-ui/themes";
 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 BaseLayout from "./BaseLayout.astro";
 
@@ -18,7 +18,7 @@ const toolStrings =
   ];
 ---
 
-<ToolOpenGraph tool={tool} />
+<ToolOpenGraph {tool} />
 
 <BaseLayout>
   <Box

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

@@ -1,15 +1,15 @@
 ---
-import ToolOpenGraph from '../../../components/ToolOpenGraph.astro';
+import ToolOpenGraph from "../../../components/ToolOpenGraph.astro";
-import { compareTool } from '../../../constants/tools';
+import { tools } from "../../../constants/tools";
-import BaseLayout from '../../../layouts/BaseLayout.astro';
+import BaseLayout from "../../../layouts/BaseLayout.astro";
-import { Page } from './_index';
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolOpenGraph tool={compareTool} />
+<ToolOpenGraph tool={tools.compare} />
 
 <BaseLayout noFooter>
   <Page {locale} client:load />

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

@@ -1,13 +1,13 @@
 ---
-import { embedTool } from '../../../constants/tools';
+import { tools } from "../../../constants/tools";
-import ToolLayout from '../../../layouts/ToolLayout.astro';
+import ToolLayout from "../../../layouts/ToolLayout.astro";
-import { Page } from './_index';
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolLayout tool={embedTool}>
+<ToolLayout tool={tools.embed}>
   <Page {locale} />
 </ToolLayout>

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

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

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

@@ -9,7 +9,7 @@ import { AesonPlug } from "../../components/AesonPlug";
 import HomeHero from "../../components/HomeHero.astro";
 import { Plugs } from "../../components/Plugs";
 import ToolCard from "../../components/ToolCard.astro";
-import { TOOLS, type Tool } from "../../constants/tools";
+import { tools, type Tool } from "../../constants/tools";
 import { getStrings } from "../../core/i18n/getStrings";
 import BaseLayout from "../../layouts/BaseLayout.astro";
 
@@ -20,11 +20,15 @@ const locale = Astro.params.locale ?? DEFAULT_LOCALE;
 const strings = getStrings(Astro.params.locale);
 const rows: Tool[][] = [];
 
-for (const tool of TOOLS) {
+for (const id in tools) {
-  if (tool.disabled) continue;
+  const tool = tools[id];
+
+  if ("disabled" in tool && tool.disabled) continue;
 
   const compatibleRow = rows.find(
-    (row) => row.length < MAX_TOOLS_PER_ROW && !row[0].significant
+    (row) =>
+      row.length < MAX_TOOLS_PER_ROW &&
+      !("significant" in row[0] && row[0].significant)
   );
 
   if (compatibleRow) {
@@ -109,11 +113,12 @@ export const getStaticPaths = (() => {
         rows.map((row) => (
           <Flex gap="4" direction={{ initial: "column", sm: "row" }}>
             {row.map((tool) => (
-              <ToolCard tool={tool} />
+              <ToolCard {tool} />
             ))}
-            {row.length < MAX_TOOLS_PER_ROW && !row[0].significant && (
+            {row.length < MAX_TOOLS_PER_ROW &&
-              <Box flexGrow="1" />
+              !("significant" in row[0] && row[0].significant) && (
-            )}
+                <Box flexGrow="1" />
+              )}
           </Flex>
         ))
       }

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

@@ -1,16 +1,16 @@
 ---
-import ToolOpenGraph from '../../../components/ToolOpenGraph.astro';
+import ToolOpenGraph from "../../../components/ToolOpenGraph.astro";
-import { performanceTool } from '../../../constants/tools';
+import { tools } from "../../../constants/tools";
-import BaseLayout from '../../../layouts/BaseLayout.astro';
+import BaseLayout from "../../../layouts/BaseLayout.astro";
-import type { getStaticPaths } from '../index.astro';
+import type { getStaticPaths } from "../index.astro";
-import { Page } from './_index';
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolOpenGraph tool={performanceTool} />
+<ToolOpenGraph tool={tools.performance} />
 
 <BaseLayout noFooter>
   <Page client:only="react" {locale}>

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

@@ -1,14 +1,14 @@
 ---
-import { sessionTool } from '../../../constants/tools';
+import { tools } from "../../../constants/tools";
-import ToolLayout from '../../../layouts/ToolLayout.astro';
+import ToolLayout from "../../../layouts/ToolLayout.astro";
-import type { getStaticPaths } from '../index.astro';
+import type { getStaticPaths } from "../index.astro";
-import { Page } from './_index';
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolLayout tool={sessionTool}>
+<ToolLayout tool={tools.session}>
   <Page client:load {locale} />
 </ToolLayout>

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

@@ -1,14 +1,14 @@
 ---
-import { tankopediaTool } from '../../../constants/tools';
+import { tools } from "../../../constants/tools";
-import ToolLayout from '../../../layouts/ToolLayout.astro';
+import ToolLayout from "../../../layouts/ToolLayout.astro";
-import { Page } from './_index';
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
 ---
 
-<ToolLayout tool={tankopediaTool}>
+<ToolLayout tool={tools.tanks}>
   <Page {locale} client:only="react">
     <Page {locale} skeleton slot="fallback" />
   </Page>

packages/website/src/pages/[...locale]/tier-list/index.astro

@@ -1,13 +1,15 @@
 ---
-import { tierListTool } from '../../../constants/tools';
+import { tools } from "../../../constants/tools";
-import ToolLayout from '../../../layouts/ToolLayout.astro';
+import ToolLayout from "../../../layouts/ToolLayout.astro";
-import { Page } from './_index';
+import { Page } from "./_index";
 
-export { getStaticPaths } from '../index.astro';
+export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.params;
+
+
 ---
 
-<ToolLayout tool={tierListTool}>
+<ToolLayout tool={tools.tier_list}>
   <Page {locale} client:load />
 </ToolLayout>