import { createFileRoute, Link, notFound } from "@tanstack/react-router"; import { Calendar, ChevronRight, Clock } from "lucide-react"; import { getPost, posts, categories, categorySlug, type BlogPost } from "@/data/blog"; import { CtaBand } from "@/components/cta-band"; import { ObrayFormEmbed } from "@/components/obray-form-embed"; export const Route = createFileRoute("/blog/$slug")({ loader: ({ params }) => { const post = getPost(params.slug); if (!post) throw notFound(); return { post }; }, head: ({ loaderData }) => { const p = loaderData?.post; if (!p) return {}; const title = `${p.title} | O'Bray Electric`; const articleSchema = { "@context": "https://schema.org", "@type": "Article", headline: p.title, description: p.excerpt, image: p.image, datePublished: p.date, author: { "@type": "Organization", name: "O'Bray Electric", url: "/" }, publisher: { "@type": "Organization", name: "O'Bray Electric", url: "/" }, mainEntityOfPage: `/blog/${p.slug}`, }; const breadcrumbSchema = { "@context": "https://schema.org", "@type": "BreadcrumbList", itemListElement: [ { "@type": "ListItem", position: 1, name: "Home", item: "/" }, { "@type": "ListItem", position: 2, name: "Blog", item: "/blog" }, { "@type": "ListItem", position: 3, name: p.title, item: `/blog/${p.slug}` }, ], }; return { meta: [ { title }, { name: "description", content: p.excerpt }, { property: "og:title", content: p.title }, { property: "og:description", content: p.excerpt }, { property: "og:type", content: "article" }, { property: "og:image", content: p.image }, ], links: [{ rel: "canonical", href: `/blog/${p.slug}` }], scripts: [ { type: "application/ld+json", children: JSON.stringify(articleSchema) }, { type: "application/ld+json", children: JSON.stringify(breadcrumbSchema) }, ], }; }, component: BlogPostPage, }); function BlogPostPage() { const { post } = Route.useLoaderData() as { post: BlogPost }; const more = posts.filter((p) => p.slug !== post.slug).slice(0, 2); return ( <>

{post.title}

{post.date} {post.readTime}
{post.title}

{post.excerpt}

{post.body.map((block, i) => (
{block.heading && (

{block.heading}

)} {block.paragraphs.map((p, j) => (

{p}

))} {block.list && (
    {block.list.map((li) => (
  • ● {li}
    • ))}
)}
))}
); }