From cfc0ebb8e5a1f9401bdac8dbfd411a592b48de65 Mon Sep 17 00:00:00 2001 From: tresabhi <43380238+tresabhi@users.noreply.github.com> Date: Tue, 18 Aug 2026 13:02:59 -0500 Subject: [PATCH] migrate 2 --- bun.lock | 6 + packages/website/package.json | 2 + .../components/{Meta.astro => BaseMeta.astro} | 0 .../website/src/components/BaseStyles.astro | 113 ++++++++++++++++++ .../website/src/components/ColorAlias.astro | 33 +++++ .../website/src/components/ColorScale.astro | 54 +++++++++ .../src/components/HomeCosmetics.astro | 4 +- .../website/src/components/HomeGames.astro | 4 +- .../website/src/components/HomePlayers.astro | 4 +- .../website/src/components/HomeTanks.astro | 4 +- .../src/components/HomeTechnical.astro | 4 +- packages/website/src/components/LinkI18n.tsx | 17 +-- .../website/src/components/PageWrapper.tsx | 55 --------- packages/website/src/components/Plugs.tsx | 41 ------- .../website/src/components/ToolCard.astro | 100 ++++++++-------- packages/website/src/layouts/BaseLayout.astro | 97 ++++++++++----- packages/website/src/layouts/ToolLayout.astro | 47 -------- .../[...locale]/index.astro | 29 ++--- 18 files changed, 348 insertions(+), 266 deletions(-) rename packages/website/src/components/{Meta.astro => BaseMeta.astro} (100%) create mode 100644 packages/website/src/components/BaseStyles.astro create mode 100644 packages/website/src/components/ColorAlias.astro create mode 100644 packages/website/src/components/ColorScale.astro delete mode 100644 packages/website/src/components/PageWrapper.tsx delete mode 100644 packages/website/src/components/Plugs.tsx delete mode 100644 packages/website/src/layouts/ToolLayout.astro diff --git a/bun.lock b/bun.lock index dda906038..e1e87173b 100644 --- a/bun.lock +++ b/bun.lock @@ -107,6 +107,8 @@ "@astrolib/seo": "^1.0.0-beta.8", "@blitzkit/core": "workspace:*", "@blitzkit/i18n": "workspace:*", + "@fontsource-variable/jetbrains-mono": "^5.3.0", + "@fontsource-variable/roboto-flex": "^5.3.0", "@fontsource/inter": "^5.2.8", "@gltf-transform/core": "^4.4.2", "@gltf-transform/functions": "^4.4.2", @@ -480,6 +482,10 @@ "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.10", "", { "os": "win32", "cpu": "x64" }, "sha512-9KpxSVFCu0iK1owoez6aC/s/EdUQLDN3adTxGCqxMVhrPDj6bt5dbrHDXUuq+Bs2vATFBBrQS5vdQ/Ed2P+nbw=="], + "@fontsource-variable/jetbrains-mono": ["@fontsource-variable/jetbrains-mono@5.3.0", "", {}, "sha512-F32xpS2NsGYoQi2ADSkKTgpJj7ozajsGgDJ8woTnqjmIB+dxDIqImjl4pXZVEExu8UFZ2ndhmX18EBS/hdz3Lw=="], + + "@fontsource-variable/roboto-flex": ["@fontsource-variable/roboto-flex@5.3.0", "", {}, "sha512-bOxckUy0qXNRjhV6e4pcHGSvptix4ZRD1uaj5Za8h+p3qrb2GL4U4TQdpVmPSy0SmqwldfD+JJqEKdF68EyiAw=="], + "@fontsource/inter": ["@fontsource/inter@5.2.8", "", {}, "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg=="], "@gltf-transform/core": ["@gltf-transform/core@4.4.2", "", { "dependencies": { "property-graph": "^4.1.0" } }, "sha512-qsWKwNSwK+2s834Mt4xbYcyHqCrgNFP7hIv5s487JxebngRfDgelpghNF+kSswGb2/NuapasfK3UViFoSJJoMg=="], diff --git a/packages/website/package.json b/packages/website/package.json index ab97027b5..46ff2b77c 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -15,6 +15,8 @@ "@astrolib/seo": "^1.0.0-beta.8", "@blitzkit/core": "workspace:*", "@blitzkit/i18n": "workspace:*", + "@fontsource-variable/jetbrains-mono": "^5.3.0", + "@fontsource-variable/roboto-flex": "^5.3.0", "@fontsource/inter": "^5.2.8", "@gltf-transform/core": "^4.4.2", "@gltf-transform/functions": "^4.4.2", diff --git a/packages/website/src/components/Meta.astro b/packages/website/src/components/BaseMeta.astro similarity index 100% rename from packages/website/src/components/Meta.astro rename to packages/website/src/components/BaseMeta.astro diff --git a/packages/website/src/components/BaseStyles.astro b/packages/website/src/components/BaseStyles.astro new file mode 100644 index 000000000..445cc011a --- /dev/null +++ b/packages/website/src/components/BaseStyles.astro @@ -0,0 +1,113 @@ +--- +import "@fontsource-variable/jetbrains-mono"; +import "@fontsource-variable/roboto-flex"; +--- + + + + diff --git a/packages/website/src/components/ColorAlias.astro b/packages/website/src/components/ColorAlias.astro new file mode 100644 index 000000000..fd73eb69e --- /dev/null +++ b/packages/website/src/components/ColorAlias.astro @@ -0,0 +1,33 @@ +--- +import type { Color } from "../ui/color"; + +interface Props { + color: Color; + alias: string; + alpha?: boolean; +} + +const { color, alias, alpha } = Astro.props; + +let styles = ""; + +styles += ":root{"; + +for (let i = 0; i < 12; i++) { + const n = i + 1; + styles += `--${alias}-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`; +} + +styles += "}"; + +styles += `*[data-accent='${alias}']{`; + +for (let i = 0; i < 12; i++) { + const n = i + 1; + styles += `--accent-${alpha ? "a" : ""}${n}:var(--${alias}-${alpha ? "a" : ""}${n});`; +} + +styles += "}"; +--- + + diff --git a/packages/website/src/components/ColorScale.astro b/packages/website/src/components/ColorScale.astro new file mode 100644 index 000000000..0e9833191 --- /dev/null +++ b/packages/website/src/components/ColorScale.astro @@ -0,0 +1,54 @@ +--- +import * as colors from "@radix-ui/colors"; +import type { Color } from "../ui/color"; + +interface Props { + color: Color | AlphaOnlyColor; + alpha?: boolean; +} + +const ALPHA_ONLY_COLORS = ["black", "white"] as const; +type AlphaOnlyColor = (typeof ALPHA_ONLY_COLORS)[number]; + +const { color, alpha } = Astro.props; +const nameLight = `${color}${alpha ? "A" : ""}`; +const nameDark = `${color}${ + ALPHA_ONLY_COLORS.includes(color as AlphaOnlyColor) ? "" : "Dark" +}${alpha ? "A" : ""}`; +const scaleLight = colors[nameLight as keyof typeof colors]; +const scaleDark = colors[nameDark as keyof typeof colors]; + +let styles = ""; + +styles += ":root.dark{"; + +for (let i = 0; i < 12; i++) { + const n = i + 1; + const value = + scaleDark[`${color}${alpha ? "A" : ""}${n}` as keyof typeof scaleDark]; + styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`; +} + +styles += "}"; +styles += ":root.light{"; + +for (let i = 0; i < 12; i++) { + const n = i + 1; + const value = + scaleLight[`${color}${alpha ? "A" : ""}${n}` as keyof typeof scaleLight]; + styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`; +} + +styles += "}"; + +styles += `*[data-accent='${color}']{`; + +for (let i = 0; i < 12; i++) { + const n = i + 1; + styles += `--accent-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`; +} + +styles += "}"; +--- + + diff --git a/packages/website/src/components/HomeCosmetics.astro b/packages/website/src/components/HomeCosmetics.astro index df2ffbd59..138a2fcc3 100644 --- a/packages/website/src/components/HomeCosmetics.astro +++ b/packages/website/src/components/HomeCosmetics.astro @@ -1,7 +1,7 @@ --- -import { Heading } from "@radix-ui/themes"; import { tools } from "../constants/tools"; import { getStrings } from "../core/i18n/getStrings"; +import { Heading } from "./Heading"; import ToolCard from "./ToolCard.astro"; import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro"; import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro"; @@ -15,7 +15,7 @@ const { locale } = Astro.props; const strings = getStrings(locale); --- -{strings.home.cosmetics} +{strings.home.cosmetics} diff --git a/packages/website/src/components/HomeGames.astro b/packages/website/src/components/HomeGames.astro index 56ca357ee..72121b9ed 100644 --- a/packages/website/src/components/HomeGames.astro +++ b/packages/website/src/components/HomeGames.astro @@ -1,7 +1,7 @@ --- -import { Heading } from "@radix-ui/themes"; import { tools } from "../constants/tools"; import { getStrings } from "../core/i18n/getStrings"; +import { Heading } from "./Heading"; import ToolCard from "./ToolCard.astro"; import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro"; import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro"; @@ -15,7 +15,7 @@ const { locale } = Astro.props; const strings = getStrings(locale); --- -{strings.home.games} +{strings.home.games} diff --git a/packages/website/src/components/HomePlayers.astro b/packages/website/src/components/HomePlayers.astro index 06cb5c0bb..b0dc1e301 100644 --- a/packages/website/src/components/HomePlayers.astro +++ b/packages/website/src/components/HomePlayers.astro @@ -1,7 +1,7 @@ --- -import { Heading } from "@radix-ui/themes"; import { tools } from "../constants/tools"; import { getStrings } from "../core/i18n/getStrings"; +import { Heading } from "./Heading"; import ToolCard from "./ToolCard.astro"; import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro"; import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro"; @@ -15,7 +15,7 @@ const { locale } = Astro.props; const strings = getStrings(locale); --- -{strings.home.players} +{strings.home.players} diff --git a/packages/website/src/components/HomeTanks.astro b/packages/website/src/components/HomeTanks.astro index 8a69a1c1e..d13e57201 100644 --- a/packages/website/src/components/HomeTanks.astro +++ b/packages/website/src/components/HomeTanks.astro @@ -1,7 +1,7 @@ --- -import { Heading } from "@radix-ui/themes"; import { tools } from "../constants/tools"; import { getStrings } from "../core/i18n/getStrings"; +import { Heading } from "./Heading"; import ToolCard from "./ToolCard.astro"; import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro"; import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro"; @@ -14,7 +14,7 @@ const { locale } = Astro.props; const strings = getStrings(locale); --- -{strings.home.tanks} +{strings.home.tanks} diff --git a/packages/website/src/components/HomeTechnical.astro b/packages/website/src/components/HomeTechnical.astro index 488774a63..62008ee39 100644 --- a/packages/website/src/components/HomeTechnical.astro +++ b/packages/website/src/components/HomeTechnical.astro @@ -1,7 +1,7 @@ --- -import { Heading } from "@radix-ui/themes"; import { tools } from "../constants/tools"; import { getStrings } from "../core/i18n/getStrings"; +import { Heading } from "./Heading"; import ToolCard from "./ToolCard.astro"; import ToolCardLayoutColumn from "./ToolCardLayoutColumn.astro"; import ToolCardLayoutRoot from "./ToolCardLayoutRoot.astro"; @@ -15,7 +15,7 @@ const { locale } = Astro.props; const strings = getStrings(locale); --- -{strings.home.technical} +{strings.home.technical} diff --git a/packages/website/src/components/LinkI18n.tsx b/packages/website/src/components/LinkI18n.tsx index f076de7c9..0efce7170 100644 --- a/packages/website/src/components/LinkI18n.tsx +++ b/packages/website/src/components/LinkI18n.tsx @@ -1,14 +1,15 @@ import locales from "@blitzkit/i18n/locales.json"; -import { Link, type LinkProps } from "@radix-ui/themes"; -import type { LocaleAcceptorProps } from "../hooks/useLocale"; +import { Link, type LinkProps } from "./Link"; -type LinkI18nProps = LinkProps & LocaleAcceptorProps; - -export function LinkI18n({ locale, href, ...props }: LinkI18nProps) { - const prefix = - locale === undefined || locale === locales.default ? "" : `/${locale}`; +export interface LinkI18n extends LinkProps { + locale: string; +} +export function LinkI18n({ locale, href, ...props }: LinkI18n) { return ( - + ); } diff --git a/packages/website/src/components/PageWrapper.tsx b/packages/website/src/components/PageWrapper.tsx deleted file mode 100644 index 3f3193b54..000000000 --- a/packages/website/src/components/PageWrapper.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { Flex, type FlexProps, Theme } from "@radix-ui/themes"; -import type { ComponentProps } from "react"; -import { NAVBAR_HEIGHT } from "../constants/navbar"; -import type { RadixSize } from "../stores/embedState"; -import { BlitzKitTheme } from "./BlitzKitTheme"; - -type PageWrapperProps = FlexProps & { - color?: ComponentProps["accentColor"]; - containerProps?: ComponentProps; - noFlex1?: boolean; - padding?: RadixSize; - noMinHeight?: boolean; -}; - -export function PageWrapper({ - style, - color, - children, - noFlex1 = false, - containerProps, - noMinHeight = false, - padding = "4", - ...props -}: PageWrapperProps) { - return ( - - - {children} - - - ); -} diff --git a/packages/website/src/components/Plugs.tsx b/packages/website/src/components/Plugs.tsx deleted file mode 100644 index 9322fcc6b..000000000 --- a/packages/website/src/components/Plugs.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { assertSecret } from "@blitzkit/core"; -import { ArrowRightIcon } from "@radix-ui/react-icons"; -import { Button, Code, Flex, Link, Text } from "@radix-ui/themes"; - -export function Plugs() { - const promoteOpentest = - assertSecret(import.meta.env.PUBLIC_PROMOTE_OPENTEST) === "true" && - assertSecret(import.meta.env.PUBLIC_ENVIRONMENT) !== "opentest"; - const promotions = [promoteOpentest]; - - if (promotions.every((promotion) => !promotion)) return null; - - return ( - - {promoteOpentest && ( - - - BlitzKit{" "} - - opentest - {" "} - is available now{" "} - - - - - - - )} - - ); -} diff --git a/packages/website/src/components/ToolCard.astro b/packages/website/src/components/ToolCard.astro index c2446e187..91b86540a 100644 --- a/packages/website/src/components/ToolCard.astro +++ b/packages/website/src/components/ToolCard.astro @@ -1,16 +1,16 @@ --- -import { Box, Flex, Heading, Text } from "@radix-ui/themes"; import type { Tool } from "../constants/tools"; import { getStrings } from "../core/i18n/getStrings"; +import { Heading } from "./Heading"; import { LinkI18n } from "./LinkI18n"; +import { Text } from "./Text"; interface Props { tool: Tool; locale: string; - significant?: boolean; } -const { locale, tool, significant } = Astro.props; +const { locale, tool } = Astro.props; const strings = getStrings(locale); const toolStrings = strings.website.tools[ @@ -20,19 +20,19 @@ const toolStrings = - - +
+
- - - +
+ {toolStrings.name} - + + {toolStrings.description} - - +
+ - + diff --git a/packages/website/src/layouts/BaseLayout.astro b/packages/website/src/layouts/BaseLayout.astro index 7f216c3de..331cf7eb2 100644 --- a/packages/website/src/layouts/BaseLayout.astro +++ b/packages/website/src/layouts/BaseLayout.astro @@ -1,48 +1,81 @@ --- -import strings from "@blitzkit/i18n/strings/en.json"; -import { Flex } from "@radix-ui/themes"; -import Analytics from "../components/Analytics.astro"; -import { BlitzKitTheme } from "../components/BlitzKitTheme"; -import { Checks } from "../components/Checks"; -import EasterEggs from "../components/EasterEggs.astro"; -import Footer from "../components/Footer.astro"; -import LocaleRedirector from "../components/LocaleRedirector.astro"; -import Meta from "../components/Meta.astro"; -import Servicing from "../components/Servicing.astro"; -import "./base.css"; +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 type { Color } from "../ui/color"; -export interface Props { - noFooter?: boolean; - noNavbar?: boolean; - integrated?: boolean; +interface Props { locale: string; + accent: Color; } -const servicing = import.meta.env.SERVICING; -const { noFooter, noNavbar, integrated, locale } = Astro.props; +const { accent, locale } = Astro.props; --- - + - + - - - - + + + + + + + + + + + + + + + + + + - - - - + + - {servicing ? : } +
+ +
- {!noFooter &&