- added react helmet to manage document heads

design-sparx · Sep 28, 2023 · 7e2649a · 7e2649a
1 parent 5330fb6
commit 7e2649a
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 37 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "react": "^18.2.0",
     "react-calendar-timeline": "^0.28.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^1.3.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.15.0"
   },
@@ -32,7 +32,6 @@
     "@types/react": "^18.2.15",
     "@types/react-calendar-timeline": "^0.28.2",
     "@types/react-dom": "^18.2.7",
-    "@types/react-helmet": "^6.1.6",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,52 @@
 import {RouterProvider} from 'react-router-dom'
 import routes from "./routes/routes.tsx";
 import {ConfigProvider} from "antd";
+import {Helmet, HelmetProvider} from "react-helmet-async"
 
 // color palettes: triadic #A1A7CB, #CBA1A7, #A7CBA1
 
 function App() {
     return (
-        <ConfigProvider
-            theme={{
-                token: {
-                    colorPrimary: '#925368',
-                    borderRadius: 6,
-                },
-                components: {
-                    Breadcrumb: {
-                        linkColor: 'rgba(0,0,0,.8)',
-                        itemColor: 'rgba(0,0,0,.8)'
+        <HelmetProvider>
+            <Helmet>
+                <title>
+                    Multi dashboard template with React and Ant Design v5 - AntD Dashboard by Design Sparx
+                </title>
+                <meta
+                    name="description"
+                    content="Explore a powerful multi-dashboard application built with React and Ant Design (v5) for efficient data visualization and management. A large number of settings, additional services and widgets."/>
+                <meta
+                    name="keywords"
+                    content="Design Sparx, antd, antd5, admin themes, react, admin themes, antd admin, antd dashboard, antd dark mode"/>
+                <meta property="og:locale" content="en_US"/>
+                <meta property="og:type" content="article"/>
+                <meta
+                    property="og:title"
+                    content="Design Sparx – Multi dashboard template with React and Ant Design v5 - AntD Dashboard by Design Sparx"/>
+                <meta
+                    property="og:url"
+                    content="https://themes.getbootstrap.com/product/good-bootstrap-5-admin-dashboard-template"/>
+                <meta property="og:site_name" content="Good by Keenthemes"/>
+                <link rel="canonical" href="https://preview.keenthemes.com/good"/>
+                <link rel="shortcut icon" href="/favicon.ico"/>
+            </Helmet>
+            <ConfigProvider
+                theme={{
+                    token: {
+                        colorPrimary: '#925368',
+                        borderRadius: 6,
+                    },
+                    components: {
+                        Breadcrumb: {
+                            linkColor: 'rgba(0,0,0,.8)',
+                            itemColor: 'rgba(0,0,0,.8)'
+                        }
                     }
-                }
-            }}
-        >
-            <RouterProvider router={routes}/>
-        </ConfigProvider>
+                }}
+            >
+                <RouterProvider router={routes}/>
+            </ConfigProvider>
+        </HelmetProvider>
     )
 }
 

diff --git a/src/pages/dashboards/Bidding.tsx b/src/pages/dashboards/Bidding.tsx
@@ -15,6 +15,7 @@ import TransactionsData from "../../mocks/BiddingTransactions.json"
 import {HomeOutlined, PieChartOutlined} from "@ant-design/icons";
 import {DASHBOARD_ITEMS} from "../../constants";
 import {Link} from "react-router-dom";
+import {Helmet} from "react-helmet-async";
 
 const ROW_PROPS: RowProps = {
     gutter: [
@@ -26,6 +27,9 @@ const ROW_PROPS: RowProps = {
 const BiddingDashboardPage = () => {
     return (
         <div>
+            <Helmet>
+                <title>Bidding | Antd Dashboard</title>
+            </Helmet>
             <PageHeader
                 title="bidding dashboard"
                 breadcrumbs={[

diff --git a/src/pages/dashboards/Default.tsx b/src/pages/dashboards/Default.tsx
@@ -15,6 +15,7 @@ import NotificationsData from "../../mocks/Notifications.json";
 import {HomeOutlined, PieChartOutlined} from "@ant-design/icons";
 import {DASHBOARD_ITEMS} from "../../constants";
 import {Link} from "react-router-dom";
+import {Helmet} from "react-helmet-async";
 
 const ACTIVITY_DATA = [
     {
@@ -144,6 +145,9 @@ const DefaultDashboardPage = () => {
 
     return (
         <div>
+            <Helmet>
+                <title>Default | Antd Dashboard</title>
+            </Helmet>
             <PageHeader
                 title="default dashboard"
                 breadcrumbs={[

diff --git a/src/pages/dashboards/Ecommerce.tsx b/src/pages/dashboards/Ecommerce.tsx
@@ -16,6 +16,7 @@ import TopSellerData from "../../mocks/TopSeller.json"
 import RecentOrdersData from "../../mocks/RecentOrders.json"
 import {DASHBOARD_ITEMS} from "../../constants";
 import {Link} from "react-router-dom";
+import {Helmet} from "react-helmet-async";
 
 const {Paragraph, Text, Title} = Typography
 
@@ -490,6 +491,9 @@ const ROW_PROPS: RowProps = {
 const EcommerceDashboardPage = () => {
     return (
         <div>
+            <Helmet>
+                <title>Ecommerce | Antd Dashboard</title>
+            </Helmet>
             <PageHeader
                 title="ecommerce dashboard"
                 breadcrumbs={[

diff --git a/src/pages/dashboards/Learning.tsx b/src/pages/dashboards/Learning.tsx
@@ -24,6 +24,7 @@ import ExamsData from "../../mocks/Exams.json";
 import CommunityGroupsData from "../../mocks/CommunityGroups.json";
 import {DASHBOARD_ITEMS} from "../../constants";
 import {Link} from "react-router-dom";
+import {Helmet} from "react-helmet-async";
 
 const ROW_PROPS: RowProps = {
     gutter: [
@@ -35,6 +36,9 @@ const ROW_PROPS: RowProps = {
 const LearningDashboardPage = () => {
     return (
         <div>
+            <Helmet>
+                <title>Learning | Antd Dashboard</title>
+            </Helmet>
             <PageHeader
                 title="learning dashboard"
                 breadcrumbs={[

diff --git a/src/pages/dashboards/Logistics.tsx b/src/pages/dashboards/Logistics.tsx
@@ -22,6 +22,7 @@ import TrucksData from "../../mocks/Trucks.json"
 import DeliveryRequests from "../../mocks/TruckDeliveryRequest.json";
 import {DASHBOARD_ITEMS} from "../../constants";
 import {Link} from "react-router-dom";
+import {Helmet} from "react-helmet-async";
 
 const STATS = [
     {
@@ -75,6 +76,9 @@ const ROW_PROPS: RowProps = {
 const LogisticsDashboardPage = () => {
     return (
         <div>
+            <Helmet>
+                <title>Logistics | Antd Dashboard</title>
+            </Helmet>
             <PageHeader
                 title="logistics dashboard"
                 breadcrumbs={[

diff --git a/src/pages/dashboards/Marketing.tsx b/src/pages/dashboards/Marketing.tsx
@@ -10,6 +10,7 @@ import {
 import {HomeOutlined, PieChartOutlined} from "@ant-design/icons";
 import {DASHBOARD_ITEMS} from "../../constants";
 import {Link} from "react-router-dom";
+import {Helmet} from "react-helmet-async";
 
 const ROW_PROPS: RowProps = {
     gutter: [
@@ -21,6 +22,9 @@ const ROW_PROPS: RowProps = {
 const MarketingDashboardPage = () => {
     return (
         <div>
+            <Helmet>
+                <title>Marketing | Antd Dashboard</title>
+            </Helmet>
             <PageHeader
                 title="marketing dashboard"
                 breadcrumbs={[

diff --git a/src/pages/dashboards/Projects.tsx b/src/pages/dashboards/Projects.tsx
@@ -9,6 +9,7 @@ import {useState} from "react";
 import {CloudUploadOutlined, HomeOutlined, PieChartOutlined, PlusOutlined} from "@ant-design/icons";
 import {DASHBOARD_ITEMS} from "../../constants";
 import {Link} from "react-router-dom";
+import {Helmet} from "react-helmet-async";
 
 const RevenueColumnChart = () => {
     const data = [
@@ -148,6 +149,9 @@ const ProjectsDashboardPage = () => {
 
     return (
         <div>
+            <Helmet>
+                <title>Projects | Antd Dashboard</title>
+            </Helmet>
             <PageHeader
                 title="projects dashboard"
                 breadcrumbs={[

diff --git a/yarn.lock b/yarn.lock
@@ -1674,13 +1674,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-helmet@^6.1.6":
-  version "6.1.6"
-  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.6.tgz#7d1afd8cbf099616894e8240e9ef70e3c6d7506d"
-  integrity sha512-ZKcoOdW/Tg+kiUbkFCBtvDw0k3nD4HJ/h/B9yWxN4uDO8OkRksWTO+EL+z/Qu3aHTeTll3Ro0Cc/8UhwBCMG5A==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-router-dom@^5.3.3":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
@@ -3376,6 +3369,13 @@ internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 inversify-inject-decorators@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/inversify-inject-decorators/-/inversify-inject-decorators-3.1.0.tgz#d9941080bad77cec8a65ee29d905e4d5d73e1e95"
@@ -4776,20 +4776,21 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
-react-fast-compare@^3.1.1:
+react-fast-compare@^3.2.0:
   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-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==
+react-helmet-async@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.3.0.tgz#7bd5bf8c5c69ea9f02f6083f14ce33ef545c222e"
+  integrity sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==
   dependencies:
-    object-assign "^4.1.1"
+    "@babel/runtime" "^7.12.5"
+    invariant "^2.2.4"
     prop-types "^15.7.2"
-    react-fast-compare "^3.1.1"
-    react-side-effect "^2.1.0"
+    react-fast-compare "^3.2.0"
+    shallowequal "^1.1.0"
 
 react-is@^16.12.0, react-is@^16.13.1:
   version "16.13.1"
@@ -4833,11 +4834,6 @@ [email protected]:
   dependencies:
     "@remix-run/router" "1.8.0"
 
-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-universal-interface@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/react-universal-interface/-/react-universal-interface-0.6.2.tgz#5e8d438a01729a4dbbcbeeceb0b86be146fe2b3b"