import { createFileRoute, Link, notFound } from '@tanstack/react-router';
import { ArrowLeft, Calendar } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import { useBlogPost } from '@/hooks/useWooCommerce';
import Breadcrumbs from '@/components/Breadcrumbs';
import { sanitizedHtml } from '@/lib/sanitize';
import { wp } from '@/lib/woocommerce';
import { articleSchema } from '@/lib/schemas';
import { useT, useLang, locale, headLang, localizePath, SITE_URL } from '@/lib/i18n';
function humanizeSlug(slug: string): string {
return slug
.split('-')
.filter(Boolean)
.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
.join(' ');
}
function stripHtml(html?: string): string {
return (html || '')
.replace(/<[^>]*>/g, '')
.replace(/ /g, ' ')
.replace(/&/g, '&')
.replace(/’/g, "'")
.replace(/\s+/g, ' ')
.trim();
}
export const Route = createFileRoute('/blog/$slug')({
loader: async ({ params }) => {
try {
const { data } = await wp.getPost(params.slug);
return {
title: stripHtml(data.title?.rendered) || humanizeSlug(params.slug),
excerpt: stripHtml(data.excerpt?.rendered).slice(0, 160),
date: data.date as string,
image: data._embedded?.['wp:featuredmedia']?.[0]?.source_url as string | undefined,
};
} catch {
// Unknown post (e.g. a literal "/blog/$slug" a crawler picked up): real 404, not an indexable empty page.
throw notFound();
}
},
head: (ctx) => {
const { params, loaderData } = ctx;
const lang = headLang(ctx);
const title = loaderData?.title || humanizeSlug(params.slug);
const description =
loaderData?.excerpt ||
`${title} — artikel op de Peptidewinkel blog. Lees onze gids over peptides, dosering en research.`;
const url = `${SITE_URL}${localizePath(`/blog/${params.slug}`, lang)}`;
const image = loaderData?.image;
return {
meta: [
{ title: `${title} | Blog Peptidewinkel` },
{ name: 'description', content: description },
{ property: 'og:title', content: `${title} | Blog Peptidewinkel` },
{ property: 'og:description', content: description },
{ property: 'og:url', content: url },
{ property: 'og:type', content: 'article' },
...(image
? [
{ property: 'og:image', content: image },
{ name: 'twitter:image', content: image },
]
: []),
],
links: [{ rel: 'canonical', href: url }],
scripts: [{
type: 'application/ld+json',
children: JSON.stringify(
articleSchema({
title,
slug: params.slug,
excerpt: description,
date: loaderData?.date || new Date().toISOString(),
image,
}),
),
}],
};
},
component: BlogPostPage,
});
function BlogPostPage() {
const t = useT();
const lang = useLang();
const { slug } = Route.useParams();
// The loader already resolved the post title server-side, so the breadcrumb
// bar can render immediately with the article name — before the client query
// for the full body finishes. That keeps the bar in the same place as on
// every other page instead of appearing only after hydration.
const { title: loaderTitle } = Route.useLoaderData();
const { data: wpPost, isLoading } = useBlogPost(slug);
const post = wpPost?.data;
const crumbs = (
);
if (isLoading) {
return (
<>
{crumbs}
);
}
if (!post) {
return (
<>
{crumbs}
{t('Artikel niet gevonden', 'Article not found')}
{t('Terug naar blog', 'Back to blog')}
);
}
const featuredImg = post._embedded?.['wp:featuredmedia']?.[0]?.source_url;
const dateStr = new Date(post.date).toLocaleDateString(locale(lang), { day: 'numeric', month: 'long', year: 'numeric' });
return (
<>
{/* The same bar as the rest of the site (see components/Breadcrumbs). */}
{crumbs}
{t('Terug naar blog', 'Back to blog')}
{featuredImg && }