98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
|
import { getPostData, getAllPostSlugs } from '@/lib/posts';
|
|||
|
|
import { notFound } from 'next/navigation';
|
|||
|
|
import Link from 'next/link';
|
|||
|
|
|
|||
|
|
interface PostPageProps {
|
|||
|
|
params: Promise<{ slug: string }>;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export async function generateStaticParams() {
|
|||
|
|
const slugs = getAllPostSlugs();
|
|||
|
|
console.log('Генерация статических путей для slugs:', slugs);
|
|||
|
|
|
|||
|
|
return slugs.map((slug) => ({
|
|||
|
|
slug,
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export async function generateMetadata({ params }: PostPageProps) {
|
|||
|
|
const { slug } = await params;
|
|||
|
|
const post = await getPostData(slug);
|
|||
|
|
|
|||
|
|
if (!post) {
|
|||
|
|
return {
|
|||
|
|
title: 'Пост не найден',
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
title: post.title,
|
|||
|
|
description: post.description,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default async function PostPage({ params }: PostPageProps) {
|
|||
|
|
const { slug } = await params;
|
|||
|
|
const post = await getPostData(slug);
|
|||
|
|
|
|||
|
|
console.log(`Загрузка поста: ${slug}, результат:`, post ? 'найден' : 'не найден');
|
|||
|
|
|
|||
|
|
if (!post) {
|
|||
|
|
notFound();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const formatDate = (dateStr: string) => {
|
|||
|
|
try {
|
|||
|
|
const date = new Date(dateStr);
|
|||
|
|
return new Intl.DateTimeFormat('ru-RU', {
|
|||
|
|
weekday: 'long',
|
|||
|
|
year: 'numeric',
|
|||
|
|
month: 'long',
|
|||
|
|
day: 'numeric',
|
|||
|
|
}).format(date);
|
|||
|
|
} catch {
|
|||
|
|
return dateStr;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<main className="flex flex-col gap-[32px] row-start-2 items-center">
|
|||
|
|
<section className="space-y-1 text-center max-w-4xl w-full px-4 mt-2">
|
|||
|
|
<dl className="space-y-10">
|
|||
|
|
<div>
|
|||
|
|
<dt className="sr-only">Опубликовано</dt>
|
|||
|
|
<dd className="text-base leading-6 font-medium text-gray-500 dark:text-gray-400">
|
|||
|
|
{formatDate(post.date)}
|
|||
|
|
</dd>
|
|||
|
|
</div>
|
|||
|
|
</dl>
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-3xl leading-9 font-extrabold tracking-tight text-gray-900 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14 dark:text-gray-100">
|
|||
|
|
{post.title}
|
|||
|
|
</h1>
|
|||
|
|
</div>
|
|||
|
|
{post.tags.length > 0 && (
|
|||
|
|
<div className="flex flex-wrap justify-center gap-2 mt-4">
|
|||
|
|
{post.tags.map((tag) => (
|
|||
|
|
<Link
|
|||
|
|
key={tag}
|
|||
|
|
href={`/tags/${tag}`}
|
|||
|
|
className="inline-block border border-slate-400 px-3 py-1 rounded-full text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
|||
|
|
>
|
|||
|
|
{tag}
|
|||
|
|
</Link>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</section>
|
|||
|
|
<section className="mx-auto px-4 pb-[4em] w-full px-[3em]">
|
|||
|
|
<article
|
|||
|
|
className="prose prose-lg dark:prose-invert prose-headings:font-bold prose-a:text-blue-500 hover:prose-a:text-blue-700 prose-code:bg-gray-100 dark:prose-code:bg-gray-800 prose-pre:bg-gray-900 dark:prose-pre:bg-gray-900 prose-img:rounded-xl prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:bg-gray-50 dark:prose-blockquote:bg-gray-800 prose-blockquote:italic prose-blockquote:pl-4 max-w-none"
|
|||
|
|
dangerouslySetInnerHTML={{ __html: post.contentHtml }}
|
|||
|
|
/>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|