feat: more home page

packages/i18n/strings/en.json

@@ -1,7 +1,6 @@
 {
   "common": {
-    "name": "BlitzKit",
-    "credit": "by TrèsAbhi"
+    "name": "BlitzKit"
   },
 
   "units": {
@@ -28,6 +27,7 @@
   },
 
   "home": {
-    "search": "Search tanks, players, tools..."
+    "search": "Search tanks, players, tools...",
+    "credit": "by TrèsAbhi"
   }
 }

packages/website-ue/src/components/Code/index.tsx

@@ -1,5 +1,5 @@
 import type { ComponentProps } from "react";
-import { classNames } from "../../core/react/classNames";
+import { classNames } from "../../core/ui/classNames";
 import "./index.css";
 
 export interface CodeProps extends ComponentProps<"code"> {}

packages/website-ue/src/components/ColorScale.astro

@@ -1,6 +1,6 @@
 ---
 import * as colors from "@radix-ui/colors";
-import type { Color } from "../pages/styles/colors/[accent].css";
+import type { Color } from "../core/ui/color";
 
 interface Props {
   color: Color;

packages/website-ue/src/components/HomeHero.astro

@@ -3,6 +3,7 @@ import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { api } from "../core/api/dynamic";
 import { BlitzKitIcon } from "../icons/BlitzKit";
 import { Code } from "./Code";
+import { Text } from "./Text";
 import { TextField } from "./TextField";
 
 interface Props {
@@ -82,6 +83,7 @@ const strings = await api.strings(locale);
 
     .text-field {
       width: 100%;
+      max-width: 25rem;
     }
   }
 </style>
@@ -96,6 +98,10 @@ const strings = await api.strings(locale);
       <BlitzKitIcon className="icon" />
       <Code className="version">2.0</Code>
     </div>
+
+    <Text lowContrast>
+      {strings.home.credit}
+    </Text>
   </div>
 
   <TextField placeholder={strings.home.search}>

packages/website-ue/src/components/Text/index.css

@@ -0,0 +1,3 @@
+.text {
+  font-size: var(--font-size-regular);
+}

packages/website-ue/src/components/Text/index.tsx

@@ -0,0 +1,18 @@
+import type { ComponentProps } from "react";
+import type { Color } from "../../core/ui/color";
+import "./index.css";
+
+export interface TextProps extends ComponentProps<"span"> {
+  color?: Color;
+  lowContrast?: boolean;
+}
+
+export function Text({ color = "gray", lowContrast, ...props }: TextProps) {
+  return (
+    <span
+      className="text"
+      style={{ color: `var(--${color}-${lowContrast ? 11 : 12})` }}
+      {...props}
+    />
+  );
+}

packages/website-ue/src/core/api/abstract.ts

@@ -32,9 +32,8 @@ export abstract class AbstractAPI {
     return await this._strings(locale);
   }
   async gameStrings(locale: string, prefix: string) {
-    const supported = this.assertLocale(locale);
-    const blitz = supported.blitz ?? supported.locale;
-    return await this._gameStrings(blitz, prefix);
+    this.assertLocale(locale);
+    return await this._gameStrings(locale, prefix);
   }
 
   abstract tank(id: string): Promise<Tank>;

packages/website-ue/src/core/api/server.ts

@@ -14,7 +14,9 @@ if (typeof window !== "undefined") {
   throw new Error("ServerAPI is being evaluated in the browser");
 }
 
-const globbedStrings = import.meta.glob("../../../../i18n/strings/*.json");
+const globbedStrings = import.meta.glob("../../../../i18n/strings/*.json", {
+  import: "default",
+});
 
 interface LocalizationConfig {
   namespaces: string[];
@@ -72,7 +74,7 @@ export class ServerAPI extends AbstractAPI {
         Object.assign(
           strings,
           await fetch(
-            `${remoteStorage.url}/${remoteStorage.relative_path}/${namespace}/${locale}.yaml`
+            `${remoteStorage.url}${remoteStorage.relative_path}/${namespace}/${locale}.yaml`
           )
             .then((response) => response.text())
             .then((text) => {

packages/website-ue/src/core/ui/color.ts

@@ -0,0 +1,7 @@
+import type * as colors from "@radix-ui/colors";
+
+const ignoreEndings = ["A", "P3", "Dark", "DarkA", "DarkP3"] as const;
+export type Color = Exclude<
+  keyof typeof colors,
+  `${string}${(typeof ignoreEndings)[number]}` | "__esModule"
+>;

packages/website-ue/src/pages/api/strings/[locale].json.ts

@@ -0,0 +1,15 @@
+import locales from "@blitzkit/i18n/locales.json";
+import type { APIContext, GetStaticPaths } from "astro";
+import { api } from "../../../core/api/dynamic";
+
+export const getStaticPaths = (() => {
+  return locales.supported.map(({ locale }) => ({ params: { locale } }));
+}) satisfies GetStaticPaths;
+
+/**
+ * BlitzKit strings.
+ */
+export async function GET({ params }: APIContext<never, { locale: string }>) {
+  const strings = await api.strings(params.locale);
+  return Response.json(strings);
+}