add page articles

src/components/ContentGrid.astro

@@ -127,7 +127,7 @@ function shouldBeLarge(index: number): boolean {
                     console.log(nickname);
                     
                     return (
-                      <span key={nickname || name}>
+                      <span class="author-name" key={nickname || name}>
                         {i > 0 && ', '}
                         {nickname ? (
                           <a 

src/pages/articles/index.astro

@@ -0,0 +1,32 @@
+---
+
+import MainLayout from '@layouts/MainLayout.astro';
+import ContentGrid from '@components/ContentGrid.astro';
+
+import { getLatestPosts } from '@api/posts.js';
+
+const { posts, pageInfo } = await getLatestPosts(41); // Сразу деструктурируем
+
+
+//ISR
+export const prerender = false;
+
+---
+
+<MainLayout 
+  title=Статьи
+  description= Статьи
+>
+
+<h1>Статьи</h1>
+
+<ContentGrid 
+  items={posts}
+  pageInfo={pageInfo}
+  type="latest"
+  perLoad={11}
+  showCount={false}
+/>
+
+
+</MainLayout> 

src/pages/author/[slug]/index.astro

@@ -26,45 +26,67 @@ const posts = data.posts;
 >
 
 {author && (
-  <div class="author-card">
-    {author.avatar && (
-      <div class="avatar">
-      <img 
-        src={author.avatar} 
-        alt={author.name}
-        width="192"
-        height="192"
-        class="avatar"
-      />
-      </div>
-    )}
+    <>
+    {/* Если есть bio с аватаром - полная карточка */}
+    {author.avatar && author.bio ? (
+      <div class="author-card">
+        <div class="avatar">
+          <img 
+            src={author.avatar} 
+            alt={author.name}
+            width="264"
+            height="264"
+            class="avatar"
+          />
+        </div>
         
-    <div class="author-info">
-      {(author.firstName || author.lastName) && (
-        <h1 class="full-name">
-          {author.firstName} {author.lastName}
-        </h1>
-      )}
-      
-      {author.bio && (
-        <div class="bio">{author.bio}</div>
-      )}
-      
-      {author.social && Object.values(author.social).some(Boolean) && (
-        <div class="social-links">
-          {author.social.twitter && (
-            <a href={author.social.twitter}>Twitter</a>
+        <div class="author-info">
+          {author.name && (
+            <h1 class="full-name">
+              {author.name}
+            </h1>
           )}
-          {author.social.facebook && (
-            <a href={author.social.facebook}>Facebook</a>
-          )}
-          {author.social.instagram && (
-            <a href={author.social.instagram}>Instagram</a>
+          
+           <div class="bio" set:html={author.bio} />
+          
+          {author.social && Object.values(author.social).some(Boolean) && (
+            <div class="social-links">
+              {author.social.twitter && <a href={author.social.twitter}>Twitter</a>}
+              {author.social.facebook && <a href={author.social.facebook}>Facebook</a>}
+              {author.social.instagram && <a href={author.social.instagram}>Instagram</a>}
+            </div>
           )}
         </div>
-      )}
-    </div>
-  </div>
+      </div>
+    ) : /* Если есть только имя - просто h1 */
+    author.name && !author.bio ? (
+      <h1 class="full-name">
+        {author.name}
+      </h1>
+    ) : /* Если есть bio без аватара */
+    author.bio && !author.avatar ? (
+      <div class="bio">{author.bio}</div>
+    ) : /* Если есть аватар без bio */
+    author.avatar && !author.bio ? (
+      <div class="author-card">
+        <div class="avatar">
+          <img 
+            src={author.avatar} 
+            alt={author.name || ''}
+            width="264"
+            height="264"
+            class="avatar"
+          />
+        </div>
+        
+        {author.name && (
+          <h1 class="full-name">
+            {author.name}
+          </h1>
+        )}
+      </div>
+    ) : null
+  </>
 )}
 
 <ContentGrid 
@@ -79,75 +101,106 @@ const posts = data.posts;
 
 <style>
 
+p{
+  margin: 0 0 1.6875rem
+}
+
 .author-card {
   display: flex;
-  align-items: stretch; /* Все блоки одной высоты */
-  min-height: 350px;
   width: 100%;
+  /* Убираем min-height */
 }
 
 .author-card .avatar {
-  width: 100%;
+  width: 300px; /* Фиксированная ширина для аватара */
+  flex-shrink: 0; /* Запрещаем сжиматься */
   aspect-ratio: 1/1;
-  object-fit: cover;
-  display: block;
-  
-  height:auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   background: linear-gradient(to right, transparent 40%, #ececec 40%);
 }
 
-.author-card .avatar IMG{
-  max-width: 300px;
-  margin: 20px auto;
-
+.author-card .avatar IMG {
+  width: 264px;
+  height: 264px;
+  object-fit: cover;
+  display: block;
+  margin: 0;
 }
 
 .author-card .author-info {
-  display:flex;
+  flex: 1; /* Занимает оставшееся место */
+  display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 12px;
   background-color: #ececec;
-  padding: 0 42px;
+  padding: 30px 42px; /* Уменьшаем вертикальные отступы */
 }
 
-.author-info h1{
+.author-info h1 {
   font-size: 1.5rem;
+  margin: 0; /* Убираем отступы у заголовка */
+}
+
+.author-info .bio {
+  margin: 0; /* Убираем отступы у bio */
+  line-height: 1.5;
+}
+
+.author-info .social-links {
+  margin-top: 4px; /* Небольшой отступ сверху */
+}
+
+/* Для случаев когда нет bio */
+.author-card:has(.author-info:only-child h1) .author-info {
+  padding: 20px 42px; /* Еще меньше отступы если только заголовок */
 }
 
 
 @media (max-width: 769px) { 
   .author-card {
     flex-direction: column;
-    min-height: auto; /* Убираем минимальную высоту */
-    background-color: transparent; /* Убираем фон, перенесем на блоки */
+    min-height: auto;
+    background-color: transparent;
   }
   
   .author-card .avatar {
     width: 100%;
-    aspect-ratio: auto; /* Убираем фиксированное соотношение */
-    height: auto;
-    background: #ececec; /* Простой фон вместо градиента */
-    padding: 30px 0; /* Отступы сверху/снизу */
+    aspect-ratio: 1/1;
+    background: #ececec;
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 0; /* Убираем все отступы */
   }
   
-.author-card .avatar IMG {
-  width: min(300px, 80%); /* Не больше 192px, но может быть меньше */
-  aspect-ratio: 1/1; /* Соотношение сторон 1:1 (квадрат) */
-  object-fit: cover;
-  margin: 0;
-}
+  .author-card .avatar IMG {
+    width: 80%; /* Растягиваем на всю ширину контейнера */
+    height: 80%; /* Растягиваем на всю высоту контейнера */
+    aspect-ratio: 1/1;
+    object-fit: cover;
+    margin: 0;
+    display: block;
+  }
   
   .author-card .author-info {
-    flex: none; /* Убираем flex: 1 */
+    flex: none;
     width: 100%;
-    padding: 30px 20px; /* Уменьшаем боковые отступы */
+    padding: 20px 20px;
     background-color: #ececec;
     gap: 12px;
   }
+
+  .full-name{
+    text-align: center;
+  }
+  
+  /* Дополнительно уменьшаем отступы если мало контента */
+  .author-card .author-info:has(h1:only-child) {
+    padding: 15px 20px;
+  }
 }
 
 </style>