aufräumen
This commit is contained in:
Timo Knuth
@@ -1,157 +1,165 @@
|
||||
import { notFound } from "next/navigation";
|
||||
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 { SourcesList } from "@/components/aeo/SourcesList";
|
||||
import { AuthorCard } from "@/components/author/AuthorCard";
|
||||
import { RelatedPosts } from "@/components/blog/RelatedPosts";
|
||||
import { blogPostingSchema, howToSchema, faqPageSchema, breadcrumbSchema } from "@/lib/schema";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export function generateMetadata({ params }: { params: { slug: string } }) {
|
||||
const post = getPublishedPostBySlug(params.slug);
|
||||
if (!post) return {};
|
||||
|
||||
const ogImage = post.heroImage ? `https://www.qrmaster.net${post.heroImage}` : undefined;
|
||||
|
||||
return {
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
alternates: {
|
||||
canonical: `https://www.qrmaster.net/blog/${post.slug}`,
|
||||
},
|
||||
openGraph: {
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
type: 'article',
|
||||
publishedTime: post.datePublished,
|
||||
modifiedTime: post.dateModified || post.datePublished,
|
||||
authors: ['https://www.qrmaster.net'],
|
||||
tags: post.keywords,
|
||||
images: ogImage ? [{ url: ogImage, alt: post.imageAlt || post.title }] : undefined,
|
||||
},
|
||||
twitter: {
|
||||
card: 'summary_large_image',
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
images: ogImage ? [ogImage] : undefined,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
// Only generate static params for published posts
|
||||
return getPublishedPosts().map((post) => ({
|
||||
slug: post.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
export default function BlogPostPage({ params }: { params: { slug: string } }) {
|
||||
const post = getPublishedPostBySlug(params.slug);
|
||||
if (!post) return notFound(); // STRICT 404 GATE
|
||||
|
||||
const author = getAuthorBySlug(post.authorSlug);
|
||||
const related = getRelatedPosts(post);
|
||||
|
||||
const jsonLd = blogPostingSchema(post, author);
|
||||
const howtoLd = post.keySteps?.length ? howToSchema(post, author) : null;
|
||||
const faqLd = post.faq ? faqPageSchema(post.faq) : null;
|
||||
|
||||
// Generate breadcrumb schema: Home → Learn → Pillar → Post
|
||||
const pillarName = post.pillar ? post.pillar.charAt(0).toUpperCase() + post.pillar.slice(1) : 'Blog';
|
||||
const breadcrumbLd = breadcrumbSchema([
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'Learn', url: '/learn' },
|
||||
{ name: pillarName, url: `/learn/${post.pillar}` },
|
||||
{ name: post.title, url: `/blog/${post.slug}` },
|
||||
]);
|
||||
|
||||
return (
|
||||
<main className="container mx-auto max-w-4xl py-12 px-4">
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
{howtoLd && (
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(howtoLd) }} />
|
||||
)}
|
||||
{faqLd && (
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
|
||||
)}
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }} />
|
||||
|
||||
<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>
|
||||
|
||||
{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 className="text-left text-sm">
|
||||
<div className="font-bold text-gray-900">{author.name}</div>
|
||||
<div className="text-gray-500 text-xs mt-0.5">
|
||||
Published {post.date}
|
||||
{post.updatedAt && (
|
||||
<> <span className="mx-1">•</span> Updated {post.updatedAt}</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
|
||||
import { notFound } from "next/navigation";
|
||||
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 { SourcesList } from "@/components/aeo/SourcesList";
|
||||
import { AuthorCard } from "@/components/author/AuthorCard";
|
||||
import { RelatedPosts } from "@/components/blog/RelatedPosts";
|
||||
import { blogPostingSchema, howToSchema, faqPageSchema, breadcrumbSchema } from "@/lib/schema";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function formatIsoDate(date: string) {
|
||||
return new Date(date).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
}
|
||||
|
||||
export function generateMetadata({ params }: { params: { slug: string } }) {
|
||||
const post = getPublishedPostBySlug(params.slug);
|
||||
if (!post) return {};
|
||||
|
||||
const ogImage = post.heroImage ? `https://www.qrmaster.net${post.heroImage}` : undefined;
|
||||
|
||||
return {
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
alternates: {
|
||||
canonical: `https://www.qrmaster.net/blog/${post.slug}`,
|
||||
},
|
||||
openGraph: {
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
type: "article",
|
||||
publishedTime: post.datePublished,
|
||||
modifiedTime: post.dateModified || post.datePublished,
|
||||
authors: ["https://www.qrmaster.net"],
|
||||
tags: post.keywords,
|
||||
images: ogImage ? [{ url: ogImage, alt: post.imageAlt || post.title }] : undefined,
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: post.title,
|
||||
description: post.description,
|
||||
images: ogImage ? [ogImage] : undefined,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
// Only generate static params for published posts
|
||||
return getPublishedPosts().map((post) => ({
|
||||
slug: post.slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export default function BlogPostPage({ params }: { params: { slug: string } }) {
|
||||
const post = getPublishedPostBySlug(params.slug);
|
||||
if (!post) return notFound(); // STRICT 404 GATE
|
||||
|
||||
const author = getAuthorBySlug(post.authorSlug);
|
||||
const related = getRelatedPosts(post);
|
||||
|
||||
const jsonLd = blogPostingSchema(post, author);
|
||||
const howtoLd = post.keySteps?.length ? howToSchema(post, author) : null;
|
||||
const faqLd = post.faq ? faqPageSchema(post.faq) : null;
|
||||
const visibleUpdated = post.updatedAt || post.dateModified;
|
||||
const showUpdated = Boolean(visibleUpdated && visibleUpdated !== post.datePublished);
|
||||
|
||||
// Generate breadcrumb schema: Home -> Learn -> Pillar -> Post
|
||||
const pillarName = post.pillar ? post.pillar.charAt(0).toUpperCase() + post.pillar.slice(1) : "Blog";
|
||||
const breadcrumbLd = breadcrumbSchema([
|
||||
{ name: "Home", url: "/" },
|
||||
{ name: "Learn", url: "/learn" },
|
||||
{ name: pillarName, url: `/learn/${post.pillar}` },
|
||||
{ name: post.title, url: `/blog/${post.slug}` },
|
||||
]);
|
||||
|
||||
return (
|
||||
<main className="container mx-auto max-w-4xl py-12 px-4">
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
{howtoLd && (
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(howtoLd) }} />
|
||||
)}
|
||||
{faqLd && (
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqLd) }} />
|
||||
)}
|
||||
<script type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }} />
|
||||
|
||||
<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>
|
||||
|
||||
{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 className="text-left text-sm">
|
||||
<div className="font-bold text-gray-900">{author.name}</div>
|
||||
<div className="text-gray-500 text-xs mt-0.5">
|
||||
Published {post.date}
|
||||
{showUpdated && visibleUpdated && (
|
||||
<> <span className="mx-1">|</span> Updated {formatIsoDate(visibleUpdated)}</>
|
||||
)}
|
||||
</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
|
||||
unoptimized={post.heroImage.endsWith('.svg')}
|
||||
unoptimized={post.heroImage.endsWith(".svg")}
|
||||
className="object-cover"
|
||||
/>
|
||||
</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>}
|
||||
|
||||
{/* AEO BLOCK: SOURCES */}
|
||||
{!!post.sources?.length && <SourcesList sources={post.sources} />}
|
||||
|
||||
<div className="border-t border-gray-100 my-12"></div>
|
||||
|
||||
{author && <AuthorCard author={author} />}
|
||||
|
||||
<div className="mt-12">
|
||||
<RelatedPosts posts={related} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
{/* 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>}
|
||||
|
||||
{/* AEO BLOCK: SOURCES */}
|
||||
{!!post.sources?.length && <SourcesList sources={post.sources} />}
|
||||
|
||||
<div className="border-t border-gray-100 my-12"></div>
|
||||
|
||||
{author && <AuthorCard author={author} />}
|
||||
|
||||
<div className="mt-12">
|
||||
<RelatedPosts posts={related} />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,13 +1,5 @@
|
||||
import { getPublishedPostBySlug } from '@/lib/content';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
|
||||
const RAW_ENABLED_SLUGS = new Set([
|
||||
'dynamic-vs-static-qr-codes',
|
||||
'qr-code-small-business',
|
||||
'qr-code-tracking-guide-2025',
|
||||
'utm-parameter-qr-codes',
|
||||
'trackable-qr-codes',
|
||||
]);
|
||||
import { getPublishedPostBySlug } from '@/lib/content';
|
||||
import sanitizeHtml from 'sanitize-html';
|
||||
|
||||
function decodeHtmlEntities(text: string): string {
|
||||
return text
|
||||
@@ -64,15 +56,11 @@ function cleanHtmlToText(html: string): string {
|
||||
.trim();
|
||||
}
|
||||
|
||||
function renderRawPost(slug: string): string | null {
|
||||
if (!RAW_ENABLED_SLUGS.has(slug)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const post = getPublishedPostBySlug(slug);
|
||||
if (!post) {
|
||||
return null;
|
||||
}
|
||||
function renderRawPost(slug: string): string | null {
|
||||
const post = getPublishedPostBySlug(slug);
|
||||
if (!post) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const sections: string[] = [
|
||||
`# ${post.title}`,
|
||||
|
||||
Reference in New Issue
Block a user