test

packages/i18n/strings/en.json

@@ -121,6 +121,7 @@
     "json": "JSON methods",
     "pb": "Protocol Buffer methods",
     "media": "Media methods",
-    "no_docs": "This method has no documentation."
+    "no_docs": "This method has no documentation.",
+    "test": "Test"
   }
 }

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

@@ -0,0 +1,35 @@
+---
+import type { CollectionEntry } from "astro:content";
+import { api } from "../core/api/dynamic";
+import { ApiTester } from "./ApiTester";
+import { Code } from "./Code";
+import { Heading } from "./Heading";
+import { MarkdownCustom } from "./MarkdownCustom";
+
+interface Props {
+  locale: string;
+  api: CollectionEntry<"api">;
+}
+
+const { locale, api: apiData } = Astro.props;
+const strings = await api.strings(locale);
+const hasSlugs = apiData.id.includes("[");
+---
+
+<style>
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+</style>
+
+<div class="container">
+  <Heading size="3">
+    <Code>{apiData.id}</Code>
+  </Heading>
+
+  <ApiTester client:idle {locale} path={apiData.id} />
+
+  <MarkdownCustom body={apiData.data.docs ?? strings.api.no_docs} />
+</div>

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

@@ -1,9 +1,6 @@
 ---
 import type { CollectionEntry } from "astro:content";
-import { api } from "../core/api/dynamic";
+import ApiEntry from "./ApiEntry.astro";
-import { Code } from "./Code";
-import { Heading } from "./Heading";
-import { MarkdownCustom } from "./MarkdownCustom";
 
 interface Props {
   locale: string;
@@ -11,34 +8,10 @@ interface Props {
 }
 
 const { apis, locale } = Astro.props;
-const strings = await api.strings(locale);
 ---
 
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-4);
-
-    .docs {
-      margin-left: var(--space-5);
-    }
-  }
-</style>
-
 {
   apis
     .sort((a, b) => a.id.localeCompare(b.id))
-    .map((api) => (
+    .map((api) => <ApiEntry {locale} {api} />)
-      <div class="container">
-        <Heading size="3">
-          <Code>{api.id}</Code>
-        </Heading>
-
-        <MarkdownCustom
-          className="docs"
-          body={api.data.docs ?? strings.api.no_docs}
-        />
-      </div>
-    ))
 }

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

@@ -0,0 +1,11 @@
+.tester {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+
+  .slug {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+}

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

@@ -0,0 +1,66 @@
+import { useState } from "react";
+import {
+  LocaleProvider,
+  type LocaleAcceptorProps,
+} from "../../hooks/useLocale";
+import { useStrings } from "../../hooks/useStrings";
+import { Button } from "../Button";
+import { Link } from "../Link";
+import { TextField } from "../TextField";
+import styles from "./index.module.css";
+
+interface Props {
+  path: string;
+}
+
+const slugPattern = /\[\w+\]/g;
+
+function Content({ path }: Props) {
+  const strings = useStrings();
+
+  const slugs = (path.match(slugPattern) ?? []).map((slug) =>
+    slug.slice(1, -1),
+  );
+  const [values, setValues] = useState(() => {
+    const values: Record<string, string> = {};
+
+    for (const slug of slugs) {
+      values[slug] = "";
+    }
+
+    return values;
+  });
+
+  const href = Object.entries(values).reduce(
+    (href, [slug, value]) => href.replace(`[${slug}]`, value),
+    `/api/${path}`,
+  );
+
+  return (
+    <div className={styles.tester}>
+      {slugs.map((slug) => (
+        <div className={styles.slug}>
+          {slug}:{" "}
+          <TextField
+            value={values[slug]}
+            onChange={(event) => {
+              setValues((state) => ({ ...state, [slug]: event.target.value }));
+            }}
+          />
+        </div>
+      ))}
+
+      <Link href={href} target="_blank">
+        <Button>{strings.api.test}</Button>
+      </Link>
+    </div>
+  );
+}
+
+export function ApiTester({ path, locale }: Props & LocaleAcceptorProps) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content path={path} />
+    </LocaleProvider>
+  );
+}

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

@@ -5,7 +5,7 @@ import styles from "./index.module.css";
 
 export interface SectionProps extends ComponentProps<"div"> {
   first?: boolean;
-  gap: Space;
+  gap?: Space;
 }
 
 export function Section({

packages/website-ue/src/hooks/useLocale.tsx

@@ -28,5 +28,5 @@ export function useLocale() {
 }
 
 export interface LocaleAcceptorProps {
-  locale: string | undefined;
+  locale: string;
 }

packages/website-ue/src/pages/api/avatars/[id].json.ts

@@ -10,7 +10,10 @@ export const getStaticPaths = (async () => {
 }) satisfies GetStaticPaths;
 
 /**
- * Returns data on an avatar based on its id. @see avatars/list.json for a list of all avatar ids.
+ * Returns data on an avatar based on its id. @see avatars/list.json for a list
+ * of all avatar ids.
+ *
+ * @type avatar
  */
 export async function GET({ params }: APIContext<never, { id: string }>) {
   const avatar = await api.avatar(params.id);