Merge pull request #1878 from jicruz96/page-title-translations

mertbagt · web-flow · commit 2531e42b59d9 · 2025-08-02T19:47:36.000-04:00
Ensure page titles are translate-able
diff --git a/components/layout.tsx b/components/layout.tsx
@@ -13,18 +13,24 @@ export const PageContainer: FC<React.PropsWithChildren<unknown>> = ({
   return <div className={`vh-100 d-flex flex-column`}>{children}</div>
 }
 
+/**
+ * Props for the Layout component.
+ *
+ * @property {string} [titleI18nKey] - The internationalization key for the title.
+ * This key must be defined in the `common.json` namespace.
+ */
 export type LayoutProps = {
-  title?: string
+  titleI18nKey?: string
 }
 
 export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
   children,
-  title
+  titleI18nKey
 }) => {
   const { authenticated, user } = useAuth()
   const { t } = useTranslation("common")
-  const formattedTitle = title
-    ? `${title} | ${t("maple_abbr")}: ${t("maple_fullName")}`
+  let title = titleI18nKey
+    ? `${t(titleI18nKey)} | ${t("maple_abbr")}: ${t("maple_fullName")}`
     : `${t("maple_abbr")}: ${t("maple_fullName")}`
 
   // isClient used to prevent hydration issues: quite possibly better solutions exist
@@ -41,7 +47,7 @@ export const Layout: React.FC<React.PropsWithChildren<LayoutProps>> = ({
       {isClient ? (
         <>
           <Head>
-            <title>{formattedTitle}</title>
+            <title>{title}</title>
             <link rel="icon" href="/favicon.ico" />
           </Head>
           <FollowContext.Provider value={{ followStatus, setFollowStatus }}>
diff --git a/components/page.tsx b/components/page.tsx
@@ -13,17 +13,15 @@ export type AppPropsWithLayout = AppProps & {
 
 export function applyLayout({ Component, pageProps }: AppPropsWithLayout) {
   const page = <Component {...pageProps} />
-  return <Layout title={Component.title}>{page}</Layout>
+  return <Layout titleI18nKey={Component.titleI18nKey}>{page}</Layout>
 }
 
-export type PageOptions<P> = {
-  title?: string
-  fullWidth?: boolean
-  Page: NextPage<P>
-}
-
-export function createPage<P>(options: PageOptions<P>): AppPage<P> {
+export function createPage<P>(
+  options: {
+    Page: NextPage<P>
+  } & LayoutProps
+): AppPage<P> {
   const page: AppPage<P> = options.Page
-  page.title = options.title
+  page.titleI18nKey = options.titleI18nKey
   return page
 }
diff --git a/pages/about/faq-page.tsx b/pages/about/faq-page.tsx
@@ -3,7 +3,7 @@ import { FaqPage } from "../../components/Faq/FaqPage"
 import { createGetStaticTranslationProps } from "components/translations"
 
 export default createPage({
-  title: "About",
+  titleI18nKey: "about",
   Page: () => {
     return <FaqPage />
   }
diff --git a/pages/about/how-maple-uses-ai.tsx b/pages/about/how-maple-uses-ai.tsx
@@ -3,7 +3,7 @@ import { createGetStaticTranslationProps } from "components/translations"
 import MapleAI from "components/about/MapleAI/MapleAI"
 
 export default createPage({
-  title: "How Maple Uses AI",
+  titleI18nKey: "navigation.ai",
   Page: () => {
     return (
       <div>
diff --git a/pages/about/mission-and-goals.tsx b/pages/about/mission-and-goals.tsx
@@ -3,7 +3,7 @@ import GoalsAndMission from "../../components/GoalsAndMission/GoalsAndMission"
 import { createGetStaticTranslationProps } from "components/translations"
 
 export default createPage({
-  title: "About",
+  titleI18nKey: "about",
   Page: () => {
     return <GoalsAndMission />
   }
diff --git a/pages/about/our-team.tsx b/pages/about/our-team.tsx
@@ -3,7 +3,7 @@ import { createGetStaticTranslationProps } from "components/translations"
 import { OurTeam } from "../../components/OurTeam/OurTeam"
 
 export default createPage({
-  title: "Our Team",
+  titleI18nKey: "titles.our_team",
   Page: () => {
     return (
       <div>
diff --git a/pages/about/support-maple.tsx b/pages/about/support-maple.tsx
@@ -3,7 +3,7 @@ import SupportMaple from "../../components/about/SupportMaple/SupportMaple"
 import { createGetStaticTranslationProps } from "components/translations"
 
 export default createPage({
-  title: "How to Support MAPLE",
+  titleI18nKey: "titles.support_maple",
   Page: () => {
     return (
       <div>
diff --git a/pages/admin.tsx b/pages/admin.tsx
@@ -8,7 +8,7 @@ import { useEffect } from "react"
 // return <App />
 
 export default createPage({
-  title: "Admin",
+  titleI18nKey: "titles.admin",
   Page: requireAdmin(() => <App />)
 })
 
diff --git a/pages/bills/[court]/[billId].tsx b/pages/bills/[court]/[billId].tsx
@@ -10,7 +10,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 const Query = z.object({ court: z.coerce.number(), billId: z.string({}) })
 
 export default createPage<{ bill: Bill }>({
-  title: "Bill",
+  titleI18nKey: "titles.bill",
   Page: ({ bill }) => {
     return (
       <>
diff --git a/pages/bills/index.tsx b/pages/bills/index.tsx
@@ -5,7 +5,7 @@ import { BillSearch } from "components/search"
 import { createGetStaticTranslationProps } from "components/translations"
 
 export default createPage({
-  title: "Browse Bills",
+  titleI18nKey: "navigation.browseBills",
   Page: () => {
     const { t } = useTranslation("billSearch")
 
diff --git a/pages/edit-profile/[[...docName]].tsx b/pages/edit-profile/[[...docName]].tsx
@@ -13,7 +13,7 @@ const Query = z.object({
 })
 
 export default createPage({
-  title: "Edit Profile",
+  titleI18nKey: "navigation.editProfile",
   Page: () => {
     // Page: requireAuth(({ user }) => {
     const tabTitle = Query.parse(useRouter().query).docName?.[0] || "about-you"
diff --git a/pages/learn/[slug].tsx b/pages/learn/[slug].tsx
@@ -54,7 +54,7 @@ const tabs: TabsType[] = [
 ]
 
 export default createPage<{ params: IParams }>({
-  title: "Learn",
+  titleI18nKey: "learn",
   Page: props => {
     const router = useRouter()
 
diff --git a/pages/learn/legislative-process.tsx b/pages/learn/legislative-process.tsx
@@ -6,7 +6,7 @@ import { createGetStaticTranslationProps } from "components/translations"
 
 // TODO: Change
 export default createPage({
-  title: "How To Have Impact Through Legislative Testimony",
+  titleI18nKey: "titles.legislative_process",
   Page: () => {
     return (
       <Container>
diff --git a/pages/newsfeed.tsx b/pages/newsfeed.tsx
@@ -2,7 +2,7 @@ import { createPage } from "../components/page"
 import Newsfeed from "components/Newsfeed/Newsfeed"
 
 export default createPage({
-  title: "Newsfeed",
+  titleI18nKey: "navigation.newsfeed",
   Page: () => {
     return <Newsfeed />
   }
diff --git a/pages/organizations/[orgid].tsx b/pages/organizations/[orgid].tsx
@@ -6,7 +6,7 @@ import { ProfilePage } from "components/ProfilePage"
 import { createPage } from "../../components/page"
 
 export default createPage({
-  title: "Organizations",
+  titleI18nKey: "orgs",
   Page: () => {
     const id = useOrgRouting()
 
diff --git a/pages/policies/[...docName].tsx b/pages/policies/[...docName].tsx
@@ -11,7 +11,7 @@ const Query = z.object({
 })
 
 export default createPage({
-  title: "Terms of Service",
+  titleI18nKey: "titles.policies",
   Page: () => {
     const policy =
       Query.parse(useRouter().query).docName?.[0] || "privacy-policy"
diff --git a/pages/profile.tsx b/pages/profile.tsx
@@ -7,7 +7,7 @@ import { ProfilePage } from "../components/ProfilePage"
 import { createGetStaticTranslationProps } from "components/translations"
 
 export default createPage({
-  title: "Profile",
+  titleI18nKey: "navigation.accountProfile",
   Page: () => {
     const { id, loading } = useProfileRouting()
     const { authenticated, user } = useAuth()
diff --git a/pages/submit-testimony.tsx b/pages/submit-testimony.tsx
@@ -8,7 +8,7 @@ import { SubmitTestimonyForm } from "../components/publish/SubmitTestimonyForm"
 import { createGetStaticTranslationProps } from "components/translations"
 
 export default createPage({
-  title: "Submit Testimony",
+  titleI18nKey: "titles.submit_testimony",
   Page: requireAuth(() => {
     useSyncRouterAndStore()
 
diff --git a/pages/testimony/[...testimonyDetail].tsx b/pages/testimony/[...testimonyDetail].tsx
@@ -15,7 +15,7 @@ import { z } from "zod"
 import { createPage } from "../../components/page"
 
 export default createPage({
-  title: "Testimony",
+  titleI18nKey: "titles.testimony",
   Page: () => {
     useSyncQueryParameters()
     return <TestimonyDetailPage />
diff --git a/pages/testimony/index.tsx b/pages/testimony/index.tsx
@@ -2,13 +2,16 @@ import { Container } from "components/bootstrap"
 import { createPage } from "components/page"
 import { TestimonySearch } from "components/search/testimony/TestimonySearch"
 import { createGetStaticTranslationProps } from "components/translations"
+import { useTranslation } from "next-i18next"
 
 export default createPage({
-  title: "Browse Testimony",
+  titleI18nKey: "navigation.browseTestimony",
   Page: () => {
     return (
       <Container fluid="md" className="mt-3">
-        <h1 className="mb-3">Browse Testimony</h1>
+        <h1 className="mb-3">
+          {useTranslation("common").t("navigation.browseTestimony")}
+        </h1>
         <TestimonySearch />
       </Container>
     )
diff --git a/pages/unsubscribe.tsx b/pages/unsubscribe.tsx
@@ -3,7 +3,7 @@ import { UnsubscribeConfirm } from "../components/Email/unsubscribe"
 import { createGetStaticTranslationProps } from "components/translations"
 
 export default createPage({
-  title: "Unsubscribe",
+  titleI18nKey: "titles.unsubscribe",
   Page: () => {
     return <UnsubscribeConfirm />
   }
diff --git a/pages/why-use-maple/[slug].tsx b/pages/why-use-maple/[slug].tsx
@@ -45,7 +45,7 @@ const tabs: TabsType[] = [
 ]
 
 export default createPage<{ params: IParams }>({
-  title: "Why Use Maple?",
+  titleI18nKey: "titles.why_use_maple",
   Page: props => {
     const router = useRouter()
 
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -127,5 +127,17 @@
   "table": {
     "page": "Page {{currentPage}}"
   },
+  "titles": {
+    "admin": "Admin",
+    "bill": "Bill",
+    "our_team": "Our Team",
+    "legislative_process": "How To Have Impact Through Legislative Testimony",
+    "submit_testimony": "Submit Testimony",
+    "support_maple": "How to Support MAPLE",
+    "testimony": "Testimony",
+    "policies": "Policies",
+    "unsubscribe": "Unsubscribe",
+    "why_use_maple": "Why Use Maple?"
+  },
   "user_updates": "User Updates"
 }

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import { FaqPage } from "../../components/Faq/FaqPage"`
`3`	`3`	`import { createGetStaticTranslationProps } from "components/translations"`
`4`	`4`
`5`	`5`	`export default createPage({`
`6`		`- title: "About",`
	`6`	`+ titleI18nKey: "about",`
`7`	`7`	`Page: () => {`
`8`	`8`	`return <FaqPage />`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import GoalsAndMission from "../../components/GoalsAndMission/GoalsAndMission"`
`3`	`3`	`import { createGetStaticTranslationProps } from "components/translations"`
`4`	`4`
`5`	`5`	`export default createPage({`
`6`		`- title: "About",`
	`6`	`+ titleI18nKey: "about",`
`7`	`7`	`Page: () => {`
`8`	`8`	`return <GoalsAndMission />`
`9`	`9`	`}`