From d31c88115aaf232b0e3e6734a200804ecc14514b Mon Sep 17 00:00:00 2001
From: Katalina Okano <git2@kat.cafe>
Date: Mon, 22 May 2023 15:06:21 -0400
Subject: [PATCH] add meta description for world page

---
 .gitignore                     |   5 ++++-
 app/.DS_Store                  | Bin 0 -> 6148 bytes
 app/components/index-world.tsx |  18 ++++++++++++++++++
 app/routes/_index.tsx          |  13 ++++---------
 app/routes/worlds.$id.tsx      |   7 ++++++-
 package-lock.json              |   3 ++-
 package.json                   |   3 ++-
 7 files changed, 36 insertions(+), 13 deletions(-)
 create mode 100644 app/.DS_Store
 create mode 100644 app/components/index-world.tsx

diff --git a/.gitignore b/.gitignore
index 93acad9..e0a700b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,4 +4,7 @@ node_modules
 /functions/\[\[path\]\].js
 /functions/\[\[path\]\].js.map
 /public/build
-.env
\ No newline at end of file
+.env
+
+.DS_Store
+*/.DS_Store
\ No newline at end of file
diff --git a/app/.DS_Store b/app/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..87e096b57d271f4c66be34885fca151e4efa420b
GIT binary patch
literal 6148
zcmeHKOHRW;4E2N-1<ImJq;7HqdV^2}F3=00egsGjDJ|Vc+<;?n4`7MlG;CP#Y!4x6
z5(x<jA!JLQH}TjrFE4E-Lqu-0nGK2hL=?gqgFQ42#^dZY3w-1N=wyzJu4oRwp>-|W
z0)J5fes=pbrHoQqqAi}^;(R!sX6aH%hc9h;X_h3DMK-~BcsICxetUX2ZqJ>4J9l|e
zUjK+`?9vJhH~4kUX<g;l8*Go4d7Zvr$M=uIt1?HLeer3_sq*0e33Y|TB`vmDbYH8Z
zWe!2O`s7fmFEeP)Xjq>)n3)2mfGO}31+Ztcg*`=UO#xHD6etwn_d^6{j6LRx^6Ee%
zM*v_4VKMaO8wnV302q7B6%m0sEd^?+^G6J)<%mZ<FZP%#YB@Ps8T0s+oj;*CSsn36
z(#ge&)|vvQKvjVqz3lV;f6{*buNK*rDPRixD+OF987Cv$lHXfvH^+Nz1V4kbabB)i
kl%OM9F>-k;K7@-Q9&ra4d(0IPf!T+E$Y6~r@T&@Z0EhT-SpWb4

literal 0
HcmV?d00001

diff --git a/app/components/index-world.tsx b/app/components/index-world.tsx
new file mode 100644
index 0000000..2d6d6bf
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index ff01a25..e5b4062 100644
--- a/app/routes/_index.tsx
+++ b/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) => (
-          <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>
+      {data.allWorlds.map((world) => (
+        <IndexWorld key={world.id} world={world} />
+      ))}
     </div>
   );
 }
diff --git a/app/routes/worlds.$id.tsx b/app/routes/worlds.$id.tsx
index da3fe4e..e60849e 100644
--- a/app/routes/worlds.$id.tsx
+++ b/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() {
diff --git a/package-lock.json b/package-lock.json
index 5904707..798d597 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 7bc94a2..a0384c1 100644
--- a/package.json
+++ b/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",
@@ -35,4 +36,4 @@
   "engines": {
     "node": ">=16.13"
   }
-}
\ No newline at end of file
+}