feat: see macro

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}