add news post

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>
+)}

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">

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">

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%;