feat : add react-helmet on pages

2024-06-24 01:18:39 +04:30
parent 3c1df40448
commit d0e3f6be00
8 changed files with 157 additions and 49 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
        "nprogress": "^0.2.0",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
+        "react-helmet-async": "^2.0.5",
        "react-hot-toast": "^2.4.1",
        "react-icons": "^5.2.1",
        "react-otp-input": "^3.1.1",
@@ -3783,6 +3784,14 @@
      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
      "dev": true
    },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
    "node_modules/is-arrayish": {
      "version": "0.2.1",
      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -4629,6 +4638,24 @@
      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-helmet-async/node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="
+    },
    "node_modules/react-hot-toast": {
      "version": "2.4.1",
      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",
@@ -4947,6 +4974,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
    "nprogress": "^0.2.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.2.1",
    "react-otp-input": "^3.1.1",
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -16,10 +16,12 @@ import Login from "./pages/login";
 import Profile from "./pages/profile";
 import { Toaster } from "react-hot-toast";
 import { isAuthenticated } from "./utils/auth";
+import { HelmetProvider } from "react-helmet-async";

 const App = () => {
  return (
    <Router basename="/">
+      <HelmetProvider>
        <Toaster
          toastOptions={{
            className: "!bg-gray-800 !text-secondTheme !overflow-hidden",
@@ -49,6 +51,7 @@ const App = () => {
            <Route index element={<Login />} />
          </Route>
        </Routes>
+      </HelmetProvider>
    </Router>
  );
 };
--- a/src/layout/index.tsx
+++ b/src/layout/index.tsx
@@ -2,10 +2,23 @@ import { Outlet } from "react-router-dom";
 import Header from "../components/header";
 import Footer from "../components/footer";
 import Particle from "../components/particle";
+import { Helmet } from 'react-helmet-async';

 const Layout = () => {
  return (
    <>
+      <Helmet>
+        <title>پرشین پینگ | Persian Ping</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ"
+        />
+      </Helmet>
+
      <Particle />
      <div className={`relative bg-noisy w-full min-h-screen`}>
        <div className="relative max-w-[1400px] mx-auto h-full flex flex-col justify-between">
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -1,12 +1,27 @@
+import { Helmet } from "react-helmet-async";
 import Info from "./section/Info";

 const About = () => {
  return (
+    <>
+      <Helmet>
+        <title>درباره ما</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ , درباره ما"
+        />
+      </Helmet>
+
      <div className="relative w-full h-full py-2">
        <div className="relative w-full h-full glass px-4 py-2">
          <Info />
        </div>
      </div>
+    </>
  );
 };

--- a/src/pages/rule/index.tsx
+++ b/src/pages/rule/index.tsx
@@ -1,12 +1,26 @@
+import { Helmet } from "react-helmet-async";
 import Rules from "./section/Rules";

 const Rule = () => {
  return (
+    <>
+      <Helmet>
+        <title>قوانین</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ , قوانین"
+        />
+      </Helmet>
      <div className="relative w-full h-full py-2">
        <div className="relative w-full h-full glass px-4 py-2">
          <Rules />
        </div>
-    </div>
+      </div>{" "}
+    </>
  );
 };

--- a/src/pages/shop/index.tsx
+++ b/src/pages/shop/index.tsx
@@ -1,3 +1,4 @@
+import { Helmet } from "react-helmet-async";
 import BestQuality from "./section/bestQuality/BestQuality";
 import FastSell from "./section/fastSell/FastSell";
 import Intro from "./section/intro/Intro";
@@ -6,6 +7,19 @@ import ProductList from "./section/productList/ProductList";

 const Shop = () => {
  return (
+    <>
+      <Helmet>
+        <title>فروشگاه</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ و فروشگاه"
+        />
+      </Helmet>
+
      <div className="relative w-full h-full py-2">
        <div className="relative w-full h-full glass px-4 py-2">
          <Intro />
@@ -15,6 +29,7 @@ const Shop = () => {
          <BestQuality />
        </div>
      </div>
+    </>
  );
 };

--- a/src/pages/tutorial/index.tsx
+++ b/src/pages/tutorial/index.tsx
@@ -1,12 +1,27 @@
+import { Helmet } from "react-helmet-async";
 import Tutorials from "./section/Tutorials";

 const Tutorial = () => {
  return (
+    <>
+      <Helmet>
+        <title>اموزش</title>
+        <meta
+          name="description"
+          content="بهترین خدمات پینگ برای بازی‌های آنلاین با پرشین پینگ"
+        />
+        <meta
+          name="keywords"
+          content="پرشین پینگ, خدمات پینگ, بازی آنلاین, کاهش پینگ و آموزش"
+        />
+      </Helmet>
+
      <div className="relative w-full h-full py-2">
        <div className="relative w-full h-full glass px-4 py-2">
          <Tutorials />
        </div>
      </div>
+    </>
  );
 };