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.id) as keyof typeof strings.website.tools
+                  (tool.strings ?? 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 { type Tool } from '../constants/tools';
-import { getStrings } from '../core/i18n/getStrings';
+import { AstroSeo } from "@astrolib/seo";
+import type { Tool } from "../constants/tools";
+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" }}
 />