diff --git a/package.json b/package.json index 6742418f..a536bdb1 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-fast-marquee": "^1.6.2", + "react-helmet-async": "^2.0.5", "react-hook-form": "^7.48.2", "react-hot-toast": "^2.4.1", "react-lazy-load-image-component": "^1.6.0", diff --git a/src/APP/components/SeoMetadata.jsx b/src/APP/components/SeoMetadata.jsx new file mode 100644 index 00000000..e12fc472 --- /dev/null +++ b/src/APP/components/SeoMetadata.jsx @@ -0,0 +1,42 @@ +import { Helmet } from "react-helmet-async"; + +export default function SeoMetadata({ + title, + description, + type = "website", + url, + ogImage = "https://apis.spaceyatech.com/media/blog-images/syt.png", + ogImageAlt = "SpaceYaTech logo, social media handles, website URL, email, and more on a muted background.", + siteName = "SpaceYaTech", +}) { + return ( + + {/* Standard metadata tags */} + {`${title} - SpaceYaTech`} + + + {/* End Standard metadata tags */} + {/* Standard OpenGraph metadata tags */} + + + + + + {/* End standard OG metadata tags */} + {/* Optional OG metadata tags */} + + + + + + + {/* End Optional OG metadata tags */} + {/* Twitter tags */} + + + + + {/* End Twitter tags */} + + ); +} diff --git a/src/APP/pages/aboutUs/AboutUs.jsx b/src/APP/pages/aboutUs/AboutUs.jsx index 6658c297..da19a86e 100644 --- a/src/APP/pages/aboutUs/AboutUs.jsx +++ b/src/APP/pages/aboutUs/AboutUs.jsx @@ -1,5 +1,5 @@ import { useEffect } from "react"; - +import SeoMetadata from "../../components/SeoMetadata"; import { HeroSection, LeadershipSection, @@ -13,12 +13,22 @@ function AboutUs() { }, []); return ( -
- - - - -
+ <> + +
+ + + + +
+ ); } diff --git a/src/APP/pages/blog2/Blog2.jsx b/src/APP/pages/blog2/Blog2.jsx index 4cfec413..02f68447 100644 --- a/src/APP/pages/blog2/Blog2.jsx +++ b/src/APP/pages/blog2/Blog2.jsx @@ -3,6 +3,7 @@ import { useNavigate, useParams } from "react-router-dom"; import useBlogData from "../../../hooks/Queries/blog/useBlogData"; import { Loader } from "../../components"; +import SeoMetadata from "../../components/SeoMetadata"; import { Advert, BlogHeader, BlogBody } from "./sections"; function Blog2() { @@ -22,38 +23,49 @@ function Blog2() { }, [refetchBlogData, titleSlug]); return ( -
- {isError && navigate("/error-500")} + <> + +
+ {isError && navigate("/error-500")} - {isLoading && ( -
- -

- Loading blog details... -

-
- )} - {isSuccess && ( - <> - - - - - )} -
+ {isLoading && ( +
+ +

+ Loading blog details... +

+
+ )} + {isSuccess && ( + <> + + + + + )} +
+ ); } diff --git a/src/APP/pages/blogs/Blogs.jsx b/src/APP/pages/blogs/Blogs.jsx index 65b76d4e..9acc7895 100644 --- a/src/APP/pages/blogs/Blogs.jsx +++ b/src/APP/pages/blogs/Blogs.jsx @@ -1,13 +1,25 @@ import React from "react"; +import SeoMetadata from "../../components/SeoMetadata"; import { Banner, BlogsWrapper } from "./sections"; function Blogs() { return ( -
- - -
+ <> + +
+ + +
+ ); } diff --git a/src/APP/pages/community/CommunityPage.jsx b/src/APP/pages/community/CommunityPage.jsx index ec1d89a3..77cbeeb4 100644 --- a/src/APP/pages/community/CommunityPage.jsx +++ b/src/APP/pages/community/CommunityPage.jsx @@ -1,4 +1,5 @@ import { useEffect } from "react"; +import SeoMetadata from "../../components/SeoMetadata"; import EventsSection from "../events/sections/eventsSection/EventsSection"; import { WelcomeSection, GallerySection } from "./sections"; @@ -8,13 +9,23 @@ function CommunityPage() { }, []); return ( -
-
- - - -
-
+ <> + +
+
+ + + +
+
+ ); } diff --git a/src/APP/pages/community/sections/eventsPreview/SingleEvents/SingleEvent.jsx b/src/APP/pages/community/sections/eventsPreview/SingleEvents/SingleEvent.jsx index afef31ab..96a5108d 100644 --- a/src/APP/pages/community/sections/eventsPreview/SingleEvents/SingleEvent.jsx +++ b/src/APP/pages/community/sections/eventsPreview/SingleEvents/SingleEvent.jsx @@ -1,5 +1,6 @@ import React, { useEffect } from "react"; import { useParams } from "react-router-dom"; +import SeoMetadata from "../../../../../components/SeoMetadata"; import { GoBackBtn, LandingWrapper, Loader } from "../../../../../components"; import { EventDescription, Hero, SimilarEvents } from "./sections"; @@ -21,6 +22,13 @@ function SingleEvent() { return ( <> + {isError &&

Error fetching event!

} {isPending && (
diff --git a/src/APP/pages/events/pages/EventsPage.jsx b/src/APP/pages/events/pages/EventsPage.jsx index 5c19fbcc..c81d565f 100644 --- a/src/APP/pages/events/pages/EventsPage.jsx +++ b/src/APP/pages/events/pages/EventsPage.jsx @@ -1,19 +1,29 @@ import React from "react"; import { GoBackBtn } from "../../../components"; +import SeoMetadata from "../../../components/SeoMetadata"; import { EventsSection, FeaturedCarousel } from "../sections"; function EventsPage() { return ( -
-
- + <> + +
+
+ + - - - -
-
+ +
+
+ ); } diff --git a/src/APP/pages/gallery/GalleryPage.jsx b/src/APP/pages/gallery/GalleryPage.jsx index 727bffd0..779179b1 100644 --- a/src/APP/pages/gallery/GalleryPage.jsx +++ b/src/APP/pages/gallery/GalleryPage.jsx @@ -2,6 +2,7 @@ import React, { useState } from "react"; import { Link } from "react-router-dom"; import { arrowCircleLeft } from "../../../assets/images/icons"; import processPhotos from "../../../utilities/processPhotos"; +import SeoMetadata from "../../components/SeoMetadata"; import photosData from "./data"; import ImageCard from "./sections/ImageCard"; @@ -11,33 +12,46 @@ function GalleryPage() { const photos = processPhotos(photosData); return ( -
-
-
- -
- arrow-left - - Go Back - -
- + <> + +
+
+
+ +
+ arrow-left + + Go Back + +
+ -

- SpaceYaTech Gallery | Collection 2024 -

-
+

+ SpaceYaTech Gallery | Collection 2024 +

+
- {/*
+ {/*
{photosData.map((photo) => ( ))}
*/} - {/*
@@ -71,7 +85,7 @@ function GalleryPage() { })}
*/} - {/*
@@ -98,12 +112,13 @@ function GalleryPage() {
*/} - {/* Gallery library */} -
- + {/* Gallery library */} +
+ +
-
-
+ + ); } diff --git a/src/APP/pages/landingPage/LandingPage.jsx b/src/APP/pages/landingPage/LandingPage.jsx index 40610d4f..134c37ff 100644 --- a/src/APP/pages/landingPage/LandingPage.jsx +++ b/src/APP/pages/landingPage/LandingPage.jsx @@ -1,6 +1,7 @@ /* eslint-disable import/extensions */ /* eslint-disable import/no-unresolved */ import LandingWrapper from "../../components/LandingWrapper"; +import SeoMetadata from "../../components/SeoMetadata"; import { CTASection, FaqSection, @@ -39,20 +40,30 @@ const components = [ function LandingPage() { return ( -
- - - - - {components.map(({ component, title }) => ( - - {component} - - ))} -
- + <> + +
+ + + + + {components.map(({ component, title }) => ( + + {component} + + ))} +
+ +
-
+ ); } diff --git a/src/APP/pages/products2/Products.jsx b/src/APP/pages/products2/Products.jsx index a736d3bc..7e9d6611 100644 --- a/src/APP/pages/products2/Products.jsx +++ b/src/APP/pages/products2/Products.jsx @@ -1,4 +1,5 @@ import React, { useEffect } from "react"; +import SeoMetadata from "../../components/SeoMetadata"; import { HeroSection, ProductsSection, Teams, TechStack } from "./sections"; const Products = () => { @@ -6,12 +7,22 @@ const Products = () => { window.scrollTo(0, 0); }, []); return ( -
- - - - -
+ <> + +
+ + + + +
+ ); }; diff --git a/src/APP/pages/resources/Resources.jsx b/src/APP/pages/resources/Resources.jsx index a2c37968..6d860714 100644 --- a/src/APP/pages/resources/Resources.jsx +++ b/src/APP/pages/resources/Resources.jsx @@ -1,12 +1,23 @@ +import SeoMetadata from "../../components/SeoMetadata"; import { HeroSection, ResourcesSection } from "./sections"; // million-ignore const Resources = () => { return ( -
- - -
+ <> + +
+ + +
+ ); }; diff --git a/src/APP/pages/shop/Homepage.jsx b/src/APP/pages/shop/Homepage.jsx index 88b9e749..54724647 100644 --- a/src/APP/pages/shop/Homepage.jsx +++ b/src/APP/pages/shop/Homepage.jsx @@ -1,3 +1,4 @@ +import SeoMetadata from "../../components/SeoMetadata"; import Banner from "./sections/Banner"; import CategoriesSection from "./sections/CategoriesSection"; import PopularItemsSection from "./sections/PopularItemsSection"; @@ -5,12 +6,23 @@ import PopularItemsSection from "./sections/PopularItemsSection"; function Homepage() { return ( -
- - - {/* */} - -
+ <> + +
+ + + {/* */} + +
+ ); } diff --git a/src/main.jsx b/src/main.jsx index 4eb68d4a..a61c49e6 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -2,6 +2,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; import React from "react"; import ReactDOM from "react-dom/client"; +import { HelmetProvider } from "react-helmet-async"; import { Toaster } from "react-hot-toast"; import { RouterProvider } from "react-router-dom"; import "./index.css"; @@ -21,16 +22,18 @@ const queryClient = new QueryClient({ ReactDOM.createRoot(document.getElementById("root")).render( - - - - - - - - - - - + + + + + + + + + + + + + );