fix: apply seo agent improvements to src/components/public/BlogPostPageClient.tsx

src/components/public/BlogPostPageClient.tsx

@@ -0,0 +1,68 @@
+'use client'
+import { useEffect } from 'react'
+import PublicLayout from '@/components/public/PublicLayout'
+import BlogPostPage from '@/components/public/BlogPostPage'
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com'
+const SITE_NAME = process.env.NEXT_PUBLIC_SITE_NAME || 'My Personal Site'
+
+interface Props {
+  slug: string
+}
+
+export default function BlogPostPageClient({ slug }: Props) {
+  /**
+   * Inject JSON-LD for BlogPosting after hydration.
+   * In a real server-side CMS you would do this in generateMetadata
+   * or in a server component. Here we gracefully degrade.
+   */
+  useEffect(() => {
+    const existingScript = document.getElementById('blog-post-jsonld')
+    if (existingScript) existingScript.remove()
+
+    const title = slug
+      .split('-')
+      .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+      .join(' ')
+
+    const jsonLd = {
+      '@context': 'https://schema.org',
+      '@type': 'BlogPosting',
+      headline: title,
+      url: `${SITE_URL}/blog/${slug}`,
+      author: {
+        '@type': 'Person',
+        name: SITE_NAME,
+        url: SITE_URL,
+      },
+      publisher: {
+        '@type': 'Person',
+        name: SITE_NAME,
+        url: SITE_URL,
+      },
+      mainEntityOfPage: {
+        '@type': 'WebPage',
+        '@id': `${SITE_URL}/blog/${slug}`,
+      },
+    }
+
+    const script = document.createElement('script')
+    script.id = 'blog-post-jsonld'
+    script.type = 'application/ld+json'
+    script.textContent = JSON.stringify(jsonLd)
+    document.head.appendChild(script)
+
+    return () => {
+      const s = document.getElementById('blog-post-jsonld')
+      if (s) s.remove()
+    }
+  }, [slug])
+
+  return (
+    <PublicLayout>
+      <main id="main-content" aria-label="Blog post">
+        <BlogPostPage slug={slug} />
+      </main>
+    </PublicLayout>
+  )
+}