// app/routes/blog-post.tsx. React 19 hoists title, meta and link into head; JSON-LD escapes "<" as \u003c.
// Checked against reactrouter.com route-module docs (react-router 8.4.0). Title, description, canonical and JSON-LD were in the prerendered HTML file.
// Replace every placeholder (SITE_URL, fields). Assumes app/lib/posts.ts exists.
import { data, useLoaderData } from 'react-router'
import { getPost } from '../lib/posts'

const SITE_URL = 'https://www.example.com'

// With prerendering, this loader runs at build time, so the post is in the HTML file.
export async function loader({ params }: { params: { slug?: string } }) {
  const post = await getPost(params.slug ?? '')
  if (!post) throw data('Not found', { status: 404 })
  return { post }
}

export default function BlogPost() {
  const { post } = useLoaderData<typeof loader>()
  const url = `${SITE_URL}/blog/${post.slug}`
  const article = {
    '@context': 'https://schema.org',
    '@type': 'Article',
    headline: post.title,
    description: post.description,
    datePublished: post.publishedAt,
    mainEntityOfPage: url,
  }
  return (
    <article>
      {/* React 19 hoists <title>, <meta> and <link> into <head>. */}
      <title>{post.title}</title>
      <meta name="description" content={post.description} />
      <link rel="canonical" href={url} />
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(article).replace(/</g, '\\u003c') }}
      />
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  )
}