refactor (og tags): create a new OgTags component

public/index.html

@@ -39,6 +39,7 @@
     <meta
       property="og:image"
       content="https://www.lightning-landscape.net/assets/images/og-image.jpg"
+      data-react-helmet="true"
     />
     <meta property="og:type" content="website" />
     <meta name="twitter:card" content="summary_large_image" />

src/App.tsx

@@ -3,12 +3,12 @@ import ModalsContainer from "src/Components/Modals/ModalsContainer/ModalsContain
 import { Navigate, Route, Routes } from "react-router-dom";
 import { useWrapperSetup } from "./utils/Wrapper";
 import LoadingPage from "./Components/LoadingPage/LoadingPage";
-import { Helmet } from "react-helmet";
 import { NavbarLayout } from "./utils/routing/layouts";
 import { Loadable, PAGES_ROUTES } from "./utils/routing";
 import { URLModal } from "react-url-modal";
 import ProjectDetailsCard from 'src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard';
 import ReactModal from "react-modal";
+import OgTags from "./Components/OgTags/OgTags";
 
 const ExplorePage = Loadable(React.lazy(() => import( /* webpackChunkName: "explore_page" */ "src/features/Projects/pages/ExplorePage/ExplorePage")))
 const AboutPage = Loadable(React.lazy(() => import( /* webpackChunkName: "about_page" */ "src/features/About/AboutPage")))
@@ -52,19 +52,11 @@ function App() {
 
 
   return <div id="app" className='w-full'>
-    <Helmet>
+    <OgTags
-      <title >Lightning Landscape</title>
+      title="Lightning Landscape"
-      <meta
+      description="A directory for lightning startups, projects, and companies."
-        name="description"
+      image="https://www.lightning-landscape.net/assets/images/og-image.jpg"
-        content="A directory for lightning startups, projects, and companies."
+    />
-
-      />
-      <meta
-        property="og:title"
-        content="Lightning Landscape"
-
-      />
-    </Helmet>
     <URLModal
       adapter={null}
       Wrapper={ModalWrapper}

src/Components/OgTags/OgTags.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+
+interface Props {
+    title?: string | null
+    description?: string | null
+    image?: string | null
+}
+
+export default function OgTags(props: Props) {
+    return (
+        <Helmet>
+            {props.title && <title>{props.title}</title>}
+            {props.title && <meta property="og:title" content={props.title!} />}
+            {props.description && <meta name="description" content={props.description!} />}
+            {props.description && <meta property="og:description" content={props.description!} />}
+            {props.image && <meta property="og:image" content={props.image} />}
+        </Helmet>
+    )
+}

src/features/About/AboutPage.tsx

@@ -1,10 +1,10 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
-import { Helmet } from 'react-helmet'
 import Header from './components/Header'
 import MadeBy from './components/MadeBy'
 import Missions from './components/Missions'
 import { setTheme } from 'src/redux/features/ui.slice'
 import { useAppDispatch } from 'src/utils/hooks'
+import OgTags from 'src/Components/OgTags/OgTags'
 
 export default function AboutPage() {
 
@@ -20,10 +20,10 @@ export default function AboutPage() {
 
     return (
         <>
-            <Helmet>
+            <OgTags
-                <title>{`About Lightning Landscape`}</title>
+                title="Lightning Landscape | About"
-                <meta property="og:title" content={`About Lightning Landscape`} />
+                description="Shining a spotlight on the entire lightning ecosystem. We’re gathering the lightning ecosystem under one platform to bring exposure and discoverability to help researchers, journalists, investors, and builders to find everything lightning."
-            </Helmet>
+            />
             <div className="page-container bg-gray-900 min-h-screen overflow-hidden relative isolate" style={{ "--maxPageWidth": "1200px" } as any}>
                 <Header />
                 <Missions />

src/features/Projects/pages/ExplorePage/ExplorePage.tsx

@@ -2,9 +2,8 @@
 import ErrorMessage from 'src/Components/Errors/ErrorMessage/ErrorMessage';
 import { useExplorePageQuery } from 'src/graphql';
 import ProjectsGrid from './ProjectsGrid/ProjectsGrid';
-import { Helmet } from "react-helmet";
 import Categories, { Category } from '../../Components/Categories/Categories';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import Header from './Header/Header';
 import Button from 'src/Components/Button/Button';
 import { useAppDispatch } from 'src/utils/hooks';
@@ -19,6 +18,7 @@ import { useUpdateUrlWithFilters } from './helpers';
 import { withBasicProvider } from 'src/utils/helperFunctions';
 import { ProjectsFiltersProvider, useProjectsFilters } from './filters-context';
 import { setTheme } from 'src/redux/features/ui.slice';
+import OgTags from 'src/Components/OgTags/OgTags';
 
 
 function ExplorePage() {
@@ -102,12 +102,10 @@ function ExplorePage() {
 
     return (
         <>
-            <Helmet>
+            <OgTags
-                <title>{`Lightning Landscape`}</title>
+                title="Lightning Landscape | Explore"
-                <meta property="og:title" content={`Lightning Landscape`} />
+                description="Everything lightning network in one place"
-                <meta name="description" content='Everything lightning network in one place' />
+            />
-                <meta property="og:description" content='Everything lightning network in one place' />
-            </Helmet>
             <Header
                 selectedCategry={filters?.categories?.[0] ?? null}
             />

src/features/Projects/pages/ExplorePage/Header/Header.tsx

@@ -52,10 +52,10 @@ export default function Header(props: Props) {
                     {currentHeader === 'all-default' && <>
                         <p className="text-body6 font-bolder text-gray-800 uppercase mt-8">Brought to you by</p>
                         <div className="flex flex-wrap gap-80">
-                            <a href="https://bolt.observer" target='_blank' rel="noreferrer" >
+                            <a href="https://bolt.observer" target='_blank' rel="noreferrer" className='hover:scale-110 active:scale-95 transition-transform' >
                                 <img src={ASSETS.BoltObserverLogoLight} className='h-32' alt="Bolt Observer Logo" />
                             </a>
-                            <a href="https://peakshift.com" target='_blank' rel="noreferrer" >
+                            <a href="https://peakshift.com" target='_blank' rel="noreferrer" className='hover:scale-110 active:scale-95 transition-transform' >
                                 <img src={ASSETS.PeakshiftLogoLight} className='h-32' alt="Peakshift Logo" />
                             </a>
                         </div>

src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx

@@ -1,8 +1,6 @@
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
-import { MdLocalFireDepartment } from 'react-icons/md';
 import { ModalCard } from 'src/Components/Modals/ModalsContainer/ModalsContainer';
 import { useAppDispatch, useAppSelector, useMediaQuery } from 'src/utils/hooks';
-import { Direction, openModal, scheduleModal } from 'src/redux/features/modals.slice';
 import { setProject } from 'src/redux/features/project.slice';
 import Button from 'src/Components/Button/Button';
 import ProjectCardSkeleton from './ProjectDetailsCard.Skeleton'
@@ -17,6 +15,7 @@ import Badge from 'src/Components/Badge/Badge';
 import { IoMdClose } from 'react-icons/io';
 import { CgGitFork } from 'react-icons/cg';
 import { Helmet } from 'react-helmet';
+import OgTags from 'src/Components/OgTags/OgTags';
 
 
 interface Props extends ModalCard {
@@ -120,6 +119,10 @@ export default function ProjectDetailsCard({ params: { projectId }, ...props }:
                 <meta property="og:title" content={project.title!} />
                 <meta property="og:description" content={project.description!} />
             </Helmet>
+            <OgTags
+                title={project.title}
+                description={project.description}
+            />
             {/* Cover Image */}
             <div className="relative h-[120px] lg:h-[80px] bg-gray-400">
                 {/* <img className="w-full h-full object-cover" src={project?.cover_image} alt="" /> */}