feat: induvidual nation pages

components/Meta.tsx

@@ -38,6 +38,7 @@ export default function Meta({ page }: { page: { title: string, user?: any } })
 
       <meta property="og:site_name" content="Clyde's Real Survival SMP" />
       <meta property="og:title" content={page.title} />
+      <meta property="og:url" content={`https://crss.cc${router.asPath}`} />
       <meta property="og:type" content="website" />
       <meta property="og:locale" content="en_GB" />
       <meta property="og:image" content="https://crss.fra1.cdn.digitaloceanspaces.com/img/social_image.png" />
@@ -49,26 +50,12 @@ export default function Meta({ page }: { page: { title: string, user?: any } })
       <meta name="twitter:image" content="https://crss.fra1.cdn.digitaloceanspaces.com/img/social_image.png" />
 
       <meta property="twitter:domain" content="crss.cc" />
+      <meta property="twitter:url" content={`https://crss.cc${router.asPath}`} />
 
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ldJson) }} />
-
-      {!page.user && (
-        <>
-          <meta property="og:url"      content={`https://crss.cc${router.pathname}`} />
-          <meta property="twitter:url" content={`https://crss.cc${router.pathname}`} />
-        
-          <link rel="canonical" href={`https://crss.cc${router.pathname}`} />
-        </>
-      ) || (
-        <>
-          <meta property="og:url"      content={`https://crss.cc/u/${page.user!.username}`} />
-          <meta property="twitter:url" content={`https://crss.cc/u/${page.user!.username}`} />
-        
-          <link rel="canonical" href={`https://crss.cc/u/${page.user!.username}`} />
-        </>
-      )}
-
-      <link rel="icon" href="/favicon.ico" />
+    
+      <link rel="canonical" href={`https://crss.cc${router.asPath}`} />
+      <link rel="icon"      href="/favicon.ico" />
     </Head>
   );
 }

lib/Database.ts

@@ -184,6 +184,18 @@ class Database {
 
     return rows;
   }
+
+  async getNationCode(code: string): Promise<any> {
+    const [ rows ] = await this.mysqlPool!.execute('SELECT * FROM nations WHERE code = ?', [ code ]);
+
+    return (rows as any)[0];
+  }
+
+  async getCompaies(nid: number): Promise<any> {
+    const [ rows ] = await this.mysqlPool!.execute('SELECT * FROM companies WHERE nid = ?', [ nid ]);
+
+    return rows;
+  }
 }
 
 export default Database;

pages/nation/[nation].tsx

@@ -0,0 +1,61 @@
+import Footer from '@/components/Footer';
+import Meta from '@/components/Meta';
+import NavBar from '@/components/NavBar';
+import PageContent from '@/components/PageContent';
+import Database from '@/lib/Database';
+
+export default function Nation({ nation, companies }: { nation: any, companies: any[] }) {
+  return (
+    <>
+      <Meta page={{ title: nation.name }} />
+      <NavBar currentPage={nation.code} />
+
+      <PageContent>
+        <div className="container">
+          <h1>{nation.name}</h1>
+
+          <p>{nation.description}</p>
+
+          <h2>Companies</h2>
+
+          {companies.length > 0 ? (
+            <ul>
+              {companies.map((company) => {
+                return (
+                  <li key={company.id}>
+                    {company.name}
+                  </li>
+                );
+              })}
+            </ul>
+          ) : (
+            <p>This nation has no companies.</p>
+          )}
+        </div>
+      </PageContent>
+
+      <Footer />
+    </>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  const db = new Database();
+
+  const nation = await db.getNationCode(context.query.nation as string);
+
+  if (!nation) {
+    return {
+      notFound: true
+    };
+  }
+
+  const companies = await db.getCompaies(nation.id);
+
+  return {
+    props: {
+      nation,
+      companies
+    }
+  };
+}