feat: macro names

packages/i18n/strings/en.json

@@ -123,11 +123,6 @@
     "media": "Media methods",
     "no_docs": "This method has no documentation.",
     "test": "Test",
-    "view_full": "View full types",
-
-    "macros": {
-      "see": "See {path} {message}",
-      "types": "Types:"
-    }
+    "view_full": "View full types"
   }
 }

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

@@ -9,7 +9,12 @@ interface Props {
 }
 
 const macroPattern = /@(\w+) (.+)/;
-const macros: Record<string, string> = {};
+const macros: Record<string, string[]> = {};
+
+const macroComponents = {
+  see: ApiMacroSee,
+  type: ApiMacroType,
+};
 
 const { body: bodyOriginal, locale } = Astro.props;
 let body = "";
@@ -25,7 +30,11 @@ for (const line of bodyOriginal.split("\n")) {
   const macro = match[1];
   const value = match[2];
 
-  macros[macro] = value;
+  if (macro in macros) {
+    macros[macro].push(value);
+  } else {
+    macros[macro] = [value];
+  }
 }
 ---
 
@@ -56,7 +65,17 @@ for (const line of bodyOriginal.split("\n")) {
   <div class="content">
     <MarkdownCustom {body} />
 
-    {"see" in macros && <ApiMacroSee {locale} value={macros.see} />}
-    {"type" in macros && <ApiMacroType {locale} value={macros.type} />}
+    <!-- {"see" in macros && <ApiMacroSee {locale} value={macros.see} />}
+    {"type" in macros && <ApiMacroType {locale} value={macros.type} />} -->
+
+    {
+      Object.entries(macroComponents).map(([macro, Component]) => {
+        if (!(macro in macros)) return null;
+
+        return macros[macro].map((value) => {
+          return <Component {locale} value={value} />;
+        });
+      })
+    }
   </div>
 </div>

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

@@ -1,7 +1,6 @@
 ---
 import { sluggify } from "@blitzkit/core";
-import { literalsArray } from "@blitzkit/i18n";
-import { api } from "../core/api/dynamic";
+import { Code } from "./Code";
 import { Link } from "./Link";
 import { Text } from "./Text";
 
@@ -10,10 +9,9 @@ interface Props {
   locale: string;
 }
 
-const bodyPattern = /^([a-z0-9-\/\.]+) (.+)$/;
+const bodyPattern = /^([a-z0-9-\/\.\[\]]+) (.+)$/;
 
 const { value, locale } = Astro.props;
-const strings = await api.strings(locale);
 
 const match = value.match(bodyPattern);
 
@@ -26,10 +24,13 @@ const message = match[2];
 ---
 
 <Text>
-  {
-    literalsArray(strings.api.macros.see, {
-      path: <Link href={`#${sluggify(path)}`}>{path}</Link>,
-      message,
-    })
-  }
+  <Text lowContrast weight="medium" color="tomato">
+    <Code>@see</Code>
+  </Text>
+
+  <Link underline="never" href={`#${sluggify(path)}`}>
+    <Code>{path}</Code>
+  </Link>
+
+  {message}
 </Text>

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

@@ -5,6 +5,8 @@ import { Link } from "./Link";
 import { api } from "../core/api/dynamic";
 import HighlightedCodeBlock from "./HighlightedCodeBlock.astro";
 import { Text } from "./Text";
+import { ArrowBottomRightIcon } from "@radix-ui/react-icons";
+import { Code } from "./Code";
 
 interface Props {
   value: string;
@@ -73,6 +75,14 @@ stripped = stripped.replaceAll("    ", "  ");
 ---
 
 <style>
+  .macro {
+    color: var(--gray-11);
+
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
   .types {
     overflow: hidden;
 
@@ -115,9 +125,13 @@ stripped = stripped.replaceAll("    ", "  ");
   }
 </script>
 
-<Text>
-  {strings.api.macros.types}
-</Text>
+<div class="macro">
+  <Text lowContrast weight="medium" color="tomato">
+    <Code>@types</Code>
+  </Text>
+
+  <ArrowBottomRightIcon />
+</div>
 
 <div class="types">
   <HighlightedCodeBlock {lang} content={stripped} />

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

@@ -2,10 +2,6 @@
   font-size: var(--font-size-regular);
   color: var(--gray-12);
 
-  &[data-low-contrast="true"] {
-    color: var(--white-a9);
-  }
-
   &[data-size="minor"] {
     font-size: var(--font-size-minor);
   }

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

@@ -1,5 +1,6 @@
 import type { ComponentProps } from "react";
 import { classNames } from "../../core/ui/classNames";
+import type { Color } from "../../core/ui/color";
 import styles from "./index.module.css";
 
 export interface TextProps extends ComponentProps<"span"> {
@@ -7,6 +8,7 @@ export interface TextProps extends ComponentProps<"span"> {
   lowContrast?: boolean;
   size?: "regular" | "minor" | "major";
   align?: "left" | "center" | "right";
+  color?: Color;
 }
 
 export function Text({
@@ -16,6 +18,7 @@ export function Text({
   weight,
   style,
   align,
+  color = "gray",
   ...props
 }: TextProps) {
   return (
@@ -25,6 +28,7 @@ export function Text({
       data-size={size}
       data-weight={weight}
       data-align={align === "left" ? undefined : align}
+      style={{ color: `var(--${color}-${lowContrast ? 10 : 12})` }}
       {...props}
     />
   );

packages/website-ue/src/pages/[...locale]/api/index.astro

@@ -2,6 +2,7 @@
 import "@radix-ui/colors/amber-dark.css";
 import { getCollection } from "astro:content";
 import ApiGroup from "../../../components/ApiGroup.astro";
+import ColorScale from "../../../components/ColorScale.astro";
 import { Heading } from "../../../components/Heading";
 import { Section } from "../../../components/Section";
 import SyntaxStyles from "../../../components/SyntaxStyles.astro";
@@ -25,8 +26,10 @@ paths.sort((a, b) => a.path.localeCompare(b.path));
 ---
 
 <BaseLayout {locale} accent="brown">
-  <ToolBanner {locale} tool={tools.api} slot="pre-app" />
   <SyntaxStyles slot="head" />
+  <ColorScale color="tomato" slot="head" />
+
+  <ToolBanner {locale} tool={tools.api} slot="pre-app" />
 
   <Section>
     <Heading>{strings.api.json}</Heading>

packages/website-ue/src/pages/api/avatars/[id].json.ts

@@ -10,9 +10,12 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 
 /**
- * Returns data on an avatar based on its `id`.
+ * Returns data on an avatar based on its `id`. Do not use the `.webp` URLs
+ * from the returned data as they point to Wargaming's servers which may update
+ * over time, out of sync with BlitzKit.
  *
  * @see avatars/list.json for all avatar ids.
+ * @see avatars/[id].webp for avatar images.
  * @type avatar
  */
 export async function GET({ params }: APIContext<never, { id: string }>) {