used react-helmet to localize titles of static pages

Author: ZibanPirate

web/package.json

@@ -26,6 +26,7 @@
     "markdown-to-jsx": "^7.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-helmet": "^6.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^5.2.0",
     "react-spring": "^8.0.27",
@@ -52,6 +53,7 @@
     "@types/mini-css-extract-plugin": "^2.0.1",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-helmet": "^6.1.5",
     "@types/react-redux": "^7.1.20",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-syntax-highlighter": "^13.5.0",

web/src/apps/main/components/t/dictionary.ts

@@ -39,7 +39,15 @@ export const dictionary = {
     ar: "حقوق النشر ©",
   },
 
-  "faq-title": { en: "Frequently Asked Questions", ar: "اللاسئلة الاكثر طرحا" },
+  "faq-title": {
+    en: "Frequently Asked Questions | DzCode i/o",
+    ar: "اللاسئلة الاكثر طرحا | DzCode i / o",
+  },
+  "faq-description": {
+    en: "",
+    ar: "",
+  },
+  "faq-header-title": { en: "Frequently Asked Questions", ar: "اللاسئلة الاكثر طرحا" },
   "faq-need-help": {
     en: "Still need help? send us an email at ",
     ar: "هل ما زلت بحاجة إلى المساعدة؟ أرسل إلينا بريدًا إلكترونيًا على ",
@@ -188,6 +196,14 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
 - ستحصل على مساهمات محتملة من مطورين آخرين ، مما سيجعل برنامجك في النهاية أفضل.
 `,
   },
+  "landing-title": {
+    en: "Algeria Codes | DzCode i/o",
+    ar: "الجزائر تبرمج | DzCode i / o",
+  },
+  "landing-description": {
+    en: "",
+    ar: "",
+  },
   "landing-heading-title": {
     en: `<span class="CLASS"}>Open-Source</span> Algerian Comunity`,
     ar: `مجموعة جزائرية للبرامج <span class="CLASS"}>مفتوحة المصدر</span>`,
@@ -212,6 +228,14 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
     en: "Meet the DzCode i/o mobile app and stay up-to-date with the state of Algerian open-source software on iOS and Android.",
     ar: "تعرف على تطبيق DzCode i / o للجوال وابق على اطلاع دائم بأحدث البرامج مفتوحة المصدر الجزائرية على iOS و Android.",
   },
+  "team-title": {
+    en: "Meet the team! | DzCode i/o",
+    ar: "تعرّف على الفريق! | DzCode i / o",
+  },
+  "team-description": {
+    en: "",
+    ar: "",
+  },
   "team-error": {
     en: "Oops, an error occurred while loading the articles list, please try again...",
     ar: "عفوًا ، حدث خطأ أثناء تحميل قائمة المقالات ، يرجى المحاولة مرة أخرى ...",
@@ -220,7 +244,7 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
     en: "Try Again",
     ar: "حاول مرة أخري",
   },
-  "team-title": {
+  "team-header-title": {
     en: "Get to know our team 💻",
     ar: "تعرف على فريقنا 💻",
   },
@@ -232,6 +256,14 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
     en: "Repositories",
     ar: "مستودعات",
   },
+  "projects-title": {
+    en: "Browse a growing list of Algerian open-source projects | DzCode i/o",
+    ar: "تصفح قائمة المشاريع الجزائرية مفتوحة المصدر | DzCode i / o",
+  },
+  "projects-description": {
+    en: "",
+    ar: "",
+  },
   "projects-error": {
     en: "Oops, an error occurred while loading the projects list, please try again...",
     ar: "عفوًا ، حدث خطأ أثناء تحميل قائمة المشاريع ، يرجى المحاولة مرة أخرى ...",
@@ -240,14 +272,22 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
     en: "Try Again",
     ar: "حاول مرة أخري",
   },
-  "projects-title": {
+  "projects-header-title": {
     en: "Open Source Projects",
     ar: "مشاريع مفتوحة المصدر",
   },
   "projects-card-cta-button": {
     en: "Go to code",
     ar: "إلى الكود",
   },
+  "notfound-title": {
+    en: "A broken link? | DzCode i/o",
+    ar: "عنوان url معطل؟ | DzCode i / o",
+  },
+  "notfound-description": {
+    en: "",
+    ar: "",
+  },
   "notfound-subtitle": {
     en: `Finally someone saw the 404 page <a href="https://github.com/NurElHuda">Nour</a> built 😄`,
     ar: `أخيرًا شاهد شخص ما صفحة 404 التي أنشأتها <a href="https://github.com/NurElHuda">نور</a> 😄`,
@@ -256,6 +296,14 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
     en: "Go Back Home",
     ar: "ارجع إلى الصفحة الرئيسية",
   },
+  "contribute-title": {
+    en: "Contribute to algerian open-source projects | DzCode i/o",
+    ar: "ساهم في المشاريع الجزائرية مفتوحة المصدر | DzCode i / o",
+  },
+  "contribute-description": {
+    en: "",
+    ar: "",
+  },
   "contribute-filter-projects": {
     en: "Project",
     ar: "المشروع",
@@ -280,4 +328,20 @@ Besides the open tasks on [/Contribute](/Contribute) page, you can also contribu
     en: "y|mo|d|h|min|Just now",
     ar: " عام| شهر| يوم| ساعة| دقيقة| الآن",
   },
+  "articles-title": {
+    en: "Read and discuss articles written by algerian developers | DzCode i/o",
+    ar: "اقرأ وناقش المقالات التي كتبها المطورون الجزائريون | DzCode i / o",
+  },
+  "articles-description": {
+    en: "",
+    ar: "",
+  },
+  "learn-title": {
+    en: "Learn about software development through open-source | DzCode i/o",
+    ar: "تعرف على البرمجة من خلال البرامج مفتوحة المصدر | DzCode i / o",
+  },
+  "learn-description": {
+    en: "",
+    ar: "",
+  },
 };

web/src/apps/main/entry/app.tsx

@@ -4,10 +4,12 @@ import { allLanguages, LanguageEntity } from "@dzcode.io/models/dist/language";
 import { ErrorBoundary } from "@dzcode.io/ui/dist/error-boundary";
 import Container from "@material-ui/core/Container";
 import { ComponentType, FC, lazy, Suspense, useEffect } from "react";
+import { Helmet } from "react-helmet";
 import { useDispatch, useSelector } from "react-redux";
 import { Route, RouteProps, Switch, useLocation, useRouteMatch } from "react-router-dom";
 import { Footer } from "src/apps/main/components/footer";
 import { Navbar } from "src/apps/main/components/navbar";
+import { t } from "src/apps/main/components/t";
 import { Theme } from "src/apps/main/components/theme";
 import { getEnv } from "src/common/utils";
 import { urlLanguageRegEx } from "src/common/utils/language";
@@ -83,6 +85,9 @@ export const App: FC = () => {
   return (
     <Theme>
       <ErrorBoundary>
+        <Helmet>
+          <title>{t("landing-title")}</title>
+        </Helmet>
         <div
           style={{
             display: "flex",

web/src/apps/main/pages/articles/index.tsx

@@ -3,9 +3,11 @@ import { TryAgain } from "@dzcode.io/ui/dist/try-again";
 import { isLoaded } from "@dzcode.io/utils/dist/loadable";
 import Grid from "@material-ui/core/Grid";
 import { FC, useEffect, useState } from "react";
+import { Helmet } from "react-helmet";
 import { useDispatch, useSelector } from "react-redux";
 import { Route, useRouteMatch } from "react-router-dom";
 import { Sidebar } from "src/apps/main/components/sidebar";
+import { t } from "src/apps/main/components/t";
 import { Dispatch, StateInterface } from "src/apps/main/redux";
 import { fetchArticlesList } from "src/apps/main/redux/actions/articles-page";
 import { ArticlesPageState } from "src/apps/main/redux/reducers/articles-page";
@@ -30,6 +32,10 @@ export const ArticlesPage: FC = () => {
 
   return (
     <ErrorBoundary>
+      <Helmet>
+        <title>{t("articles-title")}</title>
+        <meta name="description" content={t("articles-description")} />
+      </Helmet>
       <Grid container className="articles" dir="ltr">
         {/* Sidebar */}
         <Grid item xs={false} md={3} style={{ paddingTop: "1rem" }}>

web/src/apps/main/pages/contribute/index.tsx

@@ -1,7 +1,9 @@
 import { ErrorBoundary } from "@dzcode.io/ui/dist/error-boundary";
 import Grid from "@material-ui/core/Grid";
 import { FC, useEffect } from "react";
+import { Helmet } from "react-helmet";
 import { useDispatch } from "react-redux";
+import { t } from "src/apps/main/components/t";
 import { ContributePageState } from "src/apps/main/redux/reducers/contribute-page";
 
 import { Dispatch } from "../../redux";
@@ -17,6 +19,10 @@ export const ContributePage: FC = () => {
 
   return (
     <ErrorBoundary>
+      <Helmet>
+        <title>{t("contribute-title")}</title>
+        <meta name="description" content={t("contribute-description")} />
+      </Helmet>
       <Grid container className="contribute-page" spacing={1}>
         {/* Filters */}
         <Grid item xs={false} md={3}>

web/src/apps/main/pages/faq/index.tsx

@@ -4,6 +4,7 @@ import { Grid } from "@dzcode.io/ui/dist/grid";
 import { ThemeProvider } from "@dzcode.io/ui/dist/theme/theme-provider";
 import { Typography } from "@dzcode.io/ui/dist/typography";
 import type { FC } from "react";
+import { Helmet } from "react-helmet";
 import { useSelector } from "react-redux";
 import { Markdown } from "src/apps/main/components/markdown";
 import { T, t } from "src/apps/main/components/t";
@@ -15,6 +16,10 @@ const FaqCards = () => {
 
   return (
     <Grid container rowSpacing={5}>
+      <Helmet>
+        <title>{t("faq-title")}</title>
+        <meta name="description" content={t("faq-description")} />
+      </Helmet>
       {faqData.map(({ title, questions }, index) => (
         <Grid item xs={12} key={`faq.title.${index}`}>
           <FaqCard
@@ -35,7 +40,7 @@ const FaqCards = () => {
 const PageTitle = () => {
   return (
     <Typography variant="h4" component="h1" textAlign="center">
-      <T faq-title />
+      <T faq-header-title />
     </Typography>
   );
 };

web/src/apps/main/pages/landing/index.tsx

@@ -1,12 +1,18 @@
 import { ErrorBoundary } from "@dzcode.io/ui/dist/error-boundary";
 import { FC } from "react";
+import { Helmet } from "react-helmet";
+import { t } from "src/apps/main/components/t";
 
 import { Header } from "./header";
 import { Mobile } from "./mobile";
 
 export const LandingPage: FC = () => {
   return (
     <ErrorBoundary>
+      <Helmet>
+        <title>{t("landing-title")}</title>
+        <meta name="description" content={t("landing-description")} />
+      </Helmet>
       <Header />
       <Mobile />
     </ErrorBoundary>

web/src/apps/main/pages/learn/index.tsx

@@ -3,6 +3,7 @@ import { TryAgain } from "@dzcode.io/ui/dist/try-again";
 import { isLoaded } from "@dzcode.io/utils/dist/loadable";
 import Grid from "@material-ui/core/Grid";
 import { FC, useEffect, useState } from "react";
+import { Helmet } from "react-helmet";
 import { useDispatch, useSelector } from "react-redux";
 import { Route, useRouteMatch } from "react-router-dom";
 import { Sidebar } from "src/apps/main/components/sidebar";
@@ -32,6 +33,10 @@ export const LearnPage: FC = () => {
 
   return (
     <ErrorBoundary>
+      <Helmet>
+        <title>{t("learn-title")}</title>
+        <meta name="description" content={t("learn-description")} />
+      </Helmet>
       <Grid container className="learn" dir="ltr">
         {/* Sidebar */}
         <Grid item xs={false} md={3} style={{ paddingTop: "1rem" }}>

web/src/apps/main/pages/not-found/index.tsx

@@ -5,6 +5,7 @@ import Typography from "@material-ui/core/Typography";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
 import { FC } from "react";
+import { Helmet } from "react-helmet";
 import { useSelector } from "react-redux";
 import { LinkV2 } from "src/apps/main/components/link-v2";
 import { T, t } from "src/apps/main/components/t";
@@ -35,6 +36,10 @@ const NotFound: FC = () => {
 
   return (
     <ErrorBoundary>
+      <Helmet>
+        <title>{t("notfound-title")}</title>
+        <meta name="description" content={t("notfound-description")} />
+      </Helmet>
       <div className={classes.root}>
         <img className={classes.image} src={svg} alt="DzCode i/o: 404 page not found" />
         <Typography className={classes.text}>

web/src/apps/main/pages/projects/catalog/index.tsx

@@ -28,7 +28,7 @@ export const Catalog: FC<CatalogProps> = ({ projectsList }) => {
   return (
     <>
       <Typography variant="h4" className={classes.header}>
-        <T projects-title />
+        <T projects-header-title />
       </Typography>
       <Grid container className={classes.root} spacing={4} justifyContent="space-around">
         {projectsList