Создан компонент поста

frontend/src/pages/blog/[slug].astro

@@ -0,0 +1,168 @@
+---
+import ArticleLayout from '@layouts/ArticleLayout.astro';
+import { SITE_URL } from '@constants';
+import PostCommentForm from '@components/blog/PostCommentForm.astro';
+import RelatedPosts from '@components/blog/RelatedPosts.astro';
+import { getCollection, getEntry, render } from 'astro:content';
+
+export const prerender = false;
+
+export async function getStaticPaths() {
+  const posts = await getCollection('blog') as { id: string; data: Record<string, any> }[];
+  return posts.map((post: { id: string }) => ({
+    params: { slug: post.id },
+  }));
+}
+
+const slug = Astro.params.slug;
+
+if (!slug) {
+  return Astro.redirect('/blog');
+}
+
+const post = await getEntry('blog', slug);
+
+if (!post) {
+  return Astro.redirect('/blog');
+}
+
+const { Content } = await render(post);
+
+// Форматируем дату
+const formatDate = (date: Date) => {
+  return date.toLocaleDateString('ru-RU', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric'
+  });
+};
+
+// Логика авторизации (пока статичная переменная)
+const isAuthorized = false;
+
+// URL текущей страницы
+const currentUrl = `${SITE_URL}/blog/${post.id}`;
+
+// Получаем все посты для блока "Читайте также"
+const allPosts = await getCollection('blog');
+---
+
+<ArticleLayout
+  title={`${post.data.title} — автоюрист в Сургуте`}
+  description={post.data.description}
+  canonicalLink={`${SITE_URL}/blog/${post.id}`}
+  breadcrumbs={[
+    { label: 'Главная', href: '/' },
+    { label: 'Блог', href: '/blog' },
+    { label: post.data.title }
+  ]}
+  heroImage={post.data.imageUrl}
+  heroAlt={post.data.title}
+  category={post.data.category}
+  postTitle={post.data.title}
+  date={formatDate(post.data.date)}
+  author={post.data.author}
+  readTime={post.data.readTime}
+  postId={post.id}
+  postUrl={currentUrl}
+  initialLikes={12}
+  initialDislikes={2}
+>
+  <!-- Содержимое статьи -->
+  <div class="post-content">
+    <Content />
+  </div>
+
+  <!-- Форма комментариев -->
+  <PostCommentForm 
+    postId={post.id}
+    isAuthorized={isAuthorized}
+  />
+
+  <!-- Похожие статьи -->
+  <RelatedPosts
+    posts={allPosts}
+    currentSlug={post.id}
+  />
+</ArticleLayout>
+
+<style>
+  /* Post Content */
+  .post-content {
+    padding: 3rem;
+    color: #334155;
+    line-height: 1.8;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .post-content :global(h2) {
+    color: #1e293b;
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin: 2rem 0 1rem;
+    letter-spacing: -0.02em;
+  }
+
+  .post-content :global(h3) {
+    color: #1e293b;
+    font-size: 1.375rem;
+    font-weight: 700;
+    margin: 1.75rem 0 1rem;
+  }
+
+  .post-content :global(p) {
+    margin: 0 0 1.25rem;
+    font-size: 1.05rem;
+  }
+
+  .post-content :global(ul), .post-content :global(ol) {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+  }
+
+  .post-content :global(li) {
+    margin: 0.5rem 0;
+    font-size: 1.05rem;
+  }
+
+  .post-content :global(blockquote) {
+    margin: 2rem 0;
+    padding: 1.5rem 2rem;
+    background: #f8fafc;
+    border-left: 4px solid #d4af37;
+    border-radius: 0 0.75rem 0.75rem 0;
+    font-style: italic;
+  }
+
+  .post-content :global(blockquote p) {
+    margin: 0;
+    color: #475569;
+  }
+
+  .post-content :global(strong) {
+    color: #1e293b;
+    font-weight: 700;
+  }
+
+  .post-content :global(code) {
+    background: #f1f5f9;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.25rem;
+    font-size: 0.9em;
+  }
+
+  @media (max-width: 768px) {
+    .post-content {
+      padding: 2rem;
+    }
+
+    .post-content :global(h2) {
+      font-size: 1.5rem;
+    }
+
+    .post-content :global(h3) {
+      font-size: 1.25rem;
+    }
+  }
+</style>