add dynamic page titles including translations

Author: dschwindt

packages/common/src/i18n/en.ts

@@ -5,6 +5,7 @@ import { TermsOfUseContent } from "@upswyng/common";
 export default {
   about: {
     content: AboutContent.en,
+    title: "About - Upswyng",
   },
   alerts: {
     closeAlerts: "Close Alerts",
@@ -38,6 +39,7 @@ export default {
     localOnly:
       "Favorites are only saved on this device. They will not be saved if you are using a public computer or when you have a private session enabled in your browser (incognito mode).",
     noFavorites: "You haven't added any favorites yet!",
+    title: "Favorites - Upswyng",
   },
   footer: {
     deploysByNetlify: "deploys by Netlify",
@@ -140,6 +142,11 @@ export default {
         "If you, your children or someone else you know is seeking support for abuse, violence or other forms of oppression and discrimination, SPAN is here to help. From abusive relationships, domestic violence, interpersonal violence and elder abuse to oppression and discrimination based on sexual orientation, gender identity, ethnicity, race, religion, age, ability or income level, SPAN offers the support and resources needed to overcome these challenging circumstances.",
     },
   },
+  home: {
+    title: "Upswyng",
+    description:
+      "UpSwyng is a mobile-ready, digital directory of resources to assist the unhoused and at-risk communities.",
+  },
   map: {
     directions: "Directions",
     directionsByBus: "Directions by bus",
@@ -158,6 +165,7 @@ export default {
   },
   privacyPolicy: {
     content: PrivacyPolicyContent.en,
+    title: "Privacy Policy - Upswyng",
   },
   reportIssue: {
     title: "Report an Issue",
@@ -237,6 +245,7 @@ export default {
   },
   termsOfUse: {
     content: TermsOfUseContent.en,
+    title: "Terms of Use - Upswyng",
   },
   mainMenu: {
     resourcesWithinReach: "Resources within reach",

packages/common/src/i18n/es.ts

@@ -5,6 +5,7 @@ import { TermsOfUseContent } from "@upswyng/common";
 export default {
   about: {
     content: AboutContent.es,
+    title: "Acerca - UpSwyng",
   },
   alerts: {
     closeAlerts: "Cerrar Alertas",
@@ -38,6 +39,7 @@ export default {
     localOnly:
       "Los favoritos solo se guardan en este dispositivo. No se guardarán si está utilizando una computadora pública o cuando tiene una sesión privada habilitada en su navegador (modo incógnito).",
     noFavorites: "¡No has añadido ningún favorito todavía!",
+    title: "Favoritos - UpSwyng",
   },
   footer: {
     deploysByNetlify: "despliegues por Netlify",
@@ -141,6 +143,11 @@ export default {
         "Si usted, sus hijos o alguien más que conozca está buscando apoyo para el abuso, la violencia u otras formas de opresión y discriminación, SPAN está aquí para ayudarlo. Desde las relaciones abusivas, la violencia doméstica, la violencia interpersonal y el abuso de ancianos hasta la opresión y la discriminación basadas en la orientación sexual, la identidad de género, el origen étnico, la raza, la religión, la edad, la capacidad o el nivel de ingresos, SPAN ofrece el apoyo y los recursos necesarios para superar estas circunstancias difíciles.",
     },
   },
+  home: {
+    title: "Upswyng",
+    description:
+      "UpSwyng es un directorio digital para dispositivos móviles, que continue recursos para ayudar a personas que están a punto de perder su hogar o que ya se encuentran sin hogar.",
+  },
   map: {
     directions: "Direcciones",
     directionsByBus: "Direcciones via bus",
@@ -160,6 +167,7 @@ export default {
   },
   privacyPolicy: {
     content: PrivacyPolicyContent.es,
+    title: "Política de Privacidad - UpSwyng",
   },
   reportIssue: {
     title: "Reportar un Problema",
@@ -240,6 +248,7 @@ export default {
   },
   termsOfUse: {
     content: TermsOfUseContent.es,
+    title: "Condiciones De Uso - UpSwyng",
   },
   mainMenu: {
     resourcesWithinReach: "Recursos al Alcance",

packages/web/package.json

@@ -17,6 +17,7 @@
     "@types/react": "^16.8.10",
     "@types/react-dom": "^16.8.3",
     "@types/react-gtm-module": "^2.0.0",
+    "@types/react-helmet": "^6.1.4",
     "@types/react-router-dom": "^5.1.0",
     "@upswyng/common": "0.1.0",
     "algoliasearch": "^3.33.0",
@@ -31,6 +32,7 @@
     "react": "16.9.0",
     "react-dom": "16.8.6",
     "react-gtm-module": "^2.0.8",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.3",
     "react-markdown": "^4.3.1",
     "react-query": "^1.5.1",

packages/web/public/index.html

@@ -26,11 +26,6 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>UpSwyng</title>
-    <meta
-      name="description"
-      content="UpSwyng is a mobile-ready, digital directory of resources to assist the unhoused and at-risk communities in Boulder County, Colorado."
-    />
     <script
       src="https://kit.fontawesome.com/131ea2b1bb.js"
       crossorigin="anonymous"

packages/web/src/components/About.tsx

@@ -1,4 +1,5 @@
 import Container from "@material-ui/core/Container";
+import { Helmet } from "react-helmet";
 import MuiHtml from "./MuiHtml";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -8,6 +9,9 @@ const About = () => {
 
   return (
     <Container>
+      <Helmet>
+        <title>{t("title")}</title>
+      </Helmet>
       <MuiHtml html={t("content")} />
     </Container>
   );

packages/web/src/components/CategoryResults.tsx

@@ -1,5 +1,6 @@
 import { TResourceCategory, TResourceSubcategory } from "../webTypes";
 
+import { Helmet } from "react-helmet";
 import PageBanner from "./PageBanner";
 import React from "react";
 import ResourceList from "./ResourceList";
@@ -51,6 +52,9 @@ const CategoryResults = ({
 
   return (
     <>
+      <Helmet>
+        <title>{t(categoryTranslationKey)} - Upswyng</title>
+      </Helmet>
       <PageBanner color={categoryColor}>
         <Typography variant="h1">{t(categoryTranslationKey)}</Typography>
       </PageBanner>

packages/web/src/components/FavoriteResources.tsx

@@ -1,5 +1,6 @@
 import Alert from "@material-ui/lab/Alert";
 import Container from "@material-ui/core/Container";
+import { Helmet } from "react-helmet";
 import PageBanner from "./PageBanner";
 import React from "react";
 import ResourceList from "./ResourceList";
@@ -34,6 +35,9 @@ export const FavoriteResources = () => {
 
   return (
     <Container>
+      <Helmet>
+        <title>{t("title")}</title>
+      </Helmet>
       <PageBanner color={colors.orangePrimary}>
         <Typography variant="h1">{t("favorites")}</Typography>
       </PageBanner>

packages/web/src/components/Home.tsx

@@ -1,15 +1,20 @@
 import AlgoliaBadge from "./AlgoliaBadge";
 import Container from "@material-ui/core/Container";
 import { Grid } from "@material-ui/core";
+import { Helmet } from "react-helmet";
 import HomeButtons from "./HomeButtons";
 import React from "react";
 import SearchForm from "./SearchForm";
 import { useTranslation } from "react-i18next";
 
 const Home = () => {
-  const { t } = useTranslation("footer");
+  const { t } = useTranslation(["footer", "home"]);
   return (
     <Container>
+      <Helmet>
+        <title>{t("title", { ns: "home" })}</title>
+        <meta name="description" content={t("description", { ns: "home" })} />
+      </Helmet>
       <Grid
         alignItems="stretch"
         container

packages/web/src/components/PrivacyPolicy.tsx

@@ -1,4 +1,5 @@
 import Container from "@material-ui/core/Container";
+import { Helmet } from "react-helmet";
 import MuiHtml from "./MuiHtml";
 import React from "react";
 import { useTranslation } from "react-i18next";
@@ -8,6 +9,9 @@ const PrivacyPolicy = () => {
 
   return (
     <Container>
+      <Helmet>
+        <title>{t("title")}</title>
+      </Helmet>
       <MuiHtml html={t("content")} />
     </Container>
   );

packages/web/src/components/Resource.tsx

@@ -5,6 +5,7 @@ import Button from "@material-ui/core/Button/Button";
 import Card from "@material-ui/core/Card";
 import Container from "@material-ui/core/Container";
 import FavoriteResourceFAB from "./FavoriteResourceFAB";
+import { Helmet } from "react-helmet";
 import Image from "material-ui-image";
 import Link from "@material-ui/core/Link";
 import List from "@material-ui/core/List";
@@ -97,6 +98,9 @@ export const Resource = () => {
 
   return (
     <Container>
+      <Helmet>
+        <title>{resource.name} - UpSwyng</title>
+      </Helmet>
       <PageBanner
         color={resourceColor}
         backButtonAction={lastLocation ? history.goBack : null}