From cef18d4f64138cd3801d7ea19a2a9b9e41ed82df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Thu, 19 Mar 2026 17:17:23 -0500 Subject: [PATCH] feat: see macro --- packages/i18n/src/literals.ts | 45 +++++++++++++++---- packages/i18n/strings/en.json | 6 ++- .../src/components/ApiDescription.astro | 5 ++- .../website-ue/src/components/ApiEntry.astro | 2 +- .../src/components/ApiMacroSee.astro | 18 +++++++- .../src/components/ApiTester/index.tsx | 3 +- .../src/components/Link/index.module.css | 2 +- .../Text/{index.css => index.module.css} | 0 .../website-ue/src/components/Text/index.tsx | 4 +- 9 files changed, 67 insertions(+), 18 deletions(-) rename packages/website-ue/src/components/Text/{index.css => index.module.css} (100%) diff --git a/packages/i18n/src/literals.ts b/packages/i18n/src/literals.ts index e2efe5056..861ff02a5 100644 --- a/packages/i18n/src/literals.ts +++ b/packages/i18n/src/literals.ts @@ -1,16 +1,45 @@ export function literals( string: string, - literals?: Record + literals?: Record, ) { for (const key in literals) { - const mutated = string.replaceAll(`{${key}}`, `${literals[key]}`); - - if (import.meta.env.DEV && mutated === string) { - console.warn(`Could not find literal {${key}} in string "${string}"`); - } - - string = mutated; + string = string.replaceAll(`{${key}}`, `${literals[key]}`); } return string; } + +export function literalsArray( + string: string, + literals?: Record, +) { + if (!literals) return [string]; + + let array: (string | Literal)[] = [string]; + + for (const key in literals) { + const value = literals[key]; + const next: (string | Literal)[] = []; + + for (const chunk of array) { + if (typeof chunk !== "string") { + next.push(chunk); + continue; + } + + const parts = chunk.split(`{${key}}`); + + for (let index = 0; index < parts.length; index++) { + if (parts[index]) next.push(parts[index]); + + if (index < parts.length - 1) { + next.push(value); + } + } + } + + array = next; + } + + return array; +} diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index c2d2587c3..92c2eaf99 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -122,6 +122,10 @@ "pb": "Protocol Buffer methods", "media": "Media methods", "no_docs": "This method has no documentation.", - "test": "Test" + "test": "Test", + + "macros": { + "see": "See {path} {message}" + } } } diff --git a/packages/website-ue/src/components/ApiDescription.astro b/packages/website-ue/src/components/ApiDescription.astro index 4c1bd06f6..3c9e70643 100644 --- a/packages/website-ue/src/components/ApiDescription.astro +++ b/packages/website-ue/src/components/ApiDescription.astro @@ -4,12 +4,13 @@ import { MarkdownCustom } from "./MarkdownCustom"; interface Props { body: string; + locale: string; } const macroPattern = /@(\w+) (.+)/; const macros: Record = {}; -const { body: bodyOriginal } = Astro.props; +const { body: bodyOriginal, locale } = Astro.props; let body = ""; for (const line of bodyOriginal.split("\n")) { @@ -53,6 +54,6 @@ for (const line of bodyOriginal.split("\n")) {
- {"see" in macros && } + {"see" in macros && }
diff --git a/packages/website-ue/src/components/ApiEntry.astro b/packages/website-ue/src/components/ApiEntry.astro index 2a68462f0..81e88b3f6 100644 --- a/packages/website-ue/src/components/ApiEntry.astro +++ b/packages/website-ue/src/components/ApiEntry.astro @@ -23,5 +23,5 @@ const body = apiData.data.docs ?? strings.api.no_docs;
- +
diff --git a/packages/website-ue/src/components/ApiMacroSee.astro b/packages/website-ue/src/components/ApiMacroSee.astro index 5e58324f7..502eac2f8 100644 --- a/packages/website-ue/src/components/ApiMacroSee.astro +++ b/packages/website-ue/src/components/ApiMacroSee.astro @@ -1,13 +1,20 @@ --- +import { sluggify } from "@blitzkit/core"; +import { literalsArray } from "@blitzkit/i18n"; +import { api } from "../core/api/dynamic"; import { Link } from "./Link"; import { Text } from "./Text"; interface Props { value: string; + locale: string; } const bodyPattern = /^([a-z0-9-\/\.]+) (.+)$/; -const { value } = Astro.props; + +const { value, locale } = Astro.props; +const strings = await api.strings(locale); + const match = value.match(bodyPattern); if (match === null) { @@ -18,4 +25,11 @@ const path = match[1]; const message = match[2]; --- -See {path} {message} + + { + literalsArray(strings.api.macros.see, { + path: {path}, + message, + }) + } + diff --git a/packages/website-ue/src/components/ApiTester/index.tsx b/packages/website-ue/src/components/ApiTester/index.tsx index 672df8466..a83ee664e 100644 --- a/packages/website-ue/src/components/ApiTester/index.tsx +++ b/packages/website-ue/src/components/ApiTester/index.tsx @@ -1,3 +1,4 @@ +import { sluggify } from "@blitzkit/core"; import { PlayIcon } from "@radix-ui/react-icons"; import { Fragment, useState } from "react"; import { @@ -40,7 +41,7 @@ function Content({ path }: Props) { ); return ( -
+
{path.split(slugPattern).map((text, index) => { diff --git a/packages/website-ue/src/components/Link/index.module.css b/packages/website-ue/src/components/Link/index.module.css index 2646073fe..7124ed8a1 100644 --- a/packages/website-ue/src/components/Link/index.module.css +++ b/packages/website-ue/src/components/Link/index.module.css @@ -1,7 +1,7 @@ .link { text-decoration-color: currentColor; - display: flex; + display: inline; align-items: center; gap: var(--space-3); diff --git a/packages/website-ue/src/components/Text/index.css b/packages/website-ue/src/components/Text/index.module.css similarity index 100% rename from packages/website-ue/src/components/Text/index.css rename to packages/website-ue/src/components/Text/index.module.css diff --git a/packages/website-ue/src/components/Text/index.tsx b/packages/website-ue/src/components/Text/index.tsx index 63d31c0af..41dc074c8 100644 --- a/packages/website-ue/src/components/Text/index.tsx +++ b/packages/website-ue/src/components/Text/index.tsx @@ -1,6 +1,6 @@ import type { ComponentProps } from "react"; import { classNames } from "../../core/ui/classNames"; -import "./index.css"; +import styles from "./index.module.css"; export interface TextProps extends ComponentProps<"span"> { weight?: "light" | "regular" | "medium" | "bold" | "black"; @@ -20,7 +20,7 @@ export function Text({ }: TextProps) { return (