dynamic routing for single server information

Author: AmyrAhmady

frontend/docusaurus.config.ts

@@ -62,6 +62,24 @@ const config: Config = {
 
   staticDirectories: ["public"],
 
+  plugins: [
+    async function serverRoutesPlugin(context, options) {
+      return {
+        name: "server-routes-plugin",
+        async contentLoaded({ content, actions }) {
+          const { createData, addRoute } = actions;
+
+          // Add the dynamic route
+          addRoute({
+            path: "/servers/:id",
+            component: "@site/src/pages/servers/[id].tsx",
+            exact: true,
+          });
+        },
+      };
+    },
+  ],
+
   presets: [
     [
       "classic",

frontend/src/pages/servers/[id].tsx

@@ -0,0 +1,36 @@
+import { ServerAllData } from "@site/src/types";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+
+export default function ServerDetails() {
+  const { id } = useParams<{ id: string }>();
+  const [server, setServer] = useState<ServerAllData | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    async function fetchServerData() {
+      try {
+        const response = await fetch(`https://api.open.mp/servers/${id}`);
+        if (!response.ok) throw new Error("Server not found");
+        const data: ServerAllData = await response.json();
+        setServer(data);
+      } catch (error) {
+        console.error("Failed to fetch server data:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchServerData();
+  }, [id]);
+
+  if (loading) return <p>Loading...</p>;
+  if (!server) return <p>Server not found.</p>;
+
+  return (
+    <div>
+      <h1>{server.core.hn}</h1>
+      <p>{server.core.gm}</p>
+    </div>
+  );
+}

frontend/src/pages/servers.tsx frontend/src/pages/servers/index.tsxfrontend/src/pages/servers.tsx renamed to frontend/src/pages/servers/index.tsx

@@ -8,11 +8,11 @@ import React, {
   useState
 } from "react";
 import { FixedSizeList } from "react-window";
-import LoadingBanner from "../components/LoadingBanner";
-import ServerRow from "../components/ServerRow";
-import { showToast, ToastContainer } from "../components/Toast";
-import { API_ADDRESS } from "../constants";
-import { CoreServerData, ServerAllData } from "../types";
+import LoadingBanner from "../../components/LoadingBanner";
+import ServerRow from "../../components/ServerRow";
+import { showToast, ToastContainer } from "../../components/Toast";
+import { API_ADDRESS } from "../../constants";
+import { CoreServerData, ServerAllData } from "../../types";
 
 const API_SERVERS = `${API_ADDRESS}/servers/`;