Set translated title on client side for FAQ

app/hooks/useSetTitle.ts

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+import { makeTitle } from "~/utils/strings";
+
+/** Set title on mount. Used for showing a translated title on pages without loader.  */
+export function useSetTitle(title: string) {
+  useEffect(() => {
+    document.title = makeTitle(title);
+  }, [title]);
+}

app/routes/admin.tsx

@@ -18,7 +18,8 @@ import { Main } from "~/components/Main";
 import { requireUser } from "~/modules/auth";
 import { getUser, isImpersonating } from "~/modules/auth/user.server";
 import { canPerformAdminActions } from "~/permissions";
-import { makeTitle, parseRequestFormData, validate } from "~/utils/remix";
+import { parseRequestFormData, validate } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 import { impersonateUrl, STOP_IMPERSONATING_URL } from "~/utils/urls";
 import { db } from "~/db";
 import { z } from "zod";

app/routes/contributions.tsx

@@ -1,6 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
 import { Main } from "~/components/Main";
-import { makeTitle } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 import {
   BORZOIC_TWITTER,
   GITHUB_CONTRIBUTORS_URL,

app/routes/faq.tsx

@@ -1,8 +1,9 @@
 import type { LinksFunction, MetaFunction } from "@remix-run/node";
 import { useTranslation } from "react-i18next";
 import { Main } from "~/components/Main";
+import { useSetTitle } from "~/hooks/useSetTitle";
 import styles from "~/styles/faq.css";
-import { makeTitle } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 
 const AMOUNT_OF_QUESTIONS = 3;
 
@@ -22,7 +23,9 @@ export const handle = {
 };
 
 export default function FAQPage() {
-  const { t } = useTranslation("faq");
+  const { t } = useTranslation(["faq", "common"]);
+  useSetTitle(t("pages.faq", { ns: "common" }));
+
   return (
     <Main className="stack md">
       {new Array(AMOUNT_OF_QUESTIONS).fill(null).map((_, i) => {

app/routes/plus/suggestions.tsx

@@ -25,7 +25,8 @@ import {
   canDeleteComment,
   canDeleteSuggestionOfThemselves,
 } from "~/permissions";
-import { makeTitle, parseRequestFormData, validate } from "~/utils/remix";
+import { parseRequestFormData, validate } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 import { discordFullName } from "~/utils/strings";
 import { actualNumber } from "~/utils/zod";
 import { FAQ_PAGE, LOG_IN_URL, userPage } from "~/utils/urls";

app/routes/plus/voting/index.tsx

@@ -23,7 +23,8 @@ import {
   usePlusVoting,
 } from "~/modules/plus-server";
 import { isVotingActive } from "~/permissions";
-import { makeTitle, parseRequestFormData } from "~/utils/remix";
+import { parseRequestFormData } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 import { discordFullName } from "~/utils/strings";
 import { assertType, assertUnreachable } from "~/utils/types";
 import { safeJSONParse } from "~/utils/zod";

app/routes/plus/voting/results.tsx

@@ -10,7 +10,7 @@ import { db } from "~/db";
 import type { PlusVotingResultByMonthYear } from "~/db/models/plusVotes.server";
 import type { PlusVotingResult } from "~/db/types";
 import { roundToTwoDecimalPlaces } from "~/utils/number";
-import { makeTitle } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 import type { Unpacked } from "~/utils/types";
 import styles from "~/styles/plus-history.css";
 import { discordFullName } from "~/utils/strings";

app/routes/u.$identifier.tsx

@@ -9,7 +9,8 @@ import { db } from "~/db";
 import type { CountsByUserId } from "~/db/models/badges.server";
 import type { User } from "~/db/types";
 import { useUser } from "~/modules/auth";
-import { makeTitle, notFoundIfFalsy } from "~/utils/remix";
+import { notFoundIfFalsy } from "~/utils/remix";
+import { makeTitle } from "~/utils/strings";
 import { discordFullName } from "~/utils/strings";
 
 export const meta: MetaFunction = ({ data }: { data: UserPageLoaderData }) => {

app/utils/remix.ts

@@ -45,7 +45,3 @@ export function validate(condition: any): asserts condition {
 
   throw new Response(null, { status: 400 });
 }
-
-export function makeTitle(title: string) {
-  return `${title} | sendou.ink`;
-}

app/utils/strings.ts

@@ -5,3 +5,7 @@ export function discordFullName(
 ) {
   return `${user.discordName}#${user.discordDiscriminator}`;
 }
+
+export function makeTitle(title: string) {
+  return `${title} | sendou.ink`;
+}