From b58b35bf476a75ecc305d7bb30882df6b0f35135 Mon Sep 17 00:00:00 2001
From: Profile Profile <profile@profile.ru>
Date: Wed, 18 Feb 2026 23:33:35 +0300
Subject: [PATCH] add news post

---
 src/components/CategoryBadge.astro  | 41 +++++++++++++++++
 src/components/ContentGrid.astro    | 45 +++----------------
 src/components/MainPostWidget.astro | 12 ++---
 src/components/NewsSingle.astro     | 70 ++++++++++++++++++++---------
 src/lib/api/posts.ts                | 18 ++------
 src/pages/news/[...slug].astro      | 60 ++++++++++++-------------
 6 files changed, 135 insertions(+), 111 deletions(-)
 create mode 100644 src/components/CategoryBadge.astro

diff --git a/src/components/CategoryBadge.astro b/src/components/CategoryBadge.astro
new file mode 100644
index 0000000..9afc10b
--- /dev/null
+++ b/src/components/CategoryBadge.astro
@@ -0,0 +1,41 @@
+---
+export interface Props {
+  name?: string;
+  color?: string;
+  class?: string;
+}
+
+const { name, color = '', class: className = '' } = Astro.props;
+
+function extractColorClass(colorString: string): string {
+  if (!colorString) return 'bg-blue';
+
+  if (colorString.includes('фон меню:')) {
+    const color = colorString.split(':')[1]?.trim();
+    const valid = [
+      'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray',
+      'indigo', 'purple', 'pink', 'teal', 'cyan', 'white',
+      'gray-dark', 'light', 'dark'
+    ];
+    if (color && valid.includes(color)) return `bg-${color}`;
+  }
+
+  if (colorString.startsWith('bg-')) return colorString;
+
+  const simple = colorString.toLowerCase();
+  const valid = [
+    'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray',
+    'indigo', 'purple', 'pink', 'teal', 'cyan', 'white',
+    'gray-dark', 'light', 'dark'
+  ];
+  return valid.includes(simple) ? `bg-${simple}` : 'bg-blue';
+}
+
+const bgClass = extractColorClass(color);
+---
+
+{name && (
+  <div class={`post-category-badge ${bgClass}${className ? ` ${className}` : ''}`}>
+    {name}
+  </div>
+)}
diff --git a/src/components/ContentGrid.astro b/src/components/ContentGrid.astro
index bc02cd4..6cded65 100644
--- a/src/components/ContentGrid.astro
+++ b/src/components/ContentGrid.astro
@@ -1,5 +1,6 @@
 ---
 
+import CategoryBadge from './CategoryBadge.astro'; // цветная плитка рубрик
 
 
 export interface Props {
@@ -23,39 +24,6 @@ const {
   loadMoreConfig = { type: 'latest', first: 11 }
 } = Astro.props;
 
-function extractColorClass(colorString: string): string {
-  if (!colorString) return 'bg-blue';
-  
-  if (colorString.includes('фон меню:')) {
-    const parts = colorString.split(':');
-    const color = parts[1]?.trim();
-    
-    const validColors = [
-      'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray',
-      'indigo', 'purple', 'pink', 'teal', 'cyan', 'white',
-      'gray-dark', 'light', 'dark'
-    ];
-    
-    if (color && validColors.includes(color)) {
-      return `bg-${color}`;
-    }
-  }
-  
-  if (colorString.startsWith('bg-')) {
-    return colorString;
-  }
-  
-  const simpleColor = colorString.toLowerCase();
-  switch(simpleColor) {
-    case 'black': case 'yellow': case 'blue': case 'green': 
-    case 'red': case 'orange': case 'gray': case 'indigo':
-    case 'purple': case 'pink': case 'teal': case 'cyan':
-    case 'white': case 'dark': case 'light':
-      return `bg-${simpleColor}`;
-    case 'gray-dark': return 'bg-gray-dark';
-    default: return 'bg-blue';
-  }
-}
 
 function getCoauthorsNames(coauthors: any[]): string {
   if (!coauthors || coauthors.length === 0) return '';
@@ -89,8 +57,6 @@ function shouldBeLarge(index: number): boolean {
       const coauthors = item.coauthors || [];
       const coauthorsNames = getCoauthorsNames(coauthors);
 
-      const rawColor = item.categories?.nodes?.[0]?.color || '';
-      const categoryBgClass = extractColorClass(rawColor);
       
       // ✅ ИСПРАВЛЕННАЯ логика
       const isLarge = shouldBeLarge(index);
@@ -120,11 +86,10 @@ function shouldBeLarge(index: number): boolean {
                 <div class="post-image-placeholder"></div>
               )}
               
-              {item.categories?.nodes?.[0]?.name && (
-                <div class={`post-category-badge ${categoryBgClass}`}>
-                  {item.categories.nodes[0].name}
-                </div>
-              )}
+              <CategoryBadge
+                name={item.categories?.nodes?.[0]?.name}
+                color={item.categories?.nodes?.[0]?.color}
+              />
               
               <div class="post-content-overlay">
                 <div class="post-meta-overlay">
diff --git a/src/components/MainPostWidget.astro b/src/components/MainPostWidget.astro
index 2c8eb0d..644fe7f 100644
--- a/src/components/MainPostWidget.astro
+++ b/src/components/MainPostWidget.astro
@@ -1,7 +1,9 @@
 ---
 // src/components/MainPostWidget.astro
 import { getLatestMainPost } from '@lib/api/main-posts';
+
 import Author from '@components/AuthorDisplay.astro';
+import CategoryBadge from '@components/CategoryBadge.astro'; // цветная плитка рубрик
 
 const mainPost = await getLatestMainPost();
 
@@ -53,12 +55,10 @@ const formattedDate = postDate.toLocaleDateString('ru-RU', {
     </a>
     
     {categoryName && (
-      <div 
-        class="category-badge"
-        style={`background-color: ${categoryColor}`}
-      >
-        {categoryName}
-      </div>
+        <CategoryBadge
+                name= {categoryName}
+                color={categoryColor}
+              />
     )}
     
     <div class="content-overlay">
diff --git a/src/components/NewsSingle.astro b/src/components/NewsSingle.astro
index 31bec31..0d92bba 100644
--- a/src/components/NewsSingle.astro
+++ b/src/components/NewsSingle.astro
@@ -15,12 +15,24 @@ const { post, pageInfo } = Astro.props;
 {post ? (
   <div class="article-wrapper">
     <article class="news-single">
+
       <div class="article_info">
-        <div class="publication__data">{post.date && <time>{new Date(post.date).toLocaleDateString('ru-RU')}</time>}</div>
-        <span class="author"><Author post={post} separator=", " /></span>
-      </div>
+  <div class="publication__data">
+    {post.date && (
+      <time datetime={new Date(post.date).toISOString()}>
+        {new Date(post.date).toLocaleDateString('ru-RU')}
+      </time>
+    )}
+  </div>
+  <span class="divider" aria-hidden="true"></span>
+  <div class="publication__author">
+    <Author post={post} separator=", " />
+  </div>
+</div>
+
+
       <h1>{post.title}</h1>
-      {post.secondaryTitle && <p class="secondary-title">{post.secondaryTitle}</p>}
+      {post.secondaryTitle && <h2 class="secondary-title">{post.secondaryTitle}</h2>}
       
       {post.featuredImage?.node?.sourceUrl && (
         <figure class="featured-image">
@@ -46,17 +58,20 @@ const { post, pageInfo } = Astro.props;
       )}
       
       {post.content && <div set:html={post.content} />}
+
+       <Subscribe />
     </article>
 
     <ShareButtons url={post.uri} title={post.title} />
 
-    <Subscribe />
+   
   </div>
 ) : (
   <div>Новость не найдена</div>
 )}
 
 <style>
+
 .article-wrapper {
   position: relative;
   max-width: 75%;
@@ -69,29 +84,42 @@ const { post, pageInfo } = Astro.props;
   margin: 0 0 0.625rem;
 }
 
-.secondary-title {
-  font-size: 1.25rem;
-  line-height: 1.4;
-  color: #666;
-  margin: 0.5rem 0 1rem;
-  font-weight: 400;
+.news-single h2{
+  font-size: 1.5rem;
+  line-height: 1.1;
+  margin: 2.0625rem 0 .375rem;
+}  
+
+.news-single :global(p a) {
+  color: #0d6efd;
 }
 
-.article_info{
+
+.article_info {
   display: flex;
-  gap: 8px;
+  align-items: center;
+  gap: .475rem; /* одинаковое расстояние с обеих сторон от черты */
+  margin-top: 1.9375rem;
+  margin-bottom: .9375rem;
+  font-size: 0.875rem;
+  color: #666;
 }
 
-.publication__data::after{ 
-    content: '';
-    position: absolute;
-    left: 0;
-    top: 50%;
-    height: 12px;
-    margin-top: -6px;
-    border-left: 1px solid grey;
+.divider {
+  display: block;
+  width: 1px;
+  height: 12px;
+  background-color: #999;
+  flex-shrink: 0;
 }
 
+.publication__author :global(a){
+  text-decoration: underline;
+}
+
+
+
+
 .featured-image {
   margin: 1.5rem 0;
   width: 100%;
diff --git a/src/lib/api/posts.ts b/src/lib/api/posts.ts
index 683c8b8..bd52fa9 100644
--- a/src/lib/api/posts.ts
+++ b/src/lib/api/posts.ts
@@ -209,15 +209,15 @@ export async function getProfileArticleById(databaseId) {
 /**
  * Получить Anews пост по databaseId
  */
-export async function getAnewsById(databaseId: number): Promise<SingleAnewsPost | null> {
+export async function getAnewById(databaseId: number): Promise<SingleAnewsPost | null> {
   const cacheKey = `anews:${databaseId}`;
   
   return await cache.wrap(
     cacheKey,
     async () => {
       const query = `
-        query GetAnewsById($id: ID!) {
-          aNews(id: $id, idType: DATABASE_ID) {
+        query GetAnewById($id: ID!) {
+          aNew(id: $id, idType: DATABASE_ID) {
             id
             databaseId
             title
@@ -270,23 +270,13 @@ export async function getAnewsById(databaseId: number): Promise<SingleAnewsPost
                 uri
               }
             }
-            seo {
-              title
-              metaDesc
-              canonical
-              opengraphTitle
-              opengraphDescription
-              opengraphImage {
-                sourceUrl
-              }
-            }
           }
         }
       `;
 
       try {
         const data = await fetchGraphQL(query, { id: databaseId });
-        return data?.aNews || null;
+        return data?.aNew || null;
       } catch (error) {
         console.error(`Error fetching Anews post with ID ${databaseId}:`, error);
         return null;
diff --git a/src/pages/news/[...slug].astro b/src/pages/news/[...slug].astro
index 3bf2495..d6cf4d5 100644
--- a/src/pages/news/[...slug].astro
+++ b/src/pages/news/[...slug].astro
@@ -3,54 +3,54 @@ import MainLayout from '@layouts/MainLayout.astro';
 import NewsSingle from '@components/NewsSingle.astro';
 
 import { detectPageType } from '@lib/detect-page-type';
-
-import { getAnewsById } from '@lib/api/posts'; //логика
-
+import { getAnewById } from '@lib/api/posts';
 
 export const prerender = false;
 
-const pathname = Astro.url.pathname; // "/news/society/chto-sluchilos-nochju-27-oktyabrya-2025-goda-1772178/"
+const pathname = Astro.url.pathname;
 const pageInfo = detectPageType(pathname);
 
-//console.log(pageInfo);
-
-// Или для полного URL
 const fullUrl = Astro.url.href;
-// Или для origin + pathname
 const fullPath = Astro.url.origin + Astro.url.pathname;
 
+// Объявляем переменную для данных поста
+let post = null;
+
 
 if (pageInfo.type === 'single' && pageInfo.contentType === 'news') {
-  
+
   if (pageInfo.postId && typeof pageInfo.postId === 'number') {
 
-    const response = await getAnewsById(pageInfo.postId);
-     console.log(response);
+    const response = await getAnewById(pageInfo.postId);
+    console.log(response);
 
-    //pageData = response?.post;
-   
+    post = response ?? null;
+    console.log(post);
   }
 
-}  
-
-
-if (import.meta.env.DEV) {
-  
-  const currentFile = import.meta.url
-  .replace('file://', '')
-  .replace(process.cwd(), '')
-  .replace(/^\//, '');
-
-  console.log('Файл:', currentFile);
 }
 
+if (import.meta.env.DEV) {
+  const currentFile = import.meta.url
+    .replace('file://', '')
+    .replace(process.cwd(), '')
+    .replace(/^\\/, '');
+  console.log('Файл:', currentFile);
+}
 ---
 
 <MainLayout>
-  <div>
-    <p><strong>pathname:</strong> {pathname}</p>
-    <p><strong>Page Type:</strong> {pageInfo.type}</p>
-    <p><strong>Content Type:</strong> {pageInfo.contentType}</p>
-    <p><strong>Full URL:</strong> {fullUrl}</p>
-  </div>
+
+  {pageInfo.type === 'single' && post ? (
+    <NewsSingle post={post} pageInfo={pageInfo} />
+  ) : (
+    <div>
+      <p><strong>pathname:</strong> {pathname}</p>
+      <p><strong>Page Type:</strong> {pageInfo.type}</p>
+      <p><strong>Content Type:</strong> {pageInfo.contentType}</p>
+      <p><strong>ID:</strong> {pageInfo.postId}</p>
+      <p><strong>Full URL:</strong> {fullUrl}</p>
+    </div>
+  )}
+
 </MainLayout>