Add developer API, Prometheus metrics, and community links

app/docs/page.tsx

@@ -1,8 +1,10 @@
 import Link from "next/link";
+import { DeveloperDocumentation } from "@/components/DeveloperDocumentation";
 import { notFound } from "next/navigation";
 import { Header, Footer } from "@/components/Shell";
 import guides from "@/shared/player-docs.json";
 import styles from "./page.module.css";
+import { getI18n } from "@/lib/i18n";
 
 export const metadata = { title: "Player docs" };
 
@@ -76,9 +78,18 @@ export default async function Docs({
   searchParams: Promise<{ page?: string }>;
 }) {
   const { page = "welcome" } = await searchParams;
-  const guide = guides.find((item) => item.slug === page);
+  const { locale } = await getI18n();
+  const pages = [
+    ...guides,
+    {
+      slug: "developer-api",
+      title: locale === "ru" ? "API для разработчиков" : "Developer API",
+      markdown: "",
+    },
+  ];
+  const guide = pages.find((item) => item.slug === page);
   if (!guide) notFound();
-  const index = guides.indexOf(guide);
+  const index = pages.indexOf(guide);
   return (
     <>
       <Header />
@@ -86,7 +97,7 @@ export default async function Docs({
         <aside>
           <h2>Player docs</h2>
           <nav aria-label="Documentation pages" className={styles.menu}>
-            {guides.map((item) => (
+            {pages.map((item) => (
               <Link
                 key={item.slug}
                 href={`/docs?page=${item.slug}`}
@@ -98,16 +109,20 @@ export default async function Docs({
           </nav>
         </aside>
         <article className={`prose ${styles.article}`}>
-          {content(guide.markdown)}
+          {page === "developer-api" ? (
+            <DeveloperDocumentation locale={locale} />
+          ) : (
+            content(guide.markdown)
+          )}
           <div className={styles.paging}>
             {index > 0 && (
-              <Link href={`/docs?page=${guides[index - 1].slug}`}>
-                ← {guides[index - 1].title}
+              <Link href={`/docs?page=${pages[index - 1].slug}`}>
+                ← {pages[index - 1].title}
               </Link>
             )}
-            {index < guides.length - 1 && (
-              <Link href={`/docs?page=${guides[index + 1].slug}`}>
-                {guides[index + 1].title} →
+            {index < pages.length - 1 && (
+              <Link href={`/docs?page=${pages[index + 1].slug}`}>
+                {pages[index + 1].title} →
               </Link>
             )}
           </div>