Skip to content

Commit

Permalink
feat: attempting og meta tags
Browse files Browse the repository at this point in the history
  • Loading branch information
warmachine028 committed Dec 1, 2024
1 parent 8a3d93c commit 155b21b
Show file tree
Hide file tree
Showing 4 changed files with 3 additions and 54 deletions.
Binary file modified client/bun.lockb
Binary file not shown.
1 change: 0 additions & 1 deletion client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@
"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"
Expand Down
9 changes: 3 additions & 6 deletions client/src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ 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 (
Expand All @@ -27,11 +26,9 @@ const App = () => {
return (
<ClerkProvider publishableKey={PUBLISHABLE_KEY}>
<QueryClientProvider client={queryClient}>
<HelmetProvider>
<BrowserRouter>
<MemoriesApp />
</BrowserRouter>
</HelmetProvider>
<BrowserRouter>
<MemoriesApp />
</BrowserRouter>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
</ClerkProvider>
Expand Down
47 changes: 0 additions & 47 deletions client/src/pages/Post.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ import {
} from '@/components'
import { useGetPost, useGetTop3Reacts } from '@/hooks'
import moment from 'moment'
import { Helmet } from 'react-helmet-async'

const PostMetaData = ({ author, timestamp }) => {
const navigate = useNavigate()
Expand Down Expand Up @@ -147,57 +146,11 @@ const Top3Reactions = ({ post }) => {
)
}

const MetaData = ({ post }) => {
const { title, description, imageUrl, author, createdAt } = post
const image =
'https://opengraph.b-cdn.net/production/images/bb42e86a-ba5f-42e6-8583-0acba8dc7d5a.jpg?token=BxBX20pTwR13SAgcvEZVW5UtcWa5dIWkAc8dylMUDwU&height=675&width=1200&expires=33269064669'
const url = `${window.location.origin}/post/${post.id}`
const formattedDescription =
description.length > 160
? `${description.substring(0, 157)}...`
: description
return (
<Helmet>
{/* Basic Meta Tags */}
<title>{`Memories | ${title}`}</title>
<meta name="description" content={description} />
<link rel="canonical" href={url} />

{/* OpenGraph Meta Tags */}
<meta property="og:title" content={title} />
<meta property="og:description" content={formattedDescription} />
<meta property="og:image" content={image} />
<meta property="og:url" content={url} />
<meta property="og:type" content="article" />
<meta property="article:published_time" content={createdAt} />
<meta property="article:author" content={author.fullName} />
<meta
property="article:section"
content={post.tags[0] || 'General'}
/>
{post.tags.map((tag) => (
<meta key={tag} property="article:tag" content={tag} />
))}

{/* Twitter Card Meta Tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={formattedDescription} />
<meta name="twitter:image" content={image} />
<meta name="twitter:url" content={url} />
</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 post={post} isLoading={isLoading} error={error} />
<CommentSection postId={id} />
Expand Down

0 comments on commit 155b21b

Please sign in to comment.