add meta description for world page

.gitignore

@@ -5,3 +5,6 @@ node_modules
 /functions/\[\[path\]\].js.map
 /public/build
 .env
+
+.DS_Store
+*/.DS_Store

app/components/index-world.tsx

@@ -0,0 +1,18 @@
+import { World } from "~/utils/saerro";
+
+export type IndexWorldProps = {
+  world: World;
+};
+
+export const IndexWorld = ({ world }: IndexWorldProps) => {
+  return (
+    <div>
+      <h1>
+        {world.name} (total: {world.population.total})
+      </h1>
+      <p>VS: {world.population.vs}</p>
+      <p>NC: {world.population.nc}</p>
+      <p>TR: {world.population.tr}</p>
+    </div>
+  );
+};

app/routes/_index.tsx

@@ -1,5 +1,6 @@
 import { json, type V2_MetaFunction } from "@remix-run/cloudflare";
 import { useLoaderData } from "@remix-run/react";
+import { IndexWorld } from "~/components/index-world";
 import type { IndexResponse } from "~/utils/saerro";
 import { indexQuery } from "~/utils/saerro";
 
@@ -17,15 +18,9 @@ export default function Index() {
     <div style={{ fontFamily: "system-ui, sans-serif", lineHeight: "1.4" }}>
       <h1>PS2.LIVE</h1>
       <h2>Worlds</h2>
-      <ul>
+      {data.allWorlds.map((world) => (
-        {data.allWorlds.map((world) => (
+        <IndexWorld key={world.id} world={world} />
-          <li key={world.id}>
+      ))}
-            <a href={`/worlds/${world.id}`}>{world.name}</a> -{" "}
-            {world.population.total} players ({world.population.vs} VS,{" "}
-            {world.population.nc} NC, {world.population.tr} TR)
-          </li>
-        ))}
-      </ul>
     </div>
   );
 }

app/routes/worlds.$id.tsx

@@ -10,7 +10,12 @@ export const loader = async ({ params }: LoaderArgs) => {
 };
 
 export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
-  return [{ title: `${data?.world.name || "Unknown world"} | PS2.LIVE` }];
+  return [
+    { title: `${data?.world.name || "Unknown world"} | PS2.LIVE` },
+    {
+      description: `${data?.world.name} currently has ${data?.world.population.total} players online right now. VS: ${data?.world.population.vs}, NC: ${data?.world.population.nc}, TR: ${data?.world.population.tr} -- See more detailed stats on ps2.live.`,
+    },
+  ];
 };
 
 export default function World() {

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "ps2.live-2",
+  "name": "ps2.live",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
@@ -20,6 +20,7 @@
         "@remix-run/eslint-config": "^1.16.0",
         "@types/react": "^18.0.35",
         "@types/react-dom": "^18.0.11",
+        "@vanilla-extract/css": "^1.11.0",
         "eslint": "^8.38.0",
         "npm-run-all": "^4.1.5",
         "typescript": "^5.0.4",

package.json

@@ -27,6 +27,7 @@
     "@remix-run/eslint-config": "^1.16.0",
     "@types/react": "^18.0.35",
     "@types/react-dom": "^18.0.11",
+    "@vanilla-extract/css": "^1.11.0",
     "eslint": "^8.38.0",
     "npm-run-all": "^4.1.5",
     "typescript": "^5.0.4",