Add titles via meta tag

app/routes/plus/index.tsx

@@ -1,11 +1,15 @@
-import type { LinksFunction, LoaderFunction } from "@remix-run/node";
+import type {
+  LinksFunction,
+  LoaderFunction,
+  MetaFunction,
+} from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData } from "@remix-run/react";
 import { upcomingVoting } from "~/core/plus";
 import { db } from "~/db";
 import type * as plusSuggestions from "~/db/models/plusSuggestions.server";
 import { useUser } from "~/hooks/useUser";
-import { requireUser } from "~/utils/remix";
+import { makeTitle, requireUser } from "~/utils/remix";
 import styles from "~/styles/plus.css";
 import { Catcher } from "~/components/Catcher";
 import * as React from "react";
@@ -20,6 +24,13 @@ export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
 };
 
+export const meta: MetaFunction = () => {
+  return {
+    title: makeTitle("Plus Server suggestions"),
+    description: "This month's suggestions for +1, +2 and +3.",
+  };
+};
+
 interface PlusLoaderData {
   suggestions?: plusSuggestions.FindResult;
   suggestedForTiers: number[];

app/routes/u.$identifier.tsx

@@ -1,4 +1,4 @@
-import type { LoaderFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { Outlet, useLoaderData } from "@remix-run/react";
 import { countries } from "countries-list";
@@ -8,7 +8,14 @@ import { SubNav, SubNavLink } from "~/components/SubNav";
 import { db } from "~/db";
 import type { User } from "~/db/types";
 import { useUser } from "~/hooks/useUser";
-import { notFoundIfFalsy } from "~/utils/remix";
+import { makeTitle, notFoundIfFalsy } from "~/utils/remix";
+import { discordFullName } from "~/utils/strings";
+
+export const meta: MetaFunction = ({ data }: { data: UserPageLoaderData }) => {
+  return {
+    title: makeTitle(discordFullName(data)),
+  };
+};
 
 export const userParamsSchema = z.object({ identifier: z.string() });
 

app/utils/remix.ts

@@ -64,3 +64,7 @@ export async function getUser(request: Request) {
 
   return db.users.findByIdentifier(userId);
 }
+
+export function makeTitle(title: string) {
+  return `${title} | sendou.ink`;
+}