Add docs navigation and tighten API request security

2026-10-11 18:53:46 +05:00
parent a54a3e7705
commit 3cc3136762
28 changed files with 915 additions and 29 deletions
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -0,0 +1,119 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { Header, Footer } from "@/components/Shell";
+import guides from "@/shared/player-docs.json";
+import styles from "./page.module.css";
+
+export const metadata = { title: "Player docs" };
+
+function inline(text: string) {
+  return text
+    .split(/(\*\*[^*]+\*\*|\[[^\]]+\]\(https:\/\/[^)]+\))/g)
+    .map((part, index) => {
+      if (part.startsWith("**"))
+        return <strong key={index}>{part.slice(2, -2)}</strong>;
+      const link = part.match(/^\[([^\]]+)\]\((https:\/\/[^)]+)\)$/);
+      return link ? (
+        <a key={index} href={link[2]}>
+          {link[1]}
+        </a>
+      ) : (
+        part
+      );
+    });
+}
+
+function content(markdown: string) {
+  return markdown.split(/\n\s*\n/).map((block, index) => {
+    const heading = block.match(/^(#{1,3}) (.+)$/);
+    if (heading) {
+      const text = inline(heading[2]);
+      return heading[1].length === 1 ? (
+        <h1 key={index}>{text}</h1>
+      ) : heading[1].length === 2 ? (
+        <h2 key={index}>{text}</h2>
+      ) : (
+        <h3 key={index}>{text}</h3>
+      );
+    }
+    const image = block.match(/^!\[([^\]]*)\]\((https:\/\/[^)]+)\)$/);
+    if (image)
+      return (
+        <figure key={index}>
+          <img src={image[2]} alt={image[1]} loading="lazy" width="420" />
+        </figure>
+      );
+    if (block.startsWith("> "))
+      return (
+        <blockquote key={index}>
+          {inline(block.replace(/^> /gm, ""))}
+        </blockquote>
+      );
+    const lines = block.split("\n");
+    if (lines.every((line) => /^[-*] /.test(line)))
+      return (
+        <ul key={index}>
+          {lines.map((line, i) => (
+            <li key={i}>{inline(line.slice(2))}</li>
+          ))}
+        </ul>
+      );
+    if (lines.every((line) => /^\d+\. /.test(line)))
+      return (
+        <ol key={index}>
+          {lines.map((line, i) => (
+            <li key={i}>{inline(line.replace(/^\d+\. /, ""))}</li>
+          ))}
+        </ol>
+      );
+    return <p key={index}>{inline(block)}</p>;
+  });
+}
+
+export default async function Docs({
+  searchParams,
+}: {
+  searchParams: Promise<{ page?: string }>;
+}) {
+  const { page = "welcome" } = await searchParams;
+  const guide = guides.find((item) => item.slug === page);
+  if (!guide) notFound();
+  const index = guides.indexOf(guide);
+  return (
+    <>
+      <Header />
+      <main className={`section page-content ${styles.layout}`}>
+        <aside>
+          <h2>Player docs</h2>
+          <nav aria-label="Documentation pages" className={styles.menu}>
+            {guides.map((item) => (
+              <Link
+                key={item.slug}
+                href={`/docs?page=${item.slug}`}
+                aria-current={page === item.slug ? "page" : undefined}
+              >
+                {item.title}
+              </Link>
+            ))}
+          </nav>
+        </aside>
+        <article className={`prose ${styles.article}`}>
+          {content(guide.markdown)}
+          <div className={styles.paging}>
+            {index > 0 && (
+              <Link href={`/docs?page=${guides[index - 1].slug}`}>
+                ← {guides[index - 1].title}
+              </Link>
+            )}
+            {index < guides.length - 1 && (
+              <Link href={`/docs?page=${guides[index + 1].slug}`}>
+                {guides[index + 1].title} →
+              </Link>
+            )}
+          </div>
+        </article>
+      </main>
+      <Footer />
+    </>
+  );
+}