feat: scales

bun.lock

@@ -188,6 +188,7 @@
         "@blitzkit/i18n": "workspace:*",
         "@bufbuild/protobuf": "^2.10.2",
         "@fontsource-variable/inter": "^5.2.8",
+        "@fontsource-variable/roboto-flex": "^5.2.8",
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-icons": "^1.3.2",
         "@react-three/drei": "^10.7.6",
@@ -546,6 +547,8 @@
 
     "@fontsource-variable/inter": ["@fontsource-variable/[email protected]", "", {}, "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ=="],
 
+    "@fontsource-variable/roboto-flex": ["@fontsource-variable/[email protected]", "", {}, "sha512-Q9zbz+P2VrDeIxBu9YAIG+eYpLmQF5FIJEEwAWn8En9Lao1TOISnoYcywGV+jSv7LGsHEndCR8hveXPnvCBEQQ=="],
+
     "@fontsource/inter": ["@fontsource/[email protected]", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="],
 
     "@gltf-transform/core": ["@gltf-transform/[email protected]", "", { "dependencies": { "property-graph": "^3.0.0" } }, "sha512-qKhrQ29KJ9K6sz7xGoGRllqPBlROjPJMQPvCLBOfgMPH3S/Ph5E0e6fD5WmwTY5QPyBsDMRqKd1Vl0ncThTXGw=="],

packages/i18n/strings/en.json

@@ -1,6 +1,6 @@
 {
   "common": {
-    "blitzkit": "BlitzKit"
+    "name": "BlitzKit"
   },
 
   "units": {

packages/scripts/src/protos.ts

@@ -1,22 +1,16 @@
-import { exec as execSync } from "child_process";
+import { execFile } from "child_process";
 import { existsSync } from "fs";
-import { readdir, rm } from "fs/promises";
-import { promisify } from "util";
+import { mkdir, readdir, rm, writeFile } from "fs/promises";
 
-const MAX_COMMAND_LENGTH = 2 ** 11;
 const TS_PROTO_EXECUTABLE_LOCATIONS = [
   "./node_modules/.bin/protoc-gen-ts_proto",
   "../../node_modules/.bin/protoc-gen-ts_proto",
 ];
-
-const roots = [
-  // "../../packages/core/src/protos",
+const ROOTS = [
   "../../packages/closed/protos",
   "../../packages/website-ue/src/protos",
 ];
 
-const exec = promisify(execSync);
-
 let tsProtoExecutableLocation: string | undefined = undefined;
 
 for (const location of TS_PROTO_EXECUTABLE_LOCATIONS) {
@@ -37,7 +31,63 @@ if (!tsProtoExecutableLocation) {
   );
 }
 
-for (const root of roots) {
+// for (const root of ROOTS) {
+//   const filesRaw = await readdir(`${root}`);
+//   const files: string[] = [];
+
+//   for (const file of filesRaw) {
+//     if (file.endsWith(".proto")) files.push(file);
+//     if (file.endsWith(".ts")) await rm(`${root}/${file}`);
+//   }
+
+//   while (files.length > 0) {
+//     let command = [
+//       "protoc",
+//       `--plugin=${tsProtoExecutableLocation}`,
+//       "--ts_proto_opt=esModuleInterop=true",
+//       "--ts_proto_opt=oneof=unions-value",
+//       // "--ts_proto_opt=removeEnumPrefix=true",
+//       "--ts_proto_opt=unrecognizedEnum=false",
+//       "--ts_proto_opt=snakeToCamel=false",
+//       `--ts_proto_out=${root}`,
+//       ...ROOTS.map((root) => `-I=${root}`),
+//     ].join(" ");
+
+//     while (true) {
+//       if (files.length === 0) break;
+
+//       const file = files.at(-1);
+//       const newLine = ` ${root}/${file}`;
+
+//       if (command.length + newLine.length < MAX_COMMAND_LENGTH) {
+//         const file = files.pop();
+//         command += newLine;
+//         // console.log(`  ${file}`);
+//       } else {
+//         break;
+//       }
+//     }
+
+//     await exec(command);
+//   }
+// }
+
+await mkdir("temp", { recursive: true });
+
+for (const root of ROOTS) {
+  let args = "";
+
+  for (const include of ROOTS) {
+    args += `-I=${include}\n`;
+  }
+
+  args += `--plugin=${tsProtoExecutableLocation}\n`;
+  args += "--ts_proto_opt=esModuleInterop=true\n";
+  args += "--ts_proto_opt=oneof=unions-value\n";
+  args += "--ts_proto_opt=unrecognizedEnum=false\n";
+  args += "--ts_proto_opt=snakeToCamel=false\n";
+  args += `--ts_proto_out=${root}\n`;
+
   const filesRaw = await readdir(`${root}`);
   const files: string[] = [];
 
@@ -46,34 +96,6 @@ for (const root of roots) {
     if (file.endsWith(".ts")) await rm(`${root}/${file}`);
   }
 
-  while (files.length > 0) {
-    let command = [
-      "protoc",
-      `--plugin=${tsProtoExecutableLocation}`,
-      "--ts_proto_opt=esModuleInterop=true",
-      "--ts_proto_opt=oneof=unions-value",
-      // "--ts_proto_opt=removeEnumPrefix=true",
-      "--ts_proto_opt=unrecognizedEnum=false",
-      "--ts_proto_opt=snakeToCamel=false",
-      `--ts_proto_out=${root}`,
-      ...roots.map((root) => `-I=${root}`),
-    ].join(" ");
-
-    while (true) {
-      if (files.length === 0) break;
-
-      const file = files.at(-1);
-      const newLine = ` ${root}/${file}`;
-
-      if (command.length + newLine.length < MAX_COMMAND_LENGTH) {
-        const file = files.pop();
-        command += newLine;
-        // console.log(`  ${file}`);
-      } else {
-        break;
-      }
-    }
-
-    await exec(command);
-  }
+  await writeFile("temp/protoc.txt", args);
+  execFile("protoc", ["@temp/protoc.txt"]);
 }

packages/website-ue/astro.config.ts

@@ -1,13 +1,11 @@
 import node from "@astrojs/node";
 import react from "@astrojs/react";
-import { wrapper } from "@blitzkit/i18n";
 import locales from "@blitzkit/i18n/locales.json";
 import strings from "@blitzkit/i18n/strings/en.json";
 import { mauve, mauveDark } from "@radix-ui/colors";
 import favicons from "astro-favicons";
 import { defineConfig } from "astro/config";
 import packageJSON from "../../package.json";
-import { tools } from "./src/core/tools/tools";
 
 const POSSIBLE_TARGETS = ["app", "web"];
 
@@ -48,35 +46,35 @@ export default defineConfig({
 
       version: packageJSON.version,
 
-      shortcuts: Object.values(tools)
-        .filter((tool) => !tool.disabled && !tool.href)
-        .map((tool) => {
-          const stringId = (tool.strings ??
-            tool.id) as keyof typeof strings.website.tools;
+      // shortcuts: Object.values(tools)
+      //   .filter((tool) => !tool.disabled && !tool.href)
+      //   .map((tool) => {
+      //     const stringId = (tool.strings ??
+      //       tool.id) as keyof typeof strings.website.tools;
 
-          return {
-            name: strings.website.tools[stringId].name,
-            name_localized: wrapper(
-              (strings) => strings.website.tools[stringId].name
-            ),
-            description: strings.website.tools[stringId].description,
-            description_localized: wrapper(
-              (strings) => strings.website.tools[stringId].description
-            ),
-            short_name: strings.website.tools[stringId].name,
-            short_name_localized: wrapper(
-              (strings) => strings.website.tools[stringId].name
-            ),
-            url: `/${tool.id}`,
-            icon: `public/assets/tools/${tool.id}.webp`,
-          };
-        }),
+      //     return {
+      //       name: strings.website.tools[stringId].name,
+      //       name_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].name
+      //       ),
+      //       description: strings.website.tools[stringId].description,
+      //       description_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].description
+      //       ),
+      //       short_name: strings.website.tools[stringId].name,
+      //       short_name_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].name
+      //       ),
+      //       url: `/${tool.id}`,
+      //       icon: `public/assets/tools/${tool.id}.webp`,
+      //     };
+      //   }),
 
       manifest: {
-        description: strings.website.home.seo_description,
-        description_localized: wrapper(
-          (strings) => strings.website.home.seo_description
-        ),
+        // description: strings.website.home.seo_description,
+        // description_localized: wrapper(
+        //   (strings) => strings.website.home.seo_description
+        // ),
 
         dir: "ltr",
         categories: ["utilities", "games", "developer", "developer tools"],

packages/website-ue/package.json

@@ -18,6 +18,7 @@
     "@blitzkit/i18n": "workspace:*",
     "@bufbuild/protobuf": "^2.10.2",
     "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/roboto-flex": "^5.2.8",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@react-three/drei": "^10.7.6",

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

@@ -1,46 +1,9 @@
----
-import type { Color } from "../pages/styles/colors/[accent].css";
-
-interface Props {
-  accent: Color;
-}
-
-const { accent } = Astro.props;
-
-const accentVariables = {
-  "accent-1": `var(--${accent}-1)`,
-  "accent-2": `var(--${accent}-2)`,
-  "accent-3": `var(--${accent}-3)`,
-  "accent-4": `var(--${accent}-4)`,
-  "accent-5": `var(--${accent}-5)`,
-  "accent-6": `var(--${accent}-6)`,
-  "accent-7": `var(--${accent}-7)`,
-  "accent-8": `var(--${accent}-8)`,
-  "accent-9": `var(--${accent}-9)`,
-  "accent-10": `var(--${accent}-10)`,
-  "accent-11": `var(--${accent}-11)`,
-  "accent-12": `var(--${accent}-12)`,
-};
----
-
-<style is:global define:vars={accentVariables}>
+<style is:global>
   @import "@radix-ui/colors/mauve-dark.css";
   @import "@radix-ui/colors/mauve-alpha.css";
+  @import "@fontsource-variable/roboto-flex";
 
   body {
-    --gray-1: var(--mauve-1);
-    --gray-2: var(--mauve-2);
-    --gray-3: var(--mauve-3);
-    --gray-4: var(--mauve-4);
-    --gray-5: var(--mauve-5);
-    --gray-6: var(--mauve-6);
-    --gray-7: var(--mauve-7);
-    --gray-8: var(--mauve-8);
-    --gray-9: var(--mauve-9);
-    --gray-10: var(--mauve-10);
-    --gray-11: var(--mauve-11);
-    --gray-12: var(--mauve-12);
-
     --space-0: 0.0625rem;
     --space-1: 0.125rem;
     --space-2: 0.25rem;
@@ -66,24 +29,13 @@ const accentVariables = {
 
     background-color: var(--gray-1);
     color: var(--gray-12);
-    font-family: "Inter Variable", sans-serif;
+    font-family: "Roboto Flex", sans-serif;
 
     display: flex;
     flex-direction: column;
   }
 
-  body,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
+  body {
     margin: 0;
   }
-
-  a {
-    color: var(--accent-11);
-  }
 </style>

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

@@ -0,0 +1,23 @@
+---
+import type { Color } from "../pages/styles/colors/[accent].css";
+
+interface Props {
+  color: Color;
+  alias: string;
+}
+
+const { color, alias } = Astro.props;
+
+let styles = "";
+
+styles += ":root{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--${alias}-${n}:var(--${color}-${n});`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>

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

@@ -0,0 +1,25 @@
+---
+import * as colors from "@radix-ui/colors";
+import type { Color } from "../pages/styles/colors/[accent].css";
+
+interface Props {
+  color: Color;
+}
+
+const { color } = Astro.props;
+const scale = colors[`${color}Dark`];
+
+let styles = "";
+
+styles += ":root{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  const value = scale[`${color}${n}` as keyof typeof scale];
+  styles += `--${color}-${n}:${value};`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>

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

@@ -1,4 +1,4 @@
-input {
+.text-field {
   min-width: 0;
   max-width: var(--space-9);
 
@@ -12,4 +12,8 @@ input {
 
   font-weight: var(--weight-medium);
   font-size: var(--font-size-regular);
+
+  &[data-has-icon="true"] {
+    padding-left: var(--space-3);
+  }
 }

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

@@ -2,5 +2,5 @@ import type { ComponentProps } from "react";
 import "./index.css";
 
 export function TextField(props: ComponentProps<"input">) {
-  return <input {...props} />;
+  return <input className="text-field" {...props} />;
 }

packages/website-ue/src/layouts/BaseLayout.astro

@@ -2,6 +2,8 @@
 import "@fontsource-variable/inter";
 import BaseMeta from "../components/BaseMeta.astro";
 import BaseStyles from "../components/BaseStyles.astro";
+import ColorAlias from "../components/ColorAlias.astro";
+import ColorScale from "../components/ColorScale.astro";
 import Navbar from "../components/Navbar.astro";
 import type { Color } from "../pages/styles/colors/[accent].css";
 
@@ -16,7 +18,12 @@ const { accent, noNavbar } = Astro.props;
 <html>
   <head>
     <BaseMeta />
-    <BaseStyles {accent} />
+
+    <ColorScale color="mauve" />
+    <ColorScale color={accent} />
+    <ColorAlias color="mauve" alias="gray" />
+    <ColorAlias color={accent} alias="accent" />
+    <BaseStyles />
   </head>
 
   <body class="dark">

packages/website/src/layouts/BaseLayout.astro

@@ -11,7 +11,6 @@ import LocaleRedirector from "../components/LocaleRedirector.astro";
 import Meta from "../components/Meta.astro";
 import Navbar from "../components/Navbar.astro";
 import Servicing from "../components/Servicing.astro";
-import "./base.css";
 
 export interface Props {
   noFooter?: boolean;