From 0e57943d33193fa5703e345c63b350319a2f7592 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 15 Mar 2026 23:29:33 -0500
Subject: [PATCH] feat: cleaner api rendering

---
 packages/i18n/strings/en.json                      |  3 ++-
 packages/website-ue/src/components/ApiGroup.astro  | 14 ++++++++++++--
 .../src/components/MarkdownCustom/index.tsx        |  8 +++++---
 .../website-ue/src/components/ToolBanner.astro     |  1 -
 .../src/pages/[...locale]/api/index.astro          | 11 +++++++++--
 5 files changed, 28 insertions(+), 9 deletions(-)

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 41f03b9e8..ffecd6cd3 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -120,6 +120,7 @@
   "api": {
     "json": "JSON methods",
     "pb": "Protocol Buffer methods",
-    "media": "Media methods"
+    "media": "Media methods",
+    "no_docs": "This method has no documentation."
   }
 }
diff --git a/packages/website-ue/src/components/ApiGroup.astro b/packages/website-ue/src/components/ApiGroup.astro
index b209e3593..7e8b9ff8b 100644
--- a/packages/website-ue/src/components/ApiGroup.astro
+++ b/packages/website-ue/src/components/ApiGroup.astro
@@ -1,14 +1,17 @@
 ---
 import type { CollectionEntry } from "astro:content";
+import { api } from "../core/api/dynamic";
 import { Code } from "./Code";
 import { Heading } from "./Heading";
 import { MarkdownCustom } from "./MarkdownCustom";
 
 interface Props {
+  locale: string;
   apis: CollectionEntry<"api">[];
 }
 
-const { apis } = Astro.props;
+const { apis, locale } = Astro.props;
+const strings = await api.strings(locale);
 ---
 
 <style>
@@ -16,6 +19,10 @@ const { apis } = Astro.props;
     display: flex;
     flex-direction: column;
     gap: var(--space-4);
+
+    .docs {
+      margin-left: var(--space-5);
+    }
   }
 </style>
 
@@ -28,7 +35,10 @@ const { apis } = Astro.props;
           <Code>{api.id}</Code>
         </Heading>
 
-        <MarkdownCustom body={api.data.docs ?? ""} />
+        <MarkdownCustom
+          className="docs"
+          body={api.data.docs ?? strings.api.no_docs}
+        />
       </div>
     ))
 }
diff --git a/packages/website-ue/src/components/MarkdownCustom/index.tsx b/packages/website-ue/src/components/MarkdownCustom/index.tsx
index 4d8cca172..445bea356 100644
--- a/packages/website-ue/src/components/MarkdownCustom/index.tsx
+++ b/packages/website-ue/src/components/MarkdownCustom/index.tsx
@@ -1,14 +1,16 @@
+import type { ComponentProps } from "react";
 import Markdown from "react-markdown";
+import { classNames } from "../../core/ui/classNames";
 import { Text } from "../Text";
 import styles from "./index.module.css";
 
-interface Props {
+interface MarkdownCustom extends ComponentProps<"div"> {
   body: string;
 }
 
-export function MarkdownCustom({ body }: Props) {
+export function MarkdownCustom({ body, className, ...props }: MarkdownCustom) {
   return (
-    <div className={styles.markdown}>
+    <div className={classNames(className, styles.markdown)} {...props}>
       <Markdown
         components={{
           p: Text,
diff --git a/packages/website-ue/src/components/ToolBanner.astro b/packages/website-ue/src/components/ToolBanner.astro
index 8878a7fc4..4bf8da58d 100644
--- a/packages/website-ue/src/components/ToolBanner.astro
+++ b/packages/website-ue/src/components/ToolBanner.astro
@@ -17,7 +17,6 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 <style>
   .tool-banner {
     background-size: cover;
-    margin-bottom: var(--space-4);
 
     .content {
       width: 100%;
diff --git a/packages/website-ue/src/pages/[...locale]/api/index.astro b/packages/website-ue/src/pages/[...locale]/api/index.astro
index 25a965584..e3632d7df 100644
--- a/packages/website-ue/src/pages/[...locale]/api/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/api/index.astro
@@ -28,17 +28,24 @@ paths.sort((a, b) => a.path.localeCompare(b.path));
 
   <Section>
     <Heading>{strings.api.json}</Heading>
-    <ApiGroup apis={collection.filter((api) => api.id.endsWith(".json"))} />
+    <ApiGroup
+      {locale}
+      apis={collection.filter((api) => api.id.endsWith(".json"))}
+    />
   </Section>
 
   <Section>
     <Heading>{strings.api.pb}</Heading>
-    <ApiGroup apis={collection.filter((api) => api.id.endsWith(".pb"))} />
+    <ApiGroup
+      {locale}
+      apis={collection.filter((api) => api.id.endsWith(".pb"))}
+    />
   </Section>
 
   <Section>
     <Heading>{strings.api.media}</Heading>
     <ApiGroup
+      {locale}
       apis={collection.filter(
         (api) => !api.id.endsWith(".json") && !api.id.endsWith(".pb"),
       )}