feat: attempting og meta tags

warmachine028 · Dec 1, 2024 · 9a0a843 · 9a0a843
1 parent 991c8e5
commit 9a0a843
Show file tree

Hide file tree

Showing 9 changed files with 47 additions and 229 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml
diff --git a/.github/ISSUE_TEMPLATE/docs.yml b/.github/ISSUE_TEMPLATE/docs.yml
diff --git a/.github/ISSUE_TEMPLATE/feature-request.yml b/.github/ISSUE_TEMPLATE/feature-request.yml
diff --git a/client/bun.lockb b/client/bun.lockb
diff --git a/client/index.html b/client/index.html
@@ -5,7 +5,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<title>Memories | Your Social Media App</title>
 		<meta name="description" content="A sleek social media platform for sharing your memories with others." />
-		<link rel="canonical" href="https://memories-latest.vercel.app" />
+		<link rel="canonical" href="https://memories-pritam.vercel.app" />
 		<base href="/" />
 
 		<!-- Favicon -->
@@ -16,15 +16,15 @@
 		<meta name="theme-color" content="#000000" />
 
 		<!-- Open Graph / Facebook Meta Tags -->
-		<meta property="og:type" content="website" />
-		<meta property="og:url" content="https://memories-latest.vercel.app" />
 		<meta property="og:title" content="Memories | Your Social Media App" />
 		<meta property="og:description" content="A sleek social media platform for sharing your memories with others." />
 		<meta property="og:image" content="https://fastly.picsum.photos/id/927/800/600.jpg?hmac=jmIL6-dpiZutqU2W-KGtgFPRg_R2mJuU-5QaFNdTu9E" />
+		<meta property="og:url" content="https://memories-pritam.vercel.app" />
+		<meta property="og:type" content="website" />
+		<meta property="og:site_name" content="Memories" />
 		<meta property="og:image:width" content="800" />
 		<meta property="og:image:height" content="600" />
 		<meta property="og:image:alt" content="Beautiful landscape representing memories" />
-		<meta property="og:site_name" content="Memories" />
 
 		<!-- Twitter Meta Tags -->
 		<meta name="twitter:card" content="summary_large_image" />
@@ -39,14 +39,14 @@
 				"@context": "https://schema.org",
 				"@type": "WebSite",
 				"name": "Memories",
-				"url": "https://memories-latest.vercel.app",
+				"url": "https://memories-pritam.vercel.app",
 				"description": "A sleek social media platform for sharing your memories with others."
 			}
 		</script>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
-		<script type="module" src="/src/main.jsx"></script>
+		<script type="module" src="src/main.jsx"></script>
 	</body>
 </html>
diff --git a/client/package.json b/client/package.json
@@ -34,6 +34,7 @@
 		"moment": "^2.30.1",
 		"react": "^19.0.0-rc-7670501b-20241124",
 		"react-dom": "^19.0.0-rc-7670501b-20241124",
+		"react-helmet-async": "^2.0.5",
 		"react-intersection-observer": "^9.13.1",
 		"react-router": "^7.0.1",
 		"zustand": "^5.0.1"

diff --git a/client/src/App.jsx b/client/src/App.jsx
@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router'
 import { ThemeProvider } from '@/providers'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { HelmetProvider } from 'react-helmet-async'
 
 const MemoriesApp = () => {
 	return (
@@ -26,14 +27,11 @@ const App = () => {
 	return (
 		<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
 			<QueryClientProvider client={queryClient}>
-				<BrowserRouter
-					future={{
-						v7_startTransition: true,
-						v7_relativeSplatPath: true
-					}}
-				>
-					<MemoriesApp />
-				</BrowserRouter>
+				<HelmetProvider>
+					<BrowserRouter>
+						<MemoriesApp />
+					</BrowserRouter>
+				</HelmetProvider>
 				<ReactQueryDevtools initialIsOpen={false} />
 			</QueryClientProvider>
 		</ClerkProvider>

diff --git a/client/src/pages/Post.jsx b/client/src/pages/Post.jsx
@@ -2,34 +2,20 @@ import {
 	Avatar,
 	AvatarGroup,
 	Box,
-	Button,
 	Card,
 	CardActions,
 	CardContent,
 	CardHeader,
 	CardMedia,
 	Chip,
 	Container,
-	Dialog,
-	DialogActions,
-	DialogContent,
-	DialogTitle,
 	Divider,
 	Grid2 as Grid,
-	IconButton,
 	Stack,
-	TextField,
 	Tooltip,
 	Typography
 } from '@mui/material'
 import { CommentSection, RecommendationSection } from '@/sections'
-import {
-	ContentCopy,
-	Facebook,
-	LinkedIn,
-	X,
-	WhatsApp
-} from '@mui/icons-material'
 import { Link, useNavigate, useParams } from 'react-router'
 import {
 	AvatarGroupSkeleton,
@@ -40,7 +26,7 @@ import {
 } from '@/components'
 import { useGetPost, useGetTop3Reacts } from '@/hooks'
 import moment from 'moment'
-import { useStore } from '@/store'
+import { Helmet } from 'react-helmet-async'
 
 const PostMetaData = ({ author, timestamp }) => {
 	const navigate = useNavigate()
@@ -71,9 +57,7 @@ const PostMetaData = ({ author, timestamp }) => {
 	)
 }
 
-const PostCard = () => {
-	const { id } = useParams()
-	const { data: post, isLoading, error } = useGetPost(id)
+const PostCard = ({ post, isLoading, error }) => {
 	const navigate = useNavigate()
 
 	if (isLoading) {
@@ -163,97 +147,45 @@ const Top3Reactions = ({ post }) => {
 	)
 }
 
-const ShareDialog = ({ open, onClose, url }) => {
-	const shareUrls = {
-		facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
-		twitter: `https://twitter.com/intent/tweet?url=${encodeURIComponent(url)}`,
-		linkedin: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(url)}`,
-		whatsapp: `https://api.whatsapp.com/send?text=${encodeURIComponent(url)}`
-	}
-	const { openSnackbar } = useStore()
-	const handleCopy = () =>
-		navigator.clipboard.writeText(url).then(() => {
-			openSnackbar('Link copied to clipboard', 'info')
-		})
-
+const MetaData = ({ post }) => {
+	const { title, description, imageUrl: image, author } = post
+	const url = `${window.location.origin}/post/${post.id}`
 	return (
-		<Dialog
-			open={open}
-			onClose={onClose}
-			aria-labelledby="share-dialog-title"
-			fullWidth
-			PaperProps={{ elevation: 0 }}
-		>
-			<DialogTitle id="share-dialog-title">Share this post</DialogTitle>
-			<DialogContent>
-				<Stack
-					direction="row"
-					spacing={2}
-					justifyContent="center"
-					mb={1}
-				>
-					<IconButton
-						onClick={() =>
-							window.open(shareUrls.facebook, '_blank')
-						}
-						aria-label="Share on Facebook"
-					>
-						<Facebook color="primary" />
-					</IconButton>
-					<IconButton
-						onClick={() => window.open(shareUrls.twitter, '_blank')}
-						aria-label="Share on Twitter"
-					>
-						<X />
-					</IconButton>
-					<IconButton
-						onClick={() =>
-							window.open(shareUrls.linkedin, '_blank')
-						}
-						aria-label="Share on LinkedIn"
-					>
-						<LinkedIn color="info" />
-					</IconButton>
-					<IconButton
-						onClick={() =>
-							window.open(shareUrls.whatsapp, '_blank')
-						}
-						aria-label="Share on WhatsApp"
-					>
-						<WhatsApp color="success" />
-					</IconButton>
-				</Stack>
-				<TextField
-					fullWidth
-					value={url}
-					slotProps={{
-						input: {
-							readOnly: true,
-							endAdornment: (
-								<IconButton
-									onClick={handleCopy}
-									aria-label="Copy link"
-								>
-									<ContentCopy />
-								</IconButton>
-							)
-						}
-					}}
-				/>
-			</DialogContent>
-			<DialogActions>
-				<Button onClick={onClose}>Close</Button>
-			</DialogActions>
-		</Dialog>
+		<Helmet>
+			{/* Basic Meta Tags */}
+			<title>Memories | {title}</title>
+			<meta name="description" content={description} />
+
+			{/* OpenGraph Meta Tags */}
+			<meta property="og:title" content={title} />
+			<meta property="og:description" content={description} />
+			<meta property="og:image" content={image} />
+			<meta property="og:url" content={url} />
+			<meta property="og:type" content="article" />
+			<meta property="og:site_name" content="Memories" />
+			<meta property="article:author" content={author.fullName} />
+
+			{/* Twitter Card Meta Tags */}
+			<meta name="twitter:card" content="summary_large_image" />
+			<meta name="twitter:title" content={title} />
+			<meta name="twitter:description" content={description} />
+			<meta name="twitter:image" content={image} />
+		</Helmet>
 	)
 }
 
 const Post = () => {
+	const { id } = useParams()
+	const { data: post, isLoading, error } = useGetPost(id)
+	if (isLoading) {
+		return <PostSkeleton />
+	}
 	return (
 		<Container sx={{ py: { xs: 2, md: 4 }, mb: 10 }} maxWidth="xl">
+			<MetaData post={post} />
 			<Grid container spacing={3}>
-				<PostCard />
-				<CommentSection />
+				<PostCard post={post} isLoading={isLoading} error={error} />
+				<CommentSection postId={id} />
 				<RecommendationSection />
 			</Grid>
 		</Container>

diff --git a/client/src/sections/Comments.jsx b/client/src/sections/Comments.jsx
@@ -8,12 +8,10 @@ import {
 	Typography
 } from '@mui/material'
 import { ArrowDownward } from '@mui/icons-material'
-import { useParams } from 'react-router'
 import { useGetComments } from '@/hooks'
 import { Comment, CommentSkeleton, CreateComment } from '@/components'
 
-const Comments = () => {
-	const { id: postId } = useParams()
+const Comments = ({ postId }) => {
 	const {
 		data: comments,
 		isPending,