add real authors

src/components/ContentGrid.astro

@@ -6,19 +6,17 @@ export interface Props {
 
 const {
   items = [],
-  showCount =  false,
+  showCount = false,
 } = Astro.props;
 
 // Функция для извлечения класса цвета из строки
 function extractColorClass(colorString: string): string {
   if (!colorString) return 'bg-blue';
   
-  // Если строка содержит "фон меню:" - извлекаем часть после двоеточия
   if (colorString.includes('фон меню:')) {
     const parts = colorString.split(':');
     const color = parts[1]?.trim();
     
-    // Проверяем существование CSS класса
     const validColors = [
       'black', 'yellow', 'blue', 'green', 'red', 'orange', 'gray',
       'indigo', 'purple', 'pink', 'teal', 'cyan', 'white',
@@ -30,12 +28,10 @@ function extractColorClass(colorString: string): string {
     }
   }
   
-  // Если строка уже содержит "bg-"
   if (colorString.startsWith('bg-')) {
     return colorString;
   }
   
-  // Если это просто название цвета без префикса
   const simpleColor = colorString.toLowerCase();
   switch(simpleColor) {
     case 'black': case 'yellow': case 'blue': case 'green': 
@@ -47,8 +43,17 @@ function extractColorClass(colorString: string): string {
     default: return 'bg-blue';
   }
 }
----
 
+// Функция для получения списка имен соавторов
+function getCoauthorsNames(coauthors: any[]): string {
+  if (!coauthors || coauthors.length === 0) return '';
+  
+  return coauthors
+    .map((coauthor: any) => coauthor?.node?.name || coauthor?.name)
+    .filter(Boolean)
+    .join(' ');
+}
+---
 
 <section class="posts-section" id="posts-section">
   <h2>
@@ -61,12 +66,12 @@ function extractColorClass(colorString: string): string {
     {items.map((item, index) => {
       const postUrl = item.uri || `/blog/${item.databaseId}`;
       const postDate = new Date(item.date);
+      const coauthors = item.coauthors || [];
+      const coauthorsNames = getCoauthorsNames(coauthors);
 
-      // Получаем цвет категории и преобразуем в CSS класс
       const rawColor = item.categories?.nodes?.[0]?.color || '';
       const categoryBgClass = extractColorClass(rawColor);
       
-      // Логика для больших плиток на десктопе
       let isLarge = false;
       let largePosition = '';
       
@@ -93,7 +98,7 @@ function extractColorClass(colorString: string): string {
           <a href={postUrl} class="post-card-link">
             <div class="post-image-container">
               {item.featuredImage?.node?.sourceUrl ? (
-                <img loading="lazy"
+                <img
                   src={item.featuredImage.node.sourceUrl} 
                   alt={item.featuredImage.node.altText || item.title}
                   width="400"
@@ -106,14 +111,12 @@ function extractColorClass(colorString: string): string {
                 <div class="post-image-placeholder"></div>
               )}
               
-              {/* Рубрика в верхнем правом углу с цветом */}
               {item.categories?.nodes?.[0]?.name && (
                 <div class={`post-category-badge ${categoryBgClass}`}>
                   {item.categories.nodes[0].name}
                 </div>
               )}
               
-              {/* Оверлей с контентом */}
               <div class="post-content-overlay">
                 <div class="post-meta-overlay">
                   <time 
@@ -133,16 +136,15 @@ function extractColorClass(colorString: string): string {
                   {item.title}
                 </h3>
 
-                {item.author?.node?.name && (
+                {coauthorsNames && (
                   <div class="author-name" itemprop="author">
-                    {item.author.node.name}
+                    {coauthorsNames}
                   </div>
                 )}
               </div>
             </div>
           </a>
           
-          {/* Скринридеру и SEO */}
           <div class="sr-only">
             <h3 itemprop="headline">
               <a href={postUrl} itemprop="url">{item.title}</a>
@@ -158,4 +160,4 @@ function extractColorClass(colorString: string): string {
       );
     })}
   </div>
-</section>
+</section>