fix: dynamic og tags

WatchItDev · Jan 22, 2025 · bfc151b · bfc151b
1 parent c10e1c1
commit bfc151b
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 105 deletions.
diff --git a/src/pages/dashboard/governance/details.tsx b/src/pages/dashboard/governance/details.tsx
@@ -16,7 +16,7 @@ export default function ProductDetailsPage() {
       description="Discover the latest decentralized creations on Watchit. Powered by Web3 & AI."
       url={`${GLOBAL_CONSTANTS.BASE_URL}/governance`}
     >
-      <GovernanceDetailsView title="" />
+      <GovernanceDetailsView />
     </OgMetaTags>
   )
 }
diff --git a/src/pages/dashboard/publication/details.tsx b/src/pages/dashboard/publication/details.tsx
@@ -1,4 +1,3 @@
-import { Helmet } from 'react-helmet-async';
 // routes
 import { useParams, useRouter } from '@src/routes/hooks';
 // sections
@@ -7,6 +6,8 @@ import Header from '@src/layouts/dashboard/header.tsx';
 import { paths } from '@src/routes/paths.ts';
 
 import HeaderContent from '@src/layouts/dashboard/header-content.tsx';
+import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
+import { OgMetaTags } from '@src/components/og-meta-tags.tsx';
 
 // ----------------------------------------------------------------------
 
@@ -20,16 +21,16 @@ export default function ProductDetailsPage() {
   };
 
   return (
-    <>
-      <Helmet>
-        <title> Dashboard: Movie details</title>
-      </Helmet>
-
+    <OgMetaTags
+      title="Watchit: Discover Unique Publications"
+      description="Dive into the details of exciting publications. Experience cutting-edge content and support creators on Watchit, powered by Web3 and AI."
+      url={`${GLOBAL_CONSTANTS.BASE_URL}/publication/${id}`}
+    >
       <Header>
         <HeaderContent handleBack={handleBack} title="Movie details" />
       </Header>
 
       <PublicationDetailsView id={`${id}`} />
-    </>
+    </OgMetaTags>
   );
 }
diff --git a/src/pages/dashboard/publication/new.tsx b/src/pages/dashboard/publication/new.tsx
@@ -1,17 +1,18 @@
-import { Helmet } from 'react-helmet-async';
 // sections
 import { PublicationCreateView } from '@src/sections/publication/view';
+import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
+import { OgMetaTags } from '@src/components/og-meta-tags.tsx';
 
 // ----------------------------------------------------------------------
 
 export default function MovieCreatePage() {
   return (
-    <>
-      <Helmet>
-        <title> Dashboard: Create a new movie</title>
-      </Helmet>
-
+    <OgMetaTags
+      title="Watchit: Create New Content"
+      description="Unleash your creativity in Watchit Studio. Share your next big idea with powerful tools for metadata, subtitles, and more."
+      url={`${GLOBAL_CONSTANTS.BASE_URL}/publication/new`}
+    >
       <PublicationCreateView />
-    </>
+    </OgMetaTags>
   );
 }
diff --git a/src/pages/dashboard/publication/play.tsx b/src/pages/dashboard/publication/play.tsx
@@ -1,6 +1,7 @@
-import { Helmet } from 'react-helmet-async';
 // sections
 import { PublicationPlayView } from '@src/sections/publication/view';
+import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
+import { OgMetaTags } from '@src/components/og-meta-tags.tsx';
 import { useParams } from '@src/routes/hooks';
 
 // ----------------------------------------------------------------------
@@ -10,12 +11,12 @@ export default function MovieCreatePage() {
   const { id } = params;
 
   return (
-    <>
-      <Helmet>
-        <title> Dashboard: Create a new movie</title>
-      </Helmet>
-
-      <PublicationPlayView id={id} publication={undefined} loading={false} />
-    </>
+    <OgMetaTags
+      title="Watchit: Stream Exclusive Content"
+      description="Enjoy decentralized streaming experiences on Watchit. Watch exclusive content and explore the future of video powered by Web3 and AI."
+      url={`${GLOBAL_CONSTANTS.BASE_URL}/publication/play/${id}`}
+    >
+      <PublicationPlayView  publication={undefined} loading={false} />
+    </OgMetaTags>
   );
 }
diff --git a/src/pages/dashboard/user/profile.tsx b/src/pages/dashboard/user/profile.tsx
@@ -3,6 +3,8 @@ import { UserProfileView } from '@src/sections/user/view';
 import { useParams } from '@src/routes/hooks';
 import Header from '@src/layouts/dashboard/header.tsx';
 import HeaderContent from '@src/layouts/dashboard/header-content.tsx';
+import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
+import { OgMetaTags } from '@src/components/og-meta-tags.tsx';
 
 // ----------------------------------------------------------------------
 
@@ -11,12 +13,16 @@ export default function UserProfilePage() {
   const { id } = params;
 
   return (
-    <>
+    <OgMetaTags
+      title="Watchit: Explore Profiles"
+      description="Discover creators and their contributions on Watchit. Connect, explore, and support their journey in decentralized content powered by Web3 and AI."
+      url={`${GLOBAL_CONSTANTS.BASE_URL}/profile/${id}`}
+    >
       <Header>
         <HeaderContent title="Profile" />
       </Header>
 
       <UserProfileView id={id} />
-    </>
+    </OgMetaTags>
   );
 }
diff --git a/src/sections/publication/view/publication-details-view.tsx b/src/sections/publication/view/publication-details-view.tsx
@@ -1,5 +1,5 @@
 // REACT IMPORTS
-import { FC, PropsWithChildren, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 // MUI IMPORTS
 import Box from '@mui/material/Box';
@@ -32,11 +32,7 @@ import { SubscribeProfileModal } from '@src/components/subscribe-profile-modal.t
 import LoadingButton from '@mui/lab/LoadingButton';
 import { useDispatch, useSelector } from 'react-redux';
 import { openLoginModal } from '@redux/auth';
-// @ts-ignore
-import { ReadResult } from '@lens-protocol/react/dist/declarations/src/helpers/reads';
 import { appId, PublicationType, usePublications } from '@lens-protocol/react-web';
-import { OgMetaTags } from '@src/components/og-meta-tags.tsx';
-import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
 
 const MAX_LINES = 5;
 
@@ -120,36 +116,32 @@ export default function PublicationDetailsView({ id }: Props) {
   const filteredPublications = publications?.filter((publication) => publication.id !== id) ?? [];
 
   if (loading || accessLoading) return (
-    <PublicationDetailsTags image={getMediaUri(getPosterCid())} publicationId={id} title={data?.metadata?.title ?? 'publication'}>
-      <LoadingScreen />
-    </PublicationDetailsTags>
+    <LoadingScreen />
   );
 
   if (data.isHidden)
     return (
-      <PublicationDetailsTags image={getMediaUri(getPosterCid())} publicationId={id} title={data?.metadata?.title ?? 'publication'}>
-        <Box sx={{ padding: 2 }}>
-          <Typography
-            sx={{
-              height: '20rem',
-              textAlign: 'center',
-              width: '100%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              fontWeight: 'bold',
-              background: '#2b2d31',
-              borderRadius: '1rem',
-            }}
-          >
-            Publication is hidden
-          </Typography>
-        </Box>
-      </PublicationDetailsTags>
+      <Box sx={{ padding: 2 }}>
+        <Typography
+          sx={{
+            height: '20rem',
+            textAlign: 'center',
+            width: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 'bold',
+            background: '#2b2d31',
+            borderRadius: '1rem',
+          }}
+        >
+          Publication is hidden
+        </Typography>
+      </Box>
     );
 
   return (
-    <PublicationDetailsTags image={getMediaUri(getPosterCid())} publicationId={id} title={data?.metadata?.title ?? 'publication'}>
+    <>
       <Box
         sx={{
           flexDirection: {
@@ -370,29 +362,6 @@ export default function PublicationDetailsView({ id }: Props) {
         onSubscribe={onSubscribe}
         profile={data?.by}
       />
-    </PublicationDetailsTags>
+    </>
   );
 }
-
-interface PublicationDetailsTagsProps {
-  title: string
-  image: string
-  publicationId: string
-}
-
-const PublicationDetailsTags: FC<PropsWithChildren<PublicationDetailsTagsProps>> = ({ title, publicationId, image: customImage, children }) => {
-  // OG META TAGS DATA
-  const metaTitle = `Watchit: ${title}`
-  const description = 'Check out this amazing publication on Watchit, where content meets Web3 & AI.'
-  const image = customImage ?? GLOBAL_CONSTANTS.LOGO_URL
-  const url = `${GLOBAL_CONSTANTS.BASE_URL}/publication/${publicationId}`
-
-  return <OgMetaTags
-    title={metaTitle}
-    description={description}
-    image={image}
-    url={url}
-  >
-    {children}
-  </OgMetaTags>
-}
diff --git a/src/sections/user/view/user-profile-view.tsx b/src/sections/user/view/user-profile-view.tsx
@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 // @mui
 import Tab from '@mui/material/Tab';
 import Container from '@mui/material/Container';
@@ -22,8 +22,6 @@ import { RootState } from '@src/redux/store';
 import { setFollowers, setFollowings } from '@redux/followers';
 import ProfileReferrals from "@src/sections/user/profile-referrals.tsx";
 import useReferrals from "@src/hooks/use-referrals.ts";
-import { OgMetaTags } from '@src/components/og-meta-tags.tsx';
-import { GLOBAL_CONSTANTS } from '@src/config-global.ts';
 
 // ----------------------------------------------------------------------
 
@@ -114,13 +112,11 @@ const UserProfileView = ({ id }: any) => {
   }));
 
   if (loadingProfile || loadingPublications) return (
-    <ProfileTags profile={profile}>
-      <LoadingScreen />
-    </ProfileTags>
+    <LoadingScreen />
   );
 
   return (
-    <ProfileTags profile={profile}>
+    <>
       <Container maxWidth={settings.themeStretch ? false : 'lg'} sx={{ overflowX: 'hidden' }}>
         <ProfileHeader profile={profile as any}>
           <Tabs
@@ -157,7 +153,7 @@ const UserProfileView = ({ id }: any) => {
         {currentTab === 'following' && profile && <ProfileFollowing />}
         {currentTab === 'referrals' && sessionData?.profile?.id === id && <ProfileReferrals referrals={referrals} loading={loadingReferrals}  />}
       </Container>
-    </ProfileTags>
+    </>
   );
 };
 
@@ -170,24 +166,4 @@ const TabLabel = ({ label, count }: any) => (
   </>
 );
 
-interface ProfileTagsProps {
-  profile: any
-}
-
-const ProfileTags: FC<PropsWithChildren<ProfileTagsProps>> = ({ profile, children }) => {
-  // OG META TAGS DATA
-  const title = `Watchit: Profile of "${profile?.metadata?.displayName}"`
-  const description = 'Discover this user’s profile on Watchit, a decentralized platform powered by Web3 & AI.'
-  const url = `${GLOBAL_CONSTANTS.BASE_URL}/profile/${profile?.id}`
-
-  return <OgMetaTags
-    title={title}
-    description={description}
-    url={url}
-  >
-    {children}
-  </OgMetaTags>
-}
-
-
 export default UserProfileView;