add helmet for SEO

package.json

@@ -34,6 +34,7 @@
     "react-countdown-circle-timer": "3.0.9",
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
+    "react-helmet": "^6.1.0",
     "react-media": "1",
     "react-player": "2.10.1",
     "react-rewards": "1.1.2",

src/components/Chapter.jsx

@@ -9,8 +9,11 @@
 import TableOfContents from "./TableOfContents";
 import Footer from "./Footer";
 import ChapterFeedback from "./ChapterFeedback";
+import { Helmet } from "react-helmet";
 
 const Chapter = ({ children: chapter }) => {
+  const title = `${chapter.frontMatter.title} | LingDocs Pashto Grammar`;
+  const url = "https://grammar.lingdocs.com" + chapter.path;
   const Content = chapter.content;
   function handleShare() {
     if (!navigator.share) {
@@ -18,12 +21,15 @@ const Chapter = ({ children: chapter }) => {
       alert("Sorry, Sharing links are not supported on your device.", chapter.path);
       return;
     }
-    navigator.share && navigator.share({
-      title: chapter.frontMatter.title +  " | LingDocs Pashto Grammar",
-      url: "https://grammar.lingdocs.com" + chapter.path,
-    });
+    navigator.share && navigator.share({ title, url });
   }
   return <>
+    <Helmet>
+      <link rel="canonical" href={url} />
+      <meta name="twitter:title" content={title} />
+      <meta name="og:title" content={title} />
+      <title>{title}</title>
+    </Helmet>
     <main className="col bg-faded py-3 d-flex flex-column" style={{ maxWidth: !chapter.frontMatter.fullWidth ? "850px" : undefined }}>
       <div className="flex-shrink-0">
         <div className="mb-2" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>

yarn.lock

@@ -4529,11 +4529,26 @@ react-fast-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
+react-fast-compare@^3.1.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-ga4@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
   integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
 
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -4671,6 +4686,11 @@ react-select@^5.2.2, react-select@^5.4.0:
     react-transition-group "^4.3.0"
     use-isomorphic-layout-effect "^1.1.2"
 
+react-side-effect@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
+  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
+
 react-smooth-collapse@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/react-smooth-collapse/-/react-smooth-collapse-2.1.2.tgz#65bec660e0432ddc45af5f2deeaef8ddd25741b2"