feat: add canonical link for posts

Author: ImLunaHey

package-lock.json

@@ -50,6 +50,7 @@
     "@types/node": "^22.10.2",
     "@types/react": "^18.3.17",
     "@types/react-dom": "^18.3.5",
+    "@types/react-helmet": "^6.1.11",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/coverage-v8": "^2.1.8",
     "@vitest/ui": "^2.1.8",
@@ -61,6 +62,7 @@
     "globals": "^15.9.0",
     "happy-dom": "^15.11.7",
     "postcss": "^8.4.35",
+    "react-helmet": "^6.1.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.3.0",

package.json

@@ -5,12 +5,13 @@ import { PostCard } from '../../../components/PostCard';
 import { BSkyPost } from '../../../lib/bluesky/types/BSkyPost';
 import { ErrorBoundary } from '../../../components/ErrorBoundary';
 import { useTranslation } from 'react-i18next';
+import { Helmet } from 'react-helmet';
 
 export const Route = createFileRoute('/profile/$handle/post/$postId')({
-  component: Profile,
+  component: Post,
 });
 
-function Profile() {
+function Post() {
   const { handle } = Route.useParams();
   const { data: profile, isLoading: isLoadingProfile } = useProfile({ handle });
   const params = Route.useParams();
@@ -26,6 +27,9 @@ function Profile() {
 
   return (
     <>
+      <Helmet>
+        <link rel="canonical" href={`https://bsky.app/profile/${handle}/post/${params.postId}`} />
+      </Helmet>
       <PostCard post={postThread?.post as BSkyPost} />
       <ErrorBoundary>
         {(postThread?.replies as { post: BSkyPost }[])?.map((reply) => reply.post && <PostCard post={reply.post} />)}