docusaurus can't stop me, im a magician

Author: AmyrAhmady

frontend/docusaurus.config.ts

@@ -66,14 +66,14 @@ const config: Config = {
     async function serverRoutesPlugin(context, options) {
       return {
         name: "server-routes-plugin",
-        async contentLoaded({ content, actions }) {
-          const { createData, addRoute } = actions;
+        async contentLoaded({ actions }) {
+          const { addRoute } = actions;
 
           // Add the dynamic route
           addRoute({
-            path: "/servers/:ip",
-            component: "@site/src/pages/servers/[ip].tsx",
-            exact: true,
+            path: "/servers/",
+            component: "@site/src/pages/servers/index.tsx",
+            exact: false,
           });
         },
       };
@@ -195,7 +195,7 @@ const config: Config = {
           label: "Docs",
         },
         { to: "/blog", label: "Blog", position: "right" },
-        { href: "https://forum.open.mp/", label: "Forums", position: "right" },
+        { to: "https://forum.open.mp/", label: "Forums", position: "right" },
         { to: "/servers", label: "Servers", position: "right" },
         { to: "/partners", label: "Partners", position: "right" },
         {

frontend/src/pages/servers/[ip].tsx …ontend/src/components/ServerInfoPage.tsxfrontend/src/pages/servers/[ip].tsx renamed to frontend/src/components/ServerInfoPage.tsx frontend/src/pages/servers/[ip].tsx renamed to frontend/src/components/ServerInfoPage.tsx

@@ -138,8 +138,7 @@ const Content = ({ ip }: { ip: string }) => {
   return <Info data={data} />;
 };
 
-const Page = () => {
-  const { ip } = useParams<{ ip: string }>();
+const ServerInfoPage = ({ ip }: { ip: string }) => {
   if (!ip) {
     return <LoadingBanner />;
   }
@@ -156,7 +155,7 @@ const Page = () => {
   );
 };
 
-export default Page;
+export default ServerInfoPage;
 
 const formatDistance = (
   date: Date | string | number,

frontend/src/pages/servers/index.tsx

@@ -5,14 +5,15 @@ import React, {
   ReactNode,
   useEffect,
   useMemo,
-  useState
+  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 ServerInfoPage from "../../components/ServerInfoPage";
 
 const API_SERVERS = `${API_ADDRESS}/servers/`;
 
@@ -331,6 +332,17 @@ const List = ({ data }: { data: CoreServerData[] }) => {
 };
 
 const Page = (): ReactNode => {
+  if (
+    typeof window !== "undefined" &&
+    window.location &&
+    window.location.pathname &&
+    window.location.pathname.includes(":")
+  ) {
+    const path = window.location.pathname;
+    const server = path.split("/servers/")[1];
+    return <ServerInfoPage ip={server} />;
+  }
+
   const [loading, setLoading] = useState<boolean>(true);
   const [data, setData] = useState<CoreServerData[]>([]);