Shema
This commit is contained in:
Timo Knuth
@@ -1,157 +1,157 @@
|
||||
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';
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
slug: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return Object.keys(blogPosts).map((slug) => ({
|
||||
slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export function generateMetadata({ params }: PageProps): Metadata {
|
||||
const post = blogPosts[params.slug];
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
return {} as Metadata; // Typescript satisfaction (unreachable)
|
||||
}
|
||||
|
||||
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],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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}` },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[jsonLd]} />
|
||||
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div>•</div>
|
||||
<div>{post.date}</div>
|
||||
<div>•</div>
|
||||
<div>{post.readTime} read</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
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';
|
||||
|
||||
interface PageProps {
|
||||
params: {
|
||||
slug: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return Object.keys(blogPosts).map((slug) => ({
|
||||
slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export function generateMetadata({ params }: PageProps): Metadata {
|
||||
const post = blogPosts[params.slug];
|
||||
|
||||
if (!post) {
|
||||
notFound();
|
||||
return {} as Metadata; // Typescript satisfaction (unreachable)
|
||||
}
|
||||
|
||||
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],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
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}` },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<SeoJsonLd data={[jsonLd]} />
|
||||
|
||||
<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" />
|
||||
|
||||
<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>
|
||||
</div>
|
||||
<div>•</div>
|
||||
<div>{post.date}</div>
|
||||
<div>•</div>
|
||||
<div>{post.readTime} read</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user