14 blog post schedule

src/app/(main)/(marketing)/blog/[slug]/page.tsx

@@ -1,157 +1,110 @@
-import React from 'react';
-import type { Metadata } from 'next';
-import Link from 'next/link';
-import Image from 'next/image';
-import { notFound } from 'next/navigation';
-import SeoJsonLd from '@/components/SeoJsonLd';
-import Breadcrumbs from '@/components/Breadcrumbs';
-import { Button } from '@/components/ui/Button';
-import { Badge } from '@/components/ui/Badge';
-import { blogPosts } from '@/lib/blog-data';
+import { notFound } from "next/navigation";
+import Script from "next/script";
+import { getPublishedPostBySlug, getAuthorBySlug, getRelatedPosts, getPublishedPosts } from "@/lib/content";
+import { AnswerBox } from "@/components/aeo/AnswerBox";
+import { StepList } from "@/components/aeo/StepList";
+import { FAQSection } from "@/components/aeo/FAQSection";
+import { AuthorCard } from "@/components/author/AuthorCard";
+import { RelatedPosts } from "@/components/blog/RelatedPosts";
+import { blogPostingSchema, howToSchema, faqPageSchema } from "@/lib/schema";
+import Image from "next/image";
+import Link from "next/link";
 
-interface PageProps {
-  params: {
-    slug: string;
+export function generateMetadata({ params }: { params: { slug: string } }) {
+  const post = getPublishedPostBySlug(params.slug);
+  if (!post) return {};
+  return {
+    title: post.title,
+    description: post.description,
   };
 }
 
 export function generateStaticParams() {
-  return Object.keys(blogPosts).map((slug) => ({
-    slug,
+  // Only generate static params for published posts
+  return getPublishedPosts().map((post) => ({
+    slug: post.slug,
   }));
 }
 
-export function generateMetadata({ params }: PageProps): Metadata {
-  const post = blogPosts[params.slug];
 
-  if (!post) {
-    notFound();
-    return {} as Metadata; // Typescript satisfaction (unreachable)
-  }
+export default function BlogPostPage({ params }: { params: { slug: string } }) {
+  const post = getPublishedPostBySlug(params.slug);
+  if (!post) return notFound(); // STRICT 404 GATE
 
-  return {
-    title: {
-      absolute: `${post.title} | QR Master Blog`,
-    },
-    description: post.excerpt,
-    openGraph: {
-      title: post.title,
-      description: post.excerpt,
-      type: 'article',
-      publishedTime: post.datePublished,
-      modifiedTime: post.dateModified,
-      authors: [post.author],
-      images: [
-        {
-          url: post.image,
-          alt: post.imageAlt,
-        },
-      ],
-    },
-    twitter: {
-      card: 'summary_large_image',
-      title: post.title,
-      description: post.excerpt,
-      images: [post.image],
-    },
-  };
-}
+  const author = getAuthorBySlug(post.authorSlug);
+  const related = getRelatedPosts(post);
 
-export default function BlogPostPage({ params }: PageProps) {
-  const post = blogPosts[params.slug];
-
-  if (!post) {
-    notFound();
-  }
-
-  const jsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'BlogPosting',
-    headline: post.title,
-    image: post.image,
-    datePublished: post.datePublished,
-    dateModified: post.dateModified,
-    author: {
-      '@type': 'Organization',
-      name: post.author,
-      url: post.authorUrl,
-    },
-  };
-
-  const breadcrumbItems = [
-    { name: 'Home', url: '/' },
-    { name: 'Blog', url: '/blog' },
-    { name: post.title, url: `/blog/${post.slug}` },
-  ];
+  const jsonLd = blogPostingSchema(post, author);
+  const howtoLd = post.keySteps?.length ? howToSchema(post, author) : null;
+  const faqLd = post.faq ? faqPageSchema(post.faq) : null;
 
   return (
-    <>
-      <SeoJsonLd data={[jsonLd]} />
+    <main className="container mx-auto max-w-4xl py-12 px-4">
+      <Script id="ld-blogposting" type="application/ld+json" strategy="afterInteractive"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+      {howtoLd && (
+        <Script id="ld-howto" type="application/ld+json" strategy="afterInteractive"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(howtoLd) }} />
+      )}
+      {faqLd && (
+        <Script id="ld-faq" type="application/ld+json" strategy="afterInteractive"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
+      )}
 
-      <div className="min-h-screen bg-white pb-20">
-        {/* Hero Header */}
-        <div className="bg-gray-50 border-b border-gray-100">
-          <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 max-w-4xl">
-            <Breadcrumbs items={breadcrumbItems} className="mb-8" />
+      <header className="space-y-6 text-center max-w-3xl mx-auto mb-10">
+        <div className="flex justify-center gap-2 text-sm text-gray-500 font-medium">
+          <Link href="/learn" className="hover:text-blue-600">Hub</Link>
+          <span>/</span>
+          <Link href={`/learn/${post.pillar}`} className="hover:text-blue-600 capitalize">{post.pillar}</Link>
+        </div>
+        <h1 className="text-3xl md:text-5xl font-extrabold text-gray-900 tracking-tight leading-tight">{post.title}</h1>
+        <p className="text-xl text-gray-600 relaxed">{post.description}</p>
 
-            <Badge variant="info" className="mb-6">
-              {post.category}
-            </Badge>
-
-            <h1 className="text-4xl md:text-5xl font-bold text-gray-900 leading-tight mb-6">
-              {post.title}
-            </h1>
-
-            <div className="flex items-center text-gray-600 mb-8 space-x-6 text-sm">
-              <div className="flex items-center">
-                <span className="font-medium text-gray-900 mr-2">{post.author}</span>
+        {author && (
+          <div className="flex items-center justify-center gap-3 pt-4">
+            {author.image ? (
+              <Image src={author.image} alt={author.name} width={40} height={40} className="rounded-full" />
+            ) : (
+              <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 font-bold">
+                {author.name.charAt(0)}
               </div>
-              <div>•</div>
-              <div>{post.date}</div>
-              <div>•</div>
-              <div>{post.readTime} read</div>
+            )}
+            <div className="text-left text-sm">
+              <div className="font-bold text-gray-900">{author.name}</div>
+              <div className="text-gray-500">Updated {post.updatedAt || post.date}</div>
             </div>
           </div>
+        )}
+      </header>
+
+      {post.heroImage && (
+        <div className="relative aspect-video w-full rounded-2xl overflow-hidden shadow-lg mb-10">
+          <Image src={post.heroImage} alt={post.imageAlt || post.title} fill className="object-cover" />
         </div>
+      )}
 
-        {/* Featured Image */}
-        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl -mt-8 mb-12">
-          <div className="relative aspect-video w-full overflow-hidden rounded-2xl shadow-xl">
-            <Image
-              src={post.image}
-              alt={post.imageAlt}
-              fill
-              className="object-cover"
-              priority
-            />
-          </div>
+      {/* AEO BLOCK: ANSWER */}
+      <div className="max-w-3xl mx-auto">
+        {post.quickAnswer && <AnswerBox html={post.quickAnswer} />}
+
+        {/* AEO BLOCK: STEPS (If defined separate from body) */}
+        {!!post.keySteps?.length && <StepList steps={post.keySteps} title="Step-by-Step Guide" />}
+
+
+        {/* MAIN CONTENT */}
+        <article className="prose prose-lg prose-blue max-w-none text-gray-800" dangerouslySetInnerHTML={{ __html: post.content }} />
+
+        {/* AEO BLOCK: FAQ */}
+        {!!post.faq?.length && <div className="mt-12"><FAQSection items={post.faq} /></div>}
+
+        <div className="border-t border-gray-100 my-12"></div>
+
+        {author && <AuthorCard author={author} />}
+
+        <div className="mt-12">
+          <RelatedPosts posts={related} />
         </div>
-
-        {/* Content */}
-        <article className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-3xl">
-          <div
-            className="prose prose-lg prose-blue max-w-none hover:prose-a:text-blue-600 transition-colors"
-            dangerouslySetInnerHTML={{ __html: post.content }}
-          />
-
-          {/* Share / CTA */}
-          <div className="mt-16 pt-8 border-t border-gray-200">
-            <div className="bg-blue-50 rounded-2xl p-8 text-center">
-              <h3 className="text-2xl font-bold text-gray-900 mb-4">
-                Enjoyed this article?
-              </h3>
-              <p className="text-gray-600 mb-6 text-lg">
-                Create your first dynamic QR code for free and start tracking your campaigns today.
-              </p>
-              <Link href="/signup">
-                <Button size="lg" className="px-8">
-                  Create Free QR Code
-                </Button>
-              </Link>
-            </div>
-          </div>
-        </article>
       </div>
-    </>
+    </main>
   );
 }