feat: better gutter and headings

packages/i18n/strings/en.json

@@ -118,9 +118,6 @@
   },
 
   "api": {
-    "json": "JSON methods",
-    "pb": "Protocol Buffer methods",
-    "media": "Media methods",
     "no_docs": "This method has no documentation.",
     "test": "Test",
     "view_full": "View full types"

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

@@ -44,7 +44,12 @@ for (const line of bodyOriginal.split("\n")) {
 
     .gutter {
       width: var(--space-2);
-      background: linear-gradient(transparent, var(--gray-6) var(--space-4));
+      background: linear-gradient(
+        transparent,
+        var(--gray-6) var(--space-4),
+        var(--gray-6) calc(100% - var(--space-4)),
+        transparent
+      );
 
       margin: 0 var(--space-4);
     }

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

@@ -10,8 +10,4 @@ interface Props {
 const { apis, locale } = Astro.props;
 ---
 
-{
-  apis
-    .sort((a, b) => a.id.localeCompare(b.id))
-    .map((api) => <ApiEntry {locale} {api} />)
-}
+{apis.map((api) => <ApiEntry {locale} {api} />)}

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

@@ -3,11 +3,9 @@ import "@radix-ui/colors/amber-dark.css";
 import { getCollection } from "astro:content";
 import ApiGroup from "../../../components/ApiGroup.astro";
 import ColorScale from "../../../components/ColorScale.astro";
-import { Heading } from "../../../components/Heading";
 import { Section } from "../../../components/Section";
 import SyntaxStyles from "../../../components/SyntaxStyles.astro";
 import ToolBanner from "../../../components/ToolBanner.astro";
-import { api } from "../../../core/api/dynamic";
 import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
 
@@ -15,7 +13,6 @@ export { getStaticPaths } from "../index.astro";
 
 const { locale } = Astro.props;
 const collection = await getCollection("api");
-const strings = await api.strings(locale);
 
 const paths: {
   path: string;
@@ -32,28 +29,11 @@ paths.sort((a, b) => a.path.localeCompare(b.path));
   <ToolBanner {locale} tool={tools.api} slot="pre-app" />
 
   <Section>
-    <Heading size="2">{strings.api.json}</Heading>
     <ApiGroup
       {locale}
-      apis={collection.filter((api) => api.id.endsWith(".json"))}
-    />
-  </Section>
-
-  <Section>
-    <Heading size="2">{strings.api.pb}</Heading>
-    <ApiGroup
-      {locale}
-      apis={collection.filter((api) => api.id.endsWith(".pb"))}
-    />
-  </Section>
-
-  <Section>
-    <Heading size="2">{strings.api.media}</Heading>
-    <ApiGroup
-      {locale}
-      apis={collection.filter(
-        (api) => !api.id.endsWith(".json") && !api.id.endsWith(".pb"),
-      )}
+      apis={collection
+        .filter((api) => !api.id.endsWith(".pb"))
+        .sort((a, b) => a.id.localeCompare(b.id))}
     />
   </Section>
 </BaseLayout>