feat: data-driven tools

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';
-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';
+} 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";
 
 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 hamburger = document.querySelector<HTMLButtonElement>('.hamburger');
+  const navbar = document.querySelector<HTMLDivElement>(".navbar");
+  const hamburger = document.querySelector<HTMLButtonElement>(".hamburger");
 
-  navbar?.addEventListener('click', () => {
-    navbar.dataset.expanded = 'false';
+  navbar?.addEventListener("click", () => {
+    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' }}
-          display={{ initial: 'none', sm: 'flex' }}
+          gap={{ initial: "4", md: "6" }}
+          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.id) as keyof typeof strings.website.tools
+                (tool.strings ?? 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%',
-                    backgroundPosition: 'right center',
+                    backgroundSize: "200%",
+                    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'),
-      backdropFilter: 'blur(0.5rem)',
-      WebkitBackdropFilter: 'blur(0.5rem)',
+      backgroundColor: Var("black-a7"),
+      backdropFilter: "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 { Box, Button, Code, Flex, Heading, Text } from '@radix-ui/themes';
-import type { Tool } from '../constants/tools';
-import { getStrings } from '../core/i18n/getStrings';
-import { LinkI18n } from './LinkI18n';
+import { CaretRightIcon } from "@radix-ui/react-icons";
+import { Box, Button, Flex, Heading, Text } from "@radix-ui/themes";
+import type { Tool } from "../constants/tools";
+import { getStrings } from "../core/i18n/getStrings";
+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'}
-  flexBasis={tool.significant ? undefined : { initial: undefined, sm: '0' }}
+  flexGrow={tool.significant ? undefined : "1"}
+  flexBasis={tool.significant ? undefined : { initial: undefined, sm: "0" }}
 >
   <LinkI18n
     {locale}
     className="link"
     underline="none"
-    href={disabled ? '#' : (tool.href ?? `/${tool.id}`)}
-    target={tool.href ? '_blank' : undefined}
+    href={tool.href ?? `/${tool.id}`}
+    target={tool.href ? "_blank" : undefined}
   >
     <Box
       flexGrow="1"
       style={{
         backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
+        backgroundSize: "cover",
+        backgroundPosition: "center",
       }}
     />
 
     <Flex
-      px={{ initial: '6', md: tool.significant ? '8' : '6' }}
-      py={{ initial: '4', sm: tool.significant ? '6' : '4' }}
+      px={{ initial: "6", md: tool.significant ? "8" : "6" }}
+      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)',
-        backdropFilter: 'blur(64px)',
-        WebkitBackdropFilter: 'blur(64px)',
+        backgroundColor: "var(--color-panel-translucent)",
+        backdropFilter: "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' }}
-          size={{ initial: '6', sm: tool.significant ? '7' : '5' }}
+          align={{ initial: "center", sm: "left" }}
+          size={{ initial: "6", sm: tool.significant ? "7" : "5" }}
           weight="medium"
         >
           {toolStrings.name}
         </Heading>
         <Text
-          align={{ initial: 'center', sm: 'left' }}
-          size={{ initial: '3', sm: tool.significant ? '4' : '3' }}
+          align={{ initial: "center", sm: "left" }}
+          size={{ initial: "3", sm: tool.significant ? "4" : "3" }}
           color="gray"
         >
-          {
-            disabled ? (
-              <>
-                Unavailable on{' '}
-                <Code>{assertSecret(import.meta.env.PUBLIC_BRANCH)}</Code>
-              </>
-            ) : (
-              toolStrings.description
-            )
-          }
+          {toolStrings.description}
         </Text>
       </Flex>
 
-      {
-        !disabled && (
-          <Button
-            highContrast={tool.button.highContrast}
-            size={{
-              initial: undefined,
-              sm: tool.significant ? '3' : undefined,
-            }}
-            color={tool.button.color}
-            style={{ cursor: 'inherit' }}
-          >
-            {toolStrings.button}
-            <CaretRightIcon />
-          </Button>
-        )
-      }
+      <Button
+        highContrast={tool.button.highContrast}
+        size={{
+          initial: undefined,
+          sm: tool.significant ? "3" : undefined,
+        }}
+        color={tool.button.color}
+        style={{ cursor: "inherit" }}
+      >
+        {toolStrings.button}
+        <CaretRightIcon />
+      </Button>
     </Flex>
   </LinkI18n>
 </Flex>