feat: cleaner api rendering

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

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

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,

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

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"),
       )}