feat: cleaner api rendering

packages/i18n/strings/en.json

@@ -115,5 +115,11 @@
   "companies": {
     "discord": "Discord",
     "github": "GitHub"
+  },
+
+  "api": {
+    "json": "JSON methods",
+    "pb": "Protocol Buffer methods",
+    "media": "Media methods"
   }
 }

packages/website-ue/package.json

@@ -44,6 +44,7 @@
     "quicklime": "^1.2.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
     "react-promise-suspense": "^0.3.4",
     "sharp": "^0.34.5",
     "three": "^0.180.0",

packages/website-ue/public/assets/patterns/api.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="54" viewBox="0 0 21 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21 38L10 49H0L11 38L0 27H10L21 38ZM21 1V21L20 22H10L21 11L10 0H20L21 1ZM10 11L0 21V1L10 11Z" fill="white"/>
+</svg>

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

@@ -0,0 +1,34 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { Code } from "./Code";
+import { Heading } from "./Heading";
+import { MarkdownCustom } from "./MarkdownCustom";
+
+interface Props {
+  apis: CollectionEntry<"api">[];
+}
+
+const { apis } = Astro.props;
+---
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+</style>
+
+{
+  apis
+    .sort((a, b) => a.id.localeCompare(b.id))
+    .map((api) => (
+      <div class="container">
+        <Heading size="3">
+          <Code>{api.id}</Code>
+        </Heading>
+
+        <MarkdownCustom body={api.data.docs ?? ""} />
+      </div>
+    ))
+}

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

@@ -0,0 +1,5 @@
+.markdown {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}

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

@@ -0,0 +1,21 @@
+import Markdown from "react-markdown";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface Props {
+  body: string;
+}
+
+export function MarkdownCustom({ body }: Props) {
+  return (
+    <div className={styles.markdown}>
+      <Markdown
+        components={{
+          p: Text,
+        }}
+      >
+        {body}
+      </Markdown>
+    </div>
+  );
+}

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

@@ -9,7 +9,7 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--space-5);
   }
 
   &[data-first="true"] .content {

packages/website-ue/src/content.config.ts

@@ -10,7 +10,7 @@ const api = defineCollection({
       import: "default",
     });
 
-    const paths: { id: string; docs: string }[] = [];
+    const paths: { id: string; docs?: string }[] = [];
 
     for (const path in globbed) {
       const id = path.replace("./pages/api/", "").replace(".ts", "");
@@ -22,8 +22,6 @@ const api = defineCollection({
         )?.[1]
         .replaceAll(/^ \* ?/gm, "");
 
-      if (!docs) continue;
-
       paths.push({ id, docs });
     }
 

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

@@ -1,12 +1,19 @@
 ---
 import "@radix-ui/colors/amber-dark.css";
 import { getCollection } from "astro:content";
+import ApiGroup from "../../../components/ApiGroup.astro";
+import { Heading } from "../../../components/Heading";
+import { Section } from "../../../components/Section";
+import ToolBanner from "../../../components/ToolBanner.astro";
+import { api } from "../../../core/api/dynamic";
+import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
 export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.props;
 const collection = await getCollection("api");
+const strings = await api.strings(locale);
 
 const paths: {
   path: string;
@@ -16,15 +23,25 @@ const paths: {
 paths.sort((a, b) => a.path.localeCompare(b.path));
 ---
 
-<BaseLayout {locale} accent="lime">
-  <h1>api</h1>
+<BaseLayout {locale} accent="brown">
+  <ToolBanner {locale} tool={tools.api} slot="pre-app" />
 
-  {
-    collection.map(({ id, data }) => (
-      <>
-        <h2>{id}</h2>
-        <pre>{data.docs}</pre>
-      </>
-    ))
-  }
+  <Section>
+    <Heading>{strings.api.json}</Heading>
+    <ApiGroup apis={collection.filter((api) => api.id.endsWith(".json"))} />
+  </Section>
+
+  <Section>
+    <Heading>{strings.api.pb}</Heading>
+    <ApiGroup apis={collection.filter((api) => api.id.endsWith(".pb"))} />
+  </Section>
+
+  <Section>
+    <Heading>{strings.api.media}</Heading>
+    <ApiGroup
+      apis={collection.filter(
+        (api) => !api.id.endsWith(".json") && !api.id.endsWith(".pb"),
+      )}
+    />
+  </Section>
 </BaseLayout>

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

@@ -10,7 +10,7 @@ export { getStaticPaths } from "../index.astro";
 const { locale } = Astro.props;
 ---
 
-<BaseLayout selectedTool={tools.avatars} {locale} accent="gold">
+<BaseLayout {locale} accent="gold">
   <ColorScale color="purple" />
   <ColorScale color="blue" />