feat: see macro

packages/i18n/src/literals.ts

@@ -1,16 +1,45 @@
 export function literals(
   string: string,
-  literals?: Record<string, string | number | undefined>
+  literals?: Record<string, string | number | undefined>,
 ) {
   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<Type, Literal = Type | string>(
+  string: string,
+  literals?: Record<string, Literal>,
+) {
+  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;
+}

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}"
+    }
   }
 }

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<string, string> = {};
 
-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")) {
   <div class="gutter"></div>
   <div class="content">
     <MarkdownCustom {body} />
-    {"see" in macros && <ApiMacroSee value={macros.see} />}
+    {"see" in macros && <ApiMacroSee {locale} value={macros.see} />}
   </div>
 </div>

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

@@ -23,5 +23,5 @@ const body = apiData.data.docs ?? strings.api.no_docs;
 
 <div class="container">
   <ApiTester client:idle {locale} path={apiData.id} />
-  <ApiDescription {body} />
+  <ApiDescription {locale} {body} />
 </div>

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];
 ---
 
-<Text><Text color="tomato">See</Text> <Link>{path}</Link> {message}</Text>
+<Text>
+  {
+    literalsArray(strings.api.macros.see, {
+      path: <Link href={`#${sluggify(path)}`}>{path}</Link>,
+      message,
+    })
+  }
+</Text>

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 (
-    <div className={styles.tester}>
+    <div className={styles.tester} id={sluggify(path)}>
       <Text weight="medium">
         <Code className={styles.title}>
           {path.split(slugPattern).map((text, index) => {

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);
 

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 (
     <span
-      className={classNames("text", className)}
+      className={classNames(styles.text, className)}
       data-low-contrast={lowContrast}
       data-size={size}
       data-weight={weight}